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
251
frontend/src/pages/admin/AdminFacilities.tsx
Normal file
251
frontend/src/pages/admin/AdminFacilities.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { useFacilities, useCreateFacility, useDeleteFacility, useAssets, useCreateAsset, useDeleteAsset } from "@/hooks/queries";
|
||||
import { Search, Plus, Trash2, Building } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
export default function AdminFacilities() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [section, setSection] = useState<"facilities" | "assets">("facilities");
|
||||
const [facOpen, setFacOpen] = useState(false);
|
||||
const [assetOpen, setAssetOpen] = useState(false);
|
||||
const [facForm, setFacForm] = useState({ name: "", code: "" });
|
||||
const [assetForm, setAssetForm] = useState({ name: "", code: "" });
|
||||
const { toast } = useToast();
|
||||
|
||||
const facQ = useFacilities();
|
||||
const assetQ = useAssets();
|
||||
const createFac = useCreateFacility();
|
||||
const delFac = useDeleteFacility();
|
||||
const createAsset = useCreateAsset();
|
||||
const delAsset = useDeleteAsset();
|
||||
|
||||
const loading = section === "facilities" ? facQ.isLoading : assetQ.isLoading;
|
||||
const facilities = facQ.data?.data ?? facQ.data?.items ?? [];
|
||||
const assets = assetQ.data?.data ?? assetQ.data?.items ?? [];
|
||||
|
||||
if (loading) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const q = search.toLowerCase();
|
||||
const filteredFac = facilities.filter(
|
||||
(f) => f.name?.toLowerCase().includes(q) || f.code?.toLowerCase().includes(q),
|
||||
);
|
||||
const filteredAssets = assets.filter(
|
||||
(a) =>
|
||||
a.name?.toLowerCase().includes(q) ||
|
||||
a.code?.toLowerCase().includes(q) ||
|
||||
a.product_name?.toLowerCase().includes(q),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Building className="h-7 w-7" />
|
||||
Facilities
|
||||
</h1>
|
||||
<p className="text-muted-foreground">Facilities and fixed assets.</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => (section === "facilities" ? setFacOpen(true) : setAssetOpen(true))}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{section === "facilities" ? "New facility" : "New asset"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant={section === "facilities" ? "default" : "outline"}
|
||||
onClick={() => setSection("facilities")}
|
||||
>
|
||||
Facilities
|
||||
</Button>
|
||||
<Button variant={section === "assets" ? "default" : "outline"} onClick={() => setSection("assets")}>
|
||||
Assets
|
||||
</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..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
{section === "facilities" ? (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>#</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Code</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredFac.map((f, i) => (
|
||||
<TableRow key={f.id}>
|
||||
<TableCell>{i + 1}</TableCell>
|
||||
<TableCell className="font-medium">{f.name}</TableCell>
|
||||
<TableCell>{f.code}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => {
|
||||
if (!window.confirm("Delete this facility?")) return;
|
||||
delFac.mutate(f.id, {
|
||||
onSuccess: () => toast({ title: "Deleted" }),
|
||||
onError: (err: Error) =>
|
||||
toast({ title: "Error", description: err.message, variant: "destructive" }),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>#</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Code</TableHead>
|
||||
<TableHead>Product</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredAssets.map((a, i) => (
|
||||
<TableRow key={a.id}>
|
||||
<TableCell>{i + 1}</TableCell>
|
||||
<TableCell className="font-medium">{a.name}</TableCell>
|
||||
<TableCell>{a.code}</TableCell>
|
||||
<TableCell>{a.product_name}</TableCell>
|
||||
<TableCell>
|
||||
<Button size="sm" variant="ghost" className="text-destructive" onClick={() => { if (!window.confirm("Delete this asset?")) return; delAsset.mutate(a.id, { onSuccess: () => toast({ title: "Deleted" }), onError: (err: Error) => toast({ title: "Error", description: err.message, variant: "destructive" }) }); }}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Dialog open={facOpen} onOpenChange={setFacOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create facility</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input value={facForm.name} onChange={(e) => setFacForm((f) => ({ ...f, name: e.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Code</Label>
|
||||
<Input value={facForm.code} onChange={(e) => setFacForm((f) => ({ ...f, code: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setFacOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
disabled={createFac.isPending}
|
||||
onClick={() =>
|
||||
createFac.mutate(
|
||||
{ name: facForm.name, code: facForm.code || undefined },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setFacOpen(false);
|
||||
toast({ title: "Created successfully" });
|
||||
},
|
||||
onError: (err: Error) =>
|
||||
toast({ title: "Error", description: err.message, variant: "destructive" }),
|
||||
},
|
||||
)
|
||||
}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={assetOpen} onOpenChange={setAssetOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create asset</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input
|
||||
value={assetForm.name}
|
||||
onChange={(e) => setAssetForm((f) => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Code</Label>
|
||||
<Input
|
||||
value={assetForm.code}
|
||||
onChange={(e) => setAssetForm((f) => ({ ...f, code: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setAssetOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
disabled={createAsset.isPending}
|
||||
onClick={() =>
|
||||
createAsset.mutate(
|
||||
{ name: assetForm.name, code: assetForm.code || undefined },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setAssetOpen(false);
|
||||
toast({ title: "Created successfully" });
|
||||
},
|
||||
onError: (err: Error) =>
|
||||
toast({ title: "Error", description: err.message, variant: "destructive" }),
|
||||
},
|
||||
)
|
||||
}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user