fix chart data based on login

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

@@ -2,35 +2,65 @@ import { prisma } from "@/lib/prisma";
 import { NextResponse } from "next/server";
 
 function randomColor() {
-  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  return `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, "0")}`;
 }
 
-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(),
-  })));
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const user_id = searchParams.get("user_id");
+
+    if (!user_id) {
+      return NextResponse.json(
+        { message: "user_id is required" },
+        { status: 400 }
+      );
+    }
+
+    // ✅ RAW QUERY WITH JOIN
+    const profiles = await prisma.$queryRaw<
+      {
+        major_edu_1: string | null;
+        major_edu_2: string | null;
+        major_edu_3: string | null;
+      }[]
+    >`
+      SELECT 
+        p.major_edu_1, 
+        p.major_edu_2, 
+        p.major_edu_3
+      FROM cv_profile p
+      INNER JOIN cv_file f ON f.file_id = p.file_id
+      WHERE f.user_id = ${user_id}::uuid
+    `;
+
+    // ✅ Aggregate
+    const majorCount: Record<string, number> = {};
+
+    profiles.forEach((profile) => {
+      [profile.major_edu_1, profile.major_edu_2, profile.major_edu_3]
+        .filter(Boolean)
+        .forEach((major) => {
+          if (!major) return;
+          majorCount[major] = (majorCount[major] || 0) + 1;
+        });
+    });
+
+    // ✅ Format for chart
+    const result = Object.entries(majorCount).map(([name, value]) => ({
+      name,
+      value,
+      color: randomColor(),
+    }));
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Chart major error:", error);
+    return NextResponse.json(
+      { message: "Failed to fetch chart data" },
+      { status: 500 }
+    );
+  }
 }

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

@@ -2,35 +2,67 @@ import { prisma } from "@/lib/prisma";
 import { NextResponse } from "next/server";
 
 function randomColor() {
-  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  return `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, "0")}`;
 }
 
-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(),
-  })));
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const user_id = searchParams.get("user_id");
+
+    if (!user_id) {
+      return NextResponse.json(
+        { message: "user_id is required" },
+        { status: 400 }
+      );
+    }
+
+    // ✅ RAW QUERY WITH JOIN
+    const profiles = await prisma.$queryRaw<
+      {
+        univ_edu_1: string | null;
+        univ_edu_2: string | null;
+        univ_edu_3: string | null;
+      }[]
+    >`
+      SELECT 
+        p.univ_edu_1,
+        p.univ_edu_2,
+        p.univ_edu_3
+      FROM cv_profile p
+      INNER JOIN cv_file f ON f.file_id = p.file_id
+      WHERE f.user_id = ${user_id}::uuid
+    `;
+
+    // ✅ Aggregate
+    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;
+        });
+    });
+
+    // ✅ Format + Sort
+    const result = Object.entries(universityCount)
+      .map(([name, value]) => ({
+        name,
+        value,
+        color: randomColor(),
+      }))
+      .sort((a, b) => b.value - a.value);
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Chart university error:", error);
+    return NextResponse.json(
+      { message: "Failed to fetch chart data" },
+      { status: 500 }
+    );
+  }
 }

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

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

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

@@ -1,25 +1,28 @@
 'use client'
 
+import { useAuth } from '@/composables/useAuth'
 import { authFetch } from '@/lib/api'
 import { useQuery } from '@tanstack/react-query'
 import { ChartBar } from '../../ui/ChartBar'
 
 export function UniversityBar() {
-  const fetchScore = async (): Promise<
+   const { user } = useAuth()
+  const fetchScore = async (userId: string): Promise<
     {
       name: string
       value: number
       color: string
     }[]
   > => {
-    const res = await authFetch(`/api/cv-profile/charts/university`)
+    if (!userId) return []
+    const res = await authFetch(`/api/cv-profile/charts/university?user_id=${userId}`)
     if (!res.ok) throw new Error('Failed to fetch score')
     return res.json()
   }
 
   const { data = [], isLoading } = useQuery({
-    queryKey: ['charts-university'],
-    queryFn: fetchScore,
+    queryKey: ['charts-university', user?.user_id],
+    queryFn: () => fetchScore(user?.user_id ?? ""),
     staleTime: 0,
     placeholderData: (prev) => prev,
     refetchOnWindowFocus: false,

src/components/ui/ChartBar.tsx

@@ -21,35 +21,54 @@ 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>
-        ))}
+  // -----------------------
+  // 🔹 LOADING STATE
+  // -----------------------
+  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">
+              <div className="h-4 bg-gray-200 rounded w-48" />
+              <div
+                className="h-5 bg-gray-200 rounded"
+                style={{
+                  width: `${40 + Math.random() * 50}%`,
+                }}
+              />
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
+
+  // -----------------------
+  // 🔹 EMPTY STATE
+  // -----------------------
+  if (!data || data.length === 0) {
+    return (
+      <div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
+        <div className="w-16 h-40 border-4 border-dashed border-gray-200 rounded mb-4" />
+        <p className="text-sm">No data available</p>
+      </div>
+    )
+  }
 
+  // -----------------------
+  // 🔹 CHART
+  // -----------------------
   return (
     <ResponsiveContainer
       width="100%"
-      height={data.length * 40}  // 40px per row
+      height={Math.max(250, data.length * 40)}
     >
       <BarChart
         data={data}

src/components/ui/ChartPie.tsx

@@ -19,32 +19,51 @@ 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" />
+
+  // -----------------------
+  // 🔹 LOADING STATE
+  // -----------------------
+  if (loading) {
+    return (
+      <div className="w-full flex items-center justify-center gap-10 animate-pulse">
+        <div className="relative">
+          <div className="w-48 h-48 bg-gray-200 rounded-full" />
+          <div className="absolute inset-6 bg-white rounded-full" />
+        </div>
+
+        <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>
+    )
+  }
 
-      {/* 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>
-        ))}
+  // -----------------------
+  // 🔹 EMPTY STATE
+  // -----------------------
+  if (!data || data.length === 0) {
+    return (
+      <div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
+        <div className="w-40 h-40 border-4 border-dashed border-gray-200 rounded-full mb-4" />
+        <p className="text-sm">No data available</p>
       </div>
+    )
+  }
 
-    </div>
-  )
+  // -----------------------
+  // 🔹 CHART
+  // -----------------------
   return (
     <ResponsiveContainer
       width="100%"
-      height={data.length * 40}  // 40px per row
+      height={Math.max(250, data.length * 40)}
     >
       <PieChart>
         <Pie
@@ -55,9 +74,10 @@ export function ChartPie({
             <Cell key={`cell-${index}`} fill={entry.color} />
           ))}
         </Pie>
+
         <Tooltip formatter={(value) => `${value}%`} />
         <Legend />
       </PieChart>
     </ResponsiveContainer>
   );
-}
+}