up chart

src/app/api/cv-profile/charts/major/route.ts

@@ -0,0 +1,36 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+function randomColor() {
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+}
+
+export async function GET() {
+  const profiles = await prisma.cv_profile.findMany({
+    select: {
+      major_edu_1: true,
+      major_edu_2: true,
+      major_edu_3: true,
+    },
+  });
+
+  const majorCount: Record<string, number> = {};
+
+  profiles.forEach((profile) => {
+    [profile.major_edu_1, profile.major_edu_2, profile.major_edu_3]
+      .filter(Boolean)
+      .forEach((univ) => {
+        if (!univ) return;
+
+        majorCount[univ] = (majorCount[univ] || 0) + 1;
+      });
+  });
+
+  
+
+  return NextResponse.json(Object.entries(majorCount).map(([name, value]) => ({
+    name,
+    value,
+    color: randomColor(),
+  })));
+}

src/app/api/cv-profile/charts/university/route.ts

@@ -0,0 +1,36 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+function randomColor() {
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+}
+
+export async function GET() {
+  const profiles = await prisma.cv_profile.findMany({
+    select: {
+      univ_edu_1: true,
+      univ_edu_2: true,
+      univ_edu_3: true,
+    },
+  });
+
+  const universityCount: Record<string, number> = {};
+
+  profiles.forEach((profile) => {
+    [profile.univ_edu_1, profile.univ_edu_2, profile.univ_edu_3]
+      .filter(Boolean)
+      .forEach((univ) => {
+        if (!univ) return;
+
+        universityCount[univ] = (universityCount[univ] || 0) + 1;
+      });
+  });
+
+  
+
+  return NextResponse.json(Object.entries(universityCount).map(([name, value]) => ({
+    name,
+    value,
+    color: randomColor(),
+  })));
+}

src/app/recruitment/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import { MetricsRow } from '@/components/dashboard/metrics-row';
 import CandidateTable from '@/components/dashboard/candidates-table';
+import { ChartsSection } from '@/components/dashboard/charts-section';
+import { MetricsRow } from '@/components/dashboard/metrics-row';
 
 export default function DashboardPage() {
   return (
     <div>
       <MetricsRow />
+      <ChartsSection />
       <CandidateTable />
     </div>
   );

src/components/dashboard/charts-section.tsx

@@ -1,21 +1,21 @@
 'use client';
 
 import { Card } from '@/components/ui/card';
-import { SuitabilityPie } from './charts/suitability-pie';
+import { MajorChart } from './charts/major-chart';
 import { UniversityBar } from './charts/university-bar';
 
 export function ChartsSection() {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-2 mt-4">
       <Card className="p-6 border-2">
         <h3 className="text-base font-semibold text-gray-900 text-center text-green-500">
-          Distribusi Suitability % (Eligible)
+          All Major
         </h3>
-        <SuitabilityPie />
+        <MajorChart />
       </Card>
       <Card className="p-6 border-2">
         <h3 className="text-base font-semibold text-gray-900 text-center text-green-500">
-          Top Universitas (Eligible)
+          All University
         </h3>
         <UniversityBar />
       </Card>

src/components/dashboard/charts/major-chart.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { authFetch } from '@/lib/api';
+import { useQuery } from '@tanstack/react-query';
+import { ChartPie } from '../../ui/ChartPie';
+
+export function MajorChart() {
+  const fetchMajor = async (): Promise<{
+    name: string
+    value: number
+    color: string
+  }[]> => {
+    const res = await authFetch(`/api/cv-profile/charts/major`)
+    if (!res.ok) throw new Error("Failed to fetch major")
+    return res.json()
+  }
+
+
+  const { data = [], isLoading } = useQuery({
+    queryKey: ["charts-major"],
+    queryFn: () => fetchMajor(),
+    staleTime: 0, // always fresh
+    placeholderData: (prev) => prev, // keep previous data while loading (no flicker)
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  })
+  return (
+    <ChartPie loading={isLoading} data={data} />
+  );
+}

src/components/dashboard/charts/university-bar.tsx

@@ -1,42 +1,33 @@
-'use client';
+'use client'
 
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from 'recharts';
-
-const data = [
-  { name: 'Universitas Indonesia', value: 1200 },
-  { name: 'Institut Teknologi Bandung', value: 1100 },
-  { name: 'Binus University', value: 950 },
-  { name: 'Universitas Diponegoro', value: 850 },
-  { name: 'Universitas Gadah Mada', value: 800 },
-];
+import { authFetch } from '@/lib/api'
+import { useQuery } from '@tanstack/react-query'
+import { ChartBar } from '../../ui/ChartBar'
 
 export function UniversityBar() {
+  const fetchScore = async (): Promise<
+    {
+      name: string
+      value: number
+      color: string
+    }[]
+  > => {
+    const res = await authFetch(`/api/cv-profile/charts/university`)
+    if (!res.ok) throw new Error('Failed to fetch score')
+    return res.json()
+  }
+
+  const { data = [], isLoading } = useQuery({
+    queryKey: ['charts-university'],
+    queryFn: fetchScore,
+    staleTime: 0,
+    placeholderData: (prev) => prev,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  })
+  
+ 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <BarChart
-        data={data}
-        layout="vertical"
-        margin={{ top: 5, right: 30, bottom: 5 }}
-      >
-        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-        <XAxis type="number" />
-        <YAxis dataKey="name" type="category" width={195} tick={{ fontSize: 12 }} />
-        <Tooltip />
-        <Bar dataKey="value" fill="#22c55e" radius={[0, 8, 8, 0]}>
-          {data.map((_, index) => (
-            <Cell key={`cell-${index}`} fill="#22c55e" />
-          ))}
-        </Bar>
-      </BarChart>
-    </ResponsiveContainer>
-  );
-}
+    <ChartBar loading={isLoading} data={data} />
+  )
+}

