8a:I[903690,["/chat-static/_next/static/immutable/chunks/32axr_pseasmq.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/2q0n9qixaq0be.js","/chat-static/_next/static/immutable/chunks/22ehkuw7gr_st.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/28j2izey1ifu8.js","/chat-static/_next/static/immutable/chunks/1lp1y_io08617.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/41qt-s4g-5zmi.js","/chat-static/_next/static/immutable/chunks/3b3l5lmcnswqe.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0g_lc1s4ll_38.js","/chat-static/_next/static/immutable/chunks/2ixxgji-t_b6p.js","/chat-static/_next/static/immutable/chunks/0w4cll98nyi6w.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/1h6vbbfnz7st2.js","/chat-static/_next/static/immutable/chunks/13nl1tyyeg6oj.js","/chat-static/_next/static/immutable/chunks/3czebwmdna5c8.js","/chat-static/_next/static/immutable/chunks/3cvaae3ahu7jg.js","/chat-static/_next/static/immutable/chunks/0e691hxxfgnc-.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0ddmyyh5gz33h.js","/chat-static/_next/static/immutable/chunks/15dsuc35dgog1.js"],"ExplicitChatIdProvider"] 8b:I[838238,["/chat-static/_next/static/immutable/chunks/32axr_pseasmq.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/2q0n9qixaq0be.js","/chat-static/_next/static/immutable/chunks/22ehkuw7gr_st.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/28j2izey1ifu8.js","/chat-static/_next/static/immutable/chunks/1lp1y_io08617.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/41qt-s4g-5zmi.js","/chat-static/_next/static/immutable/chunks/3b3l5lmcnswqe.js","/chat-static/_next/static/immutable/chunks/1eis6aa_6elvj.js","/chat-static/_next/static/immutable/chunks/0g_lc1s4ll_38.js","/chat-static/_next/static/immutable/chunks/2ixxgji-t_b6p.js","/chat-static/_next/static/immutable/chunks/0w4cll98nyi6w.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/1h6vbbfnz7st2.js","/chat-static/_next/static/immutable/chunks/13nl1tyyeg6oj.js","/chat-static/_next/static/immutable/chunks/3czebwmdna5c8.js","/chat-static/_next/static/immutable/chunks/3cvaae3ahu7jg.js","/chat-static/_next/static/immutable/chunks/0e691hxxfgnc-.js","/chat-static/_next/static/immutable/chunks/0z6x5gx309dym.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/0ddmyyh5gz33h.js","/chat-static/_next/static/immutable/chunks/15dsuc35dgog1.js"],"SWRDataProvider"] 8d:[] 8e:[["b_jsg3w5r2IJs",null],["b_smlimnKAiBr",null],["b_VpAdks4W2qN",null],["b_IIbpPqGQ5E8",null]] 8f:[["b_jsg3w5r2IJs",{"templateVersionId":null,"templateCanonId":null}],["b_smlimnKAiBr",{"templateVersionId":null,"templateCanonId":null}],["b_VpAdks4W2qN",{"templateVersionId":null,"templateCanonId":null}],["b_IIbpPqGQ5E8",{"templateVersionId":null,"templateCanonId":null}]] 90:[["b_gmAmJg7QOSk","$D2025-08-29T08:27:46.904Z"],["b_mLIVjLBhitg","$D2025-08-29T08:32:55.873Z"],["b_PJKRMcqGgEP","$D2025-08-29T08:48:34.947Z"],["b_pmj4ehG3NYF","$D2025-08-29T08:49:42.679Z"],["b_2jKVnlIwJd8","$D2025-08-29T08:50:13.354Z"],["b_uECDPCSapcR","$D2025-08-29T08:52:31.156Z"],["b_v9D3UvsxgM0","$D2025-08-29T08:53:13.328Z"],["b_FEbdBXI0gfR","$D2025-08-29T08:53:18.624Z"],["b_AacStH80oQa","$D2025-08-29T08:53:45.184Z"],["b_3sq2ddPbUmd","$D2025-08-29T08:54:36.889Z"],["b_ODOfPYipF30","$D2025-08-29T09:08:24.282Z"],["b_3OjJ6lLYqIv","$D2025-08-29T09:12:57.615Z"],["b_emUmhj5mz4m","$D2025-08-29T09:17:51.165Z"],["b_jsg3w5r2IJs","$D2025-08-29T12:08:22.274Z"],["b_smlimnKAiBr","$D2025-08-29T12:11:00.476Z"],["b_VpAdks4W2qN","$D2025-08-29T16:57:24.156Z"],["b_IIbpPqGQ5E8","$D2025-08-29T17:02:03.806Z"]] 91:[["b_jsg3w5r2IJs",false],["b_smlimnKAiBr",false],["b_VpAdks4W2qN",false],["b_IIbpPqGQ5E8",false]] 92:[["b_jsg3w5r2IJs","$undefined"],["b_smlimnKAiBr",{"git":{"ref":"main","sha":"e99260b3f9cb115683a20f34dac474a2f5012f86","type":"github","repoId":0,"repoName":"allocator","ownerName":"daniel-mitiku","commitMessage":"feat: enhance allocation with historical data integration\n\nIntegrate historical data for better allocation decisions and preference."}}],["b_VpAdks4W2qN",{"git":{"ref":"main","sha":"c4cd34099b498b36cbb87087e331a025839ed90d","type":"github","repoId":0,"repoName":"allocator","ownerName":"daniel-mitiku","commitMessage":"Not fully working yet"}}],["b_IIbpPqGQ5E8",{"git":{"ref":"main","sha":"24b1114619fc83d01cb3ba07d557d806a845fc87","type":"github","repoId":0,"repoName":"allocator","ownerName":"daniel-mitiku","commitMessage":"feat: update README with comprehensive todo list\n\nAdd detailed todo list for full system functionality and robustness."}}]] 93:[["b_jsg3w5r2IJs",null],["b_smlimnKAiBr",null],["b_VpAdks4W2qN",null],["b_IIbpPqGQ5E8",null]] 94:[["b_jsg3w5r2IJs",true],["b_smlimnKAiBr",true],["b_VpAdks4W2qN",true],["b_IIbpPqGQ5E8",true]] 95:[["b_jsg3w5r2IJs",true],["b_smlimnKAiBr",true],["b_VpAdks4W2qN",true],["b_IIbpPqGQ5E8",true]] 96:[] 97:Ta0b54,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]typescriptreact:file="app/admin/_components/header.tsx" isMerged="true" import Link from "next/link"; import { Menu, Settings } from "lucide-react"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import { Button } from "@/components/ui/button"; import { Sidebar } from "./sidebar"; // Re-use the sidebar for the mobile sheet export function Header() { return (

{/* We can reuse the same Sidebar component */}

Scheduler Admin

); } [V0_FILE]typescriptreact:file="app/admin/_components/sidebar.tsx" isMerged="true" "use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { cn } from "@/lib/utils"; import { BookCopy, CalendarCheck2, Home, LayoutGrid, Settings, Users, Warehouse, Clock, CalendarDays, } from "lucide-react"; const navItems = [ { href: "/admin", label: "Dashboard", icon: Home }, { href: "/admin/schedules", label: "Schedules", icon: CalendarCheck2 }, { href: "/admin/courses", label: "Courses", icon: BookCopy }, { href: "/admin/personnel", label: "Personnel", icon: Users }, { href: "/admin/rooms", label: "Rooms", icon: Warehouse }, { href: "/admin/programs", label: "Programs", icon: LayoutGrid }, { href: "/admin/timetable", label: "Timetable", icon: CalendarDays }, { href: "/admin/availability-templates", label: "Availability", icon: Clock }, ]; export function Sidebar() { const pathname = usePathname(); return (

Scheduler Admin

); } [V0_FILE]typescriptreact:file="app/admin/availability-templates/_components/client-page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { AvailabilityTemplate } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "@/components/ui/dialog"; import { PlusCircle } from "lucide-react"; import { TemplateForm } from "./template-form"; import { TemplatesTable } from "./templates-table"; type AvailabilityClientPageProps = { templates: AvailabilityTemplate[]; }; export function AvailabilityClientPage({ templates, }: AvailabilityClientPageProps) { const [isDialogOpen, setIsDialogOpen] = useState(false); const [selectedTemplate, setSelectedTemplate] = useState< AvailabilityTemplate | undefined >(undefined); const handleEdit = (template: AvailabilityTemplate) => { setSelectedTemplate(template); setIsDialogOpen(true); }; const handleCreate = () => { setSelectedTemplate(undefined); setIsDialogOpen(true); }; const handleDialogClose = () => { setIsDialogOpen(false); setSelectedTemplate(undefined); }; return ( <>

Availability Templates

Create and manage reusable weekly availability schedules.

); } [V0_FILE]typescriptreact:file="app/admin/availability-templates/_components/columns.tsx" isMerged="true" "use client"; import { ColumnDef } from "@tanstack/react-table"; import { AvailabilityTemplate, DayOfWeek } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { MoreHorizontal, ArrowUpDown } from "lucide-react"; import { deleteAvailabilityTemplate } from "@/lib/actions"; import { toast } from "sonner"; import { Badge } from "@/components/ui/badge"; const handleDelete = async (id: string) => { if (confirm("Are you sure you want to delete this template?")) { const result = await deleteAvailabilityTemplate({ id }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } } }; const dayOrder: DayOfWeek[] = [ "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY", ]; export const getColumns = ( onEdit: (template: AvailabilityTemplate) => void ): ColumnDef[] => [ { accessorKey: "name", header: ({ column }) => ( ), }, { accessorKey: "availableSlots", header: "Available Days", cell: ({ row }) => { const slots = row.original.availableSlots; const uniqueDays = [...new Set(slots.map((slot) => slot.dayOfWeek))]; const sortedDays = uniqueDays.sort( (a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b) ); return (

{sortedDays.map((day) => ( {day.substring(0, 3)} ))}

); }, }, { id: "actions", cell: ({ row }) => { const template = row.original; return ( Actions onEdit(template)}> Edit handleDelete(template.id)} className="text-red-600" > Delete ); }, }, ]; [V0_FILE]typescriptreact:file="app/admin/availability-templates/_components/template-form.tsx" isMerged="true" "use client"; import { useForm, useFieldArray } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createAvailabilityTemplate, updateAvailabilityTemplate, } from "@/lib/actions"; import { availabilityTemplateSchema } from "@/lib/schemas"; import { AvailabilityTemplate, DayOfWeek } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { PlusCircle, Trash2 } from "lucide-react"; type TemplateFormProps = { template?: AvailabilityTemplate; onSuccess: () => void; }; type TemplateFormValues = z.infer; export function TemplateForm({ template, onSuccess }: TemplateFormProps) { const form = useForm({ resolver: zodResolver(availabilityTemplateSchema), defaultValues: template ? { ...template } : { name: "", availableSlots: [ { dayOfWeek: DayOfWeek.MONDAY, startTime: "09:00", endTime: "17:00", }, ], }, mode: "onChange", }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "availableSlots", }); const onSubmit = async (values: TemplateFormValues) => { const action = template ? updateAvailabilityTemplate : createAvailabilityTemplate; const result = await action({ ...values, id: template?.id }); if (result.success) { toast.success(result.message); onSuccess(); } else { toast.error(result.message); } }; return (

( Template Name )} />

Time Blocks

{fields.map((field, index) => (

( Day )} /> ( Start Time )} /> ( End Time )} />

))}

{form.formState.errors.availableSlots?.root?.message}

); } [V0_FILE]typescriptreact:file="app/admin/availability-templates/_components/templates-table.tsx" isMerged="true" "use client"; import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, SortingState, useReactTable, } from "@tanstack/react-table"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { useState } from "react"; import { AvailabilityTemplate } from "@prisma/client"; import { getColumns } from "./columns"; interface TemplatesTableProps { templates: AvailabilityTemplate[]; onEdit: (template: AvailabilityTemplate) => void; } export function TemplatesTable({ templates, onEdit }: TemplatesTableProps) { const [sorting, setSorting] = useState([]); const columns = getColumns(onEdit); const table = useReactTable({ data: templates, columns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), state: { sorting, }, }); return (

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ))} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( No templates found. )}

); } [V0_FILE]typescriptreact:file="app/admin/availability-templates/page.tsx" isMerged="true" import { getAllAvailabilityTemplates } from "@/lib/actions"; import { AvailabilityClientPage } from "./_components/client-page"; export default async function AvailabilityTemplatesPage() { const templates = await getAllAvailabilityTemplates(); return (

); } [V0_FILE]typescriptreact:file="app/admin/courses/_components/client-page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { CourseForm } from "./course-form"; import { CoursesTable } from "./courses-table"; import { CourseWithTemplates } from "@/types"; import { PlusCircle } from "lucide-react"; type CoursesClientPageProps = { courses: CourseWithTemplates[]; }; export function CoursesClientPage({ courses }: CoursesClientPageProps) { const [isOpen, setIsOpen] = useState(false); const [editingCourse, setEditingCourse] = useState< CourseWithTemplates | undefined >(undefined); const handleOpenDialog = (course?: CourseWithTemplates) => { setEditingCourse(course); setIsOpen(true); }; const handleCloseDialog = () => { setEditingCourse(undefined); setIsOpen(false); }; return ( <>

Courses

); } [V0_FILE]typescriptreact:file="app/admin/courses/_components/course-form.tsx" isMerged="true" "use client"; import { useForm, useFieldArray } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createCourseSchema } from "@/lib/schemas"; import { createCourse, updateCourse } from "@/lib/actions"; import { CourseWithTemplates } from "@/types"; import { Role, RoomType, AttendeeLevel } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { PlusCircle, Trash2 } from "lucide-react"; import { PersonnelFields } from "@/components/shared/personnel-fields"; // Import the new component type CourseFormProps = { course?: CourseWithTemplates; onSuccess: () => void; }; export function CourseForm({ course, onSuccess }: CourseFormProps) { const form = useForm>({ resolver: zodResolver(createCourseSchema), defaultValues: course ? { ...course, activityTemplates: course.activityTemplates.map((template) => ({ ...template, // Ensure requiredPersonnel is always an array requiredPersonnel: template.requiredPersonnel || [], })), } : { code: "", title: "", activityTemplates: [ { title: "", durationMinutes: 60, attendeeLevel: AttendeeLevel.SECTION, requiredRoomType: RoomType.LECTURE_HALL, requiredPersonnel: [{ role: Role.LECTURER, count: 1 }], }, ], }, }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "activityTemplates", }); const onSubmit = async (values: z.infer) => { try { let result; if (course) { // The update action would need a different schema and logic. // For now, let's just show a message. // toast.info("Update functionality to be implemented."); console.log("Update values", { ...values, id: course.id }); result = await updateCourse({ ...values, id: course.id }); } else { result = await createCourse(values); } if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "An error occurred."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Course Code )} /> ( Course Title )} />

Activity Templates

{/* Scrollable container for activity templates */}

{fields.map((field, index) => (

{fields.length > 1 && ( )} {/* START: Detailed form fields for each activity template */}

( Activity Title )} /> ( Duration (Minutes) field.onChange(parseInt(e.target.value, 10)) } /> )} /> ( Attendee Level )} /> ( Required Room Type )} />

{/* Use the dedicated component for the nested personnel array */} {/* END: Detailed form fields */}

))}

); } [V0_FILE]typescriptreact:file="app/admin/courses/_components/courses-columns.tsx" isMerged="true" "use client"; import { ColumnDef } from "@tanstack/react-table"; import { CourseWithTemplates } from "@/types"; import { deleteCourse } from "@/lib/actions"; // Import the deleteCourse action import { toast } from "sonner"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { MoreHorizontal } from "lucide-react"; type GetColumnsProps = { onEdit: (course: CourseWithTemplates) => void; }; export const getColumns = ({ onEdit, }: GetColumnsProps): ColumnDef[] => [ { accessorKey: "code", header: "Code", }, { accessorKey: "title", header: "Title", }, { accessorKey: "activityTemplates", header: "Activities", cell: ({ row }) => { const templates = row.original.activityTemplates; return {templates.length}; }, }, { id: "actions", cell: ({ row }) => { const course = row.original; const handleDelete = async () => { const result = await deleteCourse({ id: course.id }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } }; return ( Actions onEdit(course)}> Edit Delete Are you absolutely sure? This action cannot be undone. This will permanently delete the course and all its related data. Cancel Continue ); }, }, ]; [V0_FILE]typescriptreact:file="app/admin/courses/_components/courses-table.tsx" isMerged="true" "use client"; import { useState } from "react"; // Import useState import { CourseWithTemplates } from "@/types"; import TanstackEnhancedTable from "@/components/shared/tanstack-enhanced-table"; import { Edit, Trash2 } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { deleteCourse } from "@/lib/actions"; import { toast } from "sonner"; import { // Import AlertDialog components AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; interface CoursesTableProps { courses: CourseWithTemplates[]; onEdit: (course: CourseWithTemplates) => void; } export function CoursesTable({ courses, onEdit }: CoursesTableProps) { const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [courseToDelete, setCourseToDelete] = useState(null); const columns = [ { key: "code", label: "Code", sortable: true, searchable: true, }, { key: "title", label: "Title", sortable: true, searchable: true, }, { key: "activityTemplates", label: "Activities", render: (templates: any[]) => ( {templates ? templates.length : 0} ), sortable: true, searchable: false, }, ]; const actions = [ { key: "edit", label: "Edit", icon: , }, { key: "delete", label: "Delete", icon: , // variant: "destructive" as const, // Ensure variant is destructive for visual cue }, ]; const handleRowAction = (action: string, row: CourseWithTemplates) => { if (action === "edit") { onEdit(row); } else if (action === "delete") { setCourseToDelete(row); setIsDeleteDialogOpen(true); } }; const handleDeleteConfirm = async () => { if (courseToDelete) { const result = await deleteCourse({ id: courseToDelete.id }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } setIsDeleteDialogOpen(false); setCourseToDelete(null); } }; const filterOptions = [ { key: "activityTemplates.length", label: "Number of Activities", type: "range" as const, min: 0, max: 20, }, ]; return ( <> data={courses} columns={columns} searchPlaceholder="Search courses by code or title..." emptyMessage="No courses found. Add your first course to get started." actions={actions} onRowAction={handleRowAction} filterOptions={filterOptions} /> {/* Delete Confirmation Dialog */} Are you absolutely sure? This action cannot be undone. This will permanently delete the course " {courseToDelete?.code}" and all its related data. setCourseToDelete(null)}> Cancel Continue ); } [V0_FILE]typescriptreact:file="app/admin/courses/page.tsx" isMerged="true" import { getAllCourses } from "@/lib/actions"; import { CoursesClientPage } from "./_components/client-page"; export default async function CoursesPage() { const courses = await getAllCourses(); return (

); } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" import type { ReactNode } from "react" import { getCurrentUser } from "@/lib/auth-utils" import { redirect } from "next/navigation" import { Sidebar } from "./_components/sidebar" import { Header } from "./_components/header" export default async function AdminLayout({ children, searchParams, }: { children: ReactNode searchParams?: { college?: string } }) { const user = await getCurrentUser() if (!user) { redirect("/auth/signin") } // Only allow COLLEGE_ADMIN and SUPER_ADMIN access if (user.systemRole === "PERSONNEL") { redirect("/unauthorized") } return (

{/* Sidebar for Desktop */}

{/* Header for Mobile */}

{/* Main Content Area */}

{children}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import type React from "react"; import { prisma } from "@/prisma/client"; import { requireAuth } from "@/lib/auth-utils"; import { redirect } from "next/navigation"; import { BookCopy, CalendarIcon, Users, Warehouse, Building2, } from "lucide-react"; import Link from "next/link"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import type { ScheduleStatus } from "@prisma/client"; async function getDashboardStats(collegeId: string, isSuperAdmin: boolean) { const whereClause = isSuperAdmin ? {} : { collegeId }; const [courseCount, personnelCount, roomCount, scheduleCount] = await prisma.$transaction([ prisma.course.count({ where: whereClause }), prisma.user.count({ where: whereClause }), prisma.room.count({ where: whereClause }), prisma.scheduleInstance.count({ where: { ...whereClause, NOT: { status: "COMPLETED" } }, }), ]); const activeSchedules = await prisma.scheduleInstance.findMany({ where: { ...whereClause, NOT: { status: "COMPLETED" } }, include: { college: true, }, orderBy: { startDate: "asc" }, take: 5, }); return { courseCount, personnelCount, roomCount, scheduleCount, activeSchedules, }; } export default async function AdminDashboardPage({ searchParams, }: { searchParams: Promise<{ college?: string }>; }) { const user = await requireAuth(); const { college: searchedCollege } = await searchParams; let targetCollegeId = user.collegeId; let college = user.college; // Super admins can view any college via query params if (user.systemRole === "SUPER_ADMIN" && searchedCollege) { targetCollegeId = searchedCollege; const targetCollege = await prisma.college.findUnique({ where: { id: searchedCollege }, }); if (!targetCollege) { redirect("/admin"); } college = targetCollege; } // Regular users can only access their own college if ( user.systemRole !== "SUPER_ADMIN" && searchedCollege && searchedCollege !== user.collegeId ) { redirect("/unauthorized"); } const { courseCount, personnelCount, roomCount, scheduleCount, activeSchedules, } = await getDashboardStats( targetCollegeId, user.systemRole === "SUPER_ADMIN" ); return (

{user.systemRole === "SUPER_ADMIN" ? "College Dashboard" : "Dashboard"}

{college.name} ({college.code}) {user.systemRole === "SUPER_ADMIN" && ( Super Admin View )}

{/* Stat Cards */}

} /> } /> } /> } />

