update auth when token invalid and fix pie chart & change UI for metric

src/app/recruitment/layout.tsx

@@ -1,66 +1,65 @@
 // app/recruitment/layout.tsx
+"use client"
 import { Header } from '@/components/dashboard/header';
 import { HeaderMenu } from '@/components/dashboard/header-menu';
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { useAuth } from '@/composables/useAuth';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
-async function getUser() {
-  console.log('🟡 [Layout] Checking authentication...');
-  
-  const cookieStore = await cookies();
-  const token = cookieStore.get('auth_token')?.value;
-
-  console.log('🟡 [Layout] Token exists:', token ? 'YES' : 'NO');
-  console.log('🟡 [Layout] Token value:', token ? token.substring(0, 20) + '...' : 'none');
-
-  if (!token) {
-    console.log('🟡 [Layout] No token found, returning null');
-    return null;
-  }
-
-  try {
-    console.log('🟡 [Layout] Verifying token with backend...');
-    
-    const response = await fetch(
-      'https://byteriot-candidateexplorer.hf.space/CandidateExplorer/admin/me',
-      {
-        headers: { Authorization: `Bearer ${token}` },
-        cache: 'no-store',
-      }
-    );
-
-    console.log('🟡 [Layout] Backend response status:', response.status);
-
-    if (!response.ok) {
-      console.log('🟡 [Layout] Token invalid, backend returned:', response.status);
-      return null;
-    }
-
-    const userData = await response.json();
-    console.log('🟡 [Layout] User authenticated:', userData);
-    return userData;
-    
-  } catch (error) {
-    console.error('🟡 [Layout] Error fetching user:', error);
-    return null;
-  }
+// Loading Component
+function AuthLoadingScreen() {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
+      <div className="text-center space-y-6">
+        {/* Spinner */}
+        <div className="relative mx-auto w-20 h-20">
+          <div className="absolute inset-0 rounded-full border-4 border-blue-200"></div>
+          <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-blue-600 animate-spin"></div>
+        </div>
+        
+        {/* Text */}
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-gray-800">
+            Loading...
+          </h2>
+          <p className="text-sm text-gray-500">
+            Please wait while we verify your credentials
+          </p>
+        </div>
+        
+        {/* Dots animation */}
+        <div className="flex justify-center gap-2">
+          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+          <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default async function RecruitmentLayout({
+export default function RecruitmentLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  console.log('🟡 [Layout] Layout rendering...');
-  
-  const user = await getUser();
+  const { isLoadingUser, isAuthenticated, logout } = useAuth();
+  const router = useRouter();
 
-  if (!user) {
-    console.log('🟡 [Layout] No user, redirecting to login');
-    redirect('/login');
+  useEffect(() => {
+    if (!isLoadingUser && !isAuthenticated) {
+      router.replace("/login");
+    }
+  }, [isLoadingUser, isAuthenticated, router]);
+
+  if (isLoadingUser) {
+    return <AuthLoadingScreen />;
   }
 
-  console.log('🟡 [Layout] User found, rendering layout');
+  if (!isAuthenticated) {
+    logout();
+    return null;
+  }
 
   return (
     <div className="flex h-screen bg-background">

src/components/dashboard/metrics-row.tsx

@@ -1,6 +1,7 @@
+// components/dashboard/metrics-row.tsx
 "use client";
 
-import { MetricsCard } from "@/components/ui/metrics-card";
+import { Card } from "@/components/ui/card";
 import { authFetch } from "@/lib/api";
 import { useQuery } from "@tanstack/react-query";
 
@@ -20,6 +21,43 @@ const fallbackScore: ScoreData = {
   }
 }
 
+function CircularProgress({ percentage }: { percentage: number }) {
+  // Format to max 2 decimal places
+  const formattedPercentage = Number(percentage.toFixed(2));
+  
+  return (
+    <div className="relative w-24 h-24 flex-shrink-0">
+      <svg className="w-full h-full transform -rotate-90">
+        <circle
+          cx="48"
+          cy="48"
+          r="40"
+          stroke="#E5E7EB"
+          strokeWidth="8"
+          fill="none"
+        />
+        <circle
+          cx="48"
+          cy="48"
+          r="40"
+          stroke="#10B981"
+          strokeWidth="8"
+          fill="none"
+          strokeDasharray={`${2 * Math.PI * 40}`}
+          strokeDashoffset={`${2 * Math.PI * 40 * (1 - percentage / 100)}`}
+          strokeLinecap="round"
+          className="transition-all duration-500"
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span className="text-xl font-bold text-gray-700">
+          {formattedPercentage}%
+        </span>
+      </div>
+    </div>
+  );
+}
+
 export function MetricsRow() {
 
   const fetchScore = async (): Promise<ScoreData> => {
@@ -31,27 +69,94 @@ export function MetricsRow() {
   const { data, isLoading: loadingScore, isError } = useQuery({
     queryKey: ["score-data"],
     queryFn: () => fetchScore(),
-    staleTime: 0, // always fresh
-    placeholderData: (prev) => prev, // keep previous data while loading (no flicker)
+    staleTime: 0,
+    placeholderData: (prev) => prev,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
   })
 
   const scoreData = isError ? fallbackScore : data ?? fallbackScore
 
+  // Format percentage to max 2 decimal places
+  const formattedPercentage = Number(scoreData.data.percent_extracted.toFixed(2));
+
+  const lastProcessed = new Date().toLocaleString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  });
+
+  if (loadingScore) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {[1, 2].map((i) => (
+          <Card key={i} className="p-6 border bg-white animate-pulse">
+            <div className="flex items-start gap-4">
+              <div className="w-24 h-24 rounded-full bg-gray-200" />
+              <div className="flex-1 space-y-3">
+                <div className="h-6 bg-gray-200 rounded w-40" />
+                <div className="h-8 bg-gray-200 rounded w-24" />
+                <div className="h-4 bg-gray-200 rounded w-full" />
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <MetricsCard loading={loadingScore} label="Extracted Profile" value={`${scoreData?.data.total_extracted}`} />
-      <MetricsCard loading={loadingScore} label="Processed" value={`${scoreData?.data.percent_extracted}%`}>
-        <div className="grid grid-cols-2 gap-5">
-          <div className="text-gray-500">Processed</div>
-          <div className="font-bold text-gray-900">{scoreData?.data.total_extracted}</div>
+      {/* Extracted Profile Card */}
+      <Card className="p-6 border bg-white hover:shadow-md transition-shadow">
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-green-100 text-green-800">
+                Extracted Profile
+              </span>
+              <span className="text-3xl font-bold text-gray-900">
+                {scoreData.data.total_extracted}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-gray-600">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+              <span>
+                Active Candidates: <strong>{scoreData.data.total_extracted}</strong> / Total Profiles: <strong>{scoreData.data.total_file}</strong>
+              </span>
+            </div>
+          </div>
         </div>
-        <div className="grid grid-cols-2 gap-5">
-          <div className="text-gray-500">Total Profile</div>
-          <div className="font-bold text-gray-900">{scoreData?.data.total_file}</div>
+      </Card>
+
+      {/* Processed Card */}
+      <Card className="p-6 border bg-white hover:shadow-md transition-shadow">
+        <div className="flex items-start gap-6">
+          <CircularProgress percentage={formattedPercentage} />
+          
+          <div className="flex-1">
+            <div className="mb-4">
+              <div className="text-3xl font-bold text-green-600 mb-1">
+                {formattedPercentage}%
+              </div>
+              <div className="text-lg font-semibold text-gray-900">
+                Total {scoreData.data.total_file}
+              </div>
+            </div>
+            
+            <div className="text-xs text-gray-500">
+              Last Processed: {lastProcessed}
+            </div>
+          </div>
         </div>
-      </MetricsCard>
+      </Card>
     </div>
   );
-}
+}

src/components/ui/ChartPie.tsx

@@ -15,16 +15,20 @@ type ChartPieProps = {
   data: ChartData[]
 }
 
-export function ChartPie({
-  loading,
-  data
-}: ChartPieProps) {
+export function ChartPie({ loading, data }: ChartPieProps) {
+  const items = 5;
 
-  const items = 5
+  // Calculate percentages
+  const dataWithPercentages = data ? (() => {
+    const total = data.reduce((sum, item) => sum + item.value, 0);
+    return data.map(item => ({
+      ...item,
+      percentage: total > 0 ? Number(((item.value / total) * 100).toFixed(1)) : 0
+    }));
+  })() : [];
+
+  const total = dataWithPercentages.reduce((sum, item) => sum + item.value, 0);
 
-  // -----------------------
-  // 🔹 LOADING STATE
-  // -----------------------
   if (loading) {
     return (
       <div className="w-full flex items-center justify-center gap-10 animate-pulse">
@@ -32,7 +36,6 @@ export function ChartPie({
           <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">
@@ -42,42 +45,50 @@ export function ChartPie({
           ))}
         </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-40 h-40 border-4 border-dashed border-gray-200 rounded-full mb-4" />
         <p className="text-sm">No data available</p>
       </div>
-    )
+    );
   }
 
-  // -----------------------
-  // 🔹 CHART
-  // -----------------------
   return (
-    <ResponsiveContainer
-      width="100%"
-      height={Math.max(250, data.length * 40)}
-    >
-      <PieChart>
-        <Pie
-          data={data}
-          dataKey="value"
-        >
-          {data.map((entry, index) => (
-            <Cell key={`cell-${index}`} fill={entry.color} />
-          ))}
-        </Pie>
+    <div className="space-y-4">
+      {/* Total Count */}
+      <div className="text-center">
+        <p className="text-sm text-gray-600">Total</p>
+        <p className="text-2xl font-bold text-gray-800">{total}</p>
+      </div>
 
-        <Tooltip formatter={(value) => `${value}%`} />
-        <Legend />
-      </PieChart>
-    </ResponsiveContainer>
+      <ResponsiveContainer width="100%" height={Math.max(250, dataWithPercentages.length * 40)}>
+        <PieChart>
+          <Pie
+            data={dataWithPercentages}
+            dataKey="value"
+            label={({ percentage }) => `${percentage}%`}
+          >
+            {dataWithPercentages.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip
+            formatter={(value: number, name: string, props: any) => [
+              `${value} (${props.payload.percentage}%)`,
+              name
+            ]}
+          />
+          <Legend
+            formatter={(value: string, entry: any) =>
+              `${value}: ${entry.payload.value} (${entry.payload.percentage}%)`
+            }
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
   );
 }