From 4b7e929470c6f3f29ee697ed63be3a4d025a9654 Mon Sep 17 00:00:00 2001
From: Mark Siazon <67873853+Iron-Mark@users.noreply.github.com>
Date: Wed, 1 Jul 2026 11:01:34 +0800
Subject: [PATCH] chore: polish admin tables and live smoke checks

---
 docs/demo-checklist.md                      |  1 +
 package.json                                |  1 +
 scripts/run-live-smoke.js                   | 42 +++++++++
 src/components/ui/table.tsx                 | 96 +++++++++++++++++++++
 src/components/ui/tabs.tsx                  |  2 +-
 src/pages/admin/accounts/index.tsx          | 68 ++++++++-------
 src/pages/admin/approvals/index.tsx         | 77 +++++++++--------
 src/pages/admin/audit-logs/index.tsx        | 58 +++++++------
 src/pages/admin/dashboard/index.tsx         | 10 ++-
 src/pages/faculty/profile/ProfileHeader.tsx |  4 +-
 src/pages/faculty/uploaded/index.tsx        |  2 +-
 11 files changed, 266 insertions(+), 95 deletions(-)
 create mode 100644 scripts/run-live-smoke.js
 create mode 100644 src/components/ui/table.tsx

diff --git a/docs/demo-checklist.md b/docs/demo-checklist.md
index 9646bfa..9940523 100644
--- a/docs/demo-checklist.md
+++ b/docs/demo-checklist.md
@@ -89,6 +89,7 @@ Local command:
 ```bash
 npm run seo:check
 npm run links:check
+npm run smoke:live
 ```
 
 ## Build Preview Commands
diff --git a/package.json b/package.json
index 4755dc1..381f17f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "security:scan": "node scripts/check-secrets.js",
     "seo:check": "node scripts/check-seo.js",
     "links:check": "node scripts/check-links.js",
+    "smoke:live": "node scripts/run-live-smoke.js",
     "preview": "vite preview",
     "preview:pages": "node scripts/serve-pages-preview.js",
     "test": "vitest --config vitest.config.ts"
diff --git a/scripts/run-live-smoke.js b/scripts/run-live-smoke.js
new file mode 100644
index 0000000..98f03c1
--- /dev/null
+++ b/scripts/run-live-smoke.js
@@ -0,0 +1,42 @@
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+const liveUrl = 'https://iron-mark.github.io/Hackathon-Smart-Profile-Management-System/';
+const liveBasePath = '/Hackathon-Smart-Profile-Management-System/';
+const smokeSpecs = [
+  'tests/deep-links.spec.ts',
+  'tests/seo.spec.ts',
+  'tests/public-demo-responsive.spec.ts',
+];
+
+const command = join(
+  process.cwd(),
+  'node_modules',
+  'playwright',
+  'cli.js'
+);
+
+if (!existsSync(command)) {
+  console.error('Playwright is not installed. Run npm ci before live smoke checks.');
+  process.exit(1);
+}
+
+const result = spawnSync(
+  process.execPath,
+  [command, 'test', ...smokeSpecs, '--reporter=line'],
+  {
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      PLAYWRIGHT_BASE_URL: liveUrl,
+      PLAYWRIGHT_BASE_PATH: liveBasePath,
+    },
+  }
+);
+
+if (result.error) {
+  console.error(result.error.message);
+}
+
+process.exit(result.status ?? 1);
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..537a3cd
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,96 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index fb01e0a..7bb16fe 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-foreground",
       className
     )}
     {...props}