{/* Active Schedules Table */} Upcoming & Active Schedules Name Start Date Status {user.systemRole === "SUPER_ADMIN" && ( College )} Actions {activeSchedules.length > 0 ? ( activeSchedules.map((schedule) => ( {schedule.name} {new Date(schedule.startDate).toLocaleDateString()} {schedule.status} {user.systemRole === "SUPER_ADMIN" && ( {schedule.college.code} )} )) ) : ( No active schedules found. )}

); } // Reusable Stat Card Component function StatCard({ title, value, icon, }: { title: string; value: number | string; icon: React.ReactNode; }) { return ( {title} {icon}

{value}

); } // Helper to style status badges function getBadgeVariant(status: ScheduleStatus) { switch (status) { case "DRAFT": return "secondary"; case "LOCKED": return "default"; case "COMPLETED": return "outline"; default: return "secondary"; } } [V0_FILE]typescriptreact:file="app/admin/personnel/_components/client-page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { User } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { PersonnelForm } from "./personnel-form"; import { PersonnelTable } from "./personnel-table"; import { PlusCircle } from "lucide-react"; type PersonnelClientPageProps = { users: User[]; }; export function PersonnelClientPage({ users }: PersonnelClientPageProps) { const [isOpen, setIsOpen] = useState(false); const [editingUser, setEditingUser] = useState(undefined); const handleOpenDialog = (user?: User) => { setEditingUser(user); setIsOpen(true); }; const handleCloseDialog = () => { setEditingUser(undefined); setIsOpen(false); }; return ( <>

Personnel

); } [V0_FILE]typescriptreact:file="app/admin/personnel/_components/personnel-columns.tsx" isMerged="true" "use client"; import { ColumnDef } from "@tanstack/react-table"; import { User, Role } from "@prisma/client"; import { deleteUser } from "@/lib/actions"; import { toast } from "sonner"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { MoreHorizontal } from "lucide-react"; type GetColumnsProps = { onEdit: (user: User) => void; }; export const getColumns = ({ onEdit }: GetColumnsProps): ColumnDef[] => [ { accessorKey: "name", header: "Name", }, { accessorKey: "email", header: "Email", }, { accessorKey: "roles", header: "Roles", cell: ({ row }) => { const roles = row.original.roles; return (

{roles.map((role) => ( {role} ))}

); }, }, { id: "actions", cell: ({ row }) => { const user = row.original; const handleDelete = async () => { const result = await deleteUser({ id: user.id }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } }; return ( Actions onEdit(user)}> Edit Delete Are you absolutely sure? This action cannot be undone. This will permanently delete the user and all their related data. Cancel Continue ); }, }, ]; [V0_FILE]typescriptreact:file="app/admin/personnel/_components/personnel-form.tsx" isMerged="true" "use client"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createUser, updateUser } from "@/lib/actions"; import { User, Role } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Checkbox } from "@/components/ui/checkbox"; import { userSchema } from "@/lib/schemas"; type PersonnelFormProps = { user?: User; onSuccess: () => void; }; export function PersonnelForm({ user, onSuccess }: PersonnelFormProps) { const form = useForm>({ resolver: zodResolver(userSchema), defaultValues: user || { name: "", email: "", roles: [], }, }); const onSubmit = async (values: z.infer) => { try { const result = user ? await updateUser({ ...values, id: user.id }) : await createUser(values); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "An error occurred."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Full Name )} /> ( Email Address )} />

( Roles

{Object.values(Role).map((role) => ( { return ( { return checked ? field.onChange([...field.value, role]) : field.onChange( field.value?.filter( (value) => value !== role ) ); }} /> {role} ); }} /> ))}

)} /> ); } [V0_FILE]typescriptreact:file="app/admin/personnel/_components/personnel-table.tsx" isMerged="true" "use client"; import { User } from "@prisma/client"; import TanstackEnhancedTable from "@/components/shared/tanstack-enhanced-table"; // Adjusted import path to be relative import { Edit } from "lucide-react"; import { Badge } from "@/components/ui/badge"; // Ensure Badge is imported if used in render interface PersonnelTableProps { users: User[]; onEdit: (user: User) => void; } export function PersonnelTable({ users, onEdit }: PersonnelTableProps) { const columns = [ { key: "name", label: "Name", sortable: true, searchable: true, }, { key: "email", label: "Email", sortable: true, searchable: true, }, { key: "roles", label: "Roles", render: (roles: string[]) => (

{roles.map((role) => ( {role} ))}

), sortable: false, // Roles array might not be easily sortable as a single unit searchable: false, // Not directly searchable by array content in a simple way }, ]; const roleOptions = [ { value: "ADMIN", label: "Admin" }, { value: "TEACHER", label: "Teacher" }, { value: "STUDENT", label: "Student" }, // Example: Add more roles ]; const filterOptions = [ { key: "roles", label: "Role", type: "multiselect" as const, options: roleOptions, }, ]; const actions = [ { key: "edit", label: "Edit", icon: , }, ]; const handleRowAction = (action: string, row: User) => { if (action === "edit") { onEdit(row); } }; return ( data={users} columns={columns} filterOptions={filterOptions} searchPlaceholder="Search personnel by name or email..." emptyMessage="No personnel found." actions={actions} onRowAction={handleRowAction} /> ); } [V0_FILE]typescriptreact:file="app/admin/personnel/page.tsx" isMerged="true" import { getAllUsers } from "@/lib/actions"; import { PersonnelClientPage } from "./_components/client-page"; export default async function PersonnelPage() { const users = await getAllUsers(); return (

); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/batch-form.tsx" isMerged="true" "use client"; import { useForm, useFieldArray, Control } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createBatchWithSections } from "@/lib/actions"; import { createBatchWithSectionsSchema } from "@/lib/schemas"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { PlusCircle, Trash2, ChevronsUpDown } from "lucide-react"; import { useState } from "react"; import { Label } from "@/components/ui/label"; type BatchFormValues = z.infer; // A reusable component for the nested groups form array function GroupFields({ control, sectionIndex, }: { control: Control; sectionIndex: number; }) { const { fields, append, remove } = useFieldArray({ control, name: `sections.${sectionIndex}.groups`, }); return (

Groups {fields.map((item, groupIndex) => (

( )} />

))}

); } export function BatchForm({ programId, onSuccess, }: { programId: string; onSuccess: () => void; }) { const [isBulkAddOpen, setIsBulkAddOpen] = useState(false); const form = useForm({ resolver: zodResolver(createBatchWithSectionsSchema), defaultValues: { name: "", programId: programId, sections: [], }, }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "sections", }); const onSubmit = async (values: BatchFormValues) => { // Only include sections if the bulk-add panel is open and has items const payload = { ...values, sections: isBulkAddOpen && values.sections && values.sections.length > 0 ? values.sections : undefined, }; try { const result = await createBatchWithSections(payload); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "Failed to create batch."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Batch Name )} />

{fields.map((item, index) => ( Section {index + 1} ( )} /> ))}

); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/bulk-add-program.tsx" isMerged="true" "use client"; import { useForm, useFieldArray, Control } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { bulkCreateProgram } from "@/lib/actions"; import { bulkProgramSchema } from "@/lib/schemas"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { PlusCircle, Trash2 } from "lucide-react"; import { Form, FormControl, FormField, FormItem, FormMessage, } from "@/components/ui/form"; // Define the type for our form values based on the Zod schema type BulkProgramFormValues = z.infer; type BulkAddProgramProps = { onSuccess: () => void; }; /** * Renders the fields for a single Section, including its nested Groups. */ function SectionFields({ control, batchIndex, sectionIndex, removeSection, }: { control: Control; batchIndex: number; sectionIndex: number; removeSection: (index: number) => void; }) { // `useFieldArray` for managing the dynamic list of groups within this section const { fields, append, remove } = useFieldArray({ control, name: `batches.${batchIndex}.sections.${sectionIndex}.groups`, }); return ( Section {sectionIndex + 1} {/* Input for Section Name */} ( Section Name )} /> {/* Dynamic list of Group inputs */}

{fields.map((item, groupIndex) => (

( Group {groupIndex + 1} )} />

))}

); } /** * Renders the fields for a single Batch, including its nested Sections. */ function BatchFields({ control, batchIndex, removeBatch, }: { control: Control; batchIndex: number; removeBatch: (index: number) => void; }) { // `useFieldArray` for managing the dynamic list of sections within this batch const { fields, append, remove } = useFieldArray({ control, name: `batches.${batchIndex}.sections`, }); return ( Batch {batchIndex + 1} {/* Input for Batch Name */} ( Batch Name )} /> {/* Dynamic list of Section components */}

{fields.map((item, sectionIndex) => ( ))}

); } /** * The main component for the bulk program creation form. */ export function BulkAddProgram({ onSuccess }: BulkAddProgramProps) { const form = useForm({ resolver: zodResolver(bulkProgramSchema), // Set default values to ensure the form starts with one of everything defaultValues: { name: "", batches: [{ name: "", sections: [{ name: "", groups: [{ name: "" }] }] }], }, }); // `useFieldArray` for managing the dynamic list of batches at the top level const { fields, append, remove } = useFieldArray({ control: form.control, name: "batches", }); // Handle form submission const onSubmit = async (values: BulkProgramFormValues) => { const result = await bulkCreateProgram(values); if (result?.success) { toast.success(result.message); onSuccess(); // Close the dialog on success } else { toast.error(result?.message || "Failed to create program."); } }; return (

{/* Input for Program Name */} ( Program Name )} /> {/* Container for the dynamic list of Batch components */}

{fields.map((item, index) => ( ))}

{/* Button to add a new Batch */} {/* Form submission button */}

); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/group-form.tsx" isMerged="true" "use client"; import { useForm, useFieldArray } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { bulkCreateGroups } from "@/lib/actions"; import { bulkCreateGroupsSchema } from "@/lib/schemas"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { PlusCircle, Trash2 } from "lucide-react"; type GroupFormValues = z.infer; type GroupFormProps = { sectionId: string; onSuccess: () => void; }; export function GroupForm({ sectionId, onSuccess }: GroupFormProps) { const form = useForm({ resolver: zodResolver(bulkCreateGroupsSchema), defaultValues: { sectionId: sectionId, groups: [{ name: "" }], }, }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "groups", }); const onSubmit = async (values: GroupFormValues) => { try { const result = await bulkCreateGroups(values); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "Failed to create groups."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return ( ); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/program-form.tsx" isMerged="true" "use client"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createProgram } from "@/lib/actions"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; const programFormSchema = z.object({ name: z.string().min(2, "Program name must be at least 2 characters."), }); type ProgramFormProps = { onSuccess: () => void; }; export function ProgramForm({ onSuccess }: ProgramFormProps) { const form = useForm>({ resolver: zodResolver(programFormSchema), defaultValues: { name: "", }, }); const onSubmit = async (values: z.infer) => { try { const result = await createProgram(values); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "Failed to create program."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Program Name )} /> ); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/program-structure-client.tsx" isMerged="true" "use client"; import { useState } from "react"; import { Program, Batch, Section } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "@/components/ui/dialog"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { PlusCircle, ChevronsUpDown, Plus, Trash2, BookCopy, } from "lucide-react"; import { ProgramForm } from "./program-form"; import { BatchForm } from "./batch-form"; import { SectionForm } from "./section-form"; import { GroupForm } from "./group-form"; import { BulkAddProgram } from "./bulk-add-program"; // Import the new component import { deleteProgram, deleteBatch, deleteSection, deleteGroup, } from "@/lib/actions"; import { toast } from "sonner"; type ProgramWithChildren = Program & { batches: (Batch & { sections: (Section & { groups: { id: string; name: string }[]; })[]; })[]; }; type ModalType = "program" | "batch" | "section" | "group"; export function ProgramStructureClient({ programs, }: { programs: ProgramWithChildren[]; }) { // Use more descriptive state names to handle multiple dialogs const [isFormDialogOpen, setIsFormDialogOpen] = useState(false); const [isBulkDialogOpen, setIsBulkDialogOpen] = useState(false); const [modalType, setModalType] = useState(null); const [parentIds, setParentIds] = useState<{ programId?: string; batchId?: string; sectionId?: string; }>({}); const handleOpenFormDialog = ( type: ModalType, ids: { programId?: string; batchId?: string; sectionId?: string } ) => { setModalType(type); setParentIds(ids); setIsFormDialogOpen(true); }; const handleCloseFormDialog = () => { setParentIds({}); setIsFormDialogOpen(false); }; const handleOpenBulkDialog = () => { setIsBulkDialogOpen(true); }; const handleCloseBulkDialog = () => { setIsBulkDialogOpen(false); }; const handleDelete = async ( type: "program" | "batch" | "section" | "group", id: string ) => { let result; if (confirm(`Are you sure you want to delete this ${type}?`)) { if (type === "program") { result = await deleteProgram({ id }); } else if (type === "batch") { result = await deleteBatch({ id }); } else if (type === "section") { result = await deleteSection({ id }); } else { result = await deleteGroup({ id }); } if (result?.success) { toast.success(result.message); } else { toast.error(result?.message || `Failed to delete ${type}.`); } } }; const renderModalContent = () => { switch (modalType) { case "program": return ; case "batch": return ( ); case "section": return ( ); case "group": return ( ); default: return null; } }; return ( <>

{/* Button for single program creation */} {/* New button for bulk program creation */}

{programs.map((program) => (

{program.name}

{program.batches.map((batch) => (

{batch.name}

{batch.sections.map((section) => (

{section.name}

{group.name}

))} ))} ))}

{/* Dialog for single item forms */} {/* New Dialog for the Bulk Add Program form */} ); } [V0_FILE]typescriptreact:file="app/admin/programs/_components/section-form.tsx" isMerged="true" "use client"; import { useForm, useFieldArray } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createSectionWithGroups } from "@/lib/actions"; import { createSectionWithGroupsSchema } from "@/lib/schemas"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { PlusCircle, Trash2, ChevronsUpDown } from "lucide-react"; import { useState } from "react"; type SectionFormValues = z.infer; type SectionFormProps = { batchId: string; onSuccess: () => void; }; export function SectionForm({ batchId, onSuccess }: SectionFormProps) { const [isBulkAddOpen, setIsBulkAddOpen] = useState(false); const form = useForm({ resolver: zodResolver(createSectionWithGroupsSchema), defaultValues: { name: "", batchId: batchId, groups: [], }, }); const { fields, append, remove } = useFieldArray({ control: form.control, name: "groups", }); const onSubmit = async (values: SectionFormValues) => { // Only include groups if the bulk-add panel is open and has items const payload = { ...values, groups: isBulkAddOpen && values.groups && values.groups.length > 0 ? values.groups : undefined, }; try { const result = await createSectionWithGroups(payload); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "Failed to create section."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Section Name )} />

{fields.map((field, index) => ( ( Group Name

)} /> ))}

); } [V0_FILE]typescriptreact:file="app/admin/programs/page.tsx" isMerged="true" import { getAllProgramsWithChildren } from "@/lib/actions"; import { ProgramStructureClient } from "./_components/program-structure-client"; export default async function ProgramsPage() { const programs = await getAllProgramsWithChildren(); return (

Academic Structure

); } [V0_FILE]typescriptreact:file="app/admin/records/_components/assignment-history-table.tsx" isMerged="true" "use client" import { useState, useMemo } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Search, Eye, User, BookOpen, Calendar, Building2, Clock } from "lucide-react" import { format } from "date-fns" import type { AssignmentHistoryWithDetails } from "@/types" interface AssignmentHistoryTableProps { records: AssignmentHistoryWithDetails[] isLoading?: boolean showCollege?: boolean showPersonnel?: boolean showCourse?: boolean showSchedule?: boolean groupBy?: "personnel" | "course" | "schedule" } export function AssignmentHistoryTable({ records, isLoading = false, showCollege = false, showPersonnel = true, showCourse = true, showSchedule = true, groupBy, }: AssignmentHistoryTableProps) { const [searchTerm, setSearchTerm] = useState("") const [selectedRecord, setSelectedRecord] = useState(null) const filteredRecords = useMemo(() => { if (!searchTerm.trim()) return records const searchLower = searchTerm.toLowerCase() return records.filter( (record) => record.personnel.name.toLowerCase().includes(searchLower) || record.course.code.toLowerCase().includes(searchLower) || record.course.title.toLowerCase().includes(searchLower) || record.activityTemplate.title.toLowerCase().includes(searchLower) || record.scheduleInstance.name.toLowerCase().includes(searchLower) || (showCollege && record.college.name.toLowerCase().includes(searchLower)), ) }, [records, searchTerm, showCollege]) const groupedRecords = useMemo(() => { if (!groupBy) return { ungrouped: filteredRecords } const groups: Record = {} filteredRecords.forEach((record) => { let key: string switch (groupBy) { case "personnel": key = `${record.personnel.name} (${record.personnel.email})` break case "course": key = `${record.course.code} - ${record.course.title}` break case "schedule": key = record.scheduleInstance.name break default: key = "ungrouped" } if (!groups[key]) groups[key] = [] groups[key].push(record) }) return groups }, [filteredRecords, groupBy]) const getPerformanceBadge = (performance?: string) => { if (!performance) return null const performanceLower = performance.toLowerCase() if (performanceLower.includes("excellent") || performanceLower.includes("outstanding")) { return Excellent } if (performanceLower.includes("good") || performanceLower.includes("satisfactory")) { return Good } if (performanceLower.includes("needs improvement") || performanceLower.includes("poor")) { return Needs Improvement } return {performance} } if (isLoading) { return (

Loading records...

) } return (

{/* Search */}

setSearchTerm(e.target.value)} className="pl-10" />

{/* Results Summary */}

Showing {filteredRecords.length} of {records.length} records {searchTerm && ` for "${searchTerm}"`}

{/* Records Table/Groups */} {filteredRecords.length === 0 ? (

No assignment records found

{searchTerm ? "Try adjusting your search terms" : "No historical assignments have been recorded yet"}

) : (

{Object.entries(groupedRecords).map(([groupKey, groupRecords]) => ( {groupBy && groupKey !== "ungrouped" && (

{groupBy === "personnel" && } {groupBy === "course" && } {groupBy === "schedule" && } {groupKey} {groupRecords.length} assignments

)}

{showCollege && College} {showPersonnel && Personnel} {showCourse && Course} Activity {showSchedule && Schedule} Assigned Date Performance Actions {groupRecords.map((record) => ( {showCollege && (

{record.college.name}

{record.college.code}

)} {showPersonnel && (

{record.personnel.name}

{record.personnel.email}

{record.personnel.roles.map((role) => ( {role} ))}

)} {showCourse && (

{record.course.code}

{record.course.title}

)}

{record.activityTemplate.title}

{record.activityTemplate.durationMinutes} minutes •{" "} {record.activityTemplate.attendeeLevel}

{showSchedule && (

{record.scheduleInstance.name}

{format(new Date(record.scheduleInstance.startDate), "MMM yyyy")} -{" "} {format(new Date(record.scheduleInstance.endDate), "MMM yyyy")}

)}

{format(new Date(record.assignedAt), "MMM dd, yyyy")}

{format(new Date(record.assignedAt), "HH:mm")}

{getPerformanceBadge(record.performance)} ))}

))}

)} {/* Record Detail Modal would go here */} {selectedRecord && (

Assignment Record Details

Personnel

{selectedRecord.personnel.name}

{selectedRecord.personnel.email}

Course

{selectedRecord.course.code} - {selectedRecord.course.title}

Activity

{selectedRecord.activityTemplate.title}

{selectedRecord.activityTemplate.durationMinutes} minutes

Schedule

{selectedRecord.scheduleInstance.name}

Assigned Date

{format(new Date(selectedRecord.assignedAt), "PPP")}

Performance {getPerformanceBadge(selectedRecord.performance) || (

No performance notes

)}

{selectedRecord.performance && (

Performance Notes

{selectedRecord.performance}

)}

) } [V0_FILE]typescriptreact:file="app/admin/records/_components/records-filters.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CalendarIcon, Filter, X } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { format } from "date-fns" interface RecordsFiltersProps { filters: { collegeId: string personnelId: string courseId: string scheduleInstanceId: string startDate: string endDate: string } onFiltersChange: (filters: any) => void isSuperAdmin: boolean onReset: () => void } export function RecordsFilters({ filters, onFiltersChange, isSuperAdmin, onReset }: RecordsFiltersProps) { const [colleges, setColleges] = useState([]) const [personnel, setPersonnel] = useState([]) const [courses, setCourses] = useState([]) const [schedules, setSchedules] = useState([]) const [showFilters, setShowFilters] = useState(false) useEffect(() => { loadFilterOptions() }, []) const loadFilterOptions = async () => { try { const [collegesRes, personnelRes, coursesRes, schedulesRes] = await Promise.all([ isSuperAdmin ? fetch("/api/colleges") : Promise.resolve({ ok: false }), fetch("/api/personnel"), fetch("/api/courses"), fetch("/api/schedules"), ]) if (collegesRes.ok) { const collegesData = await collegesRes.json() setColleges(collegesData.colleges || []) } if (personnelRes.ok) { const personnelData = await personnelRes.json() setPersonnel(personnelData.personnel || []) } if (coursesRes.ok) { const coursesData = await coursesRes.json() setCourses(coursesData.courses || []) } if (schedulesRes.ok) { const schedulesData = await schedulesRes.json() setSchedules(schedulesData.schedules || []) } } catch (error) { console.error("Failed to load filter options:", error) } } const handleFilterChange = (key: string, value: string) => { onFiltersChange({ ...filters, [key]: value, }) } const activeFiltersCount = Object.values(filters).filter((value) => value !== "").length return (

Filters

{activeFiltersCount > 0 && ( )}

{showFilters && (

{isSuperAdmin && (

College

)}

Personnel

Course

Schedule

Start Date handleFilterChange("startDate", date ? date.toISOString().split("T")[0] : "")} initialFocus />

End Date handleFilterChange("endDate", date ? date.toISOString().split("T")[0] : "")} initialFocus />

)} ) } [V0_FILE]typescriptreact:file="app/admin/records/_components/records-stats.tsx" isMerged="true" "use client" import { useMemo } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Users, BookOpen, TrendingUp, Award, Clock } from "lucide-react" import type { AssignmentHistoryWithDetails } from "@/types" interface RecordsStatsProps { records: AssignmentHistoryWithDetails[] } export function RecordsStats({ records }: RecordsStatsProps) { const stats = useMemo(() => { const uniquePersonnel = new Set(records.map((r) => r.personnelId)).size const uniqueCourses = new Set(records.map((r) => r.courseId)).size const uniqueSchedules = new Set(records.map((r) => r.scheduleInstanceId)).size const performanceStats = records.reduce( (acc, record) => { if (record.performance) { const perf = record.performance.toLowerCase() if (perf.includes("excellent") || perf.includes("outstanding")) { acc.excellent++ } else if (perf.includes("good") || perf.includes("satisfactory")) { acc.good++ } else if (perf.includes("needs improvement") || perf.includes("poor")) { acc.needsImprovement++ } } return acc }, { excellent: 0, good: 0, needsImprovement: 0 }, ) const recentAssignments = records.filter( (record) => new Date(record.assignedAt) > new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), ).length const topPersonnel = Object.entries( records.reduce( (acc, record) => { const key = record.personnel.name acc[key] = (acc[key] || 0) + 1 return acc }, {} as Record, ), ) .sort(([, a], [, b]) => b - a) .slice(0, 3) const topCourses = Object.entries( records.reduce( (acc, record) => { const key = `${record.course.code} - ${record.course.title}` acc[key] = (acc[key] || 0) + 1 return acc }, {} as Record, ), ) .sort(([, a], [, b]) => b - a) .slice(0, 3) return { totalRecords: records.length, uniquePersonnel, uniqueCourses, uniqueSchedules, performanceStats, recentAssignments, topPersonnel, topCourses, } }, [records]) return (

Total Records

{stats.totalRecords}

Assignment records tracked

Personnel

{stats.uniquePersonnel}

Unique personnel with assignments

Courses

{stats.uniqueCourses}

Courses with assignments

Recent (30d)

{stats.recentAssignments}

New assignments this month

{/* Performance Overview */} Performance Overview

Excellent {stats.performanceStats.excellent}

Good {stats.performanceStats.good}

Needs Improvement {stats.performanceStats.needsImprovement}

{/* Top Personnel */} Most Active Personnel

{stats.topPersonnel.map(([name, count], index) => (

#{index + 1} {name} {count} assignments

))}

) } [V0_FILE]typescriptreact:file="app/admin/records/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Calendar, Users, BookOpen, Download, History } from "lucide-react" import { AssignmentHistoryTable } from "./_components/assignment-history-table" import { RecordsFilters } from "./_components/records-filters" import { RecordsStats } from "./_components/records-stats" import type { AssignmentHistoryWithDetails } from "@/types" export default function RecordsPage() { const { data: session } = useSession() const [records, setRecords] = useState([]) const [filteredRecords, setFilteredRecords] = useState([]) const [isLoading, setIsLoading] = useState(true) const [filters, setFilters] = useState({ collegeId: "", personnelId: "", courseId: "", scheduleInstanceId: "", startDate: "", endDate: "", }) const isSuperAdmin = session?.user?.systemRole === "SUPER_ADMIN" useEffect(() => { loadRecords() }, []) useEffect(() => { applyFilters() }, [records, filters]) const loadRecords = async () => { setIsLoading(true) try { const queryParams = new URLSearchParams() if (!isSuperAdmin && session?.user?.collegeId) { queryParams.set("collegeId", session.user.collegeId) } const response = await fetch(`/api/records/assignment-history?${queryParams}`) if (response.ok) { const data = await response.json() setRecords(data.records) } } catch (error) { console.error("Failed to load records:", error) } finally { setIsLoading(false) } } const applyFilters = () => { let filtered = [...records] if (filters.collegeId) { filtered = filtered.filter((record) => record.collegeId === filters.collegeId) } if (filters.personnelId) { filtered = filtered.filter((record) => record.personnelId === filters.personnelId) } if (filters.courseId) { filtered = filtered.filter((record) => record.courseId === filters.courseId) } if (filters.scheduleInstanceId) { filtered = filtered.filter((record) => record.scheduleInstanceId === filters.scheduleInstanceId) } if (filters.startDate) { filtered = filtered.filter((record) => new Date(record.assignedAt) >= new Date(filters.startDate)) } if (filters.endDate) { filtered = filtered.filter((record) => new Date(record.assignedAt) <= new Date(filters.endDate)) } setFilteredRecords(filtered) } const handleExportRecords = async () => { try { const queryParams = new URLSearchParams() Object.entries(filters).forEach(([key, value]) => { if (value) queryParams.set(key, value) }) const response = await fetch(`/api/records/export?${queryParams}`) if (response.ok) { const blob = await response.blob() const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `assignment-history-${new Date().toISOString().split("T")[0]}.csv` document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) document.body.removeChild(a) } } catch (error) { console.error("Failed to export records:", error) } } return (

