Fetch admin jobs for dashboard list

frontend/src/app/dashboard/jobs/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -19,22 +19,86 @@ import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Plus, Search, Edit, Trash2, Eye } from "lucide-react"
-import { mockJobs } from "@/lib/mock-data"
+import { adminJobsApi, transformApiJobToFrontend, type AdminJob } from "@/lib/api"
+
+type AdminJobRow = ReturnType<typeof transformApiJobToFrontend> & {
+  status?: string
+  applicationsCount?: number
+}
 
 export default function AdminJobsPage() {
   const [searchTerm, setSearchTerm] = useState("")
-  const [jobs, setJobs] = useState(mockJobs)
+  const [jobs, setJobs] = useState<AdminJob[]>([])
   const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const companyOptions = Array.from(new Set(mockJobs.map((job) => job.company))).sort()
+  const [isLoading, setIsLoading] = useState(true)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
-  const filteredJobs = jobs.filter(
+  useEffect(() => {
-    (job) =>
+    const loadJobs = async () => {
-      job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      try {
-      job.company.toLowerCase().includes(searchTerm.toLowerCase()),
+        setIsLoading(true)
+        setErrorMessage(null)
+        const jobsData = await adminJobsApi.list({ limit: 100 })
+        setJobs(jobsData.data ?? [])
+      } catch (error) {
+        console.error("Failed to load jobs:", error)
+        setErrorMessage("Unable to load jobs right now.")
+        setJobs([])
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadJobs()
+  }, [])
+
+  const jobRows = useMemo<AdminJobRow[]>(
+    () =>
+      jobs.map((job) => {
+        const mapped = transformApiJobToFrontend(job)
+        const applicationsCount =
+          typeof (job as { applicationsCount?: number }).applicationsCount === "number"
+            ? (job as { applicationsCount?: number }).applicationsCount
+            : 0
+        return {
+          ...mapped,
+          status: job.status,
+          applicationsCount,
+        }
+      }),
+    [jobs],
+  )
+
+  const companyOptions = useMemo(
+    () => Array.from(new Set(jobRows.map((job) => job.company))).sort(),
+    [jobRows],
+  )
+
+  const filteredJobs = useMemo(
+    () =>
+      jobRows.filter(
+        (job) =>
+          job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          job.company.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [jobRows, searchTerm],
+  )
+
+  const activeJobs = useMemo(
+    () =>
+      jobs.filter((job) =>
+        ["published", "open", "active"].includes(job.status?.toLowerCase() ?? ""),
+      ).length,
+    [jobs],
+  )
+
+  const totalApplications = useMemo(
+    () => jobRows.reduce((sum, job) => sum + (job.applicationsCount ?? 0), 0),
+    [jobRows],
   )
 
   const handleDeleteJob = (id: string) => {
-    setJobs(jobs.filter((job) => job.id !== id))
+    setJobs((prevJobs) => prevJobs.filter((job) => String(job.id) !== id))
   }
 
   return (
@@ -146,19 +210,21 @@ export default function AdminJobsPage() {
         <Card>
           <CardHeader className="pb-3">
             <CardDescription>Active jobs</CardDescription>
-            <CardTitle className="text-3xl">{jobs.length}</CardTitle>
+            <CardTitle className="text-3xl">{activeJobs}</CardTitle>
           </CardHeader>
         </Card>
         <Card>
           <CardHeader className="pb-3">
             <CardDescription>Applications</CardDescription>
-            <CardTitle className="text-3xl">{"436"}</CardTitle>
+            <CardTitle className="text-3xl">{totalApplications}</CardTitle>
           </CardHeader>
         </Card>
         <Card>
           <CardHeader className="pb-3">
             <CardDescription>Conversion rate</CardDescription>
-            <CardTitle className="text-3xl">12%</CardTitle>
+            <CardTitle className="text-3xl">
+              {jobs.length > 0 ? Math.round((activeJobs / jobs.length) * 100) : 0}%
+            </CardTitle>
           </CardHeader>
         </Card>
       </div>
@@ -192,33 +258,53 @@ export default function AdminJobsPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filteredJobs.map((job) => (
+              {isLoading ? (
-                <TableRow key={job.id}>
+                <TableRow>
-                  <TableCell className="font-medium">{job.title}</TableCell>
+                  <TableCell colSpan={7} className="text-center text-muted-foreground">
-                  <TableCell>{job.company}</TableCell>
+                    Loading jobs...
-                  <TableCell>{job.location}</TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">{job.type}</Badge>
-                  </TableCell>
-                  <TableCell>{((job.id.charCodeAt(0) * 7) % 50) + 10}</TableCell>
-                  <TableCell>
-                    <Badge variant="default">Active</Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <Button variant="ghost" size="icon">
-                        <Eye className="h-4 w-4" />
-                      </Button>
-                      <Button variant="ghost" size="icon">
-                        <Edit className="h-4 w-4" />
-                      </Button>
-                      <Button variant="ghost" size="icon" onClick={() => handleDeleteJob(job.id)}>
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </div>
                   </TableCell>
                 </TableRow>
-              ))}
+              ) : errorMessage ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center text-destructive">
+                    {errorMessage}
+                  </TableCell>
+                </TableRow>
+              ) : filteredJobs.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center text-muted-foreground">
+                    No jobs found.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredJobs.map((job) => (
+                  <TableRow key={job.id}>
+                    <TableCell className="font-medium">{job.title}</TableCell>
+                    <TableCell>{job.company}</TableCell>
+                    <TableCell>{job.location}</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{job.type}</Badge>
+                    </TableCell>
+                    <TableCell>{job.applicationsCount ?? 0}</TableCell>
+                    <TableCell>
+                      <Badge variant="default">{job.status ?? "Active"}</Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex items-center justify-end gap-2">
+                        <Button variant="ghost" size="icon">
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon">
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" onClick={() => handleDeleteJob(job.id)}>
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>