finishing extract data and delete

src/app/api/file/delete/route.ts

@@ -0,0 +1,65 @@
+// app/api/file/upload/route.ts
+import { cookies } from 'next/headers';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Get FormData from request
+    const { searchParams } = new URL(request.url);
+    const filename = searchParams.get('filename');
+    
+    // Get auth token from cookies
+    const cookieStore = await cookies();
+    const token = cookieStore.get('auth_token')?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { message: 'Not authenticated' },
+        { status: 401 }
+      );
+    }
+
+    const url = new URL(
+      `https://byteriot-candidateexplorer.hf.space/CandidateExplorer/file/${filename}`
+    );
+
+    // Forward the FormData to external API
+    const response = await fetch(
+      url.toString(),
+      {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      return NextResponse.json(
+        { message: errorData?.message, error: errorData },
+        { status: response.status }
+      );
+    }
+
+    // Get response data from external API
+    const data = await response.json();
+
+    return NextResponse.json(
+      { 
+        success: true, 
+        message: 'Extract uploaded file successfully',
+        data: data 
+      }, 
+      { status: 200 }
+    );
+
+  } catch (error) {
+    console.error('Extract uploaded file error:', error);
+    return NextResponse.json(
+      { message: 'Failed to extract uploaded file ', error: String(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/api/profile/extract-data/route.ts

@@ -6,7 +6,8 @@ import { NextResponse } from 'next/server';
 export async function POST(request: NextRequest) {
   try {
     // Get FormData from request
-    const body = await request.json();
+    const { searchParams } = new URL(request.url);
+    const filename = searchParams.get('filename');
     
     // Get auth token from cookies
     const cookieStore = await cookies();
@@ -22,7 +23,7 @@ export async function POST(request: NextRequest) {
     const url = new URL(
       "https://byteriot-candidateexplorer.hf.space/CandidateExplorer/profile/extract_profile"
     );
-    url.searchParams.append("filename", body.filename);
+    url.searchParams.append("filename", filename ?? "");
 
     // Forward the FormData to external API
     const response = await fetch(

src/app/recruitment/upload/page.tsx

@@ -29,7 +29,7 @@ const fetchUserFiles = async (userId: string): Promise<UploadedFile[]> => {
     throw new Error('Failed to fetch files');
   }
   const data = await response.json();
-  
+
   return data.map((file: any) => ({
     id: file.file_id,              // ← Map file_id to id
     filename: file.filename,
@@ -44,7 +44,7 @@ const fetchUserFiles = async (userId: string): Promise<UploadedFile[]> => {
 const uploadFile = async (file: File, signal?: AbortSignal) => {
   const formData = new FormData();
   formData.append('files', file);
-  
+
   const response = await fetch('/api/file/upload', {
     method: 'POST',
     body: formData,
@@ -72,8 +72,8 @@ const extractFileData = async (filename: string) => {
   return response.json();
 };
 
-const deleteFileApi = async (fileId: string) => {
-  const response = await fetch(`/api/file/delete?fileId=${fileId}`, {
+const deleteFileApi = async (filename: string) => {
+  const response = await fetch(`/api/file/delete?filename=${filename}`, {
     method: 'DELETE',
   });
 
@@ -91,19 +91,19 @@ export default function CandidateExplorer() {
   const [dragActive, setDragActive] = useState(false);
   const [uploadingFiles, setUploadingFiles] = useState<UploadedFile[]>([]);
   const [extractingFiles, setExtractingFiles] = useState<Set<string>>(new Set());
-  const { user } = useAuth()  
-  
+  const { user } = useAuth()
+
   const queryClient = useQueryClient();
   const abortControllersRef = useRef<Map<string, AbortController>>(new Map());
 
   // ============================================================================
   // FETCH USER FILES (AUTO-FETCHES ON MOUNT)
   // ============================================================================
-  const { 
-    data: serverFiles = [], 
-    isLoading, 
+  const {
+    data: serverFiles = [],
+    isLoading,
     error,
-    refetch 
+    refetch
   } = useQuery({
     queryKey: ['userFiles', user],
     queryFn: () => fetchUserFiles(user?.user_id ?? ""),
@@ -121,30 +121,48 @@ export default function CandidateExplorer() {
   // EXTRACT MUTATION
   // ============================================================================
   const extractMutation = useMutation({
-    mutationFn: ({ filename }: { filename: string }) => extractFileData(filename),
+    mutationFn: ({ filename, fileId }: { filename: string; fileId: string }) => extractFileData(filename),
+    onMutate: (variables) => {
+      // Add to extracting set immediately
+      setExtractingFiles(prev => new Set(prev).add(variables.fileId));
+    },
     onSuccess: (data, variables) => {
-      // Update the file in server data
-      queryClient.invalidateQueries({ queryKey: ['userFiles', user?.user_id] });
-      
       // Remove from extracting set
       setExtractingFiles(prev => {
         const newSet = new Set(prev);
-        const file = allFiles.find(f => f.filename === variables.filename);
-        if (file) newSet.delete(file.id);
+        newSet.delete(variables.fileId);
         return newSet;
       });
+
+      // Update the file in server data
+      queryClient.invalidateQueries({ queryKey: ['userFiles', user?.user_id] });
     },
     onError: (error, variables) => {
       // Remove from extracting set
       setExtractingFiles(prev => {
         const newSet = new Set(prev);
-        const file = allFiles.find(f => f.filename === variables.filename);
-        if (file) newSet.delete(file.id);
+        newSet.delete(variables.fileId);
         return newSet;
       });
+
+      // Update the specific file with error status
+      queryClient.setQueryData(['userFiles', user?.user_id], (oldData: UploadedFile[] | undefined) => {
+        if (!oldData) return oldData;
+
+        return oldData.map(file =>
+          file.id === variables.fileId
+            ? {
+              ...file,
+              extractStatus: 'extract_error' as const,
+              extractError: error instanceof Error ? error.message : 'Extraction failed'
+            }
+            : file
+        );
+      });
     },
   });
 
+
   // ============================================================================
   // DELETE MUTATION
   // ============================================================================
@@ -159,7 +177,7 @@ export default function CandidateExplorer() {
   // UPLOAD SINGLE FILE
   // ============================================================================
   const uploadSingleFile = async (
-    file: File, 
+    file: File,
     tempId: string,
     abortController: AbortController
   ): Promise<{ success: boolean; data?: any; error?: string; cancelled?: boolean }> => {
@@ -170,10 +188,10 @@ export default function CandidateExplorer() {
       if (error instanceof Error && error.name === 'AbortError') {
         return { success: false, cancelled: true };
       }
-      
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : 'Upload failed' 
+
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Upload failed'
       };
     }
   };
@@ -184,7 +202,7 @@ export default function CandidateExplorer() {
   const uploadToAPI = async (files: FileList) => {
     const tempFiles: UploadedFile[] = Array.from(files).map((file) => {
       const id = `temp-${Date.now()}-${Math.random()}`;
-      
+
       return {
         id,
         filename: file.name,
@@ -202,7 +220,7 @@ export default function CandidateExplorer() {
       const uploadPromises = tempFiles.map((tempFile, index) => {
         const abortController = new AbortController();
         abortControllersRef.current.set(tempFile.id, abortController);
-        
+
         return uploadSingleFile(files[index], tempFile.id, abortController);
       });
 
@@ -232,10 +250,10 @@ export default function CandidateExplorer() {
             };
           } else {
             abortControllersRef.current.delete(file.id);
-            const errorMessage = result.status === 'fulfilled' 
-              ? result.value.error 
+            const errorMessage = result.status === 'fulfilled'
+              ? result.value.error
               : 'Upload failed';
-            
+
             return {
               ...file,
               uploadStatus: 'error' as const,
@@ -270,8 +288,7 @@ export default function CandidateExplorer() {
   // EXTRACT DATA FROM FILE
   // ============================================================================
   const extractData = async (fileId: string, filename: string) => {
-    setExtractingFiles(prev => new Set(prev).add(fileId));
-    extractMutation.mutate({ filename });
+    extractMutation.mutate({ filename, fileId });
   };
 
   // ============================================================================
@@ -280,7 +297,6 @@ export default function CandidateExplorer() {
   const retryExtraction = async (fileId: string, filename: string) => {
     await extractData(fileId, filename);
   };
-
   // ============================================================================
   // HANDLE FILE DRAG EVENTS
   // ============================================================================
@@ -301,7 +317,7 @@ export default function CandidateExplorer() {
     e.preventDefault();
     e.stopPropagation();
     setDragActive(false);
-    
+
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       await uploadToAPI(e.dataTransfer.files);
     }
@@ -322,7 +338,7 @@ export default function CandidateExplorer() {
   // ============================================================================
   const deleteFile = (fileId: string) => {
     const file = allFiles.find(f => f.id === fileId);
-    
+
     // If uploading, abort
     if (file?.uploadStatus === 'uploading') {
       const abortController = abortControllersRef.current.get(fileId);
@@ -333,9 +349,9 @@ export default function CandidateExplorer() {
       setUploadingFiles(prev => prev.filter(f => f.id !== fileId));
       return;
     }
-    
+
     // If uploaded, delete from server
-    deleteMutation.mutate(fileId);
+    deleteMutation.mutate(file?.filename ?? "");
   };
 
   // ============================================================================
@@ -343,7 +359,7 @@ export default function CandidateExplorer() {
   // ============================================================================
   const totalCVs = allFiles.filter(f => f.uploadStatus === 'success').length;
   const profilesExtracted = allFiles.filter(f => f.extractStatus === 'extracted').length;
-  const extractionRate = totalCVs > 0 ? ((profilesExtracted / totalCVs) * 100).toFixed(1) : '0.0';
+  const extractionRate = totalCVs > 0 ? ((profilesExtracted / totalCVs) * 100).toFixed(0) : '0';
   const uploadingCount = uploadingFiles.filter(f => f.uploadStatus === 'uploading').length;
   const extractingCount = extractingFiles.size;
 
@@ -362,17 +378,17 @@ export default function CandidateExplorer() {
   // ============================================================================
   const renderStatusBadge = (file: UploadedFile) => {
     const displayFile = getFileDisplayStatus(file);
-    
+
     // Upload status
     if (displayFile.uploadStatus === 'uploading') {
       return (
-        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
           <Loader2 className="w-3 h-3 animate-spin" />
           Uploading
         </span>
       );
     }
-    
+
     if (displayFile.uploadStatus === 'error') {
       return (
         <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">
@@ -428,261 +444,260 @@ export default function CandidateExplorer() {
   };
 
   return (
-      <div className="">
-        {/* ============================================================================ */}
-        {/* TITLE AND DESCRIPTION */}
-        {/* ============================================================================ */}
-        <div className="mb-8">
-          <p className="text-gray-600">
-            Upload CVs, extract candidate profiles, and track your workspace.
-          </p>
+    <div className="">
+      {/* ============================================================================ */}
+      {/* TITLE AND DESCRIPTION */}
+      {/* ============================================================================ */}
+      <div className="mb-8">
+        <p className="text-gray-600">
+          Upload CVs, extract candidate profiles, and track your workspace.
+        </p>
+      </div>
+
+      {/* ============================================================================ */}
+      {/* DASHBOARD STATISTICS CARDS */}
+      {/* ============================================================================ */}
+      <section className="mb-8">
+        <div className="flex items-center gap-2 mb-4">
+          <BarChart3 className="w-5 h-5 text-green-600" />
+          <h2 className="text-lg font-semibold text-green-600">Dashboard Overview</h2>
         </div>
 
-        {/* ============================================================================ */}
-        {/* DASHBOARD STATISTICS CARDS */}
-        {/* ============================================================================ */}
-        <section className="mb-8">
-          <div className="flex items-center gap-2 mb-4">
-            <BarChart3 className="w-5 h-5 text-blue-600" />
-            <h2 className="text-lg font-semibold text-blue-600">Dashboard Overview</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Total CV Card */}
+          <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
+            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+              <Upload className="w-4 h-4" />
+              TOTAL CV
+            </div>
+            <div className="text-5xl font-bold text-green-600 mb-1">{totalCVs}</div>
+            <div className="text-sm text-gray-500">
+              files in your workspace
+              {uploadingCount > 0 && (
+                <span className="ml-2 text-green-600">({uploadingCount} uploading)</span>
+              )}
+            </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {/* Total CVs Card */}
-            <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-              <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
-                <Upload className="w-4 h-4" />
-                TOTAL CVS UPLOADED
-              </div>
-              <div className="text-5xl font-bold text-blue-600 mb-1">{totalCVs}</div>
-              <div className="text-sm text-gray-500">
-                files in your workspace
-                {uploadingCount > 0 && (
-                  <span className="ml-2 text-blue-600">({uploadingCount} uploading)</span>
-                )}
-              </div>
+          {/* Profiles Extracted Card */}
+          <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
+            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+              <CheckSquare className="w-4 h-4" />
+              PROFILES EXTRACTED
             </div>
-
-            {/* Profiles Extracted Card */}
-            <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-              <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
-                <CheckSquare className="w-4 h-4" />
-                PROFILES EXTRACTED
-              </div>
-              <div className="text-5xl font-bold text-blue-600 mb-1">{profilesExtracted}</div>
-              <div className="text-sm text-gray-500">
-                structured profiles
-                {extractingCount > 0 && (
-                  <span className="ml-2 text-purple-600">({extractingCount} extracting)</span>
-                )}
-              </div>
+            <div className="text-5xl font-bold text-green-600 mb-1">{profilesExtracted}</div>
+            <div className="text-sm text-gray-500">
+              structured profiles
+              {extractingCount > 0 && (
+                <span className="ml-2 text-purple-600">({extractingCount} extracting)</span>
+              )}
             </div>
+          </div>
 
-            {/* Extraction Rate Card */}
-            <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-              <div className="flex items-center gap-2 text-blue-600 text-sm font-medium mb-3">
-                <TrendingUp className="w-4 h-4" />
-                EXTRACTION RATE
-              </div>
-              <div className="text-5xl font-bold text-yellow-500 mb-1">{extractionRate}%</div>
-              <div className="text-sm text-gray-500">of uploaded CVs processed</div>
+          {/* Extraction Rate Card */}
+          <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
+            <div className="flex items-center gap-2 text-green-600 text-sm font-medium mb-3">
+              <TrendingUp className="w-4 h-4" />
+              EXTRACTION RATE
             </div>
+            <div className="text-5xl font-bold text-yellow-500 mb-1">{extractionRate}%</div>
+            <div className="text-sm text-gray-500">of uploaded CV processed</div>
           </div>
-        </section>
-
-        {/* ============================================================================ */}
-        {/* UPLOAD CV SECTION */}
-        {/* ============================================================================ */}
-        <section className="mb-8">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4">Upload Candidate CVs</h2>
-          
-          {/* File Upload Dropzone */}
-          <div
-            className={`relative border-2 border-dashed rounded-lg p-12 mb-6 transition-colors ${
-              dragActive
-                ? 'border-blue-500 bg-blue-50'
-                : 'border-gray-300 bg-white'
+        </div>
+      </section>
+
+      {/* ============================================================================ */}
+      {/* UPLOAD CV SECTION */}
+      {/* ============================================================================ */}
+      <section className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">Upload Candidate CVs</h2>
+
+        {/* File Upload Dropzone */}
+        <div
+          className={`relative border-2 border-dashed rounded-lg p-12 mb-6 transition-colors ${dragActive
+              ? 'border-green-500 bg-green-50'
+              : 'border-gray-300 bg-white'
             } ${uploadingCount > 0 ? 'pointer-events-none opacity-60' : ''}`}
-            onDragEnter={handleDrag}
-            onDragLeave={handleDrag}
-            onDragOver={handleDrag}
-            onDrop={handleDrop}
-          >
-            {/* Loading Overlay */}
-            {uploadingCount > 0 && (
-              <div className="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-lg z-10">
-                <div className="text-center">
-                  <Loader2 className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
-                  <p className="text-gray-700 font-medium">Uploading files...</p>
-                  <p className="text-sm text-gray-500 mt-1">
-                    {uploadingCount} file(s) in progress
-                  </p>
-                </div>
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+        >
+          {/* Loading Overlay */}
+          {uploadingCount > 0 && (
+            <div className="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-lg z-10">
+              <div className="text-center">
+                <Loader2 className="w-12 h-12 text-green-600 animate-spin mx-auto mb-4" />
+                <p className="text-gray-700 font-medium">Uploading files...</p>
+                <p className="text-sm text-gray-500 mt-1">
+                  {uploadingCount} file(s) in progress
+                </p>
               </div>
-            )}
+            </div>
+          )}
 
-            <div className="text-center">
-              <div className="mb-4 flex justify-center">
-                <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
-                  <Upload className="w-8 h-8 text-gray-400" />
-                </div>
+          <div className="text-center">
+            <div className="mb-4 flex justify-center">
+              <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
+                <Upload className="w-8 h-8 text-gray-400" />
               </div>
-              <p className="text-gray-700 font-medium mb-2">
-                Drop PDF files here or click to browse
-              </p>
-              <p className="text-gray-500 text-sm mb-6">
-                Drag and drop files here
-                <br />
-                Limit 200MB per file • PDF
-              </p>
-              <label htmlFor="file-upload" className="cursor-pointer">
-                <span className="inline-block bg-blue-100 text-blue-600 px-6 py-2 rounded-md font-medium hover:bg-blue-200 transition-colors">
-                  Browse files
-                </span>
-                <input
-                  id="file-upload"
-                  type="file"
-                  className="hidden"
-                  multiple
-                  accept=".pdf"
-                  onChange={handleChange}
-                  disabled={uploadingCount > 0}
-                />
-              </label>
             </div>
+            <p className="text-gray-700 font-medium mb-2">
+              Drop PDF files here or click to browse
+            </p>
+            <p className="text-gray-500 text-sm mb-6">
+              Drag and drop files here
+              <br />
+              Limit 3MB per file • PDF
+            </p>
+            <label htmlFor="file-upload" className="cursor-pointer">
+              <span className="inline-block bg-green-100 text-green-600 px-6 py-2 rounded-md font-medium hover:bg-green-200 transition-colors">
+                Browse files
+              </span>
+              <input
+                id="file-upload"
+                type="file"
+                className="hidden"
+                multiple
+                accept=".pdf"
+                onChange={handleChange}
+                disabled={uploadingCount > 0}
+              />
+            </label>
           </div>
-        </section>
-
-        {/* ============================================================================ */}
-        {/* UPLOADED FILES LIST SECTION */}
-        {/* ============================================================================ */}
-        <section>
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-xl font-semibold text-gray-700">Your Uploaded Files</h2>
-            <button 
-              onClick={() => refetch()}
-              disabled={isLoading}
-              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors disabled:opacity-50"
-            >
-              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh List
-            </button>
-          </div>
+        </div>
+      </section>
+
+      {/* ============================================================================ */}
+      {/* UPLOADED FILES LIST SECTION */}
+      {/* ============================================================================ */}
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-gray-700">Your Uploaded Files</h2>
+          <button
+            onClick={() => refetch()}
+            disabled={isLoading}
+            className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-md font-medium hover:bg-green-700 transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+            Refresh List
+          </button>
+        </div>
 
-          {/* Files Table */}
-          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
-            <table className="w-full">
-              <thead className="bg-gray-50 border-b border-gray-200">
+        {/* Files Table */}
+        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
+                  Filename
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
+                  Status
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
+                  Uploaded
+                </th>
+                <th className="text-right px-6 py-3 text-sm font-medium text-gray-700">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {isLoading ? (
                 <tr>
-                  <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
-                    Filename
-                  </th>
-                  <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
-                    Status
-                  </th>
-                  <th className="text-left px-6 py-3 text-sm font-medium text-gray-700">
-                    Uploaded
-                  </th>
-                  <th className="text-right px-6 py-3 text-sm font-medium text-gray-700">
-                    Actions
-                  </th>
+                  <td colSpan={4} className="px-6 py-8 text-center">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600" />
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                {isLoading ? (
-                  <tr>
-                    <td colSpan={4} className="px-6 py-8 text-center">
-                      <Loader2 className="w-6 h-6 animate-spin mx-auto text-blue-600" />
-                    </td>
-                  </tr>
-                ) : error ? (
-                  <tr>
-                    <td colSpan={4} className="px-6 py-8 text-center text-red-600">
-                      Failed to load files. Please try again.
-                    </td>
-                  </tr>
-                ) : allFiles.length === 0 ? (
-                  <tr>
-                    <td colSpan={4} className="px-6 py-8 text-center text-gray-500">
-                      No files uploaded yet
-                    </td>
-                  </tr>
-                ) : (
-                  allFiles.map((file) => {
-                    const displayFile = getFileDisplayStatus(file);
-                    return (
-                      <tr key={file.id} className="border-b border-gray-100 hover:bg-gray-50">
-                        <td className="px-6 py-4">
-                          <div>
-                            <p className="text-sm font-medium text-gray-900">{file.filename}</p>
-                            {file.uploadError && (
-                              <p className="text-xs text-red-600 mt-1">Upload: {file.uploadError}</p>
-                            )}
-                            {file.extractError && (
-                              <p className="text-xs text-orange-600 mt-1">Extract: {file.extractError}</p>
-                            )}
-                          </div>
-                        </td>
-                        <td className="px-6 py-4">
-                          {renderStatusBadge(file)}
-                        </td>
-                        <td className="px-6 py-4 text-sm text-gray-600">
-                          {file.uploadStatus === 'uploading' ? (
-                            <span className="text-gray-400">In progress...</span>
-                          ) : (
-                            new Date(file.uploaded).toLocaleString('en-US', {
-                              year: 'numeric',
-                              month: '2-digit',
-                              day: '2-digit',
-                              hour: '2-digit',
-                              minute: '2-digit',
-                              hour12: false
-                            }).replace(',', '')
+              ) : error ? (
+                <tr>
+                  <td colSpan={4} className="px-6 py-8 text-center text-red-600">
+                    Failed to load files. Please try again.
+                  </td>
+                </tr>
+              ) : allFiles.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-6 py-8 text-center text-gray-500">
+                    No files uploaded yet
+                  </td>
+                </tr>
+              ) : (
+                allFiles.map((file) => {
+                  const displayFile = getFileDisplayStatus(file);
+                  return (
+                    <tr key={file.id} className="border-b border-gray-100 hover:bg-gray-50">
+                      <td className="px-6 py-4">
+                        <div>
+                          <p className="text-sm font-medium text-gray-900">{file.filename}</p>
+                          {file.uploadError && (
+                            <p className="text-xs text-red-600 mt-1">Upload: {file.uploadError}</p>
                           )}
-                        </td>
-                        <td className="px-6 py-4">
-                          <div className="flex items-center justify-end gap-2">
-                            {/* Extract Button */}
-                            {file.uploadStatus === 'success' && 
-                             displayFile.extractStatus !== 'extracted' && 
-                             displayFile.extractStatus !== 'extracting' && (
+                          {file.extractError && (
+                            <p className="text-xs text-orange-600 mt-1">Extract: {file.extractError}</p>
+                          )}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        {renderStatusBadge(file)}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-gray-600">
+                        {file.uploadStatus === 'uploading' ? (
+                          <span className="text-gray-400">In progress...</span>
+                        ) : (
+                          new Date(file.uploaded).toLocaleString('en-US', {
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            hour12: false
+                          }).replace(',', '')
+                        )}
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="flex items-center justify-end gap-2">
+                          {/* Extract Button */}
+                          {file.uploadStatus === 'success' &&
+                            displayFile.extractStatus !== 'extracted' &&
+                            displayFile.extractStatus !== 'extracting' && (
                               <button
                                 onClick={() => extractData(file.id, file.filename)}
-                                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+                                className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors"
                               >
                                 <FileText className="w-3 h-3" />
                                 Extract
                               </button>
                             )}
 
-                            {/* Retry Extract Button */}
-                            {file.extractStatus === 'extract_error' && (
-                              <button
-                                onClick={() => retryExtraction(file.id, file.filename)}
-                                className="text-xs text-purple-600 hover:text-purple-800 font-medium"
-                              >
-                                Retry Extract
-                              </button>
-                            )}
-
-                            {/* Delete Button */}
+                          {/* Retry Extract Button */}
+                          {file.extractStatus === 'extract_error' && (
                             <button
-                              onClick={() => deleteFile(file.id)}
-                              className="text-xs text-red-600 hover:text-red-800 font-medium"
-                              disabled={file.uploadStatus === 'uploading' || displayFile.extractStatus === 'extracting'}
+                              onClick={() => retryExtraction(file.id, file.filename)}
+                              className="text-xs text-purple-600 hover:text-purple-800 font-medium"
                             >
-                              {file.uploadStatus === 'uploading' ? 'Cancel' : 'Delete'}
+                              Retry Extract
                             </button>
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })
-                )}
-              </tbody>
-            </table>
-          </div>
-        </section>
-      </div>
+                          )}
+
+                          {/* Delete Button */}
+                          <button
+                            onClick={() => deleteFile(file.id)}
+                            className="text-xs text-red-600 hover:text-red-800 font-medium"
+                            disabled={file.uploadStatus === 'uploading' || displayFile.extractStatus === 'extracting'}
+                          >
+                            {file.uploadStatus === 'uploading' ? 'Cancel' : 'Delete'}
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
   );
 }

src/components/dashboard/metrics-row.tsx

@@ -4,6 +4,8 @@
 import { Card } from "@/components/ui/card";
 import { authFetch } from "@/lib/api";
 import { useQuery } from "@tanstack/react-query";
+import { Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 type ScoreData = {
   data: {
@@ -24,7 +26,7 @@ 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">
@@ -59,7 +61,7 @@ function CircularProgress({ percentage }: { percentage: number }) {
 }
 
 export function MetricsRow() {
-
+  const router = useRouter()
   const fetchScore = async (): Promise<ScoreData> => {
     const res = await authFetch(`/api/file/score_card`)
     if (!res.ok) throw new Error("Failed to fetch score")
@@ -91,6 +93,10 @@ export function MetricsRow() {
     hour12: true
   });
 
+  const handleAddData = () => {
+    router.push("/recruitment/upload")
+  }
+
   if (loadingScore) {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -111,36 +117,41 @@ export function MetricsRow() {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div className="grid grid-cols-1 gap-4">
       {/* 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 className="flex justify-between items-center">
+          <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">
+                  Profile Extracted
+                </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>
+                  <strong>{scoreData.data.total_extracted}</strong> / <strong>{scoreData.data.total_file}</strong>Total Profiles
+                </span>
+              </div>
             </div>
           </div>
+          <button onClick={handleAddData} className="cursor-pointer w-10 h-10 rounded-full bg-[#22c55e] text-white flex items-center justify-center hover:bg-[#16a34a] transition-colors">
+            <Plus className="w-5 h-5" />
+          </button>
         </div>
       </Card>
 
       {/* Processed Card */}
-      <Card className="p-6 border bg-white hover:shadow-md transition-shadow">
+      {/* <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">
@@ -150,13 +161,13 @@ export function MetricsRow() {
                 Total {scoreData.data.total_file}
               </div>
             </div>
-            
+
             <div className="text-xs text-gray-500">
               Last Processed: {lastProcessed}
             </div>
           </div>
         </div>
-      </Card>
+      </Card> */}
     </div>
   );
 }