Assignment Records

Track and analyze historical personnel-course assignments across all scheduling instances

All Records By Personnel By Course By Schedule setFilters({ collegeId: "", personnelId: "", courseId: "", scheduleInstanceId: "", startDate: "", endDate: "", }) } /> All Assignment Records {filteredRecords.length} records Personnel Assignment History {filteredRecords.length} records Course Assignment History {filteredRecords.length} records Schedule Assignment History {filteredRecords.length} records

) } [V0_FILE]typescriptreact:file="app/admin/rooms/_components/bulk-add-room.tsx" isMerged="true" "use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { MapPin, Plus, Trash2, Eye, Check, X } from "lucide-react"; // Import X icon import { bulkCreateRooms } from "@/lib/actions"; import { Room, RoomType } from "@prisma/client"; import { toast } from "sonner"; interface BulkAddRoomsProps { onUpdate: () => void; } interface BuildingConfig { id: string; buildingName: string; roomCount: number; roomType: RoomType; capacity: number; } export default function BulkAddRooms({ onUpdate }: BulkAddRoomsProps) { const [isDialogOpen, setIsDialogOpen] = useState(false); const [buildings, setBuildings] = useState([ { id: "1", buildingName: "", roomCount: 1, roomType: RoomType.LECTURE_HALL, capacity: 30, }, ]); const [previewRooms, setPreviewRooms] = useState[]>([]); const [showPreview, setShowPreview] = useState(false); const [isCreating, setIsCreating] = useState(false); const [error, setError] = useState(""); const roomTypes = Object.values(RoomType); const addBuilding = () => { const newBuilding: BuildingConfig = { id: Date.now().toString(), buildingName: "", roomCount: 1, roomType: RoomType.LECTURE_HALL, capacity: 30, }; setBuildings([...buildings, newBuilding]); }; const removeBuilding = (id: string) => { setBuildings(buildings.filter((building) => building.id !== id)); }; const updateBuilding = ( id: string, field: keyof BuildingConfig, value: string | number | RoomType ) => { setBuildings( buildings.map((building) => building.id === id ? { ...building, [field]: value } : building ) ); }; const generatePreview = () => { setError(""); const rooms: Omit[] = []; for (const building of buildings) { if (!building.buildingName.trim()) { setError("All building names are required"); return; } if (building.roomCount < 1) { setError("Room count must be at least 1"); return; } for (let i = 1; i <= building.roomCount; i++) { const roomNumber = i.toString().padStart(3, "0"); rooms.push({ name: `${building.buildingName}-${roomNumber}`, building: building.buildingName, capacity: building.capacity, type: building.roomType, scheduledInstanceIds: [], }); } } if (rooms.length === 0) { setError("Please configure at least one building with rooms"); return; } setPreviewRooms(rooms); setShowPreview(true); }; // New function to remove a room from the preview list const removePreviewRoom = (roomNameToRemove: string) => { setPreviewRooms((prevRooms) => prevRooms.filter((room) => room.name !== roomNameToRemove) ); }; const handleCreate = async () => { setIsCreating(true); try { const result = await bulkCreateRooms(previewRooms); if (result?.success) { toast.success(result.message); onUpdate(); resetForm(); } else { toast.error(result?.message || "Failed to create rooms."); } } catch (error) { toast.error("Failed to create rooms."); } finally { setIsCreating(false); } }; const resetForm = () => { setBuildings([ { id: "1", buildingName: "", roomCount: 1, roomType: RoomType.LECTURE_HALL, capacity: 30, }, ]); setPreviewRooms([]); setShowPreview(false); setIsDialogOpen(false); setError(""); }; const getTotalRooms = () => { return buildings.reduce((sum, building) => sum + building.roomCount, 0); }; return ( ); } [V0_FILE]typescriptreact:file="app/admin/rooms/_components/client-page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { Room } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { RoomForm } from "./room-form"; import { RoomsTable } from "./rooms-table"; import { PlusCircle } from "lucide-react"; import BulkAddRooms from "./bulk-add-room"; type RoomsClientPageProps = { rooms: Room[]; }; export function RoomsClientPage({ rooms }: RoomsClientPageProps) { const [isOpen, setIsOpen] = useState(false); const [editingRoom, setEditingRoom] = useState(undefined); const handleOpenDialog = (room?: Room) => { setEditingRoom(room); setIsOpen(true); }; const handleCloseDialog = () => { setEditingRoom(undefined); setIsOpen(false); }; return ( <>

Rooms

window.location.reload()} />

); } [V0_FILE]typescriptreact:file="app/admin/rooms/_components/room-form.tsx" isMerged="true" "use client"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { createRoom, updateRoom } from "@/lib/actions"; import { Room, RoomType } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { roomSchema } from "@/lib/schemas"; type RoomFormProps = { room?: Room; onSuccess: () => void; }; export function RoomForm({ room, onSuccess }: RoomFormProps) { const form = useForm>({ resolver: zodResolver(roomSchema), defaultValues: room || { name: "", building: "", capacity: 0, type: RoomType.LECTURE_HALL, }, }); const onSubmit = async (values: z.infer) => { try { const result = room ? await updateRoom({ ...values, id: room.id }) : await createRoom(values); if (result?.success) { toast.success(result.message); onSuccess(); } else { toast.error(result?.message || "An error occurred."); } } catch (error) { toast.error("An unexpected error occurred."); } }; return (

( Name )} /> ( Building )} />

( Capacity field.onChange(parseInt(e.target.value))} /> )} /> ( Type )} />

); } [V0_FILE]typescriptreact:file="app/admin/rooms/_components/rooms-columns.tsx" isMerged="true" "use client"; import { ColumnDef } from "@tanstack/react-table"; import { Room, RoomType } from "@prisma/client"; import { deleteRoom } from "@/lib/actions"; // Assuming this is your action for deleting rooms import { toast } from "sonner"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { MoreHorizontal, ArrowUpDown } from "lucide-react"; // Import ArrowUpDown for sorting indication type GetColumnsProps = { onEdit: (room: Room) => void; }; export const getColumns = ({ onEdit }: GetColumnsProps): ColumnDef[] => [ { accessorKey: "name", header: ({ column }) => { return ( ); }, }, { accessorKey: "building", header: ({ column }) => { return ( ); }, }, { accessorKey: "capacity", header: ({ column }) => { return ( ); }, }, { accessorKey: "type", header: "Type", cell: ({ row }) => { const roomType = row.original.type; return ( {roomType .split("_") .map( (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(" ")} ); }, }, { id: "actions", cell: ({ row }) => { const room = row.original; const handleDelete = async () => { const result = await deleteRoom({ id: room.id }); if (result?.success) { toast.success(result.message); // Assuming window.location.reload() or a similar mechanism // is in place in client-page.tsx to refetch data after delete. // For a more integrated approach, you might need a state update mechanism. } else { toast.error(result?.message || "Failed to delete room."); } }; return ( Actions onEdit(room)}> Edit e.preventDefault()} className="text-red-600" > Delete Are you absolutely sure? This action cannot be undone. This will permanently delete the room from the database. Cancel Continue ); }, }, ]; [V0_FILE]typescriptreact:file="app/admin/rooms/_components/rooms-table.tsx" isMerged="true" "use client"; import { Room, RoomType } from "@prisma/client"; import TanstackEnhancedTable from "@/components/shared/tanstack-enhanced-table"; // Adjusted import path to be relative import { Edit } from "lucide-react"; import { Badge } from "@/components/ui/badge"; interface RoomsTableProps { rooms: Room[]; onEdit: (room: Room) => void; } export function RoomsTable({ rooms, onEdit }: RoomsTableProps) { const columns = [ { key: "name", label: "Name", sortable: true, searchable: true, }, { key: "building", label: "Building", sortable: true, searchable: true, }, { key: "capacity", label: "Capacity", sortable: true, searchable: false, }, { key: "type", label: "Type", render: (roomType: RoomType) => { return ( {roomType .split("_") .map( (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(" ")} ); }, sortable: true, searchable: false, }, ]; const roomTypes = Object.values(RoomType).map((type) => ({ value: type, label: type.replace(/_/g, " "), // Replace all underscores for display })); const filterOptions = [ { key: "type", label: "Type", type: "select" as const, options: roomTypes, }, { key: "capacity", label: "Capacity", type: "range" as const, min: 0, max: 500, // Or dynamically calculate the max capacity }, ]; const actions = [ { key: "edit", label: "Edit", icon: , }, ]; const handleRowAction = (action: string, row: Room) => { if (action === "edit") { onEdit(row); } }; return ( data={rooms} columns={columns} filterOptions={filterOptions} searchPlaceholder="Search rooms by name or building..." emptyMessage="No rooms found." actions={actions} onRowAction={handleRowAction} /> ); } [V0_FILE]typescriptreact:file="app/admin/rooms/page.tsx" isMerged="true" import { getAllRooms } from "@/lib/actions"; import { RoomsClientPage } from "./_components/client-page"; export default async function RoomsPage() { const rooms = await getAllRooms(); return (

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/allocation-modal.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "sonner" import { exportAllocationData, importAllocationSolution, triggerAllocation, getScheduleInstanceById, // Import to fetch current settings updateScheduleSolverSettings, // NEW: Import the action to save settings } from "@/lib/actions" import { Loader2, Zap, Download, Upload } from "lucide-react" import type { z } from "zod" import { SpacingPreference } from "@prisma/client" import { liveAllocationFormSchema } from "@/lib/schemas" type AllocationModalProps = { scheduleInstanceId: string onClose: () => void } // Simple client-side utility to trigger a file download const downloadJson = (data: any, filename: string) => { const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data, null, 2))}` const link = document.createElement("a") link.href = jsonString link.download = filename link.click() } export function AllocationModal({ scheduleInstanceId, onClose }: AllocationModalProps) { const [isLoading, setIsLoading] = useState(false) const [initialLoading, setInitialLoading] = useState(true) // Initialize form with default values (which will be overwritten by fetched data) const form = useForm>({ resolver: zodResolver(liveAllocationFormSchema), defaultValues: { roomStickinessWeight: 0, spacingPreference: SpacingPreference.NONE, }, }) useEffect(() => { const fetchCurrentSolverSettings = async () => { setInitialLoading(true) const scheduleInstance = await getScheduleInstanceById(scheduleInstanceId) if (scheduleInstance) { form.reset({ roomStickinessWeight: scheduleInstance.roomStickinessWeight ?? 0, spacingPreference: scheduleInstance.spacingPreference ?? SpacingPreference.NONE, }) } setInitialLoading(false) } fetchCurrentSolverSettings() }, [scheduleInstanceId, form]) const handleLiveAllocation = async (data: z.infer) => { setIsLoading(true) toast.info("Saving solver settings and starting allocation. This may take several minutes...") // 1. Save the preferences to the database first const saveSettingsResult = await updateScheduleSolverSettings({ scheduleInstanceId: scheduleInstanceId, roomStickinessWeight: data.roomStickinessWeight, spacingPreference: data.spacingPreference, }) if (!saveSettingsResult.success) { toast.error(saveSettingsResult.message) setIsLoading(false) return } toast.success("Solver settings saved.") // 2. Trigger the allocation, which will now read settings from the database const result = await triggerAllocation(scheduleInstanceId) if (result.success) { toast.success(result.message) onClose() } else { toast.error(result.message) } setIsLoading(false) } const handleExport = async () => { setIsLoading(true) const result = await exportAllocationData(scheduleInstanceId) if (result.success) { downloadJson(result.data, `schedule-data-${scheduleInstanceId}.json`) toast.success("Schedule data exported!") } else { toast.error(result.message) } setIsLoading(false) } const handleImport = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return setIsLoading(true) const reader = new FileReader() reader.onload = async (e) => { try { const solution = JSON.parse(e.target?.result as string) const result = await importAllocationSolution({ scheduleInstanceId, solution, }) if (result.success) { toast.success(result.message) onClose() } else { toast.error(result.message) } } catch (error) { toast.error("Invalid JSON file.") } finally { setIsLoading(false) // Clear the file input after processing event.target.value = "" } } reader.readAsText(file) } return ( Run Allocation - Choose Method Backend Solver Google Colab Manual UI {initialLoading ? (

Loading solver settings...

) : (

( Room Stickiness Weight field.onChange(e.target.value === "" ? null : Number(e.target.value))} disabled={isLoading} /> )} /> ( Activity Spacing )} />

{/* Time Preferences are handled by managing ScheduleTimePreference records directly. This modal currently doesn't provide UI to add/edit individual time preferences. They are fetched as part of the schedule instance if they exist. */}

Time preferences are configured separately for the schedule instance.

)}

Export the schedule data, run it in the Colab notebook, then import the resulting solution file.

{/* New UI-based allocation tab */}

Manual UI Allocation

Use the interactive timetable grid to manually assign resources to time slots. Click on time slots to view events and available resources, then assign them directly.

Features available in the timetable grid:

Click time slots to see events and available resources
Drag and drop resources to assign them
Run simplified solver for individual time slots
Consider timeslot preferences and equal distribution

) } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/attendees-assignment-tab.tsx" isMerged="true" "use client"; import { useState, useMemo, useEffect } from "react"; import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, useReactTable, ColumnFiltersState, VisibilityState, PaginationState, } from "@tanstack/react-table"; import { toast } from "sonner"; import { ScheduleInstance, Section } from "@prisma/client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { assignResourcesToSchedule } from "@/lib/actions"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SlidersHorizontal, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { SectionWithRelations } from "./resource-assignment-client"; interface AttendeesAssignmentTabProps { scheduleInstance: ScheduleInstance & { sections: Section[] }; allSections: SectionWithRelations[]; } export function AttendeesAssignmentTab({ scheduleInstance, allSections, }: AttendeesAssignmentTabProps) { const [rowSelection, setRowSelection] = useState>( () => { const initialSelection: Record = {}; for (const section of scheduleInstance.sections) { const rowIndex = allSections.findIndex((s) => s.id === section.id); if (rowIndex !== -1) { initialSelection[rowIndex] = true; } } return initialSelection; } ); const [isSaving, setIsSaving] = useState(false); const [columnFilters, setColumnFilters] = useState([]); const [globalFilter, setGlobalFilter] = useState(""); const [columnVisibility, setColumnVisibility] = useState({}); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); const columns: ColumnDef[] = useMemo( () => [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, enableColumnFilter: false, }, { accessorKey: "name", header: "Section", enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "batch.name", header: "Batch", enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "batch.program.name", header: "Program", enableColumnFilter: true, filterFn: "includesString", }, ], [] ); const table = useReactTable({ data: allSections, columns, state: { rowSelection, columnFilters, globalFilter, columnVisibility, pagination, }, onRowSelectionChange: setRowSelection, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), manualPagination: false, manualFiltering: false, filterFns: { includesString: (row, columnId, filterValue: string) => { const rowValue = String(row.getValue(columnId)).toLowerCase(); return rowValue.includes(filterValue.toLowerCase()); }, }, }); useEffect(() => { const initialSelection: Record = {}; for (const section of scheduleInstance.sections) { const rowIndex = allSections.findIndex((s) => s.id === section.id); if (rowIndex !== -1) { initialSelection[rowIndex.toString()] = true; } } setRowSelection(initialSelection); }, [allSections, scheduleInstance.sections]); const handleSaveChanges = async () => { setIsSaving(true); const selectedSectionIds = table .getFilteredSelectedRowModel() .rows.map((row) => row.original.id); const result = await assignResourcesToSchedule({ scheduleInstanceId: scheduleInstance.id, sectionIds: selectedSectionIds, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } setIsSaving(false); }; return ( Assign Attendee Sections

setGlobalFilter(event.target.value)} className="max-w-sm flex-1 rounded-lg shadow-sm" /> {table .getAllColumns() .filter((column) => column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value) } > {column.id} ); })}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : (

{flexRender( header.column.columnDef.header, header.getContext() )} {{ asc: " 🔼", desc: " 🔽", }[header.column.getIsSorted() as string] ?? null}

)} ); })} ))} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.column.getCanFilter() ? ( header.column.setFilterValue(e.target.value) } className="w-full rounded-md shadow-sm text-sm" /> ) : null} ))} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( No results. )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

