Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/_authenticated/attendance.tsx

@@ -0,0 +1,96 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/_authenticated/attendance")({
+  head: () => ({ meta: [{ title: "Attendance — School Portal" }] }),
+  component: AttendancePage,
+});
+
+function AttendancePage() {
+  const { user, roles } = useAuth();
+  const isAdmin = roles.includes("admin");
+  const qc = useQueryClient();
+  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
+  const [classId, setClassId] = useState<string>("");
+
+  const { data: classes } = useQuery({
+    queryKey: ["my-classes", user?.id],
+    queryFn: async () => {
+      let q = supabase.from("classes").select("id, name, teacher_id");
+      if (!isAdmin) q = q.eq("teacher_id", user!.id);
+      return (await q.order("name")).data ?? [];
+    },
+    enabled: !!user,
+  });
+
+  const { data: students } = useQuery({
+    queryKey: ["class-students", classId, date],
+    queryFn: async () => {
+      if (!classId) return [];
+      const { data } = await supabase.from("students").select("id, first_name, last_name, attendance(status, date, id)").eq("class_id", classId);
+      return data ?? [];
+    },
+    enabled: !!classId,
+  });
+
+  const mark = useMutation({
+    mutationFn: async ({ studentId, status }: { studentId: string; status: string }) => {
+      const { error } = await supabase.from("attendance").upsert(
+        { student_id: studentId, date, status: status as "present" | "absent" | "late" | "excused", recorded_by: user!.id },
+        { onConflict: "student_id,date" }
+      );
+      if (error) throw error;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["class-students", classId, date] }),
+    onError: (e: Error) => toast.error(e.message),
+  });
+
+  const getStatus = (s: { attendance: { date: string; status: string }[] }) =>
+    s.attendance.find((a) => a.date === date)?.status ?? "";
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <h1 className="text-2xl font-semibold mb-1">Attendance</h1>
+      <p className="text-muted-foreground text-sm mb-6">Mark today's attendance for your class.</p>
+
+      <div className="flex gap-3 mb-6">
+        <div>
+          <Select value={classId} onValueChange={setClassId}>
+            <SelectTrigger className="w-60"><SelectValue placeholder="Choose class" /></SelectTrigger>
+            <SelectContent>{(classes ?? []).map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
+          </Select>
+        </div>
+        <Input type="date" className="w-44" value={date} onChange={(e) => setDate(e.target.value)} />
+      </div>
+
+      {classId && (
+        <div className="bg-card border rounded-lg divide-y">
+          {(students ?? []).map((s) => {
+            const status = getStatus(s as { attendance: { date: string; status: string }[] });
+            return (
+              <div key={s.id} className="flex items-center justify-between p-3">
+                <div className="font-medium">{s.last_name}, {s.first_name}</div>
+                <div className="flex gap-1">
+                  {["present", "absent", "late", "excused"].map((opt) => (
+                    <Button key={opt} size="sm" variant={status === opt ? "default" : "outline"} onClick={() => mark.mutate({ studentId: s.id, status: opt })}>
+                      {opt}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+          {students?.length === 0 && <div className="p-4 text-sm text-muted-foreground">No students in this class.</div>}
+        </div>
+      )}
+      {!classId && <p className="text-sm text-muted-foreground">Select a class to begin.</p>}
+    </div>
+  );
+}