Add Visualisasi Masa Studi

app/api/mahasiswa/masa-studi-status/route.ts

@@ -0,0 +1,95 @@
+import { NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+interface MasaStudiData {
+  tahun_angkatan: number;
+  status_kuliah: string;
+  rata_rata_masa_studi_tahun: number;
+}
+
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const tahun_angkatan = searchParams.get('tahun_angkatan');
+    const status_kuliah = searchParams.get('status_kuliah');
+
+    let query = supabase
+      .from('mahasiswa')
+      .select('tahun_angkatan, status_kuliah, semester')
+      .not('semester', 'is', null);
+
+    if (tahun_angkatan && tahun_angkatan !== 'all') {
+      query = query.eq('tahun_angkatan', tahun_angkatan);
+    }
+    if (status_kuliah && status_kuliah !== 'all') {
+      query = query.eq('status_kuliah', status_kuliah);
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      console.error('Error fetching masa studi data:', error);
+      return NextResponse.json(
+        { error: 'Failed to fetch masa studi data' },
+        {
+          status: 500,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        }
+      );
+    }
+
+    // Group by tahun_angkatan and status_kuliah, calculate average semester/2
+    const groupedData = data.reduce((acc, item) => {
+      const tahun = item.tahun_angkatan;
+      const status = item.status_kuliah;
+      const key = `${tahun}|${status}`;
+      if (!acc[key]) {
+        acc[key] = { sum: 0, count: 0, tahun_angkatan: tahun, status_kuliah: status };
+      }
+      acc[key].sum += item.semester || 0;
+      acc[key].count += 1;
+      return acc;
+    }, {} as Record<string, { sum: number; count: number; tahun_angkatan: number; status_kuliah: string }>);
+
+    // Convert to final format
+    const results: MasaStudiData[] = Object.values(groupedData).map((data) => ({
+      tahun_angkatan: data.tahun_angkatan,
+      status_kuliah: data.status_kuliah,
+      rata_rata_masa_studi_tahun: Math.round(((data.sum / data.count) / 2) * 10) / 10,
+    }));
+
+    // Sort by tahun_angkatan, status_kuliah
+    results.sort((a, b) => {
+      if (a.tahun_angkatan !== b.tahun_angkatan) {
+        return a.tahun_angkatan - b.tahun_angkatan;
+      }
+      return a.status_kuliah.localeCompare(b.status_kuliah);
+    });
+
+    return NextResponse.json(results, {
+      headers: {
+        'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching masa studi data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch masa studi data' },
+      {
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  }
+} 

app/page.tsx

@@ -192,7 +192,7 @@ export default function DashboardPage() {
                 <div className="flex justify-between mt-2 text-xs text-muted-foreground">
                   <span className="dark:text-white">Pemerintah: <span className="text-green-500">{mahasiswaData.total_mahasiswa_beasiswa_pemerintah}</span></span>
                   <span className="dark:text-white">Non-Pemerintah: <span className="text-amber-400">{mahasiswaData.total_mahasiswa_beasiswa_non_pemerintah}</span></span>
-                </div>
+                  </div>
               </CardContent>
             </Card>
               </div>
@@ -210,6 +210,6 @@ export default function DashboardPage() {
           </>
         )
       }
-    </div>  
+      </div>
   );
 }

app/visualisasi/status/page.tsx

@@ -9,6 +9,7 @@ import JenisPendaftaranStatusChart from "@/components/charts/JenisPendaftaranSta
 import JenisPendaftaranStatusPieChart from "@/components/charts/JenisPendaftaranStatusPieChart";
 import AsalDaerahStatusChart from '@/components/charts/AsalDaerahStatusChart';
 import IpkStatusChart from '@/components/charts/IpkStatusChart';
+import MasaStudiChart from '@/components/charts/MasaStudiChart';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function StatusMahasiswaPage() {
@@ -51,6 +52,10 @@ export default function StatusMahasiswaPage() {
               selectedYear={selectedYear}
               selectedStatus={selectedStatus}
             />
+            <MasaStudiChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+            />
             <IpkStatusChart
             selectedYear={selectedYear}
             selectedStatus={selectedStatus}