src/components/ui/ChartBar.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { ChartData } from '@/types/chart'
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+
+type ChartBarProps = {
+  loading: boolean
+  data: ChartData[]
+}
+
+export function ChartBar({
+  loading,
+  data
+}: ChartBarProps) {
+  const rows = 8
+  if (loading) return (
+    <div
+      className="w-full"
+      style={{ height: rows * 40 }}
+    >
+      <div className="flex flex-col gap-4 animate-pulse">
+        {Array.from({ length: rows }).map((_, index) => (
+          <div key={index} className="flex items-center gap-4">
+            {/* Fake Y label */}
+            <div className="h-4 bg-gray-200 rounded w-48" />
+
+            {/* Fake Bar */}
+            <div
+              className="h-5 bg-gray-200 rounded"
+              style={{
+                width: `${40 + Math.random() * 50}%`,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height={data.length * 40}  // 40px per row
+    >
+      <BarChart
+        data={data}
+        layout="vertical"
+        margin={{ top: 5, right: 30, bottom: 5 }}
+      >
+        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+        <XAxis type="number" />
+        <YAxis
+          dataKey="name"
+          type="category"
+          width={220}
+          tickFormatter={(value: string) =>
+            value.length > 25 ? value.slice(0, 25) + '...' : value
+          }
+        />
+        <Tooltip />
+
+        <Bar dataKey="value" radius={[0, 8, 8, 0]}>
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

src/components/ui/ChartPie.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { ChartData } from '@/types/chart';
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts';
+
+type ChartPieProps = {
+  loading: boolean
+  data: ChartData[]
+}
+
+export function ChartPie({
+  loading,
+  data
+}: ChartPieProps) {
+  const items = 5
+  if (loading) return (
+    <div className="w-full flex items-center justify-center gap-10 animate-pulse">
+      
+      {/* Fake Pie Circle */}
+      <div className="relative">
+        <div className="w-48 h-48 bg-gray-200 rounded-full" />
+        <div className="absolute inset-6 bg-white rounded-full" />
+      </div>
+
+      {/* Fake Legend */}
+      <div className="flex flex-col gap-4">
+        {Array.from({ length: items }).map((_, index) => (
+          <div key={index} className="flex items-center gap-3">
+            <div className="w-4 h-4 bg-gray-200 rounded-sm" />
+            <div className="h-4 bg-gray-200 rounded w-32" />
+          </div>
+        ))}
+      </div>
+
+    </div>
+  )
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height={data.length * 40}  // 40px per row
+    >
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip formatter={(value) => `${value}%`} />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+}

src/types/chart.ts

@@ -0,0 +1,5 @@
+export type ChartData = {
+  name: string;
+  value: number;
+  color: string;
+};