Rows per page

Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()}

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/courses-assignment-tab.tsx" isMerged="true" "use client"; import { useState, useMemo, useEffect } from "react"; import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, useReactTable, ColumnFiltersState, VisibilityState, PaginationState, } from "@tanstack/react-table"; import { toast } from "sonner"; import { ScheduleInstance, Course } from "@prisma/client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { assignResourcesToSchedule } from "@/lib/actions"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SlidersHorizontal, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; interface CoursesAssignmentTabProps { scheduleInstance: ScheduleInstance & { courses: Course[] }; allCourses: Course[]; } export function CoursesAssignmentTab({ scheduleInstance, allCourses, }: CoursesAssignmentTabProps) { const [rowSelection, setRowSelection] = useState>( () => { const initialSelection: Record = {}; for (const course of scheduleInstance.courses) { const rowIndex = allCourses.findIndex((c) => c.id === course.id); if (rowIndex !== -1) { initialSelection[rowIndex] = true; } } return initialSelection; } ); const [isSaving, setIsSaving] = useState(false); const [columnFilters, setColumnFilters] = useState([]); const [globalFilter, setGlobalFilter] = useState(""); const [columnVisibility, setColumnVisibility] = useState({}); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); const columns: ColumnDef[] = useMemo( () => [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, enableColumnFilter: false, }, { accessorKey: "code", header: "Code", enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "title", header: "Title", enableColumnFilter: true, filterFn: "includesString", }, ], [] ); const table = useReactTable({ data: allCourses, columns, state: { rowSelection, columnFilters, globalFilter, columnVisibility, pagination, }, onRowSelectionChange: setRowSelection, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), filterFns: { includesString: (row, columnId, filterValue: string) => { const rowValue = String(row.getValue(columnId)).toLowerCase(); return rowValue.includes(filterValue.toLowerCase()); }, }, }); useEffect(() => { const initialSelection: Record = {}; for (const course of scheduleInstance.courses) { const rowIndex = allCourses.findIndex((c) => c.id === course.id); if (rowIndex !== -1) { initialSelection[rowIndex.toString()] = true; } } setRowSelection(initialSelection); }, [allCourses, scheduleInstance.courses]); const handleSaveChanges = async () => { setIsSaving(true); const selectedCourseIds = table .getFilteredSelectedRowModel() .rows.map((row) => row.original.id); const result = await assignResourcesToSchedule({ scheduleInstanceId: scheduleInstance.id, courseIds: selectedCourseIds, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } setIsSaving(false); }; return ( Assign Courses

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : (

{flexRender( header.column.columnDef.header, header.getContext() )} {{ asc: " 🔼", desc: " 🔽", }[header.column.getIsSorted() as string] ?? null}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

Rows per page

Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()}

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/personnel-assignment-tab.tsx" isMerged="true" "use client"; import { useState, useMemo, useEffect } from "react"; import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, useReactTable, ColumnFiltersState, VisibilityState, PaginationState, } from "@tanstack/react-table"; import { toast } from "sonner"; import { ScheduleInstance, User } from "@prisma/client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { assignResourcesToSchedule } from "@/lib/actions"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SlidersHorizontal, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Link2, // Import the Link2 icon Mail, // Import Mail icon for emailing Download, // Import Download icon for export } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; // Import the new server action for emailing import { sendPreferenceEmail } from "@/lib/emailActions"; // The User type from Prisma will now include the preferenceToken type UserWithToken = User & { preferenceToken: string | null }; interface PersonnelAssignmentTabProps { scheduleInstance: ScheduleInstance & { personnel: UserWithToken[] }; allPersonnel: UserWithToken[]; } export function PersonnelAssignmentTab({ scheduleInstance, allPersonnel, }: PersonnelAssignmentTabProps) { const [rowSelection, setRowSelection] = useState>( () => { const initialSelection: Record = {}; for (const user of scheduleInstance.personnel) { const rowIndex = allPersonnel.findIndex((p) => p.id === user.id); if (rowIndex !== -1) { initialSelection[rowIndex] = true; } } return initialSelection; } ); const [isSaving, setIsSaving] = useState(false); const [isExporting, setIsExporting] = useState(false); // New state for export loading const [isSendingEmails, setIsSendingEmails] = useState(false); // New state for email loading const [columnFilters, setColumnFilters] = useState([]); const [globalFilter, setGlobalFilter] = useState(""); const [columnVisibility, setColumnVisibility] = useState({}); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); // Function to handle copying the preference link const handleCopyLink = (token: string | null) => { if (!token) { toast.error("This user does not have a preference token."); return; } const url = `${window.location.origin}/preferences/${scheduleInstance.id}?token=${token}`; // Using document.execCommand('copy') for better iframe compatibility try { const el = document.createElement("textarea"); el.value = url; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); toast.success("Preference link copied to clipboard!"); } catch (err) { toast.error("Failed to copy link."); console.error("Could not copy text: ", err); } }; const columns: ColumnDef[] = useMemo( () => [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, enableColumnFilter: false, }, { accessorKey: "name", header: "Name", cell: ({ row }) => (

{row.getValue("name")}

), enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "email", header: "Email", cell: ({ row }) => row.getValue("email"), enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "roles", header: "Roles", cell: ({ row }) => (

{(row.getValue("roles") as string[]).map((role) => ( {role} ))}

), enableColumnFilter: true, filterFn: (row, columnId, filterValue) => { const roles = row.getValue(columnId) as string[]; if (!roles || roles.length === 0) { return false; } if (!filterValue || filterValue.length === 0) { return true; } return filterValue.some((role: string) => roles.includes(role)); }, }, { id: "actions", header: "Actions", cell: ({ row }) => { const user = row.original; // Only show the button if the user is currently selected/assigned if (row.getIsSelected()) { return ( ); } return null; }, enableColumnFilter: false, enableSorting: false, }, ], [scheduleInstance.id, rowSelection] ); const table = useReactTable({ data: allPersonnel, columns, state: { rowSelection, columnFilters, globalFilter, columnVisibility, pagination, }, onRowSelectionChange: setRowSelection, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), filterFns: { includesString: (row, columnId, filterValue: string) => { const rowValue = String(row.getValue(columnId)).toLowerCase(); return rowValue.includes(filterValue.toLowerCase()); }, }, }); useEffect(() => { const initialSelection: Record = {}; for (const user of scheduleInstance.personnel) { const rowIndex = allPersonnel.findIndex((p) => p.id === user.id); if (rowIndex !== -1) { initialSelection[rowIndex.toString()] = true; } } setRowSelection(initialSelection); }, [allPersonnel, scheduleInstance.personnel]); const handleSaveChanges = async () => { setIsSaving(true); const selectedPersonnelIds = table .getFilteredSelectedRowModel() .rows.map((row) => row.original.id); const result = await assignResourcesToSchedule({ scheduleInstanceId: scheduleInstance.id, personnelIds: selectedPersonnelIds, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } setIsSaving(false); }; const handleExportPreferenceLinks = () => { setIsExporting(true); try { const selectedPersonnel = table .getFilteredSelectedRowModel() .rows.map((row) => row.original); if (selectedPersonnel.length === 0) { toast.info("No personnel selected for export."); setIsExporting(false); return; } const csvRows = []; csvRows.push("Name,Email,Preference Link"); // CSV Header for (const user of selectedPersonnel) { if (user.preferenceToken) { const preferenceLink = `${window.location.origin}/preferences/${scheduleInstance.id}?token=${user.preferenceToken}`; csvRows.push(`"${user.name}","${user.email}","${preferenceLink}"`); } else { csvRows.push( `"${user.name}","${user.email}","No preference token available"` ); } } const csvString = csvRows.join("\n"); const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.setAttribute( "download", `preference_links_${scheduleInstance.id}.csv` ); document.body.appendChild(link); link.click(); document.body.removeChild(link); toast.success("Preference links exported successfully!"); } catch (error) { console.error("Error exporting preference links:", error); toast.error("Failed to export preference links."); } finally { setIsExporting(false); } }; const handleEmailPreferenceLinks = async () => { setIsSendingEmails(true); const selectedPersonnel = table .getFilteredSelectedRowModel() .rows.map((row) => row.original); if (selectedPersonnel.length === 0) { toast.info("No personnel selected to email."); setIsSendingEmails(false); return; } let successfulEmails = 0; let failedEmails = 0; for (const user of selectedPersonnel) { if (user.email && user.preferenceToken) { try { const result = await sendPreferenceEmail({ scheduleInstanceId: scheduleInstance.id, personnelId: user.id, email: user.email, preferenceToken: user.preferenceToken, userName: user.name, }); if (result.success) { successfulEmails++; toast.success(`Sent Email to ${user.name}`); } else { failedEmails++; toast.error(`Failed to email ${user.name}: ${result.message}`); } } catch (error) { failedEmails++; console.error(`Error sending email to ${user.name}:`, error); toast.error(`Error sending email to ${user.name}`); } } else { failedEmails++; toast.warning( `Skipping email for ${user.name}: Missing email or preference token.` ); } } if (successfulEmails > 0) { toast.success( `${successfulEmails} preference links emailed successfully!` ); } if (failedEmails > 0) { toast.error(`${failedEmails} preference links failed to send.`); } setIsSendingEmails(false); toast.success(`Email Sending Process Completed!`); }; return (

Assign Personnel

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : (

{flexRender( header.column.columnDef.header, header.getContext() )} {{ asc: " 🔼", desc: " 🔽", }[header.column.getIsSorted() as string] ?? null}

)} ); })} ))} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.column.getCanFilter() ? (

{header.column.id === "roles" ? ( ) : ( header.column.setFilterValue(e.target.value) } className="w-full rounded-md shadow-sm text-sm" /> )}

) : null} ))} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( No results. )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

Rows per page

Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()}

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/preview-assignments-tab.tsx" isMerged="true" "use client"; import { ScheduleInstance, Course, User, Room, AvailabilityTemplate, } from "@prisma/client"; import { toast } from "sonner"; import { X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { removeResourceFromSchedule, updateScheduleTemplate, } from "@/lib/actions"; // Import updateScheduleTemplate import { SectionWithRelations } from "./resource-assignment-client"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; type ResourceType = "course" | "personnel" | "room" | "section"; interface PreviewTabProps { scheduleInstance: ScheduleInstance & { courses: Course[]; personnel: User[]; rooms: Room[]; sections: SectionWithRelations[]; // Ensure availabilityTemplate is included if it's eagerly loaded availabilityTemplate?: AvailabilityTemplate | null; }; availabilityTemplates: AvailabilityTemplate[]; // Add availabilityTemplates to props } export function PreviewTab({ scheduleInstance, availabilityTemplates, }: PreviewTabProps) { const handleRemove = async ( resourceId: string, resourceType: ResourceType ) => { const result = await removeResourceFromSchedule({ scheduleInstanceId: scheduleInstance.id, resourceId, resourceType, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } }; const handleTemplateChange = async (newTemplateId: string) => { const result = await updateScheduleTemplate({ scheduleInstanceId: scheduleInstance.id, availabilityTemplateId: newTemplateId, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } }; // A generic component to render a list of resources with remove functionality const ResourceList = ({ title, items, renderItem, type }: any) => (

{title}

{items.length > 0 ? (

{renderItem(item)}

) : (

No {title.toLowerCase()} assigned.

)}

); return ( Assigned Resources Preview {/* Availability Template Selector */}

Availability Template

This defines the days and times when events can be scheduled.

( <> {item.code} - {item.title} )} /> ( <> {item.name}

{item.roles.map((role) => ( {role} ))}

)} /> ( <> {item.name} ( {item.building})

Type: {item.type}, Capacity: {item.capacity}

)} /> ( <> {item.name}

{item.batch.program.name} - {item.batch.name}

)} />

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/resource-assignment-client.tsx" isMerged="true" "use client"; import { useState } from "react"; import { ScheduleInstance, Course, User, Room, Section, Batch, Program, AvailabilityTemplate, } from "@prisma/client"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; // Import Button import { toast } from "sonner"; // Import toast import { Loader2, Zap } from "lucide-react"; // Import icons for loading and trigger import { CoursesAssignmentTab } from "./courses-assignment-tab"; import { PersonnelAssignmentTab } from "./personnel-assignment-tab"; import { RoomsAssignmentTab } from "./rooms-assignment-tab"; import { AttendeesAssignmentTab } from "./attendees-assignment-tab"; import { PreviewTab } from "./preview-assignments-tab"; import { triggerAllocation } from "@/lib/actions"; // Import the server action import { AllocationModal } from "./allocation-modal"; import { Dialog } from "@/components/ui/dialog"; // Define a more specific type for Sections with their parent relations export type SectionWithRelations = Section & { batch: Batch & { program: Program; }; }; interface ResourceAssignmentClientProps { scheduleInstance: ScheduleInstance & { courses: Course[]; personnel: User[]; rooms: Room[]; sections: Section[]; availabilityTemplate?: AvailabilityTemplate | null; }; allCourses: Course[]; allPersonnel: User[]; allRooms: Room[]; allSections: SectionWithRelations[]; availabilityTemplates: AvailabilityTemplate[]; } export function ResourceAssignmentClient({ scheduleInstance, allCourses, allPersonnel, allRooms, allSections, availabilityTemplates, }: ResourceAssignmentClientProps) { // const [isLoading, setIsLoading] = useState(false); // Can be removed if only used for modal const [isModalOpen, setIsModalOpen] = useState(false); // State to control the modal const scheduleInstanceWithRelations = { ...scheduleInstance, courses: scheduleInstance.courses, personnel: scheduleInstance.personnel, rooms: scheduleInstance.rooms, sections: scheduleInstance.sections as SectionWithRelations[], availabilityTemplate: scheduleInstance.availabilityTemplate ?? null, }; return ( <>

Manage Schedule

{/* This button now opens the modal */}

Preview Courses Personnel Rooms Attendees ); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/rooms-assignment-tab.tsx" isMerged="true" "use client"; import { useState, useMemo, useEffect } from "react"; import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, useReactTable, ColumnFiltersState, VisibilityState, PaginationState, } from "@tanstack/react-table"; import { toast } from "sonner"; import { ScheduleInstance, Room } from "@prisma/client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { assignResourcesToSchedule } from "@/lib/actions"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SlidersHorizontal, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Label } from "@/components/ui/label"; interface RoomsAssignmentTabProps { scheduleInstance: ScheduleInstance & { rooms: Room[] }; allRooms: Room[]; } export function RoomsAssignmentTab({ scheduleInstance, allRooms, }: RoomsAssignmentTabProps) { const [rowSelection, setRowSelection] = useState>( () => { const initialSelection: Record = {}; for (const room of scheduleInstance.rooms) { const rowIndex = allRooms.findIndex((r) => r.id === room.id); if (rowIndex !== -1) { initialSelection[rowIndex.toString()] = true; } } return initialSelection; } ); const [isSaving, setIsSaving] = useState(false); const [columnFilters, setColumnFilters] = useState([]); const [globalFilter, setGlobalFilter] = useState(""); const [columnVisibility, setColumnVisibility] = useState({}); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); const columns: ColumnDef[] = useMemo( () => [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, enableColumnFilter: false, }, { accessorKey: "name", header: "Name", cell: ({ row }) => (

{row.getValue("name")}

), enableColumnFilter: true, }, { accessorKey: "building", header: "Building", cell: ({ row }) => row.getValue("building"), enableColumnFilter: true, }, { accessorKey: "type", header: "Type", cell: ({ row }) => row.getValue("type"), enableColumnFilter: true, filterFn: "includesString", }, { accessorKey: "capacity", header: () =>

Capacity

, cell: ({ row }) => (

{row.getValue("capacity")}

), enableColumnFilter: true, filterFn: "inNumberRange", }, ], [] ); const table = useReactTable({ data: allRooms, columns, state: { rowSelection, columnFilters, globalFilter, columnVisibility, pagination, }, onRowSelectionChange: setRowSelection, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), getFacetedMinMaxValues: getFacetedMinMaxValues(), manualPagination: false, manualFiltering: false, filterFns: { inNumberRange: (row, columnId, value) => { const numValue = row.getValue(columnId) as number; if (!value || typeof numValue !== "number") return true; const [min, max] = value; if (min !== undefined && numValue < min) return false; if (max !== undefined && numValue > max) return false; return true; }, includesString: (row, columnId, filterValue: string) => { const rowValue = String(row.getValue(columnId)).toLowerCase(); return rowValue.includes(filterValue.toLowerCase()); }, }, }); useEffect(() => { const initialSelection: Record = {}; for (const room of scheduleInstance.rooms) { const rowIndex = allRooms.findIndex((r) => r.id === room.id); if (rowIndex !== -1) { initialSelection[rowIndex.toString()] = true; } } setRowSelection(initialSelection); }, [allRooms, scheduleInstance.rooms]); const handleSaveChanges = async () => { setIsSaving(true); const selectedRoomIds = table .getFilteredSelectedRowModel() .rows.map((row) => row.original.id); const result = await assignResourcesToSchedule({ scheduleInstanceId: scheduleInstance.id, roomIds: selectedRoomIds, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message); } setIsSaving(false); }; return ( Assign Rooms

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : (

{flexRender( header.column.columnDef.header, header.getContext() )} {{ asc: " 🔼", desc: " 🔽", }[header.column.getIsSorted() as string] ?? null}

)} ); })} ))} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.column.getCanFilter() ? (

{header.column.id === "capacity" ? (

header.column.setFilterValue( (old: [number, number]) => [ e.target.value ? Number(e.target.value) : undefined, old?.[1], ] ) } className="w-1/2 rounded-md shadow-sm text-sm" /> header.column.setFilterValue( (old: [number, number]) => [ old?.[0], e.target.value ? Number(e.target.value) : undefined, ] ) } className="w-1/2 rounded-md shadow-sm text-sm" />

) : header.column.id === "type" ? ( ) : ( header.column.setFilterValue(e.target.value) } className="w-full rounded-md shadow-sm text-sm" /> )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

Rows per page

Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()}

); } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/_components/timeslot-preference-ranking.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { toast } from "sonner" import { GripVertical, Clock, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface TimeSlot { id: string day: string startTime: string endTime: string duration: number } interface TimeslotPreference { timeslotId: string rank: number resourceId: string resourceType: "PERSONNEL" | "ROOM" } interface TimeslotPreferenceRankingProps { resourceId: string resourceType: "PERSONNEL" | "ROOM" resourceName: string scheduleInstanceId: string availableTimeslots: TimeSlot[] existingPreferences: TimeslotPreference[] onPreferencesChange?: (preferences: TimeslotPreference[]) => void } export function TimeslotPreferenceRanking({ resourceId, resourceType, resourceName, scheduleInstanceId, availableTimeslots, existingPreferences, onPreferencesChange, }: TimeslotPreferenceRankingProps) { const [ranked, setRanked] = useState([]) const [unranked, setUnranked] = useState([]) const [isSaving, setIsSaving] = useState(false) const [draggedItemId, setDraggedItemId] = useState(null) const [selectedDay, setSelectedDay] = useState("all") const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] const groupedTimeslots = availableTimeslots.reduce( (acc, slot) => { if (!acc[slot.day]) acc[slot.day] = [] acc[slot.day].push(slot) return acc }, {} as Record, ) useEffect(() => { const rankedIds = new Set(existingPreferences.map((p) => p.timeslotId)) const sortedRanked = [...existingPreferences] .sort((a, b) => a.rank - b.rank) .map((p) => availableTimeslots.find((t) => t.id === p.timeslotId)!) .filter(Boolean) const initialUnranked = availableTimeslots.filter((t) => !rankedIds.has(t.id)) setRanked(sortedRanked) setUnranked(initialUnranked) }, [availableTimeslots, existingPreferences]) const filteredUnranked = selectedDay === "all" ? unranked : unranked.filter((slot) => slot.day === selectedDay) const filteredRanked = selectedDay === "all" ? ranked : ranked.filter((slot) => slot.day === selectedDay) const handleDragStart = (e: React.DragEvent, slot: TimeSlot) => { setDraggedItemId(slot.id) e.dataTransfer.effectAllowed = "move" } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDropOnRanked = (e: React.DragEvent, dropIndex?: number) => { e.preventDefault() if (!draggedItemId) return const draggedSlot = ranked.find((s) => s.id === draggedItemId) || unranked.find((s) => s.id === draggedItemId) if (!draggedSlot) return const newRanked = ranked.filter((s) => s.id !== draggedItemId) const newUnranked = unranked.filter((s) => s.id !== draggedItemId) if (dropIndex !== undefined) { newRanked.splice(dropIndex, 0, draggedSlot) } else { newRanked.push(draggedSlot) } setRanked(newRanked) setUnranked(newUnranked) setDraggedItemId(null) } const handleDropOnUnranked = (e: React.DragEvent) => { e.preventDefault() if (!draggedItemId) return const draggedSlot = ranked.find((s) => s.id === draggedItemId) if (!draggedSlot) return setRanked(ranked.filter((s) => s.id !== draggedItemId)) setUnranked([...unranked, draggedSlot]) setDraggedItemId(null) } const handleSave = async () => { setIsSaving(true) const preferences: TimeslotPreference[] = ranked.map((slot, index) => ({ timeslotId: slot.id, rank: index + 1, resourceId, resourceType, })) try { // Call API to save preferences const response = await fetch(`/api/schedules/${scheduleInstanceId}/timeslot-preferences`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ preferences }), }) if (response.ok) { toast.success("Timeslot preferences saved successfully!") onPreferencesChange?.(preferences) } else { throw new Error("Failed to save preferences") } } catch (error) { toast.error("Failed to save timeslot preferences") } finally { setIsSaving(false) } } const formatTime = (time: string) => { return new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, }) } return (

Timeslot Preferences

Rank timeslots by preference for {resourceName}

{resourceType === "PERSONNEL" ? "Personnel" : "Room"}

All Days Mon-Wed Thu-Fri Weekend

{/* Ranked Timeslots */} Preferred Timeslots handleDropOnRanked(e)} className="min-h-[300px]"> {filteredRanked.length > 0 ? (

{filteredRanked.map((slot, index) => (

handleDragStart(e, slot)} onDragOver={handleDragOver} onDrop={(e) => handleDropOnRanked(e, index)} className="flex items-center p-3 border rounded-lg cursor-grab bg-muted/50 hover:bg-muted transition-colors" >

{slot.day}

{formatTime(slot.startTime)} - {formatTime(slot.endTime)}

#{index + 1}

))}

) : (

Drag timeslots here to rank them

)} {/* Available Timeslots */} Available Timeslots {filteredUnranked.length > 0 ? (

{filteredUnranked.map((slot) => (

handleDragStart(e, slot)} className="flex items-center p-3 border rounded-lg cursor-grab hover:bg-muted/50 transition-colors" >

{slot.day}

{formatTime(slot.startTime)} - {formatTime(slot.endTime)}

))}

) : (

No available timeslots for this filter

)}

) } [V0_FILE]typescriptreact:file="app/admin/schedules/[scheduleId]/page.tsx" isMerged="true" import { getScheduleInstanceDetails, getAllAvailabilityTemplates, } from "@/lib/actions"; import { notFound } from "next/navigation"; import { ResourceAssignmentClient } from "./_components/resource-assignment-client"; import { format } from "date-fns"; import Link from "next/link"; type ScheduleDashboardPageProps = { params: Promise<{ scheduleId: string; }>; }; export default async function ScheduleDashboardPage({ params, }: ScheduleDashboardPageProps) { const { scheduleId } = await params; const data = await getScheduleInstanceDetails(scheduleId); const availabilityTemplates = await getAllAvailabilityTemplates(); // Fetch all availability templates if (!data) { notFound(); } const { scheduleInstance, allCourses, allPersonnel, allRooms, allSections } = data; return (

{/* Back Button */}

← Back to schedules

{/* Title */}

{scheduleInstance.name}

{/* Date Range */}

{format(scheduleInstance.startDate, "PPP")} -{" "} {format(scheduleInstance.endDate, "PPP")}

); } [V0_FILE]typescriptreact:file="app/admin/schedules/_components/client-page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { ScheduleInstance, AvailabilityTemplate } from "@prisma/client"; // Import AvailabilityTemplate import { PlusCircle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "@/components/ui/dialog"; import { SchedulesTable } from "./schedules-table"; import { ScheduleForm } from "./schedule-form"; interface ScheduleClientPageProps { schedules: ScheduleInstance[]; availabilityTemplates: AvailabilityTemplate[]; // Add availabilityTemplates to props } export function ScheduleClientPage({ schedules, availabilityTemplates, }: ScheduleClientPageProps) { const [isDialogOpen, setIsDialogOpen] = useState(false); const handleSuccess = () => { setIsDialogOpen(false); // Revalidation is handled by the server action }; return ( <>

