First commit

2025-06-18 22:03:32 +07:00
parent 852121be46
commit e028039ee2
123 changed files with 17506 additions and 144 deletions
--- a/app/api/auth/check/route.ts
+++ b/app/api/auth/check/route.ts
@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { jwtVerify } from 'jose';
+import pool from '@/lib/db';
+
+export async function GET() {
+  let connection;
+  try {
+    const token = (await (await cookies()).get('token'))?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+
+    // Verify JWT token
+    const { payload } = await jwtVerify(
+      token,
+      new TextEncoder().encode(process.env.JWT_SECRET || 'your-secret-key')
+    );
+
+    // Get connection from pool
+    connection = await pool.getConnection();
+
+    // Get user data
+    const [users]: any = await connection.execute(
+      'SELECT id_user, nim, username, role FROM user WHERE id_user = ?',
+      [payload.id]
+    );
+
+    if (users.length === 0) {
+      connection.release();
+      return NextResponse.json(
+        { error: 'User not found' },
+        { status: 404 }
+      );
+    }
+
+    const user = users[0];
+    connection.release();
+
+    return NextResponse.json({
+      user: {
+        id: user.id_user,
+        nim: user.nim,
+        username: user.username,
+        role: user.role
+      }
+    });
+  } catch (error) {
+    if (connection) {
+      connection.release();
+    }
+
+    console.error('Auth check error:', error);
+    return NextResponse.json(
+      { error: 'Unauthorized' },
+      { status: 401 }
+    );
+  }
+} 
--- a/app/api/auth/login/route.ts
+++ b/app/api/auth/login/route.ts
@@ -0,0 +1,174 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import bcrypt from 'bcryptjs';
+import { SignJWT } from 'jose';
+import { RowDataPacket } from 'mysql2';
+
+interface User extends RowDataPacket {
+  id_user: number;
+  nim: string;
+  username: string;
+  password: string;
+  role: string;
+}
+
+export async function POST(request: Request) {
+  let connection;
+  try {
+    console.log('Login request received');
+    
+    // Test database connection first
+    try {
+      connection = await pool.getConnection();
+      console.log('Database connection successful');
+    } catch (dbError) {
+      console.error('Database connection error:', dbError);
+      return NextResponse.json(
+        { error: 'Tidak dapat terhubung ke database' },
+        { status: 500 }
+      );
+    }
+
+    const body = await request.json();
+    console.log('Request body:', body);
+    
+    const { nim, password } = body;
+    console.log('Extracted credentials:', { nim, password: '***' });
+
+    // Validate input
+    if (!nim || !password) {
+      console.log('Missing credentials:', { nim: !!nim, password: !!password });
+      return NextResponse.json(
+        { error: 'NIM dan password harus diisi' },
+        { status: 400 }
+      );
+    }
+
+    // Get user by NIM
+    console.log('Querying user with NIM:', nim);
+    let users: User[];
+    try {
+      const [rows] = await connection.execute<User[]>(
+        'SELECT * FROM user WHERE nim = ?',
+        [nim]
+      );
+      users = rows;
+      console.log('Query result:', users.length > 0 ? 'User found' : 'User not found');
+    } catch (queryError) {
+      console.error('Database query error:', queryError);
+      return NextResponse.json(
+        { error: 'Terjadi kesalahan saat memeriksa data pengguna' },
+        { status: 500 }
+      );
+    }
+
+    if (users.length === 0) {
+      console.log('No user found with NIM:', nim);
+      connection.release();
+      return NextResponse.json(
+        { error: 'NIM atau password salah' },
+        { status: 401 }
+      );
+    }
+
+    const user = users[0];
+    console.log('User found:', { 
+      id: user.id_user, 
+      nim: user.nim, 
+      username: user.username, 
+      role: user.role 
+    });
+
+    // Verify password
+    console.log('Verifying password...');
+    let isPasswordValid;
+    try {
+      isPasswordValid = await bcrypt.compare(password, user.password);
+      console.log('Password verification result:', isPasswordValid ? 'Valid' : 'Invalid');
+    } catch (bcryptError) {
+      console.error('Password verification error:', bcryptError);
+      return NextResponse.json(
+        { error: 'Terjadi kesalahan saat memverifikasi password' },
+        { status: 500 }
+      );
+    }
+
+    if (!isPasswordValid) {
+      console.log('Invalid password for user:', nim);
+      connection.release();
+      return NextResponse.json(
+        { error: 'NIM atau password salah' },
+        { status: 401 }
+      );
+    }
+
+    // Create JWT token
+    console.log('Creating JWT token...');
+    let token;
+    try {
+      token = await new SignJWT({
+        id: user.id_user,
+        nim: user.nim,
+        role: user.role
+      })
+        .setProtectedHeader({ alg: 'HS256' })
+        .setExpirationTime('24h')
+        .sign(new TextEncoder().encode(process.env.JWT_SECRET || 'your-secret-key'));
+      console.log('JWT token created');
+    } catch (jwtError) {
+      console.error('JWT creation error:', jwtError);
+      return NextResponse.json(
+        { error: 'Terjadi kesalahan saat membuat token' },
+        { status: 500 }
+      );
+    }
+
+    // Set cookie
+    console.log('Setting response...');
+    const response = NextResponse.json({
+      user: {
+        id: user.id_user,
+        nim: user.nim,
+        username: user.username,
+        role: user.role
+      }
+    });
+
+    response.cookies.set('token', token, {
+      httpOnly: true,
+      secure: false,
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24 // 24 hours
+    });
+    console.log('Cookie set');
+
+    connection.release();
+    console.log('Login process completed successfully');
+    return response;
+  } catch (error) {
+    if (connection) {
+      connection.release();
+    }
+    
+    console.error('Login error details:', error);
+    if (error instanceof Error) {
+      console.error('Error message:', error.message);
+      console.error('Error stack:', error.stack);
+    }
+    return NextResponse.json(
+      { error: 'Terjadi kesalahan saat login' },
+      { status: 500 }
+    );
+  }
+}
+
+// Handle OPTIONS request for CORS
+export async function OPTIONS() {
+  return NextResponse.json({}, {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    }
+  });
+} 
--- a/app/api/auth/logout/route.ts
+++ b/app/api/auth/logout/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+export async function POST() {
+  try {
+    const response = NextResponse.json(
+      { message: 'Logout berhasil' },
+      { status: 200 }
+    );
+
+    // Clear the token cookie with additional security options
+    response.cookies.set('token', '', {
+      expires: new Date(0),
+      path: '/',
+      httpOnly: true,
+      secure: false,
+      sameSite: 'lax'
+    });
+
+    return response;
+  } catch (error) {
+    console.error('Logout error:', error);
+    return NextResponse.json(
+      { error: 'Terjadi kesalahan saat logout' },
+      { status: 500 }
+    );
+  }
+}
--- a/app/api/auth/register/route.ts
+++ b/app/api/auth/register/route.ts
@@ -0,0 +1,83 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import bcrypt from 'bcryptjs';
+
+export async function POST(request: Request) {
+  let connection;
+  try {
+    const { username, nim, password } = await request.json();
+
+    // Validate input
+    if (!username || !nim || !password) {
+      return NextResponse.json(
+        { error: 'Semua field harus diisi' },
+        { status: 400 }
+      );
+    }
+
+    // Validate NIM format (11 characters)
+    if (nim.length !== 11) {
+      return NextResponse.json(
+        { error: 'NIM harus 11 karakter' },
+        { status: 400 }
+      );
+    }
+
+    // Get connection from pool
+    connection = await pool.getConnection();
+
+    // Check if NIM exists in mahasiswa table
+    const [mahasiswa]: any = await connection.execute(
+      'SELECT * FROM mahasiswa WHERE nim = ?',
+      [nim]
+    );
+
+    if (mahasiswa.length === 0) {
+      connection.release();
+      return NextResponse.json(
+        { error: 'NIM tidak terdaftar sebagai mahasiswa' },
+        { status: 400 }
+      );
+    }
+
+    // Check if NIM already exists in user table
+    const [existingUsers]: any = await connection.execute(
+      'SELECT * FROM user WHERE nim = ?',
+      [nim]
+    );
+
+    if (existingUsers.length > 0) {
+      connection.release();
+      return NextResponse.json(
+        { error: 'NIM sudah terdaftar sebagai pengguna' },
+        { status: 400 }
+      );
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Insert new user
+    await connection.execute(
+      'INSERT INTO user (nim, username, password, role, created_at, updated_at) VALUES (?, ?, ?, ?, NOW(), NOW())',
+      [nim, username, hashedPassword, 'mahasiswa']
+    );
+
+    connection.release();
+
+    return NextResponse.json(
+      { message: 'Registrasi berhasil' },
+      { status: 201 }
+    );
+  } catch (error) {
+    if (connection) {
+      connection.release();
+    }
+    
+    console.error('Registration error:', error);
+    return NextResponse.json(
+      { error: 'Terjadi kesalahan saat registrasi' },
+      { status: 500 }
+    );
+  }
+}
--- a/app/api/mahasiswa/asal-daerah-angkatan/route.ts
+++ b/app/api/mahasiswa/asal-daerah-angkatan/route.ts
@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface AsalDaerah extends RowDataPacket {
+  kabupaten: string;
+  jumlah: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  
+  if (!tahunAngkatan) {
+    return NextResponse.json(
+      { error: 'Tahun angkatan diperlukan' },
+      { status: 400 }
+    );
+  }
+
+  const connection = await pool.getConnection();
+  
+  try {
+    const query = `
+      SELECT kabupaten, COUNT(*) AS jumlah
+      FROM mahasiswa
+      WHERE tahun_angkatan = ?
+      GROUP BY kabupaten
+      ORDER BY jumlah DESC, kabupaten ASC
+    `;
+
+    const [results] = await connection.query<AsalDaerah[]>(query, [tahunAngkatan]);
+
+    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 asal daerah per angkatan:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch asal daerah data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/asal-daerah-beasiswa/route.ts
+++ b/app/api/mahasiswa/asal-daerah-beasiswa/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+    const jenisBeasiswa = searchParams.get('jenisBeasiswa');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.kabupaten,
+        COUNT(m.nim) AS jumlah_mahasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        beasiswa_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_beasiswa = ?
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+    }
+
+    query += `
+      GROUP BY 
+        m.kabupaten, m.tahun_angkatan
+      ORDER BY 
+        m.tahun_angkatan ASC, m.kabupaten
+    `;
+
+    const params = [jenisBeasiswa];
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      params.push(tahunAngkatan);
+    }
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/asal-daerah-lulus/route.ts
+++ b/app/api/mahasiswa/asal-daerah-lulus/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.kabupaten,
+        COUNT(m.nim) AS jumlah_lulus_tepat_waktu
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = 'Lulus'
+        AND s.semester <= 8
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = '${tahunAngkatan}'`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.kabupaten
+      ORDER BY 
+        m.tahun_angkatan DESC, jumlah_lulus_tepat_waktu DESC
+    `;
+
+    const [rows] = await pool.query(query);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/asal-daerah-prestasi/route.ts
+++ b/app/api/mahasiswa/asal-daerah-prestasi/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+    const jenisPrestasi = searchParams.get('jenisPrestasi');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.kabupaten,
+        COUNT(m.nim) AS asal_daerah_mahasiswa_prestasi
+      FROM 
+        mahasiswa m
+      JOIN 
+        prestasi_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_prestasi = ?
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.kabupaten
+      ORDER BY 
+        m.tahun_angkatan DESC, m.kabupaten
+    `;
+
+    const params = [jenisPrestasi];
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      params.push(tahunAngkatan);
+    }
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/asal-daerah-status/route.ts
+++ b/app/api/mahasiswa/asal-daerah-status/route.ts
@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface AsalDaerahStatus extends RowDataPacket {
+  kabupaten: string;
+  tahun_angkatan?: number;
+  status_kuliah: string;
+  total_mahasiswa: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  const statusKuliah = searchParams.get('status_kuliah');
+  
+  const connection = await pool.getConnection();
+  
+  try {
+    let query = `
+      SELECT 
+        m.kabupaten,
+        ${tahunAngkatan && tahunAngkatan !== 'all' ? 'm.tahun_angkatan,' : ''}
+        s.status_kuliah,
+        COUNT(m.nim) AS total_mahasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = ?
+    `;
+
+    const params: any[] = [statusKuliah];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY 
+        m.kabupaten${tahunAngkatan && tahunAngkatan !== 'all' ? ', m.tahun_angkatan' : ''}, s.status_kuliah
+      ORDER BY 
+        ${tahunAngkatan && tahunAngkatan !== 'all' ? 'm.tahun_angkatan ASC,' : ''} m.kabupaten, s.status_kuliah
+    `;
+
+    const [results] = await connection.query<AsalDaerahStatus[]>(query, params);
+
+    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 asal daerah status:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch asal daerah status data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/asal-daerah/route.ts
+++ b/app/api/mahasiswa/asal-daerah/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface AsalDaerah extends RowDataPacket {
+  kabupaten: string;
+  jumlah: number;
+}
+
+export async function GET() {
+  const connection = await pool.getConnection();
+  
+  try {
+    const [results] = await connection.query<AsalDaerah[]>(`
+      SELECT kabupaten, COUNT(*) AS jumlah
+      FROM mahasiswa
+      GROUP BY kabupaten
+      ORDER BY kabupaten ASC
+    `);
+
+    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 asal daerah:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch asal daerah data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/gender-per-angkatan/route.ts
+++ b/app/api/mahasiswa/gender-per-angkatan/route.ts
@@ -0,0 +1,49 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahun = searchParams.get('tahun');
+
+  if (!tahun) {
+    return NextResponse.json(
+      { error: 'Tahun angkatan is required' },
+      { status: 400 }
+    );
+  }
+
+  const connection = await pool.getConnection();
+  
+  try {
+    const [results] = await connection.query(`
+      SELECT tahun_angkatan, jk, COUNT(*) AS jumlah
+      FROM mahasiswa
+      WHERE tahun_angkatan = ?
+      GROUP BY jk
+    `, [tahun]);
+
+    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 gender per angkatan:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch gender per angkatan data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/ipk-beasiswa/route.ts
+++ b/app/api/mahasiswa/ipk-beasiswa/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const jenisBeasiswa = searchParams.get('jenisBeasiswa');
+
+    const query = `
+      SELECT 
+        m.tahun_angkatan,
+        COUNT(m.nim) AS total_mahasiswa_beasiswa,
+        ROUND(AVG(m.ipk), 2) AS rata_rata_ipk
+      FROM 
+        mahasiswa m
+      JOIN 
+        beasiswa_mahasiswa s ON m.nim = s.nim
+      WHERE
+        s.jenis_beasiswa = ?
+      GROUP BY 
+        m.tahun_angkatan
+      ORDER BY 
+        m.tahun_angkatan ASC
+    `;
+
+    const [rows] = await pool.query(query, [jenisBeasiswa]);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/ipk-jenis-kelamin/route.ts
+++ b/app/api/mahasiswa/ipk-jenis-kelamin/route.ts
@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  
+  if (!tahunAngkatan) {
+    return NextResponse.json(
+      { error: 'Tahun angkatan diperlukan' },
+      { status: 400 }
+    );
+  }
+
+  const connection = await pool.getConnection();
+  
+  try {
+    const query = `
+      SELECT 
+        jk,
+        ROUND(AVG(ipk), 2) as rata_rata_ipk
+      FROM mahasiswa
+      WHERE tahun_angkatan = ?
+      GROUP BY jk
+      ORDER BY jk ASC
+    `;
+
+    const [results] = await connection.query<RowDataPacket[]>(query, [tahunAngkatan]);
+
+    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 IPK data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch IPK data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/ipk-lulus-tepat/route.ts
+++ b/app/api/mahasiswa/ipk-lulus-tepat/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        ROUND(AVG(m.ipk), 2) AS rata_rata_ipk
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = 'Lulus'
+        AND s.semester <= 8
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = '${tahunAngkatan}'`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan
+      ORDER BY 
+        m.tahun_angkatan ASC
+    `;
+
+    const [rows] = await pool.query(query);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/ipk-prestasi/route.ts
+++ b/app/api/mahasiswa/ipk-prestasi/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const jenisPrestasi = searchParams.get('jenisPrestasi');
+
+    const query = `
+      SELECT 
+        m.tahun_angkatan,
+        COUNT(m.nim) AS total_mahasiswa_prestasi,
+        ROUND(AVG(m.ipk), 2) AS rata_rata_ipk
+      FROM 
+        mahasiswa m
+      JOIN 
+        prestasi_mahasiswa s ON m.nim = s.nim
+      WHERE
+        s.jenis_prestasi = ?
+      GROUP BY 
+        m.tahun_angkatan
+      ORDER BY 
+        m.tahun_angkatan ASC
+    `;
+
+    const [rows] = await pool.query(query, [jenisPrestasi]);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/ipk-status/route.ts
+++ b/app/api/mahasiswa/ipk-status/route.ts
@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+interface IpkStatus {
+  tahun_angkatan: number;
+  status_kuliah: string;
+  total_mahasiswa: number;
+  rata_rata_ipk: number;
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+    const statusKuliah = searchParams.get('status_kuliah');
+
+    if (!statusKuliah) {
+      console.error('Missing required parameter: status_kuliah');
+      return NextResponse.json(
+        { error: 'Missing required parameter: status_kuliah' },
+        { status: 400 }
+      );
+    }
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        s.status_kuliah,
+        COUNT(m.nim) AS total_mahasiswa,
+        ROUND(AVG(m.ipk), 2) AS rata_rata_ipk
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = ?
+    `;
+
+    const params: any[] = [statusKuliah];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ' AND m.tahun_angkatan = ?';
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, s.status_kuliah
+      ORDER BY 
+        m.tahun_angkatan DESC, s.status_kuliah
+    `;
+
+    const [rows] = await pool.query(query, params);
+
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error in ipk-status route:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/ipk/route.ts
+++ b/app/api/mahasiswa/ipk/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface IPKData extends RowDataPacket {
+  tahun_angkatan: number;
+  rata_rata_ipk: number;
+}
+
+export async function GET() {
+  const connection = await pool.getConnection();
+  
+  try {
+    const [results] = await connection.query<IPKData[]>(`
+      SELECT tahun_angkatan, ROUND(AVG(ipk), 2) AS rata_rata_ipk
+      FROM mahasiswa
+      GROUP BY tahun_angkatan
+    `);
+
+    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 IPK data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch IPK data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/jenis-beasiswa/route.ts
+++ b/app/api/mahasiswa/jenis-beasiswa/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET() {
+  try {
+    const [rows] = await pool.query(`
+      SELECT DISTINCT jenis_beasiswa 
+      FROM beasiswa_mahasiswa 
+      ORDER BY jenis_beasiswa ASC
+    `);
+
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/jenis-pendaftaran-beasiswa/route.ts
+++ b/app/api/mahasiswa/jenis-pendaftaran-beasiswa/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+    const jenisBeasiswa = searchParams.get('jenisBeasiswa');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jenis_pendaftaran,
+        COUNT(m.nim) AS jumlah_mahasiswa_beasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        beasiswa_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_beasiswa = ?
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.jenis_pendaftaran
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jenis_pendaftaran
+    `;
+
+    const params = [jenisBeasiswa];
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      params.push(tahunAngkatan);
+    }
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/jenis-pendaftaran-lulus/route.ts
+++ b/app/api/mahasiswa/jenis-pendaftaran-lulus/route.ts
@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+interface JenisPendaftaranLulus {
+  tahun_angkatan: number;
+  jenis_pendaftaran: string;
+  jumlah_lulus_tepat_waktu: number;
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jenis_pendaftaran,
+        COUNT(m.nim) AS jumlah_lulus_tepat_waktu
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = 'Lulus'
+        AND s.semester <= 8
+    `;
+
+    const queryParams: any[] = [];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+      queryParams.push(parseInt(tahunAngkatan));
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.jenis_pendaftaran
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jenis_pendaftaran
+    `;
+
+    const [rows] = await pool.query(query, queryParams);
+
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Detailed error in GET /api/mahasiswa/jenis-pendaftaran-lulus:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error', details: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/jenis-pendaftaran-prestasi/route.ts
+++ b/app/api/mahasiswa/jenis-pendaftaran-prestasi/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const jenisPrestasi = searchParams.get('jenisPrestasi');
+
+    const query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jenis_pendaftaran,
+        COUNT(m.nim) AS jenis_pendaftaran_mahasiswa_prestasi
+      FROM 
+        mahasiswa m
+      JOIN 
+        prestasi_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_prestasi = ?
+      GROUP BY 
+        m.tahun_angkatan, m.jenis_pendaftaran
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jenis_pendaftaran
+    `;
+
+    const [rows] = await pool.query(query, [jenisPrestasi]);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/jenis-pendaftaran-status/route.ts
+++ b/app/api/mahasiswa/jenis-pendaftaran-status/route.ts
@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface JenisPendaftaranStatus extends RowDataPacket {
+  jenis_pendaftaran: string;
+  tahun_angkatan: number;
+  status_kuliah: string;
+  total_mahasiswa: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  const statusKuliah = searchParams.get('status_kuliah');
+  
+  const connection = await pool.getConnection();
+  
+  try {
+    let query = `
+      SELECT 
+        m.jenis_pendaftaran,
+        m.tahun_angkatan,
+        s.status_kuliah,
+        COUNT(m.nim) AS total_mahasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = ?
+    `;
+
+    const params: any[] = [statusKuliah];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY 
+        m.jenis_pendaftaran, m.tahun_angkatan, s.status_kuliah
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jenis_pendaftaran, s.status_kuliah
+    `;
+
+    const [results] = await connection.query<JenisPendaftaranStatus[]>(query, params);
+
+    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 jenis pendaftaran status:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch jenis pendaftaran status data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/jenis-pendaftaran/route.ts
+++ b/app/api/mahasiswa/jenis-pendaftaran/route.ts
@@ -0,0 +1,61 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface JenisPendaftaran extends RowDataPacket {
+  tahun_angkatan: number;
+  jenis_pendaftaran: string;
+  jumlah: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  
+  const connection = await pool.getConnection();
+  
+  try {
+    let query = `
+      SELECT tahun_angkatan, jenis_pendaftaran, COUNT(*) AS jumlah
+      FROM mahasiswa
+    `;
+
+    const params: any[] = [];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` WHERE tahun_angkatan = ?`;
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY tahun_angkatan, jenis_pendaftaran
+      ORDER BY tahun_angkatan DESC, jenis_pendaftaran
+    `;
+
+    const [results] = await connection.query<JenisPendaftaran[]>(query, params);
+
+    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 jenis pendaftaran:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch jenis pendaftaran data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/jenis-prestasi/route.ts
+++ b/app/api/mahasiswa/jenis-prestasi/route.ts
@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET() {
+  try {
+    const [rows] = await pool.query(`
+      SELECT jenis_prestasi 
+      FROM prestasi_mahasiswa 
+      WHERE jenis_prestasi = 'Akademik' OR jenis_prestasi = 'Non-Akademik'
+      GROUP BY jenis_prestasi
+      ORDER BY jenis_prestasi ASC
+    `);
+
+    return NextResponse.json(rows);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/lulus-tepat-waktu/route.ts
+++ b/app/api/mahasiswa/lulus-tepat-waktu/route.ts
@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+interface LulusTepatWaktu {
+  tahun_angkatan: number;
+  jk: string;
+  jumlah_lulus_tepat_waktu: number;
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jk,
+        COUNT(m.nim) AS jumlah_lulus_tepat_waktu
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = 'Lulus'
+        AND s.semester <= 8
+    `;
+
+    const params: any[] = [];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ' AND m.tahun_angkatan = ?';
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.jk
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jk
+    `;
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/nama-beasiswa/route.ts
+++ b/app/api/mahasiswa/nama-beasiswa/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+    const jenisBeasiswa = searchParams.get('jenisBeasiswa');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        s.nama_beasiswa,
+        COUNT(m.nim) AS jumlah_nama_beasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        beasiswa_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_beasiswa = ?
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, s.nama_beasiswa, s.jenis_beasiswa
+      ORDER BY 
+        m.tahun_angkatan DESC, s.nama_beasiswa, s.jenis_beasiswa
+    `;
+
+    const params = [jenisBeasiswa];
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      params.push(tahunAngkatan);
+    }
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/profile/route.ts
+++ b/app/api/mahasiswa/profile/route.ts
@@ -0,0 +1,91 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+import { cookies } from 'next/headers';
+import { jwtVerify } from 'jose';
+
+interface MahasiswaProfile extends RowDataPacket {
+  nim: string;
+  nama: string;
+  jk: 'Pria' | 'Wanita';
+  agama: string;
+  kabupaten: string;
+  provinsi: string;
+  jenis_pendaftaran: string;
+  status_beasiswa: 'YA' | 'TIDAK';
+  tahun_angkatan: string;
+  ipk: number | null;
+  prestasi: 'YA' | 'TIDAK';
+  status_kuliah: string;
+}
+
+export async function GET(request: Request) {
+  let connection;
+  try {
+    // Get token from cookies
+    const cookieStore = await cookies();
+    const token = cookieStore.get('token')?.value;
+    
+    if (!token) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+
+    // Verify JWT token
+    const { payload } = await jwtVerify(
+      token,
+      new TextEncoder().encode(process.env.JWT_SECRET || 'your-secret-key')
+    );
+
+    const nim = payload.nim as string;
+
+    // Get connection from pool
+    connection = await pool.getConnection();
+
+    const query = `
+      SELECT 
+        m.nim,
+        m.nama,
+        m.jk,
+        m.agama,
+        m.kabupaten,
+        m.provinsi,
+        m.jenis_pendaftaran,
+        m.status_beasiswa,
+        m.tahun_angkatan,
+        m.ipk,
+        m.prestasi,
+        s.status_kuliah
+      FROM 
+        mahasiswa m
+      LEFT JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        m.nim = ?
+    `;
+
+    const [rows] = await connection.query<MahasiswaProfile[]>(query, [nim]);
+    
+    if (rows.length === 0) {
+      connection.release();
+      return NextResponse.json(
+        { error: 'Data mahasiswa tidak ditemukan' },
+        { status: 404 }
+      );
+    }
+
+    connection.release();
+    return NextResponse.json(rows[0]);
+  } catch (error) {
+    if (connection) {
+      connection.release();
+    }
+    console.error('Error fetching profile data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/statistik/route.ts
+++ b/app/api/mahasiswa/statistik/route.ts
@@ -0,0 +1,65 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface MahasiswaStatistik extends RowDataPacket {
+  tahun_angkatan: number;
+  total_mahasiswa: number;
+  pria: number;
+  wanita: number;
+}
+
+// Fungsi untuk menangani preflight request (OPTIONS)
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      'Access-Control-Max-Age': '86400', // 24 jam
+    },
+  });
+}
+
+export async function GET() {
+  const connection = await pool.getConnection();
+  
+  try {
+    // Query untuk mendapatkan statistik mahasiswa per tahun angkatan
+    const [results] = await connection.query<MahasiswaStatistik[]>(`
+      SELECT 
+        tahun_angkatan,
+        COUNT(*) as total_mahasiswa,
+        SUM(CASE WHEN jk = 'Pria' THEN 1 ELSE 0 END) as pria,
+        SUM(CASE WHEN jk = 'Wanita' THEN 1 ELSE 0 END) as wanita
+      FROM mahasiswa
+      GROUP BY tahun_angkatan
+    `);
+
+    // Menambahkan header cache dan CORS
+    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 mahasiswa statistik:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch mahasiswa statistik' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/status-kuliah/route.ts
+++ b/app/api/mahasiswa/status-kuliah/route.ts
@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface StatusKuliah extends RowDataPacket {
+  tahun_angkatan: number;
+  status_kuliah: string;
+  jumlah: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  
+  const connection = await pool.getConnection();
+  
+  try {
+    let query = `
+      SELECT m.tahun_angkatan, s.status_kuliah, COUNT(*) AS jumlah
+      FROM mahasiswa m
+      JOIN status_mahasiswa s ON m.nim = s.nim
+      WHERE s.status_kuliah IN ('Lulus', 'Cuti', 'Aktif', 'DO')
+    `;
+
+    const params: any[] = [];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY m.tahun_angkatan, s.status_kuliah
+      ORDER BY m.tahun_angkatan, s.status_kuliah
+    `;
+
+    const [results] = await connection.query<StatusKuliah[]>(query, params);
+
+    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 status kuliah:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch status kuliah data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/status-mahasiswa/route.ts
+++ b/app/api/mahasiswa/status-mahasiswa/route.ts
@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface StatusMahasiswa extends RowDataPacket {
+  tahun_angkatan: number;
+  jk: string;
+  total_mahasiswa: number;
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const tahunAngkatan = searchParams.get('tahun_angkatan');
+  const statusKuliah = searchParams.get('status_kuliah');
+  
+  const connection = await pool.getConnection();
+  
+  try {
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        CASE 
+          WHEN m.jk = 'Pria' THEN 'L'
+          WHEN m.jk = 'Wanita' THEN 'P'
+          ELSE m.jk
+        END as jk,
+        COUNT(m.nim) AS total_mahasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        status_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.status_kuliah = ?
+    `;
+
+    const params: any[] = [statusKuliah];
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+      params.push(tahunAngkatan);
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.jk
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jk
+    `;
+
+    const [results] = await connection.query<StatusMahasiswa[]>(query, params);
+
+    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 status mahasiswa:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch status mahasiswa data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/status/route.ts
+++ b/app/api/mahasiswa/status/route.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import db from '@/lib/db';
+
+export async function GET() {
+  try {
+    const query = `
+      SELECT m.tahun_angkatan, s.status_kuliah, COUNT(*) AS jumlah
+      FROM mahasiswa m
+      JOIN status_mahasiswa s ON m.nim = s.nim
+      WHERE s.status_kuliah IN ('Lulus', 'Cuti', 'Aktif', 'DO')
+      GROUP BY m.tahun_angkatan, s.status_kuliah;
+    `;
+
+    const [rows] = await db.query(query);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching status data:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch status data' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/tahun-angkatan/route.ts
+++ b/app/api/mahasiswa/tahun-angkatan/route.ts
@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET() {
+  const connection = await pool.getConnection();
+  
+  try {
+    const currentYear = new Date().getFullYear();
+    const [results] = await connection.query(`
+      SELECT DISTINCT tahun_angkatan 
+      FROM mahasiswa 
+      WHERE tahun_angkatan >= ? 
+      ORDER BY tahun_angkatan DESC
+      LIMIT 7
+    `, [currentYear - 6]);
+
+    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 tahun angkatan:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch tahun angkatan data' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/api/mahasiswa/tingkat-prestasi/route.ts
+++ b/app/api/mahasiswa/tingkat-prestasi/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const jenisPrestasi = searchParams.get('jenisPrestasi');
+
+    const query = `
+      SELECT 
+        m.tahun_angkatan,
+        s.tingkat,
+        COUNT(m.nim) AS tingkat_mahasiswa_prestasi
+      FROM 
+        mahasiswa m
+      JOIN 
+        prestasi_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_prestasi = ?
+      GROUP BY 
+        m.tahun_angkatan, s.tingkat
+      ORDER BY 
+        m.tahun_angkatan DESC, s.tingkat
+    `;
+
+    const [rows] = await pool.query(query, [jenisPrestasi]);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/total-beasiswa/route.ts
+++ b/app/api/mahasiswa/total-beasiswa/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
+    const jenisBeasiswa = searchParams.get('jenisBeasiswa');
+
+    let query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jk,
+        COUNT(m.nim) AS jumlah_mahasiswa_beasiswa
+      FROM 
+        mahasiswa m
+      JOIN 
+        beasiswa_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_beasiswa = ?
+    `;
+
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query += ` AND m.tahun_angkatan = ?`;
+    }
+
+    query += `
+      GROUP BY 
+        m.tahun_angkatan, m.jk
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jk
+    `;
+
+    const params = [jenisBeasiswa];
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      params.push(tahunAngkatan);
+    }
+
+    const [rows] = await pool.query(query, params);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/total-prestasi/route.ts
+++ b/app/api/mahasiswa/total-prestasi/route.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const jenisPrestasi = searchParams.get('jenisPrestasi');
+
+    const query = `
+      SELECT 
+        m.tahun_angkatan,
+        m.jk,
+        COUNT(m.nim) AS jumlah_mahasiswa_prestasi
+      FROM 
+        mahasiswa m
+      JOIN 
+        prestasi_mahasiswa s ON m.nim = s.nim
+      WHERE 
+        s.jenis_prestasi = ?
+      GROUP BY 
+        m.tahun_angkatan, m.jk
+      ORDER BY 
+        m.tahun_angkatan DESC, m.jk
+    `;
+
+    const [rows] = await pool.query(query, [jenisPrestasi]);
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/api/mahasiswa/total/route.ts
+++ b/app/api/mahasiswa/total/route.ts
@@ -0,0 +1,91 @@
+import { NextResponse } from 'next/server';
+import pool from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+interface MahasiswaTotal extends RowDataPacket {
+  total_mahasiswa: number;
+  mahasiswa_aktif: number;
+  total_lulus: number;
+  pria_lulus: number;
+  wanita_lulus: number;
+  total_berprestasi: number;
+  prestasi_akademik: number;
+  prestasi_non_akademik: number;
+  ipk_rata_rata_aktif: number;
+  ipk_rata_rata_lulus: number;
+  total_mahasiswa_aktif_lulus: number;
+}
+
+// Fungsi untuk menangani preflight request (OPTIONS)
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      'Access-Control-Max-Age': '86400', // 24 jam
+    },
+  });
+}
+
+export async function GET() {
+  const connection = await pool.getConnection();
+  
+  try {
+    // Query gabungan untuk semua data
+    const [results] = await connection.query<MahasiswaTotal[]>(`
+      SELECT 
+        (SELECT COUNT(*) FROM mahasiswa) AS total_mahasiswa,
+        (SELECT COUNT(*) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Aktif') AS mahasiswa_aktif,
+        (SELECT COUNT(*) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Lulus') AS total_lulus,
+        (SELECT COUNT(*) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Lulus' AND m.jk = 'Pria') AS pria_lulus,
+        (SELECT COUNT(*) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Lulus' AND m.jk = 'Wanita') AS wanita_lulus,
+        (SELECT COUNT(*) FROM prestasi_mahasiswa) AS total_berprestasi,
+        (SELECT COUNT(*) FROM prestasi_mahasiswa WHERE jenis_prestasi = 'Akademik') AS prestasi_akademik,
+        (SELECT COUNT(*) FROM prestasi_mahasiswa WHERE jenis_prestasi = 'Non-Akademik') AS prestasi_non_akademik,
+        (SELECT COUNT(*) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah IN ('Aktif', 'Lulus')) AS total_mahasiswa_aktif_lulus,
+        (SELECT ROUND(AVG(m.ipk), 2) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Aktif') AS ipk_rata_rata_aktif,
+        (SELECT ROUND(AVG(m.ipk), 2) FROM mahasiswa m
+            JOIN status_mahasiswa s ON m.nim = s.nim
+            WHERE s.status_kuliah = 'Lulus') AS ipk_rata_rata_lulus
+    `);
+
+    // Menambahkan header cache dan CORS
+    return NextResponse.json(results[0], {
+      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 total mahasiswa:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch total mahasiswa' },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      }
+    );
+  } finally {
+    connection.release();
+  }
+} 
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,122 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+@import 'tw-animate-css';

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: rgb(0, 0, 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: rgb(16, 39, 73);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.205 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(1 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: rgb(12, 28, 52);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: rgb(22, 50, 91);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
  }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,33 +1,60 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import Navbar from '@/components/ui/Navbar';
+import Sidebar from '@/components/ui/Sidebar';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Toaster } from '@/components/ui/toaster';

 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });

 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Portal Data Informatika',
+  description: 'Admin Dashboard',
 };

+function ClientLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <div className="relative flex min-h-screen flex-col">
+        <Navbar />
+        <div className="flex flex-1">
+          <Sidebar />
+          <main className="flex-1 md:ml-[250px] p-2">
+            {children}
+          </main>
+        </div>
+      </div>
+      <Toaster />
+    </ThemeProvider>
+  );
+}
+
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="icon" type="image/png" href="/podif-icon.png" />
+      </head>
+      <body suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen`}>
+        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  );
--- a/app/mahasiswa/beasiswa/page.tsx
+++ b/app/mahasiswa/beasiswa/page.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterJenisBeasiswa from "@/components/FilterJenisBeasiswa";
+import TotalBeasiswaChart from "@/components/TotalBeasiswaChart";
+import TotalBeasiswaPieChart from "@/components/TotalBeasiswaPieChart";
+import NamaBeasiswaChart from "@/components/NamaBeasiswaChart";
+import NamaBeasiswaPieChart from "@/components/NamaBeasiswaPieChart";
+import JenisPendaftaranBeasiswaChart from "@/components/JenisPendaftaranBeasiswaChart";
+import JenisPendaftaranBeasiswaPieChart from "@/components/JenisPendaftaranBeasiswaPieChart";
+import AsalDaerahBeasiswaChart from "@/components/AsalDaerahBeasiswaChart";
+import IPKBeasiswaChart from "@/components/IPKBeasiswaChart";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function BeasiswaMahasiswaPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+    const [selectedJenisBeasiswa, setSelectedJenisBeasiswa] = useState<string>("Pemerintah");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Mahasiswa Beasiswa</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa yang mendapatkan beasiswa di program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+          </p>
+        </div>
+  
+        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium dark:text-white">
+              Filter Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
+              <FilterTahunAngkatan 
+                selectedYear={selectedYear}
+                onYearChange={setSelectedYear}
+              />
+              <FilterJenisBeasiswa
+                selectedJenisBeasiswa={selectedJenisBeasiswa}
+                onJenisBeasiswaChange={setSelectedJenisBeasiswa}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <TotalBeasiswaChart 
+            selectedYear={selectedYear}
+            selectedJenisBeasiswa={selectedJenisBeasiswa}
+          />
+          <NamaBeasiswaChart 
+            selectedYear={selectedYear}
+            selectedJenisBeasiswa={selectedJenisBeasiswa}
+          />
+          <JenisPendaftaranBeasiswaChart 
+            selectedYear={selectedYear}
+            selectedJenisBeasiswa={selectedJenisBeasiswa}
+          />
+        </>
+        ) : (
+          <>
+            <TotalBeasiswaPieChart 
+              selectedYear={selectedYear}
+              selectedJenisBeasiswa={selectedJenisBeasiswa}
+            />
+            <NamaBeasiswaPieChart 
+              selectedYear={selectedYear}
+              selectedJenisBeasiswa={selectedJenisBeasiswa}
+            />
+            <JenisPendaftaranBeasiswaPieChart 
+              selectedYear={selectedYear}
+              selectedJenisBeasiswa={selectedJenisBeasiswa}
+            />
+          </>
+        )}
+
+        <AsalDaerahBeasiswaChart 
+          selectedYear={selectedYear}
+          selectedJenisBeasiswa={selectedJenisBeasiswa}
+        />
+
+        {selectedYear === "all" && (
+          <IPKBeasiswaChart 
+            selectedJenisBeasiswa={selectedJenisBeasiswa}
+          />
+        )}
+      </div>
+    );
+  }
--- a/app/mahasiswa/berprestasi/page.tsx
+++ b/app/mahasiswa/berprestasi/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterJenisPrestasi from "@/components/FilterJenisPrestasi";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import TotalPrestasiChart from "@/components/TotalPrestasiChart";
+import TotalPrestasiPieChart from "@/components/TotalPrestasiPieChart";
+import TingkatPrestasiChart from "@/components/TingkatPrestasiChart";
+import TingkatPrestasiPieChart from "@/components/TingkatPrestasiPieChart";
+import JenisPendaftaranPrestasiChart from "@/components/JenisPendaftaranPrestasiChart";
+import JenisPendaftaranPrestasiPieChart from "@/components/JenisPendaftaranPrestasiPieChart";
+import AsalDaerahPrestasiChart from "@/components/AsalDaerahPrestasiChart";
+import IPKPrestasiChart from "@/components/IPKPrestasiChart";
+
+export default function BerprestasiMahasiswaPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+    const [selectedJenisPrestasi, setSelectedJenisPrestasi] = useState<string>("Akademik");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Mahasiswa Berprestasi</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa yang mendapatkan prestasi akademik dan non akademik di program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+          </p>
+        </div>
+  
+        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium dark:text-white">
+              Filter Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
+              <FilterTahunAngkatan 
+                selectedYear={selectedYear}
+                onYearChange={setSelectedYear}
+              />
+              <FilterJenisPrestasi
+                selectedJenisPrestasi={selectedJenisPrestasi}
+                onJenisPrestasiChange={setSelectedJenisPrestasi}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <TotalPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+          <TingkatPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+          <JenisPendaftaranPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+        </>
+        ) : (
+          <>
+            <TotalPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+            <TingkatPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+            <JenisPendaftaranPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+          </>
+        )}
+
+        <AsalDaerahPrestasiChart selectedYear={selectedYear} selectedJenisPrestasi={selectedJenisPrestasi} />
+
+        {selectedYear === "all" && (
+          <IPKPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+        )}
+      </div>
+    );
+  }
--- a/app/mahasiswa/lulustepatwaktu/page.tsx
+++ b/app/mahasiswa/lulustepatwaktu/page.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import LulusTepatWaktuChart from "@/components/LulusTepatWaktuChart";
+import LulusTepatWaktuPieChart from "@/components/LulusTepatWaktuPieChart";
+import JenisPendaftaranLulusChart from "@/components/JenisPendaftaranLulusChart";
+import JenisPendaftaranLulusPieChart from "@/components/JenisPendaftaranLulusPieChart";
+import AsalDaerahLulusChart from "@/components/AsalDaerahLulusChart";
+import IPKLulusTepatChart from "@/components/IPKLulusTepatChart";
+
+export default function LulusTepatWaktuPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Mahasiswa Lulus Tepat Waktu</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa yang lulus tepat waktu sesuai dengan masa studi ≤ 4 tahun program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+          </p>
+        </div>
+  
+        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium dark:text-white">
+              Filter Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
+              <FilterTahunAngkatan 
+                selectedYear={selectedYear}
+                onYearChange={setSelectedYear}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <LulusTepatWaktuChart selectedYear={selectedYear} />
+          <JenisPendaftaranLulusChart selectedYear={selectedYear} />
+        </>
+        ) : (
+          <>
+            <LulusTepatWaktuPieChart selectedYear={selectedYear} />
+            <JenisPendaftaranLulusPieChart selectedYear={selectedYear} />
+          </>
+        )}
+  
+        <AsalDaerahLulusChart selectedYear={selectedYear} />
+        {selectedYear === "all" && (
+        <IPKLulusTepatChart selectedYear={selectedYear} />
+        )}
+
+      </div>
+    );
+  }
--- a/app/mahasiswa/profile/page.tsx
+++ b/app/mahasiswa/profile/page.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useToast } from '@/components/ui/use-toast';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { User } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+interface MahasiswaProfile {
+  nim: string;
+  nama: string;
+  jk: 'Pria' | 'Wanita';
+  agama: string;
+  kabupaten: string;
+  provinsi: string;
+  jenis_pendaftaran: string;
+  status_beasiswa: 'YA' | 'TIDAK';
+  tahun_angkatan: string;
+  ipk: number | null;
+  prestasi: 'YA' | 'TIDAK';
+  status_kuliah: string;
+}
+
+export default function ProfilePage() {
+  const [profile, setProfile] = useState<MahasiswaProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { toast } = useToast();
+  const router = useRouter();
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        console.log('Fetching profile data...');
+        const response = await fetch('/api/mahasiswa/profile');
+        console.log('Profile response status:', response.status);
+        
+        if (response.status === 401) {
+          toast({
+            variant: "destructive",
+            title: "Akses Ditolak",
+            description: "Silakan login terlebih dahulu untuk mengakses halaman ini.",
+          });
+          router.push('/');
+          return;
+        }
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || 'Failed to fetch profile data');
+        }
+
+        const data = await response.json();
+        console.log('Profile data received:', data);
+        setProfile(data);
+      } catch (error) {
+        console.error('Error fetching profile:', error);
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: error instanceof Error ? error.message : "Gagal memuat data profil. Silakan coba lagi nanti.",
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, [toast, router]);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-4 max-w-2xl">
+        <Card className="border shadow-sm bg-white dark:bg-slate-900">
+          <CardHeader className="border-b py-3 bg-white dark:bg-slate-900 text-black dark:text-white">
+            <CardTitle className="text-lg">Profil Mahasiswa</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4">
+            <div className="space-y-3">
+              {[...Array(8)].map((_, i) => (
+                <div key={i} className="flex items-center gap-2">
+                  <Skeleton className="h-3 w-[80px]" />
+                  <Skeleton className="h-3 w-[140px]" />
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <div className="container mx-auto p-4 max-w-2xl">
+        <Card className="border shadow-sm">
+          <CardHeader className="border-b bg-muted/30 py-3">
+            <CardTitle className="text-lg">Profil Mahasiswa</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4">
+            <div className="text-center text-muted-foreground text-sm py-4">
+              Data profil tidak tersedia
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Format IPK value
+  const formatIPK = (ipk: number | null): string => {
+    if (ipk === null || ipk === undefined) return '-';
+    return Number(ipk).toFixed(2);
+  };
+
+  return (
+    <div className="container mx-auto p-4 w-full">
+      <Card className="gap-0 bg-white dark:bg-slate-900 border shadow-sm">
+        <CardHeader className="border-b py-2">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <User className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-medium text-black dark:text-white">{profile.nama}</CardTitle>
+              <p className="text-xs text-muted-foreground">{profile.nim}</p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="py-2 px-4">
+          <div className="space-y-1 text-sm text-black dark:text-white">
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Jenis Kelamin</div>
+              <div>{profile.jk}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Agama</div>
+              <div>{profile.agama}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Kabupaten</div>
+              <div>{profile.kabupaten}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Provinsi</div>
+              <div>{profile.provinsi}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Jenis Pendaftaran</div>
+              <div>{profile.jenis_pendaftaran}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">Tahun Angkatan</div>
+              <div>{profile.tahun_angkatan}</div>
+            </div>
+            <div className="py-1.5 border-b">
+              <div className="text-muted-foreground">IPK</div>
+              <div>{formatIPK(profile.ipk)}</div>
+            </div>
+            <div className="py-1.5">
+              <div className="text-muted-foreground">Status Kuliah</div>
+              <div>{profile.status_kuliah || '-'}</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/app/mahasiswa/status/page.tsx
+++ b/app/mahasiswa/status/page.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterStatusKuliah from "@/components/FilterStatusKuliah";
+import StatusMahasiswaFilterChart from "@/components/StatusMahasiswaFilterChart";
+import StatusMahasiswaFilterPieChart from "@/components/StatusMahasiswaFilterPieChart";
+import JenisPendaftaranStatusChart from "@/components/JenisPendaftaranStatusChart";
+import JenisPendaftaranStatusPieChart from "@/components/JenisPendaftaranStatusPieChart";
+import AsalDaerahStatusChart from '@/components/AsalDaerahStatusChart';
+import IpkStatusChart from '@/components/IpkStatusChart';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function StatusMahasiswaPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+    const [selectedStatus, setSelectedStatus] = useState<string>("Aktif");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Status Mahasiswa</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa status adalah status kuliah mahasiswa program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+          </p>
+        </div>
+  
+        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium dark:text-white">
+              Filter Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
+              <FilterTahunAngkatan 
+                selectedYear={selectedYear}
+                onYearChange={setSelectedYear}
+              />
+              <FilterStatusKuliah
+                selectedStatus={selectedStatus}
+                onStatusChange={setSelectedStatus}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <StatusMahasiswaFilterChart 
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+          <JenisPendaftaranStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+        </>
+        ) : (
+          <>
+            <StatusMahasiswaFilterPieChart
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+            <JenisPendaftaranStatusPieChart
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+          </>
+        )}
+
+        <AsalDaerahStatusChart
+          selectedYear={selectedYear}
+          selectedStatus={selectedStatus}
+        />
+
+        {selectedYear === "all" && (
+          <IpkStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+        )}
+
+      </div>
+    );
+  }
--- a/app/mahasiswa/total/page.tsx
+++ b/app/mahasiswa/total/page.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from "react";
+import StatistikMahasiswaChart from "@/components/StatistikMahasiswaChart";
+import StatistikPerAngkatanChart from "@/components/StatistikPerAngkatanChart";
+import JenisPendaftaranChart from "@/components/JenisPendaftaranChart";
+import AsalDaerahChart from "@/components/AsalDaerahChart";
+import IPKChart from "@/components/IPKChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import JenisPendaftaranPerAngkatanChart from "@/components/JenisPendaftaranPerAngkatanChart";
+import AsalDaerahPerAngkatanChart from "@/components/AsalDaerahPerAngkatanChart";
+import IPKJenisKelaminChart from "@/components/IPKJenisKelaminChart";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function TotalMahasiswaPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <h1 className="text-3xl font-bold mb-4">Total Mahasiswa</h1>
+      
+      <div className="mb-4">
+        <p className="text-gray-600 dark:text-gray-300">
+          Mahasiswa total adalah jumlah mahasiswa program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+        </p>
+      </div>
+
+      <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium dark:text-white">
+              Filter Data
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
+              <FilterTahunAngkatan 
+                selectedYear={selectedYear}
+                onYearChange={setSelectedYear}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+      {selectedYear === "all" ? (
+        <>
+          <StatistikMahasiswaChart />
+          <JenisPendaftaranChart />
+          <AsalDaerahChart />
+          <IPKChart />
+        </>
+      ) : (
+        <>
+          <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
+          <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
+          <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
+        </>
+      )}
+    </div>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,103 +1,218 @@
-import Image from "next/image";
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import StatusMahasiswaChart from "@/components/StatusMahasiswaChart";
+import StatistikMahasiswaChart from "@/components/StatistikMahasiswaChart";
+import JenisPendaftaranChart from "@/components/JenisPendaftaranChart";
+import AsalDaerahChart from "@/components/AsalDaerahChart";
+import IPKChart from '@/components/IPKChart';
+
+interface MahasiswaTotal {
+  total_mahasiswa: number;
+  mahasiswa_aktif: number;
+  total_lulus: number;
+  pria_lulus: number;
+  wanita_lulus: number;
+  total_berprestasi: number;
+  prestasi_akademik: number;
+  prestasi_non_akademik: number;
+  ipk_rata_rata_aktif: number;
+  ipk_rata_rata_lulus: number;
+  total_mahasiswa_aktif_lulus: number;
+}
+
+// Skeleton loading component
+const CardSkeleton = () => (
+  <Card className="bg-white dark:bg-slate-900 shadow-lg">
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+      <div className="h-4 w-4 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
+    </CardHeader>
+    <CardContent>
+      <div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
+      <div className="flex justify-between">
+        <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+        <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+export default function HomePage() {
+  const { theme } = useTheme();
+  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaTotal>({
+    total_mahasiswa: 0,
+    mahasiswa_aktif: 0,
+    total_lulus: 0,
+    pria_lulus: 0,
+    wanita_lulus: 0,
+    total_berprestasi: 0,
+    prestasi_akademik: 0,
+    prestasi_non_akademik: 0,
+    ipk_rata_rata_aktif: 0,
+    ipk_rata_rata_lulus: 0,
+    total_mahasiswa_aktif_lulus: 0
+  });
+  
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Menggunakan cache API untuk mempercepat loading
+        const cacheKey = 'mahasiswa-total-data';
+        const cachedData = sessionStorage.getItem(cacheKey);
+        const cachedTimestamp = sessionStorage.getItem(`${cacheKey}-timestamp`);
+        
+        // Cek apakah data cache masih valid (kurang dari 60 detik)
+        const isCacheValid = cachedTimestamp && 
+          (Date.now() - parseInt(cachedTimestamp)) < 60000;
+        
+        if (cachedData && isCacheValid) {
+          setMahasiswaData(JSON.parse(cachedData));
+        }
+        
+        // Fetch data total mahasiswa
+        const totalResponse = await fetch('/api/mahasiswa/total', {
+          cache: 'no-store',
+        });
+        
+        if (!totalResponse.ok) {
+          throw new Error('Failed to fetch total data');
+        }
+        
+        const totalData = await totalResponse.json();
+        setMahasiswaData(totalData);
+        
+        // Menyimpan data dan timestamp ke sessionStorage
+        sessionStorage.setItem(cacheKey, JSON.stringify(totalData));
+        sessionStorage.setItem(`${cacheKey}-timestamp`, Date.now().toString());
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+        console.error('Error fetching data:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);

-export default function Home() {
  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="container mx-auto p-4 space-y-6">
+      <h1 className="text-3xl font-bold mb-8">Dashboard Portal Data Informatika</h1>
+      
+      {loading ? (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          <CardSkeleton />
+          <CardSkeleton />
+          <CardSkeleton />
+          <CardSkeleton />
        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      ) : error ? (
+        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
+            {/* Kartu Total Mahasiswa */}
+            <Card className="bg-white dark:bg-slate-900 shadow-lg">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium dark:text-white">
+                  Total Mahasiswa
+                </CardTitle>
+                <Users className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa}</div>
+                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
+                  <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.mahasiswa_aktif}</span></span>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Kartu Total Kelulusan */}
+            <Card className="bg-white dark:bg-slate-900 shadow-lg">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium dark:text-white">
+                  Total Kelulusan
+                </CardTitle>
+                <GraduationCap className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_lulus}</div>
+                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
+                  <span className="dark:text-white">Laki-laki: <span className="text-blue-500">{mahasiswaData.pria_lulus}</span></span>
+                  <span className="dark:text-white">Perempuan: <span className="text-pink-500">{mahasiswaData.wanita_lulus}</span></span>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Kartu Total Prestasi */}
+            <Card className="bg-white dark:bg-slate-900 shadow-lg">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium dark:text-white">
+                  Mahasiswa Berprestasi
+                </CardTitle>
+                <Trophy className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_berprestasi}</div>
+                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
+                  <span className="dark:text-white">Akademik: <span className="text-yellow-500">{mahasiswaData.prestasi_akademik}</span></span>
+                  <span className="dark:text-white">Non-Akademik: <span className="text-purple-500">{mahasiswaData.prestasi_non_akademik}</span></span>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Kartu Rata-rata IPK */}
+            <Card className="bg-white dark:bg-slate-900 shadow-lg">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium dark:text-white">
+                  Rata-rata IPK
+                </CardTitle>
+                <BookOpen className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa_aktif_lulus}</div>
+                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
+                  <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.ipk_rata_rata_aktif}</span></span>
+                  <span className="dark:text-white">Lulus: <span className="text-blue-500">{mahasiswaData.ipk_rata_rata_lulus}</span></span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Diagram Statistik Mahasiswa */}
+          <StatistikMahasiswaChart />
+
+          {/* Diagram Status Mahasiswa */}
+          <StatusMahasiswaChart />
+
+          {/* Diagram Jenis Pendaftaran */}
+          <JenisPendaftaranChart />
+
+          {/* Diagram Asal Daerah */}
+          <AsalDaerahChart />
+
+          {/* Diagram IPK */}
+          <IPKChart />
+        </>
+      )}
    </div>
  );
 }