First Commit

app/dashboard/page.tsx

@@ -104,7 +104,7 @@ export default function TotalMahasiswaPage() {
           </div>
 
           {/* Demographics Section */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
             <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
           </div>
         </div>

app/page.tsx

@@ -203,7 +203,7 @@ export default function DashboardPage() {
                 <div className="col-span-1">
                   <JenisPendaftaranChart />
                 </div>
-                <div className="col-span-1">
+                <div className="col-span-2">
                   <AsalDaerahChart />
                 </div>
               </div>

components/charts/AsalDaerahChart.tsx

@@ -253,6 +253,15 @@ export default function AsalDaerahChart() {
     );
   }
 
+  // Calculate dynamic height based on number of kabupaten
+  const calculateHeight = () => {
+    const minHeight = 200;
+    const barHeight = 25; // Height per bar in pixels
+    const padding = 100; // Extra space for title, legend, etc.
+    const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
+    return `${dynamicHeight}px`;
+  };
+
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
@@ -261,7 +270,10 @@ export default function AsalDaerahChart() {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[400px] sm:h-[400px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div 
+          className="w-full max-w-5xl mx-auto"
+          style={{ height: calculateHeight() }}
+        >
           <Chart
             options={options}
             series={series}

components/charts/AsalDaerahPerAngkatanChart.tsx

@@ -299,6 +299,15 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
     );
   }
 
+  // Calculate dynamic height based on number of kabupaten
+  const calculateHeight = () => {
+    const minHeight = 200;
+    const barHeight = 25; // Height per bar in pixels
+    const padding = 100; // Extra space for title, legend, etc.
+    const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
+    return `${dynamicHeight}px`;
+  };
+
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
@@ -307,7 +316,10 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div 
+          className="w-full max-w-5xl mx-auto"
+          style={{ height: calculateHeight() }}
+        >
           <Chart
             options={options}
             series={series}

package-lock.json

@@ -30,6 +30,7 @@
         "cmdk": "^1.1.1",
         "jose": "^6.0.11",
         "jsonwebtoken": "^9.0.2",
+        "leaflet": "^1.9.4",
         "lucide-react": "^0.488.0",
         "next": "15.3.0",
         "next-auth": "^4.24.11",
@@ -38,6 +39,7 @@
         "react-apexcharts": "^1.7.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.60.0",
+        "react-leaflet": "^5.0.0",
         "recharts": "^2.15.2",
         "tailwind-merge": "^3.2.0",
         "tw-animate-css": "^1.2.5",
@@ -2500,6 +2502,17 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -3572,6 +3585,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lightningcss": {
       "version": "1.29.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
@@ -4258,6 +4277,20 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",

package.json

@@ -32,6 +32,7 @@
     "cmdk": "^1.1.1",
     "jose": "^6.0.11",
     "jsonwebtoken": "^9.0.2",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.488.0",
     "next": "15.3.0",
     "next-auth": "^4.24.11",
@@ -40,6 +41,7 @@
     "react-apexcharts": "^1.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
+    "react-leaflet": "^5.0.0",
     "recharts": "^2.15.2",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5",