Schedule Instances

); } [V0_FILE]typescriptreact:file="app/admin/schedules/_components/schedule-form.tsx" isMerged="true" "use client"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { toast } from "sonner"; import { useRouter } from "next/navigation"; import { AvailabilityTemplate } from "@prisma/client"; import { createScheduleInstance } from "@/lib/actions"; import { createScheduleInstanceSchema } from "@/lib/schemas"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { CalendarIcon } from "lucide-react"; import { Calendar } from "@/components/ui/calendar"; import { cn } from "@/lib/utils"; import { format } from "date-fns"; type ScheduleFormProps = { // We don't need the full schedule for creation // schedule?: ScheduleInstance; onSuccess: () => void; availabilityTemplates: AvailabilityTemplate[]; }; type ScheduleFormValues = z.infer; export function ScheduleForm({ availabilityTemplates, onSuccess, }: ScheduleFormProps) { const router = useRouter(); const form = useForm({ resolver: zodResolver(createScheduleInstanceSchema), defaultValues: { name: "", startDate: new Date(), endDate: new Date(), availabilityTemplateId: "", }, }); const onSubmit = async (values: ScheduleFormValues) => { const result = await createScheduleInstance(values); if (result.success && result.data) { toast.success(result.message); onSuccess(); // Redirect to the new schedule's dashboard router.push(`/admin/schedules/${result.data.id}`); } else { toast.error(result.message); } }; return (

( Schedule Name A unique name to identify this schedule instance. )} /> ( Availability Template This defines the days and times when events can be scheduled. )} />

( Start Date )} /> ( End Date )} />

); } [V0_FILE]typescriptreact:file="app/admin/schedules/_components/schedules-columns.tsx" isMerged="true" "use client"; import { ColumnDef } from "@tanstack/react-table"; import Link from "next/link"; import { ArrowUpDown, MoreHorizontal } from "lucide-react"; import { ScheduleInstance, ScheduleStatus } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Badge } from "@/components/ui/badge"; const statusVariantMap: Record< ScheduleStatus, "default" | "secondary" | "destructive" | "outline" > = { DRAFT: "secondary", PREFERENCES_OPEN: "default", LOCKED: "outline", COMPLETED: "default", }; export const columns: ColumnDef[] = [ { accessorKey: "name", header: ({ column }) => { return ( ); }, cell: ({ row }) =>

{row.getValue("name")}

, }, { accessorKey: "startDate", header: ({ column }) => { return ( ); }, cell: ({ row }) => { const date = new Date(row.getValue("startDate")); return

{date.toLocaleDateString()}

; }, }, { accessorKey: "endDate", header: ({ column }) => { return ( ); }, cell: ({ row }) => { const date = new Date(row.getValue("endDate")); return

{date.toLocaleDateString()}

; }, }, { accessorKey: "status", header: ({ column }) => { return ( ); }, cell: ({ row }) => { const status = row.getValue("status") as ScheduleStatus; const formattedStatus = status.replace("_", " "); return ( {formattedStatus} ); }, }, { id: "actions", cell: ({ row }) => { const schedule = row.original; return ( Actions Manage ); }, }, ]; [V0_FILE]typescriptreact:file="app/admin/schedules/_components/schedules-table.tsx" isMerged="true" "use client"; import { ScheduleInstance, ScheduleStatus } from "@prisma/client"; import TanstackEnhancedTable from "@/components/shared/tanstack-enhanced-table"; // Adjusted import path to be relative // import Link from "next/link"; // Not directly used in actions due to programmatic navigation import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; interface SchedulesTableProps { schedules: ScheduleInstance[]; } export function SchedulesTable({ schedules }: SchedulesTableProps) { const columns = [ { key: "name", label: "Name", sortable: true, searchable: true, }, { key: "startDate", label: "Start Date", render: (date: string) => new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }), sortable: true, searchable: false, }, { key: "endDate", label: "End Date", render: (date: string) => new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }), sortable: true, searchable: false, }, { key: "status", label: "Status", render: (status: ScheduleStatus) => ( {status .split("_") .map( (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(" ")} ), sortable: true, searchable: false, }, ]; const statusOptions = Object.values(ScheduleStatus).map((status) => ({ value: status, label: status.replace(/_/g, " "), })); const filterOptions = [ { key: "status", label: "Status", type: "select" as const, options: statusOptions, }, ]; const actions = [ { key: "manage", label: "Manage", // No icon here, but you could add one, e.g., }, ]; const handleRowAction = (action: string, row: ScheduleInstance) => { if (action === "manage") { // Programmatic navigation for the "Manage" action window.location.href = `/admin/schedules/${row.id}`; } }; return ( columns={columns} data={schedules} filterOptions={filterOptions} searchPlaceholder="Filter schedules by name..." emptyMessage="No schedules found." actions={actions} onRowAction={handleRowAction} /> ); } [V0_FILE]typescriptreact:file="app/admin/schedules/page.tsx" isMerged="true" // app/admin/schedules/page.tsx import { getAllScheduleInstances, getAllAvailabilityTemplates, } from "@/lib/actions"; import { ScheduleClientPage } from "./_components/client-page"; export default async function SchedulesPage() { // Await both results const schedulesResult = await getAllScheduleInstances(); const templatesResult = await getAllAvailabilityTemplates(); // Extract the data array if the action was successful, otherwise default to an empty array const schedules = schedulesResult.success ? schedulesResult.data : []; // NOTE: You should also update getAllAvailabilityTemplates to the new format. // Assuming it is also updated, we handle its result the same way. const availabilityTemplates = templatesResult.success ? templatesResult.data : []; // You could also add server-side error logging here if needed if (!schedulesResult.success) { console.error("Failed to load schedules:", schedulesResult.message); } if (!templatesResult.success) { console.error("Failed to load templates:", templatesResult.message); } return (

); } [V0_FILE]typescript:file="app/admin/timetable/_components/_utils.ts" isMerged="true" // app/admin/timetable/_components/_utils.ts import { ScheduleInstance, AvailabilityTemplate, ScheduledEvent, ActivityTemplate, Room, User, Section, Group, Batch, Program, DayOfWeek, Role, Course, } from "@prisma/client"; // ================================================================================= // Types for client-side components // ================================================================================= // Extend Prisma types for full relations where needed export type FullScheduleInstance = ScheduleInstance & { availabilityTemplate: AvailabilityTemplate; scheduledEvents: FullScheduledEvent[]; courses: Course[]; // For calculating total activities to schedule sections: (Section & { batch: Batch & { program: Program } })[]; // For calculating total activities to schedule }; export type FullScheduledEvent = ScheduledEvent & { activityTemplate: ActivityTemplate; room: Room | null; // room can be null now personnel: User[]; attendeeSection: (Section & { batch: Batch & { program: Program } }) | null; attendeeGroup: | (Group & { section: Section & { batch: Batch & { program: Program } } }) | null; }; export type TimetableStatusOverview = { id: string; name: string; status: "COMPLETED" | "SEMI_ALLOCATED" | "NOT_SCHEDULED"; totalActivitiesToSchedule: number; currentlyScheduledEvents: number; }; // Types for free resources export type AvailablePersonnel = User; export type AvailableRoom = Room; // Active time slot definition export type ActiveTimeSlot = { dayOfWeek: DayOfWeek; startTime: string; // HH:MM endTime: string; // HH:MM } | null; // ================================================================================= // Helper functions for time and day conversions // ================================================================================= /** * Converts "HH:MM" time string to a slot index within a 24-hour day (0-47). * e.g., "00:00" -> 0, "08:30" -> 17, "23:30" -> 47 */ export const timeToSlotIndex = (time: string): number => { const [hours, minutes] = time.split(":").map(Number); return hours * 2 + Math.floor(minutes / 30); }; /** * Converts a slot index back to "HH:MM" time string. * e.g., 0 -> "00:00", 17 -> "08:30", 47 -> "23:30" */ export const slotToTime = (slotIndex: number): string => { const hours = Math.floor(slotIndex / 2); const minutes = (slotIndex % 2) * 30; return `${String(hours).padStart(2, "0")}:${String(minutes).padStart( 2, "0" )}`; }; /** * Generates a list of 30-minute time slots between a start and end time (inclusive of start, exclusive of end). */ export const generateTimeSlots = ( startHour: number, endHour: number ): { display: string; value: string }[] => { const slots = []; for (let h = startHour; h < endHour; h++) { for (let m = 0; m < 60; m += 30) { const hour = String(h).padStart(2, "0"); const minute = String(m).padStart(2, "0"); const time = `${hour}:${minute}`; slots.push({ display: time, value: time }); } } return slots; }; // Ordered days of the week for consistent display export const orderedDays: DayOfWeek[] = [ DayOfWeek.MONDAY, DayOfWeek.TUESDAY, DayOfWeek.WEDNESDAY, DayOfWeek.THURSDAY, DayOfWeek.FRIDAY, DayOfWeek.SATURDAY, DayOfWeek.SUNDAY, ]; [V0_FILE]typescriptreact:file="app/admin/timetable/_components/free-resource-card.tsx" isMerged="true" // app/admin/timetable/_components/FreeResourceCard.tsx "use client"; import React from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { User, Building2, Plus } from "lucide-react"; import { AvailablePersonnel, AvailableRoom, FullScheduledEvent, } from "./_utils"; import { toast } from "sonner"; import { updateScheduledEventResources } from "@/lib/actions"; // Assuming this action is available interface FreeResourceCardProps { resource: AvailablePersonnel | AvailableRoom; type: "personnel" | "room"; selectedEventToAssign: FullScheduledEvent | null; onAssignResource: () => void; // Callback to refresh sidebar data } export function FreeResourceCard({ resource, type, selectedEventToAssign, onAssignResource, }: FreeResourceCardProps) { const handleAssign = async () => { if (!selectedEventToAssign) { toast.error( "Please select a scheduled event first to assign this resource." ); return; } let result; if (type === "room") { result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, roomId: resource.id, }); } else { // Assuming resource is AvailablePersonnel (User) const currentPersonnelIds = selectedEventToAssign.personnelIds || []; const newPersonnelIds = [ ...new Set([...currentPersonnelIds, resource.id]), ]; // Add if not already present result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, personnelIds: newPersonnelIds, }); } if (result?.success) { toast.success( `${type === "room" ? "Room" : "Personnel"} assigned successfully!` ); onAssignResource(); // Refresh sidebars } else { toast.error(result?.message || `Failed to assign ${type}.`); } }; return (

{type === "personnel" ? ( ) : ( )}

{resource.name} {type === "room" && ` (${(resource as AvailableRoom).building})`}

{type === "personnel" && (

{(resource as AvailablePersonnel).roles.map((role) => ( {role} ))}

)} {type === "room" && (

Type: {(resource as AvailableRoom).type}, Cap:{" "} {(resource as AvailableRoom).capacity}

)}

); } [V0_FILE]typescriptreact:file="app/admin/timetable/_components/manual-allocation-sidebar.tsx" isMerged="true" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { toast } from "sonner" import { User, Building2, Plus, Minus, Zap, Clock, Users, BookOpen, Settings } from "lucide-react" import type { FullScheduledEvent, ActiveTimeSlot, AvailablePersonnel, AvailableRoom } from "./_utils" import { updateScheduledEventResources } from "@/lib/actions" interface ManualAllocationSidebarProps { activeTimeSlot: ActiveTimeSlot eventsAtTimeSlot: FullScheduledEvent[] freeResourcesAtTimeSlot: { availablePersonnel: AvailablePersonnel[] availableRooms: AvailableRoom[] } selectedEventToAssign: FullScheduledEvent | null onSelectEventToAssign: (event: FullScheduledEvent | null) => void onEventUpdate: (updatedEvent: FullScheduledEvent) => void onRefreshData: () => void scheduleInstanceId: string } export function ManualAllocationSidebar({ activeTimeSlot, eventsAtTimeSlot, freeResourcesAtTimeSlot, selectedEventToAssign, onSelectEventToAssign, onEventUpdate, onRefreshData, scheduleInstanceId, }: ManualAllocationSidebarProps) { const [isRunningSimpleSolver, setIsRunningSimpleSolver] = useState(false) const handleAssignResource = async (resourceId: string, resourceType: "personnel" | "room") => { if (!selectedEventToAssign) { toast.error("Please select an event first") return } let result if (resourceType === "room") { result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, roomId: resourceId, }) } else { const currentPersonnelIds = selectedEventToAssign.personnelIds || [] const newPersonnelIds = [...new Set([...currentPersonnelIds, resourceId])] result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, personnelIds: newPersonnelIds, }) } if (result?.success && result.data) { toast.success(`${resourceType === "room" ? "Room" : "Personnel"} assigned successfully!`) onEventUpdate(result.data as FullScheduledEvent) onRefreshData() } else { toast.error(result?.message || `Failed to assign ${resourceType}`) } } const handleRemoveResource = async (resourceId: string, resourceType: "personnel" | "room") => { if (!selectedEventToAssign) return let result if (resourceType === "room") { result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, roomId: null, }) } else { const updatedPersonnelIds = selectedEventToAssign.personnelIds.filter((id) => id !== resourceId) result = await updateScheduledEventResources({ scheduledEventId: selectedEventToAssign.id, personnelIds: updatedPersonnelIds, }) } if (result?.success && result.data) { toast.success(`${resourceType === "room" ? "Room" : "Personnel"} removed successfully!`) onEventUpdate(result.data as FullScheduledEvent) onRefreshData() } else { toast.error(result?.message || `Failed to remove ${resourceType}`) } } const handleRunSimpleSolver = async () => { if (!activeTimeSlot) { toast.error("Please select a time slot first") return } setIsRunningSimpleSolver(true) try { const response = await fetch(`/api/schedules/${scheduleInstanceId}/simple-solver`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ dayOfWeek: activeTimeSlot.dayOfWeek, startTime: activeTimeSlot.startTime, endTime: activeTimeSlot.endTime, }), }) if (response.ok) { const result = await response.json() toast.success("Simple allocation completed!") onRefreshData() } else { throw new Error("Failed to run simple solver") } } catch (error) { toast.error("Failed to run simple allocation") } finally { setIsRunningSimpleSolver(false) } } if (!activeTimeSlot) { return (

Select a Time Slot

Click on a time slot in the timetable to view and manage assignments

) } return (

{/* Time Slot Header */} {activeTimeSlot.dayOfWeek}, {activeTimeSlot.startTime}

{eventsAtTimeSlot.length} Event{eventsAtTimeSlot.length !== 1 ? "s" : ""} {freeResourcesAtTimeSlot.availablePersonnel.length + freeResourcesAtTimeSlot.availableRooms.length}{" "} Available

{/* Events and Resources Tabs */} Events Resources {eventsAtTimeSlot.length > 0 ? ( eventsAtTimeSlot.map((event) => ( onSelectEventToAssign(selectedEventToAssign?.id === event.id ? null : event)} >

{event.activityTemplate.title}

{event.attendeeSection?.name || event.attendeeGroup?.name}

{/* Current Assignments */}

{event.room ? (

{event.room.name} {selectedEventToAssign?.id === event.id && ( )}

) : ( No room assigned )}

{event.personnel.length > 0 ? (

{event.personnel.map((person) => (

{person.name}

{person.roles.map((role) => ( {role} ))}

{selectedEventToAssign?.id === event.id && ( )}

))}

) : ( No personnel assigned )}

{selectedEventToAssign?.id === event.id && ( Selected for Assignment )}

)) ) : (

No events at this time slot

)} Personnel Rooms {freeResourcesAtTimeSlot.availablePersonnel.length > 0 ? ( freeResourcesAtTimeSlot.availablePersonnel.map((person) => (

{person.name}

{person.roles.map((role) => ( {role} ))}

)) ) : (

No personnel available

)} {freeResourcesAtTimeSlot.availableRooms.length > 0 ? ( freeResourcesAtTimeSlot.availableRooms.map((room) => (

{room.name}

{room.building} • {room.type} • Cap: {room.capacity}

)) ) : (

No rooms available

)} {!selectedEventToAssign && (

Select an event above to assign resources

)}

) } [V0_FILE]typescriptreact:file="app/admin/timetable/_components/scheduled-event-card.tsx" isMerged="true" // app/admin/timetable/_components/ScheduledEventCard.tsx "use client"; import React from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { X, UserMinus, Building2 } from "lucide-react"; import { FullScheduledEvent, ActiveTimeSlot, AvailablePersonnel, AvailableRoom, } from "./_utils"; import { toast } from "sonner"; import { updateScheduledEventResources } from "@/lib/actions"; // Assuming this action is available interface ScheduledEventCardProps { event: FullScheduledEvent; onEventUpdate: (updatedEvent: FullScheduledEvent) => void; selectedEventToAssign: FullScheduledEvent | null; onSelectEventToAssign: (event: FullScheduledEvent | null) => void; activeTimeSlot: ActiveTimeSlot; // For refreshing data when unassigning } export function ScheduledEventCard({ event, onEventUpdate, selectedEventToAssign, onSelectEventToAssign, activeTimeSlot, }: ScheduledEventCardProps) { const handleRemoveRoom = async () => { if (!event.roomId) { toast.info("No room is assigned to this event."); return; } const result = await updateScheduledEventResources({ scheduledEventId: event.id, roomId: null, }); if (result.success && result.data) { toast.success("Room unassigned successfully!"); onEventUpdate(result.data as FullScheduledEvent); } else { toast.error(result.message || "Failed to unassign room."); } }; const handleRemovePersonnel = async (personnelIdToRemove: string) => { const updatedPersonnelIds = event.personnelIds.filter( (id) => id !== personnelIdToRemove ); const result = await updateScheduledEventResources({ scheduledEventId: event.id, personnelIds: updatedPersonnelIds, }); if (result.success && result.data) { toast.success("Personnel unassigned successfully!"); onEventUpdate(result.data as FullScheduledEvent); } else { toast.error(result.message || "Failed to unassign personnel."); } }; const handleRemoveAllPersonnel = async () => { if (event.personnelIds.length === 0) { toast.info("No personnel assigned to this event."); return; } const result = await updateScheduledEventResources({ scheduledEventId: event.id, personnelIds: [], }); if (result.success && result.data) { toast.success("All personnel unassigned successfully!"); onEventUpdate(result.data as FullScheduledEvent); } else { toast.error(result.message || "Failed to unassign all personnel."); } }; const isSelectedForAssignment = selectedEventToAssign?.id === event.id; return (

{event.activityTemplate.title}

{event.attendeeSection?.name || event.attendeeGroup?.name} ( {event.attendeeSection?.batch.name || event.attendeeGroup?.section.batch.name} )

{/* Room Assignment */}

