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
178
src/pages/admin/AdminTeachers.tsx
Normal file
178
src/pages/admin/AdminTeachers.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { useTeachers, useCreateTeacher } from "@/hooks/queries";
|
||||
import { api } from "@/lib/api-client";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Search, Plus, Trash2 } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
export default function AdminTeachers() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [gender, setGender] = useState("male");
|
||||
const [specialization, setSpecialization] = useState("");
|
||||
const { toast } = useToast();
|
||||
const qc = useQueryClient();
|
||||
|
||||
const { data: teachersData, isLoading } = useTeachers({ size: 500 });
|
||||
const createTeacher = useCreateTeacher();
|
||||
|
||||
const teachers = teachersData?.items ?? [];
|
||||
const filtered = teachers.filter(
|
||||
(t) =>
|
||||
t.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(t.email || "").toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!firstName.trim() || !lastName.trim()) {
|
||||
toast({ title: "First and last name required", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
if (!email.trim()) {
|
||||
toast({ title: "Email required", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
createTeacher.mutate(
|
||||
{
|
||||
first_name: firstName.trim(),
|
||||
last_name: lastName.trim(),
|
||||
email: email.trim().toLowerCase(),
|
||||
gender,
|
||||
specialization: specialization.trim() || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setAddOpen(false);
|
||||
setFirstName("");
|
||||
setLastName("");
|
||||
setEmail("");
|
||||
setGender("male");
|
||||
setSpecialization("");
|
||||
toast({ title: "Teacher created" });
|
||||
},
|
||||
onError: (e: Error) => {
|
||||
toast({ title: "Could not create teacher", description: e.message, variant: "destructive" });
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
async function handleDelete(id: number, name: string) {
|
||||
if (!window.confirm(`Delete teacher "${name}"?`)) return;
|
||||
try {
|
||||
await api.delete(`/teachers/${id}`);
|
||||
qc.invalidateQueries({ queryKey: ["lms", "teachers"] });
|
||||
toast({ title: "Teacher deleted" });
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
toast({ title: "Delete failed", description: msg, variant: "destructive" });
|
||||
}
|
||||
}
|
||||
|
||||
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">Teachers</h1>
|
||||
<p className="text-muted-foreground">Manage faculty members.</p>
|
||||
</div>
|
||||
<Button onClick={() => setAddOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />Add Teacher
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Search teachers..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9" />
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Teacher</TableHead>
|
||||
<TableHead>Specialization</TableHead>
|
||||
<TableHead>Subjects</TableHead>
|
||||
<TableHead>Department</TableHead>
|
||||
<TableHead>Gender</TableHead>
|
||||
<TableHead className="w-[60px]" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((t) => {
|
||||
const initials = t.name?.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
|
||||
return (
|
||||
<TableRow key={t.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-7 w-7 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">{initials}</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{t.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{t.email || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{t.specialization || "—"}</TableCell>
|
||||
<TableCell>{t.subject_names?.length ? t.subject_names.join(", ") : "—"}</TableCell>
|
||||
<TableCell>{t.department_name || "—"}</TableCell>
|
||||
<TableCell className="capitalize">{t.gender || "—"}</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDelete(t.id, t.name)}><Trash2 className="h-4 w-4 text-destructive" /></Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{filtered.length === 0 && <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">No teachers found.</TableCell></TableRow>}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={addOpen} onOpenChange={setAddOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Add Teacher</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2"><Label>First Name *</Label><Input value={firstName} onChange={(e) => setFirstName(e.target.value)} /></div>
|
||||
<div className="space-y-2"><Label>Last Name *</Label><Input value={lastName} onChange={(e) => setLastName(e.target.value)} /></div>
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Email *</Label><Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
|
||||
<div className="space-y-2">
|
||||
<Label>Gender</Label>
|
||||
<Select value={gender} onValueChange={setGender}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="male">Male</SelectItem>
|
||||
<SelectItem value="female">Female</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2"><Label>Specialization</Label><Input value={specialization} onChange={(e) => setSpecialization(e.target.value)} placeholder="e.g. IELTS Writing" /></div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setAddOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleAdd} disabled={createTeacher.isPending}>{createTeacher.isPending ? "Saving…" : "Add Teacher"}</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user