From bf248459f8818af23ddf3989cf9eb13b61037850 Mon Sep 17 00:00:00 2001
From: Randa Firman Putra <randafrmn@gmail.com>
Date: Sat, 6 Sep 2025 20:55:57 +0700
Subject: [PATCH] First Commit

---
 app/dashboard/page.tsx                        |  2 +-
 app/page.tsx                                  |  2 +-
 components/charts/AsalDaerahChart.tsx         | 14 +++++++-
 .../charts/AsalDaerahPerAngkatanChart.tsx     | 14 +++++++-
 package-lock.json                             | 33 +++++++++++++++++++
 package.json                                  |  2 ++
 6 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index d61ad6c..7f26a98 100644
--- a/app/dashboard/page.tsx
+++ b/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>
diff --git a/app/page.tsx b/app/page.tsx
index 971842b..fce41e8 100644
--- a/app/page.tsx
+++ b/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>
diff --git a/components/charts/AsalDaerahChart.tsx b/components/charts/AsalDaerahChart.tsx
index 464d280..613e941 100644
--- a/components/charts/AsalDaerahChart.tsx
+++ b/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}
diff --git a/components/charts/AsalDaerahPerAngkatanChart.tsx b/components/charts/AsalDaerahPerAngkatanChart.tsx
index 1b8fcb4..6d23211 100644
--- a/components/charts/AsalDaerahPerAngkatanChart.tsx
+++ b/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}
diff --git a/package-lock.json b/package-lock.json
index b479e23..e742fab 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 5fb31f6..571b4be 100644
--- a/package.json
+++ b/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",