student table optimization adn docker testing

apps/admin/app/(main)/page.tsx

@@ -1,19 +1,13 @@
-import Login from '@/components/login';
 import Studs from '@/components/studs';
-import { db, admins } from '@workspace/db';
-import { auth, signIn, signOut } from '@/auth';
+import { db, students } from '@workspace/db';
+import { auth, signOut } from '@/auth';
 
 async function getStudents() {
   'use server';
-  const s = await db.select().from(admins);
+  const s = await db.select().from(students);
   console.log(s);
 }
 
-async function logIn() {
-  'use server';
-  await signIn('google');
-}
-
 async function logOut() {
   'use server';
   await signOut();
@@ -25,7 +19,6 @@ export default async function Page() {
     <div className="flex items-center justify-center min-h-svh">
       <div className="flex flex-col items-center justify-center gap-4">
         <h1 className="text-2xl font-bold">Hello admin {session?.user?.name}</h1>
-        {!session?.user && <Login action={logIn} />}
         <Studs action={getStudents} logOut={logOut} />
       </div>
     </div>

apps/admin/app/(main)/students/columns.tsx

@@ -6,20 +6,39 @@ const studentSelectSchema = createSelectSchema(students);
 export type Student = z.infer<typeof studentSelectSchema>;
 
 export const columns: ColumnDef<Student>[] = [
-  {
-    accessorKey: 'id',
-    header: 'ID',
-  },
   {
     accessorKey: 'firstName',
     header: 'First Name',
+    filterFn: 'includesString',
   },
   {
     accessorKey: 'lastName',
     header: 'Last Name',
+    filterFn: 'includesString',
+  },
+  {
+    accessorKey: 'rollNumber',
+    header: 'Roll Number',
+    filterFn: 'includesString',
   },
   {
     accessorKey: 'email',
     header: 'Email',
+    filterFn: 'includesString',
+  },
+  {
+    accessorKey: 'yearOfGraduation',
+    header: 'Year of Graduation',
+    filterFn: 'includesString',
+  },
+  {
+    accessorKey: 'degree',
+    header: 'Degree',
+    filterFn: 'includesString',
+  },
+  {
+    accessorKey: 'branch',
+    header: 'Branch',
+    filterFn: 'includesString',
   },
 ];

apps/admin/app/(main)/students/data-table.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 
 import {
   Table,
@@ -21,6 +27,7 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
   });
 
   return (

apps/admin/app/(main)/students/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from '@workspace/ui/components/button';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Students page error:', error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto py-10">
+      <div className="flex flex-col items-center justify-center space-y-4 p-8">
+        <h2 className="text-2xl font-semibold">Something went wrong!</h2>
+        <p className="text-muted-foreground text-center">
+          Failed to load students data. Please try again.
+        </p>
+        <Button onClick={reset} variant="outline">
+          Try again
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/admin/app/(main)/students/loading.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from '@workspace/ui/components/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@workspace/ui/components/table';
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-10">
+      <div className="space-y-4">
+        {/* Header skeleton */}
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-semibold tracking-tight">Students</h1>
+          <Skeleton className="h-4 w-24" />
+        </div>
+        
+        {/* Table skeleton */}
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>
+                  <Skeleton className="h-4 w-8" />
+                </TableHead>
+                <TableHead>
+                  <Skeleton className="h-4 w-20" />
+                </TableHead>
+                <TableHead>
+                  <Skeleton className="h-4 w-20" />
+                </TableHead>
+                <TableHead>
+                  <Skeleton className="h-4 w-32" />
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 8 }).map((_, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <Skeleton className="h-4 w-8" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-24" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-24" />
+                  </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-4 w-40" />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/admin/app/(main)/students/page.tsx

@@ -3,16 +3,32 @@ import { DataTable } from './data-table';
 import { db, students } from '@workspace/db';
 
 async function getData(): Promise<Student[]> {
-  const data = db.select().from(students);
+  const data = await db.select().from(students);
   return data;
 }
 
-export default async function DemoPage() {
+async function StudentsTable() {
   const data = await getData();
 
   return (
     <div className="container mx-auto py-10">
-      <DataTable columns={columns} data={data} />
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-semibold tracking-tight">Students</h1>
+          <div className="text-sm text-muted-foreground">
+            {data.length} {data.length === 1 ? 'student' : 'students'} total
+          </div>
+        </div>
+        <DataTable columns={columns} data={data} />
+      </div>
     </div>
   );
 }
+
+export default function StudentsPage() {
+  return (
+      <StudentsTable />
+  );
+}
+
+export const dynamic = 'force-dynamic';