Add Dashboard

components/charts/JenisPendaftaranChart.tsx

@@ -54,7 +54,7 @@ export default function JenisPendaftaranChart() {
     xaxis: {
       categories: [],
       title: {
-        text: 'Jumlah Mahasiswa',
+        text: 'Tahun Angkatan',
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
@@ -70,7 +70,7 @@ export default function JenisPendaftaranChart() {
     },
     yaxis: {
       title: {
-        text: 'Tahun Angkatan',
+        text: 'Jumlah Mahasiswa',
         style: {
           fontSize: '14px',
           fontWeight: 'bold',

components/charts/StatistikMahasiswaChart.tsx

@@ -68,8 +68,8 @@ export default function StatistikMahasiswaChart() {
       },
     },
     stroke: {
-      show: false,
-      width: [0, 0, 0],
+      show: true,
+      width: 2,
       colors: ['transparent', 'transparent', 'transparent'],
       curve: 'straight' as const
     },
@@ -304,8 +304,15 @@ export default function StatistikMahasiswaChart() {
   }
 
   return (
-        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
-          <Chart
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Jumlah Mahasiswa
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+            <Chart
             options={chartOptions}
             series={chartSeries}
             type="bar"
@@ -313,5 +320,7 @@ export default function StatistikMahasiswaChart() {
             width="100%"
           />
         </div>
-  );
+      </CardContent>
+      </Card>
+);
 } 

components/charts/StatusMahasiswaChart.tsx

@@ -28,13 +28,22 @@ export default function StatusMahasiswaChart() {
       stacked: false,
       toolbar: {
         show: true,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        },
       },
       background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
         horizontal: false,
-        columnWidth: '55%',
+        columnWidth: '65%',
       },
     },
     dataLabels: {

components/ui/Navbar.tsx

@@ -108,12 +108,12 @@ const Navbar = () => {
             Beranda
           </Link>
           
-          {/* Visualisasi Dropdown - Only when logged in */}
+          {/* Dashboard Dropdown - Only when logged in */}
           {user && (
             <>
             <Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
               <BarChart className="h-4 w-4" />
-              Visualisasi Data
+              Dashboard
             </Link>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>