{event.room ? ( {event.room.name} ({event.room.type}) ) : ( No Room Assigned )} {event.room && ( )}

{/* Personnel Assignment */}

Personnel:

{event.personnel.length > 0 && ( )}

{event.personnel.length > 0 ? (

{p.name} ({p.roles.join(", ")})

) : (

No Personnel Assigned

)}

); } [V0_FILE]typescriptreact:file="app/admin/timetable/page.tsx" isMerged="true" // app/admin/timetable/page.tsx "use client" import { useState, useEffect, useMemo, useCallback } from "react" import type { ScheduleInstance, DayOfWeek } from "@prisma/client" import { toast } from "sonner" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2, CalendarDays } from "lucide-react" import { getAllScheduleInstances, getTimetableDetails, getScheduledEventsForTimeSlot, getFreeResourcesForTimeSlot, getScheduleInstanceOverviewStatuses, // For header overview } from "@/lib/actions" // Assuming these are now available import { type FullScheduleInstance, type FullScheduledEvent, type TimetableStatusOverview, type ActiveTimeSlot, type AvailablePersonnel, type AvailableRoom, timeToSlotIndex, slotToTime, generateTimeSlots, orderedDays, } from "./_components/_utils" // Import utilities import { Badge } from "@/components/ui/badge" import { ManualAllocationSidebar } from "./_components/manual-allocation-sidebar" // Time range for the full timetable grid (e.g., 8 AM to 6 PM) const MIN_HOUR = 8 const MAX_HOUR = 18 // Exclusive, so up to 17:30 export default function TimetableManagementPage() { const [allScheduleInstances, setAllScheduleInstances] = useState([]) const [selectedScheduleInstanceId, setSelectedScheduleInstanceId] = useState(null) const [scheduleInstanceDetails, setScheduleInstanceDetails] = useState(null) const [overviewStatuses, setOverviewStatuses] = useState([]) const [activeTimeSlot, setActiveTimeSlot] = useState(null) const [eventsAtTimeSlot, setEventsAtTimeSlot] = useState([]) const [freeResourcesAtTimeSlot, setFreeResourcesAtTimeSlot] = useState<{ availablePersonnel: AvailablePersonnel[] availableRooms: AvailableRoom[] }>({ availablePersonnel: [], availableRooms: [] }) const [selectedEventToAssign, setSelectedEventToAssign] = useState(null) const [isLoadingSchedules, setIsLoadingSchedules] = useState(true) const [isLoadingDetails, setIsLoadingDetails] = useState(false) const [isSidebarLoading, setIsSidebarLoading] = useState(false) // --- Initial Data Load: All Schedule Instances & Statuses --- useEffect(() => { const loadInitialData = async () => { setIsLoadingSchedules(true) const [instancesResult, statusesResult] = await Promise.all([ getAllScheduleInstances(), getScheduleInstanceOverviewStatuses(), ]) if (instancesResult.success && instancesResult.data) { setAllScheduleInstances(instancesResult.data) if (instancesResult.data.length > 0) { setSelectedScheduleInstanceId(instancesResult.data[0].id) // Auto-select first schedule } } else { toast.error(instancesResult.message || "Failed to load schedules.") } if (statusesResult.success && statusesResult.data) { setOverviewStatuses(statusesResult.data) } else { toast.error(statusesResult.message || "Failed to load schedule statuses.") } setIsLoadingSchedules(false) } loadInitialData() }, []) // --- Load Details for Selected Schedule Instance --- useEffect(() => { const loadScheduleDetails = async () => { if (!selectedScheduleInstanceId) { setScheduleInstanceDetails(null) return } setIsLoadingDetails(true) const result = await getTimetableDetails(selectedScheduleInstanceId) if (result.success && result.data) { setScheduleInstanceDetails(result.data.scheduleInstance as FullScheduleInstance) } else { toast.error(result.message || "Failed to load schedule details.") setScheduleInstanceDetails(null) } setIsLoadingDetails(false) } loadScheduleDetails() }, [selectedScheduleInstanceId]) // --- Load Sidebar Data for Active Time Slot --- const loadSidebarData = useCallback(async () => { if (!activeTimeSlot || !selectedScheduleInstanceId) { setEventsAtTimeSlot([]) setFreeResourcesAtTimeSlot({ availablePersonnel: [], availableRooms: [], }) setSelectedEventToAssign(null) return } setIsSidebarLoading(true) const [eventsResult, freeResourcesResult] = await Promise.all([ getScheduledEventsForTimeSlot({ scheduleInstanceId: selectedScheduleInstanceId, dayOfWeek: activeTimeSlot.dayOfWeek, startTime: activeTimeSlot.startTime, }), getFreeResourcesForTimeSlot({ dayOfWeek: activeTimeSlot.dayOfWeek, startTime: activeTimeSlot.startTime, endTime: activeTimeSlot.endTime, }), ]) if (eventsResult.success && eventsResult.data) { setEventsAtTimeSlot(eventsResult.data as FullScheduledEvent[]) } else { toast.error(eventsResult.message || "Failed to load events for time slot.") setEventsAtTimeSlot([]) } if (freeResourcesResult.success && freeResourcesResult.data) { setFreeResourcesAtTimeSlot(freeResourcesResult.data) } else { toast.error(freeResourcesResult.message || "Failed to load free resources.") setFreeResourcesAtTimeSlot({ availablePersonnel: [], availableRooms: [], }) } setIsSidebarLoading(false) }, [activeTimeSlot, selectedScheduleInstanceId]) useEffect(() => { loadSidebarData() }, [loadSidebarData]) // Generate all 30-minute slots for display const allDisplayTimeSlots = useMemo(() => generateTimeSlots(MIN_HOUR, MAX_HOUR), []) // Determine if a time slot has an event, and its end time const getEventInfoForSlot = useCallback( (day: DayOfWeek, startTime: string) => { if (!scheduleInstanceDetails) return { hasEvent: false, eventEndTime: null } const event = scheduleInstanceDetails.scheduledEvents.find( (e) => e.dayOfWeek === day && e.startTime === startTime, ) return { hasEvent: !!event, eventEndTime: event?.endTime || null } }, [scheduleInstanceDetails], ) // Handle updates to a scheduled event (e.g., resource removal) const handleScheduledEventUpdate = useCallback( (updatedEvent: FullScheduledEvent) => { // Refresh the local state of eventsAtTimeSlot setEventsAtTimeSlot((prev) => prev.map((event) => (event.id === updatedEvent.id ? updatedEvent : event))) // Reload free resources for the same active time slot, as availability might have changed loadSidebarData() // Also update the main scheduleInstanceDetails to reflect the change in the timetable view setScheduleInstanceDetails((prev) => { if (!prev) return null const updatedEvents = prev.scheduledEvents.map((e) => (e.id === updatedEvent.id ? updatedEvent : e)) return { ...prev, scheduledEvents: updatedEvents } }) // If the event being updated was the one selected for assignment, update it if (selectedEventToAssign && selectedEventToAssign.id === updatedEvent.id) { setSelectedEventToAssign(updatedEvent) } }, [loadSidebarData, selectedEventToAssign], ) if (isLoadingSchedules) { return (

Loading schedules...

) } return (

Global Timetable Management

{/* Header: Schedule Selector & Overview */} Select Schedule Instance

{/* Schedule Status Overview */}

{overviewStatuses.map((status) => (

{status.name}

{status.status === "COMPLETED" && ( Completed )} {status.status === "SEMI_ALLOCATED" && ( Semi-Allocated ({status.currentlyScheduledEvents}/{status.totalActivitiesToSchedule}) )} {status.status === "NOT_SCHEDULED" && ( Not Scheduled )}

))}

{isLoadingDetails ? (

Loading timetable data...

) : !scheduleInstanceDetails ? (

Please select a schedule instance to view its timetable.

) : (

{/* Main Timetable Grid */} Timetable for {scheduleInstanceDetails.name}

Click on a time block to view/edit scheduled events and assign free resources.

{/* Table Header for Time Slots */} {allDisplayTimeSlots.map((slot) => ( ))} {/* Table Body for Days and Time Blocks */} {orderedDays.map((day) => ( {allDisplayTimeSlots.map((slot) => { const availabilityBlock = scheduleInstanceDetails.availabilityTemplate.availableSlots.find( (block) => block.dayOfWeek === day && timeToSlotIndex(slot.value) >= timeToSlotIndex(block.startTime) && timeToSlotIndex(slot.value) < timeToSlotIndex(block.endTime), ) const isAvailableTime = !!availabilityBlock const { hasEvent, eventEndTime } = getEventInfoForSlot(day, slot.value) let cellClasses = "h-12 px-2 py-1 border border-muted cursor-pointer text-center text-xs relative overflow-hidden" if (!isAvailableTime) { cellClasses += " bg-muted text-muted opacity-60 pointer-events-none" } else if (hasEvent) { cellClasses += " bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold" } else { cellClasses += " hover:bg-muted text-muted" } const isActiveSlot = activeTimeSlot?.dayOfWeek === day && activeTimeSlot.startTime === slot.value if (isActiveSlot) { cellClasses += " ring-2 ring-blue-500 bg-blue-100" } // Calculate duration in slots const durationSlots = eventEndTime ? timeToSlotIndex(eventEndTime) - timeToSlotIndex(slot.value) : 0 const colSpan = hasEvent ? Math.max(1, durationSlots) : 1 const isStartingEvent = hasEvent // Only render event details on its start slot return ( ) })} ))}

Day / Time	{slot.display}
{day}	setActiveTimeSlot({ dayOfWeek: day, startTime: slot.value, endTime: slotToTime(timeToSlotIndex(slot.value) + 1), // 30 mins later }) } > {isAvailableTime && (hasEvent ? ( isStartingEvent && ( {scheduleInstanceDetails.scheduledEvents .filter((e) => e.dayOfWeek === day && e.startTime === slot.value) .map((e) => e.activityTemplate.title .split(" ") .map((word) => word[0]) .join(""), ) // Acronym .join("/")} ) ) : ( // Placeholder for empty slot ))}

Day / Time

{slot.display}

{day}

setActiveTimeSlot({ dayOfWeek: day, startTime: slot.value, endTime: slotToTime(timeToSlotIndex(slot.value) + 1), // 30 mins later }) } > {isAvailableTime && (hasEvent ? ( isStartingEvent && (

{scheduleInstanceDetails.scheduledEvents .filter((e) => e.dayOfWeek === day && e.startTime === slot.value) .map((e) => e.activityTemplate.title .split(" ") .map((word) => word[0]) .join(""), ) // Acronym .join("/")}

) ) : ( // Placeholder for empty slot ))}

{/* Right Section: Enhanced Manual Allocation Sidebar */}

)}

) } [V0_FILE]typescript:file="app/api/auth/[...nextauth]/route.ts" isMerged="true" import NextAuth from "next-auth" import { authOptions } from "@/lib/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } [V0_FILE]typescript:file="app/api/records/assignment-history/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { prisma } from "@/lib/prisma" import { getAssignmentHistorySchema } from "@/lib/schemas" export async function GET(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session?.user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const queryParams = { collegeId: searchParams.get("collegeId") || undefined, personnelId: searchParams.get("personnelId") || undefined, courseId: searchParams.get("courseId") || undefined, scheduleInstanceId: searchParams.get("scheduleInstanceId") || undefined, startDate: searchParams.get("startDate") ? new Date(searchParams.get("startDate")!) : undefined, endDate: searchParams.get("endDate") ? new Date(searchParams.get("endDate")!) : undefined, } // Validate query parameters const validatedParams = getAssignmentHistorySchema.parse(queryParams) // Build where clause const where: any = {} // Role-based access control if (session.user.systemRole !== "SUPER_ADMIN") { where.collegeId = session.user.collegeId } else if (validatedParams.collegeId) { where.collegeId = validatedParams.collegeId } if (validatedParams.personnelId) { where.personnelId = validatedParams.personnelId } if (validatedParams.courseId) { where.courseId = validatedParams.courseId } if (validatedParams.scheduleInstanceId) { where.scheduleInstanceId = validatedParams.scheduleInstanceId } if (validatedParams.startDate || validatedParams.endDate) { where.assignedAt = {} if (validatedParams.startDate) { where.assignedAt.gte = validatedParams.startDate } if (validatedParams.endDate) { where.assignedAt.lte = validatedParams.endDate } } const records = await prisma.assignmentHistory.findMany({ where, include: { personnel: true, course: true, activityTemplate: true, scheduleInstance: true, college: true, }, orderBy: { assignedAt: "desc", }, }) return NextResponse.json({ success: true, records, total: records.length, }) } catch (error) { console.error("Error fetching assignment history:", error) return NextResponse.json({ error: "Failed to fetch assignment history" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/records/export/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { prisma } from "@/lib/prisma" import { format } from "date-fns" export async function GET(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session?.user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const queryParams = { collegeId: searchParams.get("collegeId") || undefined, personnelId: searchParams.get("personnelId") || undefined, courseId: searchParams.get("courseId") || undefined, scheduleInstanceId: searchParams.get("scheduleInstanceId") || undefined, startDate: searchParams.get("startDate") ? new Date(searchParams.get("startDate")!) : undefined, endDate: searchParams.get("endDate") ? new Date(searchParams.get("endDate")!) : undefined, } // Build where clause (same logic as GET route) const where: any = {} if (session.user.systemRole !== "SUPER_ADMIN") { where.collegeId = session.user.collegeId } else if (queryParams.collegeId) { where.collegeId = queryParams.collegeId } if (queryParams.personnelId) where.personnelId = queryParams.personnelId if (queryParams.courseId) where.courseId = queryParams.courseId if (queryParams.scheduleInstanceId) where.scheduleInstanceId = queryParams.scheduleInstanceId if (queryParams.startDate || queryParams.endDate) { where.assignedAt = {} if (queryParams.startDate) where.assignedAt.gte = queryParams.startDate if (queryParams.endDate) where.assignedAt.lte = queryParams.endDate } const records = await prisma.assignmentHistory.findMany({ where, include: { personnel: true, course: true, activityTemplate: true, scheduleInstance: true, college: true, }, orderBy: { assignedAt: "desc", }, }) // Generate CSV content const csvHeaders = [ "Assignment Date", "College", "Personnel Name", "Personnel Email", "Personnel Roles", "Course Code", "Course Title", "Activity Template", "Activity Duration", "Schedule Instance", "Performance", ] const csvRows = records.map((record) => [ format(new Date(record.assignedAt), "yyyy-MM-dd HH:mm:ss"), record.college.name, record.personnel.name, record.personnel.email, record.personnel.roles.join("; "), record.course.code, record.course.title, record.activityTemplate.title, `${record.activityTemplate.durationMinutes} minutes`, record.scheduleInstance.name, record.performance || "", ]) const csvContent = [csvHeaders, ...csvRows].map((row) => row.map((field) => `"${field}"`).join(",")).join("\n") return new NextResponse(csvContent, { headers: { "Content-Type": "text/csv", "Content-Disposition": `attachment; filename="assignment-history-${format(new Date(), "yyyy-MM-dd")}.csv"`, }, }) } catch (error) { console.error("Error exporting assignment history:", error) return NextResponse.json({ error: "Failed to export assignment history" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/schedules/[scheduleId]/simple-solver/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { prisma } from "@/lib/prisma" import { z } from "zod" import { DayOfWeek } from "@prisma/client" const simpleSolverSchema = z.object({ dayOfWeek: z.nativeEnum(DayOfWeek), startTime: z.string(), endTime: z.string(), }) export async function POST(request: NextRequest, { params }: { params: { scheduleId: string } }) { try { const session = await getServerSession(authOptions) if (!session?.user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await request.json() const { dayOfWeek, startTime, endTime } = simpleSolverSchema.parse(body) const { scheduleId } = params const schedule = await prisma.scheduleInstance.findUnique({ where: { id: scheduleId }, include: { college: true, courses: { include: { activityTemplates: true } }, scheduledEvents: { where: { dayOfWeek, startTime, }, include: { activityTemplate: { include: { course: true } }, room: true, personnel: true, }, }, }, }) if (!schedule) { return NextResponse.json({ error: "Schedule not found" }, { status: 404 }) } if (session.user.systemRole !== "SUPER_ADMIN" && session.user.collegeId !== schedule.collegeId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const historicalAssignments = await prisma.assignmentHistory.findMany({ where: { collegeId: schedule.collegeId, }, select: { personnelId: true, courseId: true, performance: true, }, }) // Create historical preference mapping const historicalMap = new Map() historicalAssignments.forEach((assignment) => { const key = `${assignment.personnelId}-${assignment.courseId}` const existing = historicalMap.get(key) || { count: 0, avgPerformance: 0 } const performanceScore = assignment.performance === "EXCELLENT" ? 5 : assignment.performance === "GOOD" ? 4 : assignment.performance === "AVERAGE" ? 3 : 2 historicalMap.set(key, { count: existing.count + 1, avgPerformance: (existing.avgPerformance * existing.count + performanceScore) / (existing.count + 1), }) }) const availablePersonnel = await prisma.user.findMany({ where: { collegeId: schedule.collegeId, roles: { hasSome: ["INSTRUCTOR", "ASSISTANT"] }, NOT: { scheduledEvents: { some: { dayOfWeek, startTime: { lte: startTime }, endTime: { gt: startTime }, }, }, }, }, include: { timeslotPreferences: { where: { scheduleInstanceId: scheduleId, resourceType: "PERSONNEL", }, orderBy: { rank: "asc" }, }, }, }) // Existing available rooms query const availableRooms = await prisma.room.findMany({ where: { collegeId: schedule.collegeId, NOT: { scheduledEvents: { some: { dayOfWeek, startTime: { lte: startTime }, endTime: { gt: startTime }, }, }, }, }, include: { timeslotPreferences: { where: { scheduleInstanceId: scheduleId, resourceType: "ROOM", }, orderBy: { rank: "asc" }, }, }, }) const updates = [] for (const event of schedule.scheduledEvents) { if (event.roomId && event.personnel.length > 0) continue // Room assignment (unchanged) if (!event.roomId && availableRooms.length > 0) { const preferredRoom = availableRooms.find((room) => room.timeslotPreferences.some((pref) => pref.timeslotId === `${dayOfWeek}-${startTime}`), ) || availableRooms[0] if (preferredRoom) { updates.push( prisma.scheduledEvent.update({ where: { id: event.id }, data: { roomId: preferredRoom.id }, }), ) const index = availableRooms.indexOf(preferredRoom) availableRooms.splice(index, 1) } } if (event.personnel.length === 0 && availablePersonnel.length > 0) { const courseId = event.activityTemplate.course.id // Score personnel based on historical data and preferences const scoredPersonnel = availablePersonnel.map((person) => { const historicalKey = `${person.id}-${courseId}` const historical = historicalMap.get(historicalKey) let score = 0 // Historical experience bonus (0-1) if (historical) { score += Math.min(historical.count * 0.2, 0.5) // Max 0.5 for experience score += historical.avgPerformance * 0.1 // Max 0.5 for performance } // Timeslot preference bonus (0-0.3) const hasTimePreference = person.timeslotPreferences.some( (pref) => pref.timeslotId === `${dayOfWeek}-${startTime}`, ) if (hasTimePreference) { score += 0.3 } return { person, score } }) // Sort by score (highest first) and select the best candidate scoredPersonnel.sort((a, b) => b.score - a.score) const bestPersonnel = scoredPersonnel[0]?.person if (bestPersonnel) { updates.push( prisma.scheduledEvent.update({ where: { id: event.id }, data: { personnel: { connect: { id: bestPersonnel.id }, }, }, }), ) const index = availablePersonnel.indexOf(bestPersonnel) availablePersonnel.splice(index, 1) } } } await Promise.all(updates) return NextResponse.json({ success: true, message: `Enhanced allocation completed for ${schedule.scheduledEvents.length} events`, assignedEvents: schedule.scheduledEvents.length, historicalFactorsConsidered: historicalMap.size, }) } catch (error) { console.error("Error running enhanced simple solver:", error) return NextResponse.json({ error: "Failed to run enhanced simple solver" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/schedules/[scheduleId]/timeslot-preferences/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { prisma } from "@/lib/prisma" import { z } from "zod" const timeslotPreferenceSchema = z.object({ preferences: z.array( z.object({ timeslotId: z.string(), rank: z.number().min(1), resourceId: z.string(), resourceType: z.enum(["PERSONNEL", "ROOM"]), }), ), }) export async function POST(request: NextRequest, { params }: { params: { scheduleId: string } }) { try { const session = await getServerSession(authOptions) if (!session?.user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await request.json() const { preferences } = timeslotPreferenceSchema.parse(body) const { scheduleId } = params const schedule = await prisma.scheduleInstance.findUnique({ where: { id: scheduleId }, include: { college: true }, }) if (!schedule) { return NextResponse.json({ error: "Schedule not found" }, { status: 404 }) } if (session.user.systemRole !== "SUPER_ADMIN" && session.user.collegeId !== schedule.collegeId) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } if (preferences.length > 0) { const { resourceId, resourceType } = preferences[0] await prisma.timeslotPreference.deleteMany({ where: { scheduleInstanceId: scheduleId, resourceId, resourceType, }, }) await prisma.timeslotPreference.createMany({ data: preferences.map((pref) => ({ ...pref, scheduleInstanceId: scheduleId, })), }) } return NextResponse.json({ success: true, message: "Timeslot preferences saved successfully", }) } catch (error) { console.error("Error saving timeslot preferences:", error) return NextResponse.json({ error: "Failed to save preferences" }, { status: 500 }) } } export async function GET(request: NextRequest, { params }: { params: { scheduleId: string } }) { try { const session = await getServerSession(authOptions) if (!session?.user) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const resourceId = searchParams.get("resourceId") const resourceType = searchParams.get("resourceType") if (!resourceId || !resourceType) { return NextResponse.json({ error: "Missing parameters" }, { status: 400 }) } const preferences = await prisma.timeslotPreference.findMany({ where: { scheduleInstanceId: params.scheduleId, resourceId, resourceType: resourceType as "PERSONNEL" | "ROOM", }, orderBy: { rank: "asc" }, }) return NextResponse.json({ preferences }) } catch (error) { console.error("Error fetching timeslot preferences:", error) return NextResponse.json({ error: "Failed to fetch preferences" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/auth/signin/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { signIn, getSession } from "next-auth/react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle } from "lucide-react" export default function SignInPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const result = await signIn("credentials", { email, password, redirect: false, }) if (result?.error) { setError("Invalid email or password") } else { // Get the session to determine redirect const session = await getSession() if (session?.user.systemRole === "SUPER_ADMIN") { router.push("/super-admin") } else { router.push("/admin") } } } catch (error) { setError("An error occurred during sign in") } finally { setIsLoading(false) } } return (

Demo credentials:

Email: admin@example.com

Password: admin123

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.129 0.042 264.695); --card: oklch(1 0 0); --card-foreground: oklch(0.129 0.042 264.695); --popover: oklch(1 0 0); --popover-foreground: oklch(0.129 0.042 264.695); --primary: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.984 0.003 247.858); --secondary: oklch(0.968 0.007 247.896); --secondary-foreground: oklch(0.208 0.042 265.755); --muted: oklch(0.968 0.007 247.896); --muted-foreground: oklch(0.554 0.046 257.417); --accent: oklch(0.968 0.007 247.896); --accent-foreground: oklch(0.208 0.042 265.755); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.929 0.013 255.508); --input: oklch(0.929 0.013 255.508); --ring: oklch(0.704 0.04 256.788); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.984 0.003 247.858); --sidebar-foreground: oklch(0.129 0.042 264.695); --sidebar-primary: oklch(0.208 0.042 265.755); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.968 0.007 247.896); --sidebar-accent-foreground: oklch(0.208 0.042 265.755); --sidebar-border: oklch(0.929 0.013 255.508); --sidebar-ring: oklch(0.704 0.04 256.788); } .dark { --background: oklch(0.129 0.042 264.695); --foreground: oklch(0.984 0.003 247.858); --card: oklch(0.208 0.042 265.755); --card-foreground: oklch(0.984 0.003 247.858); --popover: oklch(0.208 0.042 265.755); --popover-foreground: oklch(0.984 0.003 247.858); --primary: oklch(0.929 0.013 255.508); --primary-foreground: oklch(0.208 0.042 265.755); --secondary: oklch(0.279 0.041 260.031); --secondary-foreground: oklch(0.984 0.003 247.858); --muted: oklch(0.279 0.041 260.031); --muted-foreground: oklch(0.704 0.04 256.788); --accent: oklch(0.279 0.041 260.031); --accent-foreground: oklch(0.984 0.003 247.858); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.208 0.042 265.755); --sidebar-foreground: oklch(0.984 0.003 247.858); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.279 0.041 260.031); --sidebar-accent-foreground: oklch(0.984 0.003 247.858); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/global/providers" import { AuthProvider } from "@/components/auth/auth-provider" import { Toaster } from "@/components/ui/sonner" const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }) const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }) export const metadata: Metadata = { title: "ASTU Allocator", description: "Resource Scheduler", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( <> {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link"; export default function Home() { return (

Allocator Start

); } [V0_FILE]typescriptreact:file="app/preferences/[scheduleId]/_components/preference-sorter.tsx" isMerged="true" "use client"; import { useState, useEffect } from "react"; import { ActivityTemplate, Course, PersonnelPreference } from "@prisma/client"; import { toast } from "sonner"; import { GripVertical } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { submitPreferences } from "@/lib/actions"; // Define the shape of the activity object, which includes the course details type ActivityWithCourse = ActivityTemplate & { course: Course; }; // Define the props for our component interface PreferenceSorterProps { personnelId: string; scheduleInstanceId: string; availableActivities: ActivityWithCourse[]; existingPreferences: PersonnelPreference[]; } export function PreferenceSorterClient({ personnelId, scheduleInstanceId, availableActivities, existingPreferences, }: PreferenceSorterProps) { const [ranked, setRanked] = useState([]); const [unranked, setUnranked] = useState([]); const [isSaving, setIsSaving] = useState(false); const [draggedItemId, setDraggedItemId] = useState(null); // Initialize the ranked and unranked lists when the component mounts useEffect(() => { const rankedIds = new Set( existingPreferences.map((p) => p.activityTemplateId) ); const sortedRanked = [...existingPreferences] .sort((a, b) => a.rank - b.rank) .map( (p) => availableActivities.find((a) => a.id === p.activityTemplateId)! ) .filter(Boolean); // Filter out any potential undefined values const initialUnranked = availableActivities.filter( (a) => !rankedIds.has(a.id) ); setRanked(sortedRanked); setUnranked(initialUnranked); }, [availableActivities, existingPreferences]); // --- Drag and Drop Handlers --- // Handler for drag start on a list item const handleDragStart = ( e: React.DragEvent, item: ActivityWithCourse ) => { setDraggedItemId(item.id); e.dataTransfer.effectAllowed = "move"; }; // Handler for drag over on a list item const handleDragOverForLi = (e: React.DragEvent) => { e.preventDefault(); // Necessary to allow dropping }; // Handler for drag over on a div container const handleDragOverForDiv = (e: React.DragEvent) => { e.preventDefault(); // Necessary to allow dropping }; // Handler for dropping on a ranked list item const handleDropOnRankedLi = ( e: React.DragEvent, dropIndex: number ) => { e.preventDefault(); if (!draggedItemId) return; const draggedItem = ranked.find((i) => i.id === draggedItemId) || unranked.find((i) => i.id === draggedItemId); if (!draggedItem) return; // Remove from both lists const newRanked = ranked.filter((i) => i.id !== draggedItemId); const newUnranked = unranked.filter((i) => i.id !== draggedItemId); // Add to ranked list at the correct position newRanked.splice(dropIndex, 0, draggedItem); setRanked(newRanked); setUnranked(newUnranked); setDraggedItemId(null); }; // Handler for dropping on the unranked container const handleDropOnUnrankedDiv = (e: React.DragEvent) => { e.preventDefault(); if (!draggedItemId) return; const draggedItem = ranked.find((i) => i.id === draggedItemId); if (!draggedItem) return; setRanked(ranked.filter((i) => i.id !== draggedItemId)); setUnranked([...unranked, draggedItem]); setDraggedItemId(null); }; // Handler for dropping on the ranked container (at the end of the list) const handleDropOnRankedDiv = (e: React.DragEvent) => { e.preventDefault(); if (!draggedItemId) return; const draggedItem = ranked.find((i) => i.id === draggedItemId) || unranked.find((i) => i.id === draggedItemId); if (!draggedItem) return; // Remove from both lists const newRanked = ranked.filter((i) => i.id !== draggedItemId); const newUnranked = unranked.filter((i) => i.id !== draggedItemId); // Add to the end of the ranked list newRanked.push(draggedItem); setRanked(newRanked); setUnranked(newUnranked); setDraggedItemId(null); }; // --- Save Handler --- const handleSave = async () => { setIsSaving(true); const preferencesToSave = ranked.map((activity, index) => ({ activityTemplateId: activity.id, rank: index + 1, })); const result = await submitPreferences({ personnelId, scheduleInstanceId, preferences: preferencesToSave, }); if (result.success) { toast.success(result.message); } else { toast.error(result.message || "Failed to save preferences."); } setIsSaving(false); }; return (

{/* Ranked Activities Column */} Your Ranked Preferences {ranked.length > 0 ? (

handleDragStart(e, item)} onDragOver={handleDragOverForLi} // Use the specific handler for li onDrop={(e) => handleDropOnRankedLi(e, index)} // Use the specific handler for li className="flex items-center p-3 border rounded-md cursor-grab bg-muted shadow-sm" >

{item.title}

{item.course.code} - {item.course.title}

{index + 1}

) : (

Drag activities here to rank them.

)} {/* Unranked Activities Column */} Available Activities {unranked.map((item) => (

handleDragStart(e, item)} className="flex items-center p-3 border rounded-md cursor-grab bg-muted shadow-sm" >

{item.title}

{item.course.code} - {item.course.title}

))} {unranked.length === 0 && (

All activities have been ranked.

)} {/* Save Button */}

); } [V0_FILE]typescriptreact:file="app/preferences/[scheduleId]/page.tsx" isMerged="true" import { prisma } from "@/prisma/client"; import { PreferenceSorterClient } from "./_components/preference-sorter"; import { notFound } from "next/navigation"; type PreferencesPageProps = { params: Promise<{ scheduleId: string }>; searchParams: Promise<{ token?: string }>; }; // This Server Component acts as a secure data loader export default async function PreferencesPage({ params, searchParams, }: PreferencesPageProps) { const { scheduleId } = await params; const { token } = await searchParams; if (!token) { return notFound(); } // 1. Find the user associated with the token const user = await prisma.user.findUnique({ where: { preferenceToken: token }, }); if (!user) { return notFound(); } // 2. Find the schedule and ensure this user is part of it const schedule = await prisma.scheduleInstance.findFirst({ where: { id: scheduleId, personnel: { some: { id: user.id } }, }, include: { courses: { include: { activityTemplates: true } }, preferences: { where: { personnelId: user.id } }, }, }); if (!schedule) { return (

