Changes

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

src/routes/_authenticated/ledger.tsx

@@ -0,0 +1,43 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { ChevronRight } from "lucide-react";
+
+export const Route = createFileRoute("/_authenticated/ledger")({
+  head: () => ({ meta: [{ title: "Tuition — School Portal" }] }),
+  component: LedgerListPage,
+});
+
+function LedgerListPage() {
+  const { data: students } = useQuery({
+    queryKey: ["students-with-balance"],
+    queryFn: async () => {
+      const { data: studs } = await supabase.from("students").select("id, first_name, last_name");
+      const { data: entries } = await supabase.from("ledger_entries").select("student_id, amount_cents, kind");
+      const balances: Record<string, number> = {};
+      (entries ?? []).forEach((e) => {
+        balances[e.student_id] = (balances[e.student_id] ?? 0) + (e.kind === "charge" ? e.amount_cents : -e.amount_cents);
+      });
+      return (studs ?? []).map((s) => ({ ...s, balance: balances[s.id] ?? 0 }));
+    },
+  });
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <h1 className="text-2xl font-semibold mb-1">Tuition ledger</h1>
+      <p className="text-muted-foreground text-sm mb-6">Click a student to view and manage their ledger.</p>
+      <div className="bg-card border rounded-lg divide-y">
+        {(students ?? []).map((s) => (
+          <Link key={s.id} to="/students/$id" params={{ id: s.id }} className="flex justify-between items-center p-3 hover:bg-muted/50">
+            <span className="font-medium">{s.last_name}, {s.first_name}</span>
+            <span className="flex items-center gap-3">
+              <span className={`text-sm font-medium ${s.balance > 0 ? "text-destructive" : "text-green-700"}`}>${(s.balance / 100).toFixed(2)}</span>
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            </span>
+          </Link>
+        ))}
+        {students?.length === 0 && <div className="p-6 text-center text-sm text-muted-foreground">No students.</div>}
+      </div>
+    </div>
+  );
+}