feat: student admin sidebar layout, add-member form, bulk CSV import, …

apps/web/AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

apps/web/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

apps/web/app/student-admin/layout.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { Briefcase, FileText, Users } from 'lucide-react'
+
+export default function StudentAdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex">
+      <nav className="flex flex-col gap-3 w-48 p-4 border-r border-border-subtle">
+        <Link href="/student-admin/job-feed" className="flex items-center gap-2 text-text-muted">
+          <Briefcase size={18} />
+          Job Feed
+        </Link>
+        <Link
+          href="/student-admin/applications"
+          className="flex items-center gap-2 text-text-muted"
+        >
+          <FileText size={18} />
+          My Applications
+        </Link>
+        <Link
+          href="/student-admin/members"
+          className="flex items-center gap-2 text-text-muted font-semibold"
+        >
+          <Users size={18} />
+          Members
+        </Link>
+      </nav>
+      <main className="flex-1 p-6">{children}</main>
+    </div>
+  )
+}

apps/web/app/student-admin/members/AddMemberForm.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+
+import { createMember, membersQueryKey } from './members-data'
+
+// ---- Schema ----
+export const memberSchema = z.object({
+  fullName: z.string().trim().min(1, 'Full name is required'),
+  usn: z
+    .string()
+    .trim()
+    .min(3, 'USN must be at least 3 characters')
+    .regex(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers, and underscores allowed')
+    .transform((value) => value.toUpperCase()),
+  email: z.string().trim().email('Enter a valid email address'),
+})
+
+export type MemberFormValues = z.infer<typeof memberSchema>
+
+export default function AddMembers() {
+  const queryClient = useQueryClient()
+
+  const form = useForm<MemberFormValues>({
+    resolver: zodResolver(memberSchema),
+    defaultValues: {
+      fullName: '',
+      usn: '',
+      email: '',
+    },
+  })
+
+  const mutation = useMutation({
+    mutationFn: (values: MemberFormValues) =>
+      createMember({ name: values.fullName, usn: values.usn, email: values.email }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: membersQueryKey })
+      form.reset()
+    },
+  })
+
+  function onSubmit(values: MemberFormValues) {
+    mutation.mutate(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-3 p-4">
+        <FormField
+          control={form.control}
+          name="fullName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Full Name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="usn"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>USN</FormLabel>
+              <FormControl>
+                <Input placeholder="USN" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="Email" type="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {mutation.isError && (
+          <p className="text-sm text-red-500">
+            {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}
+          </p>
+        )}
+
+        <Button type="submit" disabled={mutation.isPending} className="self-start">
+          {mutation.isPending ? 'Adding...' : 'Add Member'}
+        </Button>
+      </form>
+    </Form>
+  )
+}

apps/web/app/student-admin/members/AllMembersTable.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Search, Trash2 } from 'lucide-react'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+
+import { deleteMembers, fetchMembers, membersQueryKey } from './members-data'
+
+export default function AllMembersTable() {
+  const queryClient = useQueryClient()
+  const [selectedIds, setSelectedIds] = useState<number[]>([])
+  const [search, setSearch] = useState('')
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<number[] | null>(null)
+
+  const {
+    data: members = [],
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: membersQueryKey,
+    queryFn: fetchMembers,
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteMembers,
+    onSuccess: (_data, deletedIds) => {
+      queryClient.invalidateQueries({ queryKey: membersQueryKey })
+      setSelectedIds((prev) => prev.filter((id) => !deletedIds.includes(id)))
+    },
+  })
+
+  const filteredMembers = useMemo(() => {
+    const query = search.trim().toLowerCase()
+    if (!query) return members
+    return members.filter(
+      (member) =>
+        member.name.toLowerCase().includes(query) ||
+        member.usn.toLowerCase().includes(query) ||
+        member.email.toLowerCase().includes(query),
+    )
+  }, [members, search])
+
+  const filteredIds = filteredMembers.map((m) => m.id)
+  const allSelected = filteredIds.length > 0 && filteredIds.every((id) => selectedIds.includes(id))
+  const someSelected = filteredIds.some((id) => selectedIds.includes(id))
+
+  function toggle(id: number) {
+    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]))
+  }
+
+  function toggleAll(checked: boolean) {
+    setSelectedIds((prev) => {
+      if (checked) {
+        return Array.from(new Set([...prev, ...filteredIds]))
+      }
+      return prev.filter((id) => !filteredIds.includes(id))
+    })
+  }
+
+  function confirmDelete() {
+    if (pendingDeleteIds && pendingDeleteIds.length > 0) {
+      deleteMutation.mutate(pendingDeleteIds)
+    }
+    setPendingDeleteIds(null)
+  }
+
+  if (isLoading) {
+    return <p className="p-4 text-text-muted">Loading members…</p>
+  }
+
+  if (isError) {
+    return <p className="p-4 text-red-500">Couldn&apos;t load members.</p>
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-4">
+      <div className="relative max-w-xs">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" size={16} />
+        <Input
+          placeholder="Search by name, USN, or email"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-8"
+        />
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10">
+              <Checkbox
+                checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+                onCheckedChange={(checked) => toggleAll(Boolean(checked))}
+                aria-label="Select all members"
+              />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>USN</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Joined Date</TableHead>
+            <TableHead className="w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredMembers.map((member) => (
+            <TableRow key={member.id}>
+              <TableCell>
+                <Checkbox
+                  checked={selectedIds.includes(member.id)}
+                  onCheckedChange={() => toggle(member.id)}
+                  aria-label={`Select ${member.name}`}
+                />
+              </TableCell>
+              <TableCell>{member.name}</TableCell>
+              <TableCell>{member.usn}</TableCell>
+              <TableCell>{member.email}</TableCell>
+              <TableCell>{member.joinedDate}</TableCell>
+              <TableCell>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setPendingDeleteIds([member.id])}
+                  disabled={deleteMutation.isPending}
+                >
+                  <Trash2 size={16} className="text-red-500" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+          {filteredMembers.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center text-text-muted">
+                No members found.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      {deleteMutation.isError && (
+        <p className="text-sm text-red-500">
+          {deleteMutation.error instanceof Error
+            ? deleteMutation.error.message
+            : 'Failed to delete member(s)'}
+        </p>
+      )}
+
+      <Button
+        variant="destructive"
+        onClick={() => setPendingDeleteIds(selectedIds)}
+        disabled={selectedIds.length === 0 || deleteMutation.isPending}
+        className="self-start"
+      >
+        {deleteMutation.isPending ? 'Deleting…' : `Delete Selected (${selectedIds.length})`}
+      </Button>
+
+      <AlertDialog
+        open={pendingDeleteIds !== null}
+        onOpenChange={(open) => !open && setPendingDeleteIds(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {pendingDeleteIds && pendingDeleteIds.length === 1
+                ? 'Delete this member?'
+                : `Delete ${pendingDeleteIds?.length ?? 0} members?`}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently remove{' '}
+              {pendingDeleteIds && pendingDeleteIds.length === 1 ? 'this member' : 'these members'}{' '}
+              from the roster.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}