diff --git a/src/pages/admin/accounts/index.tsx b/src/pages/admin/accounts/index.tsx
index 042d6c7..0c231a7 100644
--- a/src/pages/admin/accounts/index.tsx
+++ b/src/pages/admin/accounts/index.tsx
@@ -22,6 +22,14 @@ import {
   SelectValue 
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   deleteDemoAuthUser,
   deleteDemoStoredFilesForUser,
@@ -385,42 +393,44 @@ export default function AdminAccountsPage() {
               </CardHeader>
               <CardContent>
                 <div className="overflow-x-auto">
-                  <table className="w-full text-left table-auto">
-                    <thead>
-                      <tr className="border-b">
-                        <th className="px-4 py-2">Name</th>
-                        <th className="px-4 py-2">Email</th>
-                        <th className="px-4 py-2">Role</th>
-                        <th className="px-4 py-2">Status</th>
-                        <th className="px-4 py-2 text-right">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Email</TableHead>
+                        <TableHead>Role</TableHead>
+                        <TableHead>Status</TableHead>
+                        <TableHead className="text-right">Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
                       {isLoading ? (
                         Array.from({ length: 3 }).map((_, i) => (
-                          <tr key={i} className="border-b">
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-32" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-40" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-24" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-6 w-16 rounded-full" /></td>
-                            <td className="px-4 py-4 text-right"><Skeleton className="h-8 w-24 ml-auto" /></td>
-                          </tr>
+                          <TableRow key={i}>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-32" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-40" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-24" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-6 w-16 rounded-full" /></TableCell>
+                            <TableCell className="py-4 text-right">
+                              <Skeleton className="ml-auto h-8 w-24" />
+                            </TableCell>
+                          </TableRow>
                         ))
                       ) : (
                         users.map((user) => {
                           const deleteBlockReason = getDeleteBlockReason(user);
 
                           return (
-                          <tr key={user.id} className="border-b hover:bg-muted/60">
-                            <td className="px-4 py-2 font-medium">{user.name}</td>
-                            <td className="px-4 py-2">{user.email}</td>
-                            <td className="px-4 py-2 capitalize">{user.type || "faculty"}</td>
-                            <td className="px-4 py-2">
+                          <TableRow key={user.id}>
+                            <TableCell className="font-medium">{user.name}</TableCell>
+                            <TableCell>{user.email}</TableCell>
+                            <TableCell className="capitalize">{user.type || "faculty"}</TableCell>
+                            <TableCell>
                               <Badge variant="outline" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200">
                                 Active
                               </Badge>
-                            </td>
-                            <td className="px-4 py-2 text-right">
+                            </TableCell>
+                            <TableCell className="text-right">
                               <Button
                                 variant="outline"
                                 size="sm"
@@ -438,13 +448,13 @@ export default function AdminAccountsPage() {
                               >
                                 Delete
                               </Button>
-                            </td>
-                          </tr>
+                            </TableCell>
+                          </TableRow>
                           );
                         })
                       )}
-                    </tbody>
-                  </table>
+                    </TableBody>
+                  </Table>
                 </div>
                 {!isLoading && users.length === 0 && (
                   <p className="text-center text-muted-foreground py-4">
diff --git a/src/pages/admin/approvals/index.tsx b/src/pages/admin/approvals/index.tsx
index 149404c..8edb59d 100644
--- a/src/pages/admin/approvals/index.tsx
+++ b/src/pages/admin/approvals/index.tsx
@@ -5,6 +5,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import getFromDatabase from "@/tools/database/getFromDatabase";
 import updateDatabase from "@/tools/database/updateDatabase";
 import getFileFromFolder from "@/tools/buckets/getFileFromFolder";
@@ -101,42 +109,43 @@ export default function AdminApprovalsPage() {
                 <CardTitle>Faculty Submissions</CardTitle>
               </CardHeader>
               <CardContent>
-                  <table className="w-full text-left table-auto">
-                    <thead>
-                      <tr className="border-b">
-                        <th className="px-4 py-2">Faculty Name</th>
-                        <th className="px-4 py-2">Document Type</th>
-                        <th className="px-4 py-2">File Name</th>
-                        <th className="px-4 py-2">Date Submitted</th>
-                        <th className="px-4 py-2">Status</th>
-                        <th className="px-4 py-2 text-right">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Faculty Name</TableHead>
+                        <TableHead>Document Type</TableHead>
+                        <TableHead>File Name</TableHead>
+                        <TableHead>Date Submitted</TableHead>
+                        <TableHead>Status</TableHead>
+                        <TableHead className="text-right">Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
                       {isLoading ? (
                          Array.from({ length: 5 }).map((_, i) => (
-                          <tr key={i} className="border-b">
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-32" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-40" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-40" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-24" /></td>
-                            <td className="px-4 py-4"><Skeleton className="h-4 w-20" /></td>
-                            <td className="px-4 py-4 text-right"><Skeleton className="h-8 w-24 ml-auto" /></td>
-                          </tr>
+                          <TableRow key={i}>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-32" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-40" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-40" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-24" /></TableCell>
+                            <TableCell className="py-4"><Skeleton className="h-4 w-20" /></TableCell>
+                            <TableCell className="py-4 text-right">
+                              <Skeleton className="ml-auto h-8 w-24" />
+                            </TableCell>
+                          </TableRow>
                         ))
                       ) : (
                         submissions.map((submission) => (
-                          <tr
+                          <TableRow
                             key={submission.id}
-                            className="border-b hover:bg-muted/60"
                           >
-                            <td className="px-4 py-2">{submission.facultyName}</td>
-                            <td className="px-4 py-2">{submission.document_type}</td>
-                            <td className="px-4 py-2">{submission.file_name}</td>
-                            <td className="px-4 py-2">
+                            <TableCell>{submission.facultyName}</TableCell>
+                            <TableCell>{submission.document_type}</TableCell>
+                            <TableCell>{submission.file_name}</TableCell>
+                            <TableCell>
                               {new Date(submission.submitted_at).toLocaleDateString()}
-                            </td>
-                            <td className="px-4 py-2">
+                            </TableCell>
+                            <TableCell>
                               <Badge
                                 variant={
                                   submission.status === "Pending"
@@ -148,8 +157,8 @@ export default function AdminApprovalsPage() {
                               >
                                 {submission.status}
                               </Badge>
-                            </td>
-                            <td className="px-4 py-2 text-right">
+                            </TableCell>
+                            <TableCell className="text-right">
                               {submission.status === "Pending" && (
                                 <>
                                   <Button
@@ -186,12 +195,12 @@ export default function AdminApprovalsPage() {
                               >
                                 View
                               </Button>
-                            </td>
-                          </tr>
+                            </TableCell>
+                          </TableRow>
                         ))
                       )}
-                    </tbody>
-                  </table>
+                    </TableBody>
+                  </Table>
                 {!isLoading && submissions.length === 0 && (
                   <p className="text-center text-muted-foreground py-4">
                     No submissions found.
diff --git a/src/pages/admin/audit-logs/index.tsx b/src/pages/admin/audit-logs/index.tsx
index fc258d4..523fad7 100644
--- a/src/pages/admin/audit-logs/index.tsx
+++ b/src/pages/admin/audit-logs/index.tsx
@@ -12,6 +12,14 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import getFromDatabase from "@/tools/database/getFromDatabase";
 
 interface AuditLog {
@@ -133,39 +141,39 @@ export default function AdminAuditLogsPage() {
               </CardHeader>
               <CardContent>
                 <div className="overflow-x-auto">
-                    <table className="w-full text-left table-auto">
-                      <thead>
-                        <tr className="border-b">
-                          <th className="px-4 py-2">Timestamp</th>
-                          <th className="px-4 py-2">User</th>
-                          <th className="px-4 py-2">Action</th>
-                          <th className="px-4 py-2">Details</th>
-                        </tr>
-                      </thead>
-                      <tbody>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Timestamp</TableHead>
+                          <TableHead>User</TableHead>
+                          <TableHead>Action</TableHead>
+                          <TableHead>Details</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
                         {isLoading ? (
                           Array.from({ length: 5 }).map((_, i) => (
-                            <tr key={i} className="border-b">
-                              <td className="px-4 py-4"><Skeleton className="h-4 w-32" /></td>
-                              <td className="px-4 py-4"><Skeleton className="h-4 w-40" /></td>
-                              <td className="px-4 py-4"><Skeleton className="h-4 w-24" /></td>
-                              <td className="px-4 py-4"><Skeleton className="h-4 w-full" /></td>
-                            </tr>
+                            <TableRow key={i}>
+                              <TableCell className="py-4"><Skeleton className="h-4 w-32" /></TableCell>
+                              <TableCell className="py-4"><Skeleton className="h-4 w-40" /></TableCell>
+                              <TableCell className="py-4"><Skeleton className="h-4 w-24" /></TableCell>
+                              <TableCell className="py-4"><Skeleton className="h-4 w-full" /></TableCell>
+                            </TableRow>
                           ))
                         ) : (
                           filteredLogs.map((log) => (
-                            <tr key={log.id} className="border-b hover:bg-muted/60">
-                              <td className="px-4 py-2 whitespace-nowrap">
+                            <TableRow key={log.id}>
+                              <TableCell>
                                 {new Date(log.timestamp).toLocaleString()}
-                              </td>
-                              <td className="px-4 py-2">{log.user_email}</td>
-                              <td className="px-4 py-2 font-mono text-xs">{log.action}</td>
-                              <td className="px-4 py-2">{log.details}</td>
-                            </tr>
+                              </TableCell>
+                              <TableCell>{log.user_email}</TableCell>
+                              <TableCell className="font-mono text-xs">{log.action}</TableCell>
+                              <TableCell className="whitespace-normal">{log.details}</TableCell>
+                            </TableRow>
                           ))
                         )}
-                      </tbody>
-                    </table>
+                      </TableBody>
+                    </Table>
                 </div>
                 {!isLoading && filteredLogs.length === 0 && (
                   <p className="text-center text-muted-foreground py-4">
diff --git a/src/pages/admin/dashboard/index.tsx b/src/pages/admin/dashboard/index.tsx
index 222acc6..943114f 100644
--- a/src/pages/admin/dashboard/index.tsx
+++ b/src/pages/admin/dashboard/index.tsx
@@ -205,7 +205,7 @@ export default function AdminDashboard() {
                     <Activity className="h-4 w-4" />
                     Active Sessions (24h)
                   </CardTitle>
-                  <CardDescription className="text-green-800/80 dark:text-green-100/75">Recent seeded login activity</CardDescription>
+                  <CardDescription className="text-green-900 dark:text-green-100">Recent seeded login activity</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="text-3xl font-bold">{isLoading ? <Skeleton className="h-9 w-12" /> : activeSessions}</div>
@@ -218,7 +218,7 @@ export default function AdminDashboard() {
                     <ClipboardCheck className="h-4 w-4" />
                     Pending Approvals
                   </CardTitle>
-                  <CardDescription className="text-amber-800/80 dark:text-amber-100/75">Credentials waiting for review</CardDescription>
+                  <CardDescription className="text-amber-900 dark:text-amber-100">Credentials waiting for review</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="text-3xl font-bold">{isLoading ? <Skeleton className="h-9 w-12" /> : pendingApprovals}</div>
@@ -276,7 +276,11 @@ export default function AdminDashboard() {
                           ))}
                         </Pie>
                         <RechartsTooltip contentStyle={chartTooltipStyle} labelStyle={{ color: 'var(--popover-foreground)' }} />
-                        <Legend wrapperStyle={{ color: 'currentColor' }} />
+                        <Legend
+                          formatter={(value) => (
+                            <span className="text-foreground">{value}</span>
+                          )}
+                        />
                       </PieChart>
                     </ResponsiveContainer>
                   )}
diff --git a/src/pages/faculty/profile/ProfileHeader.tsx b/src/pages/faculty/profile/ProfileHeader.tsx
index 575bd70..0499791 100644
--- a/src/pages/faculty/profile/ProfileHeader.tsx
+++ b/src/pages/faculty/profile/ProfileHeader.tsx
@@ -123,7 +123,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           />
         ) : (
           <div className='absolute inset-0 flex items-center justify-center bg-muted/70 rounded-t-md'>
-            <span className='text-sm text-muted-foreground'>Upload Cover Photo</span>
+            <span className='text-sm text-foreground'>Upload Cover Photo</span>
           </div>
         )}
         <div className='absolute inset-0 bg-black/25 bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition-opacity duration-300 rounded-t-md'>
@@ -154,7 +154,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
                 className='object-cover w-full h-full'
               />
             ) : (
-              <div className='absolute inset-0 flex items-center justify-center bg-muted text-muted-foreground'>
+              <div className='absolute inset-0 flex items-center justify-center bg-muted text-foreground'>
                 <span className='text-xs'>No Image</span>
               </div>
             )}
diff --git a/src/pages/faculty/uploaded/index.tsx b/src/pages/faculty/uploaded/index.tsx
index 457e755..47d3697 100644
--- a/src/pages/faculty/uploaded/index.tsx
+++ b/src/pages/faculty/uploaded/index.tsx
@@ -311,7 +311,7 @@ export default function UploadedFilesPage() {
               />
               <label
                 htmlFor="file-upload"
-                className="mt-4 px-4 py-2 bg-blue-700 text-white rounded-md cursor-pointer hover:bg-blue-800 transition-colors dark:bg-blue-500 dark:text-blue-950 dark:hover:bg-blue-400"
+                className="mt-4 px-4 py-2 bg-blue-700 text-white rounded-md cursor-pointer hover:bg-blue-800 transition-colors dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800"
               >
                 Select File
               </label>