You are not assigned to this schedule.

); } // 3. Filter activities relevant to the user's roles const availableActivities = schedule.courses.flatMap( (course) => course.activityTemplates .filter((template) => template.requiredPersonnel.some((req) => user.roles.includes(req.role) ) ) .map((template) => ({ ...template, course })) // Add course info to template ); return (

Set Your Preferences

For schedule: {schedule.name}

Welcome, {user.name}. Please drag and drop the activities to rank them in your preferred order.

); } [V0_FILE]typescriptreact:file="app/super-admin/_components/header.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu } from "lucide-react" import { SuperAdminSidebar } from "./sidebar" export function SuperAdminHeader() { return (

Super Admin Panel

) } [V0_FILE]typescriptreact:file="app/super-admin/_components/sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Building2, Users, BookCopy, Calendar, Warehouse, Settings, BarChart3, Shield, LogOut } from "lucide-react" import { signOut } from "next-auth/react" const navigation = [ { name: "Dashboard", href: "/super-admin", icon: BarChart3, }, { name: "Colleges", href: "/super-admin/colleges", icon: Building2, }, { name: "All Users", href: "/super-admin/users", icon: Users, }, { name: "All Courses", href: "/super-admin/courses", icon: BookCopy, }, { name: "All Rooms", href: "/super-admin/rooms", icon: Warehouse, }, { name: "All Schedules", href: "/super-admin/schedules", icon: Calendar, }, { name: "System Settings", href: "/super-admin/settings", icon: Settings, }, { name: "Access Control", href: "/super-admin/access-control", icon: Shield, }, ] export function SuperAdminSidebar() { const pathname = usePathname() return (

Super Admin

{navigation.map((item) => { const isActive = pathname === item.href return ( ) })}

) } [V0_FILE]typescriptreact:file="app/super-admin/colleges/_components/colleges-table.tsx" isMerged="true" "use client" import { useState } from "react" import type { College } from "@prisma/client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Edit, Eye, Trash2 } from "lucide-react" import Link from "next/link" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" type CollegeWithStats = College & { _count: { users: number courses: number rooms: number programs: number scheduleInstances: number } } interface CollegesTableProps { colleges: CollegeWithStats[] } export function CollegesTable({ colleges }: CollegesTableProps) { const [deletingId, setDeletingId] = useState(null) const handleDelete = async (collegeId: string) => { setDeletingId(collegeId) // TODO: Implement delete functionality console.log("Delete college:", collegeId) setDeletingId(null) } return ( Name Code Status Users Courses Rooms Programs Schedules Actions {colleges.length > 0 ? ( colleges.map((college) => ( {college.name} {college.code} {college.isActive ? "Active" : "Inactive"} {college._count.users} {college._count.courses} {college._count.rooms} {college._count.programs} {college._count.scheduleInstances}

Delete College Are you sure you want to delete "{college.name}"? This action cannot be undone and will affect all associated resources. Cancel handleDelete(college.id)} className="bg-red-600 hover:bg-red-700" > {deletingId === college.id ? "Deleting..." : "Delete"}

)) ) : ( No colleges found. )}

) } [V0_FILE]typescriptreact:file="app/super-admin/colleges/page.tsx" isMerged="true" import { prisma } from "@/prisma/client" import { requireRole } from "@/lib/auth-utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { CollegesTable } from "./_components/colleges-table" async function getColleges() { return await prisma.college.findMany({ include: { _count: { select: { users: true, courses: true, rooms: true, programs: true, scheduleInstances: true, }, }, }, orderBy: { name: "asc" }, }) } export default async function CollegesPage() { await requireRole("SUPER_ADMIN") const colleges = await getColleges() return (

Colleges

Manage all colleges in the system

All Colleges

) } [V0_FILE]typescriptreact:file="app/super-admin/layout.tsx" isMerged="true" import type { ReactNode } from "react" import { SuperAdminSidebar } from "./_components/sidebar" import { SuperAdminHeader } from "./_components/header" export default function SuperAdminLayout({ children }: { children: ReactNode }) { return (

{/* Sidebar for Desktop */}

{/* Header for Mobile */} {/* Main Content Area */}

{children}

) } [V0_FILE]typescriptreact:file="app/super-admin/page.tsx" isMerged="true" import type React from "react" import { prisma } from "@/prisma/client" import { requireRole } from "@/lib/auth-utils" import { Building2, Users, BookCopy, Calendar, Warehouse } from "lucide-react" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" async function getSuperAdminStats() { const [collegeCount, totalUsers, totalCourses, totalRooms, totalSchedules, activeSchedules] = await prisma.$transaction([ prisma.college.count({ where: { isActive: true } }), prisma.user.count(), prisma.course.count(), prisma.room.count(), prisma.scheduleInstance.count(), prisma.scheduleInstance.count({ where: { NOT: { status: "COMPLETED" } }, }), ]) const colleges = await prisma.college.findMany({ where: { isActive: true }, include: { _count: { select: { users: true, courses: true, rooms: true, programs: true, scheduleInstances: true, }, }, }, orderBy: { name: "asc" }, take: 10, }) return { collegeCount, totalUsers, totalCourses, totalRooms, totalSchedules, activeSchedules, colleges, } } export default async function SuperAdminDashboard() { await requireRole("SUPER_ADMIN") const { collegeCount, totalUsers, totalCourses, totalRooms, totalSchedules, activeSchedules, colleges } = await getSuperAdminStats() return (

Super Admin Dashboard

Manage all colleges and system-wide resources

{/* System-wide Stats */}

} /> } /> } /> } /> } />

{/* Colleges Overview */}

Colleges Overview

College Code Users Courses Rooms Programs Schedules Actions {colleges.length > 0 ? ( colleges.map((college) => ( {college.name} {college.code} {college._count.users} {college._count.courses} {college._count.rooms} {college._count.programs} {college._count.scheduleInstances}

)) ) : ( No colleges found. )}

) } function StatCard({ title, value, icon, }: { title: string value: number | string icon: React.ReactNode }) { return ( {title} {icon}

{value}

) } [V0_FILE]typescriptreact:file="app/unauthorized/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle } from "lucide-react" import Link from "next/link" export default function UnauthorizedPage() { return (

Access Denied You don't have permission to access this resource.

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/auth/auth-provider.tsx" isMerged="true" "use client" import { SessionProvider } from "next-auth/react" import type { ReactNode } from "react" interface AuthProviderProps { children: ReactNode } export function AuthProvider({ children }: AuthProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/auth/role-guard.tsx" isMerged="true" "use client" import { useSession } from "next-auth/react" import type { SystemRole } from "@prisma/client" import type { ReactNode } from "react" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertTriangle } from "lucide-react" interface RoleGuardProps { children: ReactNode requiredRole?: SystemRole requiredCollegeId?: string fallback?: ReactNode } export function RoleGuard({ children, requiredRole, requiredCollegeId, fallback }: RoleGuardProps) { const { data: session, status } = useSession() if (status === "loading") { return

} if (!session) { return ( fallback || ( You must be logged in to access this content. ) ) } const user = session.user // Check role requirement if (requiredRole && user.systemRole !== requiredRole && user.systemRole !== "SUPER_ADMIN") { return ( fallback || ( You don't have permission to access this content. ) ) } // Check college access requirement if (requiredCollegeId && user.systemRole !== "SUPER_ADMIN" && user.collegeId !== requiredCollegeId) { return ( fallback || ( You don't have access to this college's resources. ) ) } return <>{children} } [V0_FILE]typescriptreact:file="components/global/mode-toggle.tsx" isMerged="true" "use client"; import * as React from "react"; import { Moon, Sun } from "lucide-react"; import { useTheme } from "next-themes"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; export function ModeToggle() { const { setTheme } = useTheme(); return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ); } [V0_FILE]typescriptreact:file="components/global/providers.tsx" isMerged="true" "use client"; import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children}; } [V0_FILE]typescriptreact:file="components/shared/data-table.tsx" isMerged="true" "use client"; import type React from "react"; import { useState, useMemo } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Card, CardContent } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Search, Filter, X, SlidersHorizontal } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; interface FilterOption { key: string; label: string; type: "select" | "multiselect" | "range" | "boolean"; options?: { value: string; label: string }[]; min?: number; max?: number; } interface EnhancedTableProps { data: any[]; columns: { key: string; label: string; render?: (value: any, row: any) => React.ReactNode; searchable?: boolean; sortable?: boolean; }[]; filterOptions?: FilterOption[]; searchPlaceholder?: string; emptyMessage?: string; onRowAction?: (action: string, row: any) => void; actions?: { key: string; label: string; icon?: React.ReactNode; variant?: "default" | "outline" | "destructive"; }[]; } export default function EnhancedTable({ data, columns, filterOptions = [], searchPlaceholder = "Search...", emptyMessage = "No data found", onRowAction, actions = [], }: EnhancedTableProps) { const [searchTerm, setSearchTerm] = useState(""); const [filters, setFilters] = useState>({}); const [sortConfig, setSortConfig] = useState<{ key: string; direction: "asc" | "desc"; } | null>(null); const [showFilters, setShowFilters] = useState(false); // Get searchable columns const searchableColumns = columns.filter((col) => col.searchable !== false); // Filter and search data const filteredData = useMemo(() => { let result = [...data]; // Apply search if (searchTerm.trim()) { const searchLower = searchTerm.toLowerCase(); result = result.filter((row) => searchableColumns.some((col) => { const value = row[col.key]; if (value == null) return false; return String(value).toLowerCase().includes(searchLower); }) ); } // Apply filters Object.entries(filters).forEach(([filterKey, filterValue]) => { if ( !filterValue || (Array.isArray(filterValue) && filterValue.length === 0) ) return; const filterOption = filterOptions.find((opt) => opt.key === filterKey); if (!filterOption) return; result = result.filter((row) => { const rowValue = row[filterKey]; switch (filterOption.type) { case "select": return rowValue === filterValue; case "multiselect": return Array.isArray(filterValue) && filterValue.includes(rowValue); case "range": const [min, max] = filterValue; const numValue = Number(rowValue); return numValue >= min && numValue <= max; case "boolean": return Boolean(rowValue) === filterValue; default: return true; } }); }); // Apply sorting if (sortConfig) { result.sort((a, b) => { const aValue = a[sortConfig.key]; const bValue = b[sortConfig.key]; if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1; if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1; return 0; }); } return result; }, [data, searchTerm, filters, sortConfig, searchableColumns, filterOptions]); const handleSort = (key: string) => { const column = columns.find((col) => col.key === key); if (!column?.sortable) return; setSortConfig((current) => { if (current?.key === key) { return current.direction === "asc" ? { key, direction: "desc" } : null; } return { key, direction: "asc" }; }); }; const handleFilterChange = (filterKey: string, value: any) => { setFilters((prev) => ({ ...prev, [filterKey]: value, })); }; const clearFilters = () => { setFilters({}); setSearchTerm(""); }; const activeFiltersCount = Object.values(filters).filter( (value) => value !== undefined && value !== "" && (!Array.isArray(value) || value.length > 0) ).length; const getSortIcon = (key: string) => { if (!sortConfig || sortConfig.key !== key) return "↕️"; return sortConfig.direction === "asc" ? "↑" : "↓"; }; return (

{/* Search and Filter Controls */}

{/* Search Input */}

setSearchTerm(e.target.value)} className="pl-10" /> {searchTerm && ( )}

{/* Filter Controls */} {filterOptions.length > 0 && (

Filters

{activeFiltersCount > 0 && ( )}

{filterOptions.map((option) => (

{option.label} {option.type === "select" && ( )} {option.type === "multiselect" && (

{option.options?.map((opt) => (

{ const current = filters[option.key] || []; const updated = checked ? [...current, opt.value] : current.filter( (v: string) => v !== opt.value ); handleFilterChange( option.key, updated.length > 0 ? updated : undefined ); }} /> {opt.label}

))}

)} {option.type === "range" && (

{ const current = filters[option.key] || [ option.min || 0, option.max || 100, ]; handleFilterChange(option.key, [ Number(e.target.value) || option.min || 0, current[1], ]); }} /> { const current = filters[option.key] || [ option.min || 0, option.max || 100, ]; handleFilterChange(option.key, [ current[0], Number(e.target.value) || option.max || 100, ]); }} />

)} {option.type === "boolean" && ( )}

))}

