Modified by www.SourceFiles.app
This commit is contained in:
@@ -1,59 +0,0 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, ChevronRight } from "lucide-react";
|
||||
|
||||
export const Route = createFileRoute("/_authenticated/students/")({
|
||||
head: () => ({ meta: [{ title: "Students — School Portal" }] }),
|
||||
component: StudentsIndexPage,
|
||||
});
|
||||
|
||||
function StudentsIndexPage() {
|
||||
const { roles } = useAuth();
|
||||
const isAdmin = roles.includes("admin");
|
||||
|
||||
const { data: students } = useQuery({
|
||||
queryKey: ["students"],
|
||||
queryFn: async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("students")
|
||||
.select("id, first_name, last_name, dob, allergies, photo_release, class_id, classes(name)")
|
||||
.order("last_name");
|
||||
if (error) throw error;
|
||||
return data ?? [];
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-6xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Students</h1>
|
||||
<p className="text-muted-foreground text-sm">{students?.length ?? 0} students visible to you</p>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<Link to="/students/new">
|
||||
<Button><Plus className="h-4 w-4 mr-1" /> Add student</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-card border rounded-lg divide-y">
|
||||
{(students ?? []).map((s) => (
|
||||
<Link to="/students/$id" params={{ id: s.id }} key={s.id} className="flex items-center justify-between px-4 py-3 hover:bg-muted/50">
|
||||
<div>
|
||||
<div className="font-medium">{s.last_name}, {s.first_name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{(s.classes as { name: string } | null)?.name ?? "No class"} · {s.allergies ? `Allergies: ${s.allergies}` : "No allergies"}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
</Link>
|
||||
))}
|
||||
{students?.length === 0 && <div className="p-6 text-sm text-muted-foreground text-center">No students yet.</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user