feat(v3): restructure project + add complete frontend
- Restructure: move backend from new_project/ to backend/ - Add full React/TypeScript frontend (37 pages, 17 services, 16 type defs, 11 query hooks) - Add docs/ with SRS specs, user stories, and workflow documentation - Update .gitignore for new directory layout Workflows implemented: WF1 User Signup, WF2 Placement Test, WF3 Exam Configuration, WF4 General English Exam, WF5 Course Generation, WF6 Entity Student Onboarding, AI Course Generation, Adaptive Learning Engine UI, White-Label Branding, Score Release Made-with: Cursor
This commit is contained in:
Yamen Ahmad
155
src/pages/admin/DepartmentManager.tsx
Normal file
155
src/pages/admin/DepartmentManager.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Plus, Pencil, Trash2, Loader2 } from "lucide-react";
|
||||
import {
|
||||
useDepartments,
|
||||
useCreateDepartment,
|
||||
useUpdateDepartment,
|
||||
useDeleteDepartment,
|
||||
} from "@/hooks/queries/useAcademic";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import type { Department, DepartmentCreateRequest } from "@/types/academic";
|
||||
|
||||
export default function DepartmentManager() {
|
||||
const { toast } = useToast();
|
||||
const { data: deptsData, isLoading } = useDepartments();
|
||||
const depts = deptsData?.items ?? [];
|
||||
const createDept = useCreateDepartment();
|
||||
const updateDept = useUpdateDepartment();
|
||||
const deleteDept = useDeleteDepartment();
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [editing, setEditing] = useState<Department | null>(null);
|
||||
const [form, setForm] = useState<DepartmentCreateRequest>({ name: "", code: "" });
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setForm({ name: "", code: "" });
|
||||
setShowDialog(true);
|
||||
};
|
||||
|
||||
const openEdit = (dept: Department) => {
|
||||
setEditing(dept);
|
||||
setForm({ name: dept.name, code: dept.code, parent_id: dept.parent_id });
|
||||
setShowDialog(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (editing) {
|
||||
updateDept.mutate({ id: editing.id, data: form }, {
|
||||
onSuccess: () => { toast({ title: "Department updated" }); setShowDialog(false); },
|
||||
onError: () => toast({ title: "Error", description: "Failed to update", variant: "destructive" }),
|
||||
});
|
||||
} else {
|
||||
createDept.mutate(form, {
|
||||
onSuccess: () => { toast({ title: "Department created" }); setShowDialog(false); setForm({ name: "", code: "" }); },
|
||||
onError: () => toast({ title: "Error", description: "Failed to create", variant: "destructive" }),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
if (!window.confirm("Delete this department?")) return;
|
||||
deleteDept.mutate(id, {
|
||||
onSuccess: () => toast({ title: "Department deleted" }),
|
||||
onError: () => toast({ title: "Error", description: "Failed to delete", variant: "destructive" }),
|
||||
});
|
||||
};
|
||||
|
||||
const isSaving = createDept.isPending || updateDept.isPending;
|
||||
|
||||
if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Departments</h1>
|
||||
<p className="text-muted-foreground">Manage departments and their hierarchy.</p>
|
||||
</div>
|
||||
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={openCreate}><Plus className="mr-2 h-4 w-4" /> Add Department</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>{editing ? "Edit Department" : "Create Department"}</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input placeholder="e.g. Computer Science" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Code</Label>
|
||||
<Input placeholder="e.g. CS" value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Parent Department</Label>
|
||||
<Select value={form.parent_id?.toString() ?? "none"} onValueChange={v => setForm({ ...form, parent_id: v === "none" ? undefined : Number(v) })}>
|
||||
<SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
{depts.filter(d => d.id !== editing?.id).map(d => (
|
||||
<SelectItem key={d.id} value={d.id.toString()}>{d.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button className="w-full" onClick={handleSave} disabled={isSaving || !form.name || !form.code}>
|
||||
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{editing ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Code</TableHead>
|
||||
<TableHead>Parent</TableHead>
|
||||
<TableHead>Courses</TableHead>
|
||||
<TableHead>Faculty</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{depts.map((dept: Department) => (
|
||||
<TableRow key={dept.id}>
|
||||
<TableCell className="font-medium">{dept.name}</TableCell>
|
||||
<TableCell>{dept.code}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{dept.parent_name ?? "—"}</TableCell>
|
||||
<TableCell>{dept.course_count}</TableCell>
|
||||
<TableCell>{dept.faculty_count}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" onClick={() => openEdit(dept)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDelete(dept.id)} disabled={deleteDept.isPending}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{depts.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-8 text-muted-foreground">No departments found.</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user