Repository navigation
feat: student admin sidebar layout, add-member form, bulk CSV import, … #39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 14 commits
de6f4f6
f6671ef
d29dee4
c29d081
7cbee60
d81d113
f757018
70f4ddb
f1c9a4f
2d985e4
3806596
c41b04b
a8ad35a
c2be0b6
2f21d8b
8d548c9
5ae8040
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 --> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @AGENTS.md |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| '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().min(1, 'Full name is required'), | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. fullName schema lacks .trim(), allowing whitespace only strings (" ") |
||
| usn: z | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. usn schema lacks .trim() and uppercase transformation. |
||
| .string() | ||
| .min(3, 'USN must be at least 3 characters') | ||
| .regex(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers, and underscores allowed'), | ||
| email: z.string().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> | ||
| ) | ||
| } | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add a Master "Select All" Checkbox, add a search bar, and change "Username" to "USN" |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| 'use client' | ||
|
|
||
| import { useMemo, useState } from 'react' | ||
| import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' | ||
| import { Search, Trash2 } from 'lucide-react' | ||
|
|
||
| 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 { | ||
| data: members = [], | ||
| isLoading, | ||
| isError, | ||
| } = useQuery({ | ||
| queryKey: membersQueryKey, | ||
| queryFn: fetchMembers, | ||
| }) | ||
|
|
||
| const deleteMutation = useMutation({ | ||
| mutationFn: deleteMembers, | ||
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ queryKey: membersQueryKey }) | ||
| setSelectedIds([]) | ||
| }, | ||
| }) | ||
|
|
||
| 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)) | ||
| }) | ||
| } | ||
|
|
||
| if (isLoading) { | ||
| return <p className="p-4 text-text-muted">Loading members…</p> | ||
| } | ||
|
|
||
| if (isError) { | ||
| return <p className="p-4 text-red-500">Couldn'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={() => deleteMutation.mutate([member.id])} | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Single and bulk delete actions execute instantly without a user confirmation step. |
||
| 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={() => deleteMutation.mutate(selectedIds)} | ||
| disabled={selectedIds.length === 0 || deleteMutation.isPending} | ||
| className="self-start" | ||
| > | ||
| {deleteMutation.isPending ? 'Deleting…' : `Delete Selected (${selectedIds.length})`} | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } | ||
Uh oh!
There was an error while loading. Please reload this page.