{(activeFiltersCount > 0 || searchTerm) && ( )}

)}

{/* Active Filters Display */} {activeFiltersCount > 0 && (

{Object.entries(filters).map(([key, value]) => { if (!value || (Array.isArray(value) && value.length === 0)) return null; const option = filterOptions.find((opt) => opt.key === key); if (!option) return null; let displayValue = value; if (option.type === "multiselect" && Array.isArray(value)) { displayValue = value .map( (v) => option.options?.find((opt) => opt.value === v)?.label || v ) .join(", "); } else if (option.type === "select") { displayValue = option.options?.find((opt) => opt.value === value)?.label || value; } else if (option.type === "range" && Array.isArray(value)) { displayValue = `${value[0]} - ${value[1]}`; } return ( {option.label}: {String(displayValue)} ); })}

)} {/* Results Summary */}

Showing {filteredData.length} of {data.length} records {searchTerm && ` for "${searchTerm}"`} {filteredData.length !== data.length && ( )}

{/* Table */} {filteredData.length === 0 ? (

{searchTerm || activeFiltersCount > 0 ? "No matching records" : emptyMessage}

{(searchTerm || activeFiltersCount > 0) && (

Try adjusting your search or filters

)} {(searchTerm || activeFiltersCount > 0) && ( )}

) : (

{columns.map((column) => ( column.sortable !== false && handleSort(column.key) } >

{column.label} {column.sortable !== false && ( {getSortIcon(column.key)} )}

))} {actions.length > 0 && ( Actions )} {filteredData.map((row, index) => ( {columns.map((column) => ( {column.render ? column.render(row[column.key], row) : row[column.key]} ))} {actions.length > 0 && (

{actions.map((action) => ( ))}

)} ))}

)}

); } [V0_FILE]typescriptreact:file="components/shared/enhanced-table.tsx" isMerged="true" "use client"; import type React from "react"; import { useState, useMemo, useEffect } from "react"; import { Input } from "@/components/ui/input"; // Corrected import path import { Button } from "@/components/ui/button"; // Corrected import path import { Badge } from "@/components/ui/badge"; // Corrected import path import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; // Corrected import path import { Card, CardContent } from "@/components/ui/card"; // Corrected import path import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; // Corrected import path import { Search, Filter, X, SlidersHorizontal } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; // Corrected import path import { Label } from "@/components/ui/label"; // Corrected import path import { Checkbox } from "@/components/ui/checkbox"; // Corrected import path export interface FilterOption { key: string; label: string; type: "select" | "multiselect" | "range" | "boolean"; options?: { value: string; label: string }[]; min?: number; max?: number; } interface EnhancedTableProps { data: any[]; columns: { key: string; label: string | React.ReactNode; // Label can be a ReactNode for custom headers (like checkboxes) render?: (value: any, row: any) => React.ReactNode; searchable?: boolean; sortable?: boolean; }[]; filterOptions?: FilterOption[]; searchPlaceholder?: string; emptyMessage?: string; onRowAction?: (action: string, row: any) => void; actions?: { key: string; label: string; icon?: React.ReactNode; variant?: "default" | "outline" | "destructive"; }[]; // New props for selection enableSelection?: boolean; initialSelectedRowIds?: string[]; // For pre-selecting rows by ID onSelectionChange?: (selectedRows: any[]) => void; } export default function EnhancedTable({ data, columns, filterOptions = [], searchPlaceholder = "Search...", emptyMessage = "No data found", onRowAction, actions = [], enableSelection = false, initialSelectedRowIds = [], onSelectionChange, }: EnhancedTableProps) { const [searchTerm, setSearchTerm] = useState(""); const [filters, setFilters] = useState>({}); const [sortConfig, setSortConfig] = useState<{ key: string; direction: "asc" | "desc"; } | null>(null); const [showFilters, setShowFilters] = useState(false); const [selectedRowIds, setSelectedRowIds] = useState>( new Set(initialSelectedRowIds) ); // Update selectedRowIds when initialSelectedRowIds changes useEffect(() => { setSelectedRowIds(new Set(initialSelectedRowIds)); }, [initialSelectedRowIds]); // Get searchable columns const searchableColumns = columns.filter((col) => col.searchable !== false); // Filter and search data const filteredAndSortedData = useMemo(() => { let result = [...data]; // Apply search if (searchTerm.trim()) { const searchLower = searchTerm.toLowerCase(); result = result.filter((row) => searchableColumns.some((col) => { const value = row[col.key]; if (value == null) return false; // Handle nested keys for search if present if (col.key.includes(".")) { const keys = col.key.split("."); let nestedValue = row; for (const k of keys) { if ( nestedValue && typeof nestedValue === "object" && k in nestedValue ) { nestedValue = nestedValue[k]; } else { nestedValue = undefined; break; } } if (nestedValue == null) return false; return String(nestedValue).toLowerCase().includes(searchLower); } return String(value).toLowerCase().includes(searchLower); }) ); } // Apply filters Object.entries(filters).forEach(([filterKey, filterValue]) => { if ( !filterValue || (Array.isArray(filterValue) && filterValue.length === 0) ) return; const filterOption = filterOptions.find((opt) => opt.key === filterKey); if (!filterOption) return; result = result.filter((row) => { // Handle nested keys for filtering let rowValue = row[filterKey]; if (filterKey.includes(".")) { const keys = filterKey.split("."); let nestedValue = row; for (const k of keys) { if ( nestedValue && typeof nestedValue === "object" && k in nestedValue ) { nestedValue = nestedValue[k]; } else { nestedValue = undefined; break; } } rowValue = nestedValue; } switch (filterOption.type) { case "select": return rowValue === filterValue; case "multiselect": return Array.isArray(filterValue) && filterValue.includes(rowValue); case "range": const [min, max] = filterValue; const numValue = Number(rowValue); return numValue >= min && numValue <= max; case "boolean": return Boolean(rowValue) === filterValue; default: return true; } }); }); // Apply sorting if (sortConfig) { result.sort((a, b) => { let aValue = a[sortConfig.key]; let bValue = b[sortConfig.key]; // Handle nested keys for sorting if (sortConfig.key.includes(".")) { const keys = sortConfig.key.split("."); let nestedA = a; let nestedB = b; for (const k of keys) { if (nestedA && typeof nestedA === "object" && k in nestedA) { nestedA = nestedA[k]; } else { nestedA = undefined; break; } if (nestedB && typeof nestedB === "object" && k in nestedB) { nestedB = nestedB[k]; } else { nestedB = undefined; break; } } aValue = nestedA; bValue = nestedB; } if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1; if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1; return 0; }); } return result; }, [data, searchTerm, filters, sortConfig, searchableColumns, filterOptions]); // Call onSelectionChange when selectedRowIds or filteredAndSortedData changes useEffect(() => { if (enableSelection && onSelectionChange) { const selectedRows = filteredAndSortedData.filter((row) => selectedRowIds.has(row.id) ); onSelectionChange(selectedRows); } }, [ selectedRowIds, filteredAndSortedData, enableSelection, onSelectionChange, ]); const handleSort = (key: string) => { const column = columns.find((col) => col.key === key); if (!column?.sortable) return; setSortConfig((current) => { if (current?.key === key) { return current.direction === "asc" ? { key, direction: "desc" } : null; } return { key, direction: "asc" }; }); }; const handleFilterChange = (filterKey: string, value: any) => { setFilters((prev) => ({ ...prev, [filterKey]: value, })); }; const clearFilters = () => { setFilters({}); setSearchTerm(""); }; const activeFiltersCount = Object.values(filters).filter( (value) => value !== undefined && value !== "" && (!Array.isArray(value) || value.length > 0) ).length; const getSortIcon = (key: string) => { if (!sortConfig || sortConfig.key !== key) return "↕️"; return sortConfig.direction === "asc" ? "↑" : "↓"; }; // Handle row selection const handleToggleRowSelection = (rowId: string, checked: boolean) => { setSelectedRowIds((prev) => { const newSelection = new Set(prev); if (checked) { newSelection.add(rowId); } else { newSelection.delete(rowId); } return newSelection; }); }; const handleToggleAllRowsSelection = (checked: boolean) => { setSelectedRowIds((prev) => { const newSelection = new Set(prev); if (checked) { filteredAndSortedData.forEach((row) => newSelection.add(row.id)); } else { filteredAndSortedData.forEach((row) => newSelection.delete(row.id)); } return newSelection; }); }; const isAllRowsSelected = useMemo(() => { if (!enableSelection || filteredAndSortedData.length === 0) return false; return filteredAndSortedData.every((row) => selectedRowIds.has(row.id)); }, [enableSelection, filteredAndSortedData, selectedRowIds]); // Columns to display, including the selection column if enabled const displayColumns = useMemo(() => { if (!enableSelection) { return columns; } return [ { key: "select", label: ( handleToggleAllRowsSelection(value) } aria-label="Select all" /> ), render: (value: any, row: any) => ( handleToggleRowSelection(row.id, value) } aria-label="Select row" /> ), sortable: false, searchable: false, }, ...columns, ]; }, [columns, enableSelection, selectedRowIds, isAllRowsSelected]); return (

{/* Search and Filter Controls */}

{/* Search Input */}

setSearchTerm(e.target.value)} className="pl-10" /> {searchTerm && ( )}

{/* Filter Controls */} {filterOptions.length > 0 && (

Filters

{activeFiltersCount > 0 && ( )}

{filterOptions.map((option) => (

{option.label} {option.type === "select" && ( )} {option.type === "multiselect" && (

{option.options?.map((opt) => (

))}

)} {option.type === "range" && (

)} {option.type === "boolean" && ( )}

))}

{(activeFiltersCount > 0 || searchTerm) && ( )}

)}

{/* Active Filters Display */} {activeFiltersCount > 0 && (

{Object.entries(filters).map(([key, value]) => { if (!value || (Array.isArray(value) && value.length === 0)) return null; const option = filterOptions.find((opt) => opt.key === key); if (!option) return null; let displayValue = value; if (option.type === "multiselect" && Array.isArray(value)) { displayValue = value .map( (v) => option.options?.find((opt) => opt.value === v)?.label || v ) .join(", "); } else if (option.type === "select") { displayValue = option.options?.find((opt) => opt.value === value)?.label || value; } else if (option.type === "range" && Array.isArray(value)) { displayValue = `${value[0]} - ${value[1]}`; } else if (option.type === "boolean") { displayValue = value ? "Yes" : "No"; } return ( {option.label}: {String(displayValue)} ); })}

)} {/* Results Summary */}

Showing {filteredAndSortedData.length} of {data.length} records {searchTerm && ` for "${searchTerm}"`} {filteredAndSortedData.length !== data.length && ( )}

{/* Table */} {filteredAndSortedData.length === 0 ? (

{searchTerm || activeFiltersCount > 0 ? "No matching records" : emptyMessage}

{(searchTerm || activeFiltersCount > 0) && (

Try adjusting your search or filters

)} {(searchTerm || activeFiltersCount > 0) && ( )}

) : (

{displayColumns.map((column) => ( column.sortable !== false && handleSort(column.key) } >

{typeof column.label === "string" ? column.label : column.label} {column.sortable !== false && ( {getSortIcon(column.key)} )}

))} {actions.length > 0 && ( Actions )} {filteredAndSortedData.map((row, index) => ( {displayColumns.map((column) => ( {column.render ? column.render(row[column.key], row) : column.key.includes(".") ? getNestedValue(row, column.key) : row[column.key]} ))} {actions.length > 0 && (

{actions.map((action) => ( ))}

)} ))}

)}

); } // Helper function to get nested value from an object function getNestedValue(obj: any, path: string) { return path.split(".").reduce((acc, part) => acc && acc[part], obj); } [V0_FILE]typescriptreact:file="components/shared/personnel-fields.tsx" isMerged="true" "use client"; import { useFieldArray, Control } from "react-hook-form"; import { z } from "zod"; import { createCourseSchema } from "@/lib/schemas"; import { Role } from "@prisma/client"; import { Button } from "@/components/ui/button"; import { FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { PlusCircle, Trash2 } from "lucide-react"; // Define props for the new component type PersonnelFieldsProps = { nestIndex: number; control: Control>; }; export function PersonnelFields({ nestIndex, control }: PersonnelFieldsProps) { const { fields, append, remove } = useFieldArray({ control, name: `activityTemplates.${nestIndex}.requiredPersonnel`, }); return (

Required Personnel {fields.map((field, k) => (

( )} /> ( field.onChange(parseInt(e.target.value, 10) || 1) } /> )} />

))}

); } [V0_FILE]typescriptreact:file="components/shared/tanstack-enhanced-table.tsx" isMerged="true" "use client"; import React, { useState, useMemo } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Search, Filter, X, SlidersHorizontal, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; // Define the shape of a filter option interface FilterOption { key: string; label: string; type: "select" | "multiselect" | "range" | "boolean"; options?: { value: string; label: string }[]; min?: number; max?: number; } // Props for the TanstackEnhancedTable component interface TanstackEnhancedTableProps { data: TData[]; // Array of data objects columns: { // Column definitions key: string; label: string; render?: (value: any, row: TData) => React.ReactNode; searchable?: boolean; sortable?: boolean; }[]; filterOptions?: FilterOption[]; // Options for custom filters searchPlaceholder?: string; // Placeholder text for the search input emptyMessage?: string; // Message to display when no data is found onRowAction?: (action: string, row: TData) => void; // Callback for row actions actions?: { // Actions that can be performed on each row key: string; label: string; icon?: React.ReactNode; variant?: "default" | "outline" | "destructive"; }[]; } export default function TanstackEnhancedTable({ data, columns, filterOptions = [], searchPlaceholder = "Search...", emptyMessage = "No data found", onRowAction, actions = [], }: TanstackEnhancedTableProps) { // State for global search term const [searchTerm, setSearchTerm] = useState(""); // State for custom filters const [filters, setFilters] = useState>({}); // State for sorting configuration const [sortConfig, setSortConfig] = useState<{ key: string; direction: "asc" | "desc"; } | null>(null); // State for showing the filter popover const [showFilters, setShowFilters] = useState(false); // State for pagination const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage, setItemsPerPage] = useState(10); // Memoize searchable columns for efficient lookup const searchableColumns = useMemo( () => columns.filter((col) => col.searchable !== false), [columns] ); // Filter, search, and sort data const processedData = useMemo(() => { let result = [...data]; // Apply global search based on searchable columns if (searchTerm.trim()) { const searchLower = searchTerm.toLowerCase(); result = result.filter((row) => searchableColumns.some((col) => { const value = (row as any)[col.key]; // Cast to any to access property by string key if (value == null) return false; return String(value).toLowerCase().includes(searchLower); }) ); } // Apply custom filters Object.entries(filters).forEach(([filterKey, filterValue]) => { if ( !filterValue || (Array.isArray(filterValue) && filterValue.length === 0) || filterValue === "all" // "all" is a special value to ignore filter ) { return; } const filterOption = filterOptions.find((opt) => opt.key === filterKey); if (!filterOption) return; result = result.filter((row) => { const rowValue = (row as any)[filterKey]; switch (filterOption.type) { case "select": return String(rowValue) === String(filterValue); // Ensure type consistency for comparison case "multiselect": return ( Array.isArray(filterValue) && filterValue.includes(String(rowValue)) ); case "range": const [min, max] = filterValue; const numValue = Number(rowValue); return !isNaN(numValue) && numValue >= min && numValue <= max; case "boolean": return Boolean(rowValue) === filterValue; default: return true; } }); }); // Apply sorting if (sortConfig) { result.sort((a, b) => { const aValue = (a as any)[sortConfig.key]; const bValue = (b as any)[sortConfig.key]; if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1; if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1; return 0; }); } return result; }, [data, searchTerm, filters, sortConfig, searchableColumns, filterOptions]); // Pagination logic const totalPages = Math.ceil(processedData.length / itemsPerPage); const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = processedData.slice(indexOfFirstItem, indexOfLastItem); // Handle sort changes const handleSort = (key: string) => { const column = columns.find((col) => col.key === key); if (!column?.sortable) return; setSortConfig((current) => { if (current?.key === key) { return current.direction === "asc" ? { key, direction: "desc" } : null; } return { key, direction: "asc" }; }); setCurrentPage(1); // Reset to first page on sort }; // Handle filter changes const handleFilterChange = (filterKey: string, value: any) => { setFilters((prev) => ({ ...prev, [filterKey]: value, })); setCurrentPage(1); // Reset to first page on filter change }; // Clear all search and custom filters const clearFilters = () => { setFilters({}); setSearchTerm(""); setSortConfig(null); // Clear sorting setCurrentPage(1); // Reset to first page }; // Count active custom filters const activeFiltersCount = Object.values(filters).filter( (value) => value !== undefined && value !== "" && value !== "all" && // Ignore "all" in count (!Array.isArray(value) || value.length > 0) ).length; // Get sort icon for table header const getSortIcon = (key: string) => { if (!sortConfig || sortConfig.key !== key) return "↕️"; return sortConfig.direction === "asc" ? "↑" : "↓"; }; return ( {/* Search and Filter Controls */}

{/* Search Input */}

{ setSearchTerm(e.target.value); setCurrentPage(1); // Reset page on search }} className="pl-10 rounded-lg pr-8 focus-visible:ring-offset-2 focus-visible:ring-blue-500" /> {searchTerm && ( )}

{/* Filter Controls */} {filterOptions.length > 0 && (

Filters

{activeFiltersCount > 0 && ( )}

{filterOptions.map((option) => (

{option.label} {option.type === "select" && ( )} {option.type === "multiselect" && (

{option.options?.map((opt) => (

))}

)} {option.type === "range" && (

{ const current = filters[option.key] || [ option.min || 0, option.max || 100, ]; handleFilterChange(option.key, [ Number(e.target.value) || option.min || 0, current[1], ]); }} className="rounded-md" /> { const current = filters[option.key] || [ option.min || 0, option.max || 100, ]; handleFilterChange(option.key, [ current[0], Number(e.target.value) || option.max || 100, ]); }} className="rounded-md" />

)} {option.type === "boolean" && ( )}

))}

{(activeFiltersCount > 0 || searchTerm) && ( )}

)}

{/* Active Filters Display */} {activeFiltersCount > 0 && (

{Object.entries(filters).map(([key, value]) => { if ( !value || (Array.isArray(value) && value.length === 0) || value === "all" ) return null; const option = filterOptions.find((opt) => opt.key === key); if (!option) return null; let displayValue = value; if (option.type === "multiselect" && Array.isArray(value)) { displayValue = value .map( (v) => option.options?.find((opt) => opt.value === v)?.label || v ) .join(", "); } else if (option.type === "select") { displayValue = option.options?.find((opt) => opt.value === value)?.label || value; } else if (option.type === "boolean") { displayValue = value ? "Yes" : "No"; } else if (option.type === "range" && Array.isArray(value)) { displayValue = `${value[0]} - ${value[1]}`; } return ( {option.label}:{" "} {String(displayValue)} ); })}

)} {/* Results Summary */}

Showing {currentItems.length}{" "} of {processedData.length}{" "} {processedData.length === 1 ? "record" : "records"} {searchTerm && ` for "${searchTerm}"`} {(activeFiltersCount > 0 || searchTerm) && ( )}

{/* Table */}

{processedData.length === 0 ? (

{searchTerm || activeFiltersCount > 0 ? "No matching records found" : emptyMessage}

{(searchTerm || activeFiltersCount > 0) && (

Try adjusting your search or filters

)} {(searchTerm || activeFiltersCount > 0) && ( )}

) : (

{columns.map((column) => ( column.sortable !== false && handleSort(column.key) } >

{column.label} {column.sortable !== false && ( {getSortIcon(column.key)} )}

))} {actions.length > 0 && Actions} {currentItems.map((row, index) => ( {columns.map((column) => ( {column.render ? column.render((row as any)[column.key], row) : String((row as any)[column.key])} ))} {actions.length > 0 && (

{actions.map((action) => ( ))}

)} ))}

)}

{/* Pagination Controls */}

{/* Page Size Selector */}

Rows per page:

{/* Page Number Display */}

Page {currentPage} of {totalPages}

{/* Pagination Buttons */}

); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", { variants: { variant: { default: "bg-card text-card-foreground", destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", }, }, defaultVariants: { variant: "default", }, } ) function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "span" return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "lucide-react" import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker" import { cn } from "@/lib/utils" import { Button, buttonVariants } from "@/components/ui/button" function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps["variant"] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }), ...formatters, }} classNames={{ root: cn("w-fit", defaultClassNames.root), months: cn( "flex gap-4 flex-col md:flex-row relative", defaultClassNames.months ), month: cn("flex flex-col w-full gap-4", defaultClassNames.month), nav: cn( "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav ), button_previous: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous ), button_next: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next ), month_caption: cn( "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption ), dropdowns: cn( "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns ), dropdown_root: cn( "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root ), dropdown: cn( "absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown ), caption_label: cn( "select-none font-medium", captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label ), table: "w-full border-collapse", weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday ), week: cn("flex w-full mt-2", defaultClassNames.week), week_number_header: cn( "select-none w-(--cell-size)", defaultClassNames.week_number_header ), week_number: cn( "text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number ), day: cn( "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", defaultClassNames.day ), range_start: cn( "rounded-l-md bg-accent", defaultClassNames.range_start ), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), today: cn( "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today ), outside: cn( "text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside ), disabled: cn( "text-muted-foreground opacity-50", defaultClassNames.disabled ), hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === "left") { return ( ) } if (orientation === "right") { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return (