Modified by www.SourceFiles.app
This commit is contained in:
@@ -0,0 +1,564 @@
|
|||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { supabase } from "@/integrations/supabase/client";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Pencil, Check, Plus, Trash2, Building2, Tag } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import type { Database } from "@/integrations/supabase/types";
|
||||||
|
|
||||||
|
type StudentUpdate = Database["public"]["Tables"]["students"]["Update"];
|
||||||
|
type ScheduleUpdate = Database["public"]["Tables"]["student_campus_schedules"]["Update"];
|
||||||
|
|
||||||
|
const DAYS = [
|
||||||
|
{ key: "monday", short: "M" },
|
||||||
|
{ key: "tuesday", short: "T" },
|
||||||
|
{ key: "wednesday", short: "W" },
|
||||||
|
{ key: "thursday", short: "Th" },
|
||||||
|
{ key: "friday", short: "F" },
|
||||||
|
{ key: "saturday", short: "Sa" },
|
||||||
|
{ key: "sunday", short: "Su" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type DayKey = (typeof DAYS)[number]["key"];
|
||||||
|
|
||||||
|
const ENROLLMENT_STATUSES = [
|
||||||
|
"prospective",
|
||||||
|
"enrolled",
|
||||||
|
"waitlisted",
|
||||||
|
"withdrawn",
|
||||||
|
"graduated",
|
||||||
|
"on_hold",
|
||||||
|
];
|
||||||
|
|
||||||
|
function EditToggle({
|
||||||
|
editing,
|
||||||
|
setEditing,
|
||||||
|
canEdit,
|
||||||
|
}: {
|
||||||
|
editing: boolean;
|
||||||
|
setEditing: (v: boolean) => void;
|
||||||
|
canEdit: boolean;
|
||||||
|
}) {
|
||||||
|
if (!canEdit) return null;
|
||||||
|
return editing ? (
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => setEditing(false)}>
|
||||||
|
<Check className="h-4 w-4 mr-1" /> Done
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button size="sm" variant="outline" onClick={() => setEditing(true)}>
|
||||||
|
<Pencil className="h-4 w-4 mr-1" /> Edit
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StudentEnrollmentTab({
|
||||||
|
studentId,
|
||||||
|
isAdmin,
|
||||||
|
}: {
|
||||||
|
studentId: string;
|
||||||
|
isAdmin: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 mt-4">
|
||||||
|
<EnrollmentCard studentId={studentId} canEdit={isAdmin} />
|
||||||
|
<CampusScheduleCard studentId={studentId} canEdit={isAdmin} />
|
||||||
|
<TagsCard studentId={studentId} canEdit={isAdmin} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Enrollment ──────────────────────────────────────────────────────────────
|
||||||
|
function EnrollmentCard({ studentId, canEdit }: { studentId: string; canEdit: boolean }) {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
|
||||||
|
const { data: student } = useQuery({
|
||||||
|
queryKey: ["student-enrollment", studentId],
|
||||||
|
queryFn: async () =>
|
||||||
|
(
|
||||||
|
await supabase
|
||||||
|
.from("students")
|
||||||
|
.select(
|
||||||
|
"id, enrollment_status, enrollment_start_date, enrollment_end_date, attendance_basis, calendar_basis, is_support_student, primary_campus_id, tuition_tier_id",
|
||||||
|
)
|
||||||
|
.eq("id", studentId)
|
||||||
|
.single()
|
||||||
|
).data,
|
||||||
|
});
|
||||||
|
const { data: campuses } = useQuery({
|
||||||
|
queryKey: ["campuses"],
|
||||||
|
queryFn: async () =>
|
||||||
|
(await supabase.from("campuses").select("id, name").order("name")).data ?? [],
|
||||||
|
});
|
||||||
|
const { data: tiers } = useQuery({
|
||||||
|
queryKey: ["tuition-tiers"],
|
||||||
|
queryFn: async () =>
|
||||||
|
(await supabase.from("tuition_tiers").select("id, name").order("sort_order")).data ?? [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const save = useMutation({
|
||||||
|
mutationFn: async (patch: StudentUpdate) => {
|
||||||
|
const { error } = await supabase.from("students").update(patch).eq("id", studentId);
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ["student-enrollment", studentId] });
|
||||||
|
qc.invalidateQueries({ queryKey: ["student", studentId] });
|
||||||
|
},
|
||||||
|
onError: (e: Error) => toast.error(e.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!student) return null;
|
||||||
|
|
||||||
|
const campusName = (campuses ?? []).find((c) => c.id === student.primary_campus_id)?.name;
|
||||||
|
const tierName = (tiers ?? []).find((t) => t.id === student.tuition_tier_id)?.name;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-card border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||||
|
Enrollment
|
||||||
|
</h3>
|
||||||
|
<EditToggle editing={editing} setEditing={setEditing} canEdit={canEdit} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{student.enrollment_status !== "enrolled" && (
|
||||||
|
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-3">
|
||||||
|
Only students marked <strong>enrolled</strong> are picked up by invoice runs.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editing ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Status</Label>
|
||||||
|
<Select
|
||||||
|
value={student.enrollment_status ?? "prospective"}
|
||||||
|
onValueChange={(v) => save.mutate({ enrollment_status: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{ENROLLMENT_STATUSES.map((s) => (
|
||||||
|
<SelectItem key={s} value={s} className="capitalize">
|
||||||
|
{s.replace("_", " ")}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Primary campus</Label>
|
||||||
|
<Select
|
||||||
|
value={student.primary_campus_id ?? ""}
|
||||||
|
onValueChange={(v) => save.mutate({ primary_campus_id: v || null })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="None" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(campuses ?? []).map((c) => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>
|
||||||
|
{c.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Attendance</Label>
|
||||||
|
<Select
|
||||||
|
value={student.attendance_basis ?? "full_time"}
|
||||||
|
onValueChange={(v) => save.mutate({ attendance_basis: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="full_time">Full-time</SelectItem>
|
||||||
|
<SelectItem value="part_time">Part-time</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Calendar</Label>
|
||||||
|
<Select
|
||||||
|
value={student.calendar_basis ?? "school_year"}
|
||||||
|
onValueChange={(v) => save.mutate({ calendar_basis: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="school_year">School year</SelectItem>
|
||||||
|
<SelectItem value="year_round">Year-round</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Tuition tier</Label>
|
||||||
|
<Select
|
||||||
|
value={student.tuition_tier_id ?? ""}
|
||||||
|
onValueChange={(v) => save.mutate({ tuition_tier_id: v || null })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="None" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(tiers ?? []).map((t) => (
|
||||||
|
<SelectItem key={t.id} value={t.id}>
|
||||||
|
{t.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Enrollment start</Label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
defaultValue={student.enrollment_start_date ?? ""}
|
||||||
|
onBlur={(e) => save.mutate({ enrollment_start_date: e.target.value || null })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Enrollment end</Label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
defaultValue={student.enrollment_end_date ?? ""}
|
||||||
|
onBlur={(e) => save.mutate({ enrollment_end_date: e.target.value || null })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label className="flex items-center gap-2 text-sm mt-6">
|
||||||
|
<Checkbox
|
||||||
|
checked={!!student.is_support_student}
|
||||||
|
onCheckedChange={(v) => save.mutate({ is_support_student: !!v })}
|
||||||
|
/>
|
||||||
|
Support student
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-sm">
|
||||||
|
<Row label="Status" value={student.enrollment_status?.replace("_", " ")} />
|
||||||
|
<Row label="Primary campus" value={campusName} />
|
||||||
|
<Row
|
||||||
|
label="Attendance"
|
||||||
|
value={student.attendance_basis === "part_time" ? "Part-time" : "Full-time"}
|
||||||
|
/>
|
||||||
|
<Row
|
||||||
|
label="Calendar"
|
||||||
|
value={student.calendar_basis === "year_round" ? "Year-round" : "School year"}
|
||||||
|
/>
|
||||||
|
<Row label="Tuition tier" value={tierName} />
|
||||||
|
<Row label="Enrollment start" value={student.enrollment_start_date} />
|
||||||
|
<Row label="Enrollment end" value={student.enrollment_end_date} />
|
||||||
|
<Row label="Support student" value={student.is_support_student ? "Yes" : "No"} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Row({ label, value }: { label: string; value?: string | null }) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between gap-4 py-1.5 border-b last:border-0">
|
||||||
|
<span className="text-muted-foreground shrink-0">{label}</span>
|
||||||
|
<span className="font-medium text-right capitalize">{value || "—"}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Weekly campus schedule ──────────────────────────────────────────────────
|
||||||
|
function CampusScheduleCard({ studentId, canEdit }: { studentId: string; canEdit: boolean }) {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [newCampus, setNewCampus] = useState("");
|
||||||
|
|
||||||
|
const { data: campuses } = useQuery({
|
||||||
|
queryKey: ["campuses"],
|
||||||
|
queryFn: async () =>
|
||||||
|
(await supabase.from("campuses").select("id, name").order("name")).data ?? [],
|
||||||
|
});
|
||||||
|
const { data: rows } = useQuery({
|
||||||
|
queryKey: ["student-schedules", studentId],
|
||||||
|
queryFn: async () =>
|
||||||
|
(
|
||||||
|
await supabase
|
||||||
|
.from("student_campus_schedules")
|
||||||
|
.select("*")
|
||||||
|
.eq("student_id", studentId)
|
||||||
|
.order("effective_start", { ascending: false })
|
||||||
|
).data ?? [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const invalidate = () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ["student-schedules", studentId] });
|
||||||
|
};
|
||||||
|
|
||||||
|
const add = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
if (!newCampus) throw new Error("Pick a campus");
|
||||||
|
const { error } = await supabase.from("student_campus_schedules").insert({
|
||||||
|
student_id: studentId,
|
||||||
|
campus_id: newCampus,
|
||||||
|
assignment_type: (rows ?? []).length === 0 ? "primary" : "additional",
|
||||||
|
});
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
setNewCampus("");
|
||||||
|
invalidate();
|
||||||
|
toast.success("Schedule added");
|
||||||
|
},
|
||||||
|
onError: (e: Error) => toast.error(e.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const patch = useMutation({
|
||||||
|
mutationFn: async ({ id, values }: { id: string; values: ScheduleUpdate }) => {
|
||||||
|
const { error } = await supabase.from("student_campus_schedules").update(values).eq("id", id);
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: invalidate,
|
||||||
|
onError: (e: Error) => toast.error(e.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const remove = useMutation({
|
||||||
|
mutationFn: async (id: string) => {
|
||||||
|
const { error } = await supabase.from("student_campus_schedules").delete().eq("id", id);
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
invalidate();
|
||||||
|
toast.success("Schedule removed");
|
||||||
|
},
|
||||||
|
onError: (e: Error) => toast.error(e.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
const campusName = (id: string) => (campuses ?? []).find((c) => c.id === id)?.name ?? "—";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-card border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||||
|
Weekly campus schedule
|
||||||
|
</h3>
|
||||||
|
<EditToggle editing={editing} setEditing={setEditing} canEdit={canEdit} />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mb-3">
|
||||||
|
One row per campus. A student can attend more than one campus in the same week — billing
|
||||||
|
charges each campus at its own rate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{(rows ?? []).map((r) => (
|
||||||
|
<div key={r.id} className="border rounded p-3">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="font-medium text-sm flex items-center gap-2">
|
||||||
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
||||||
|
{campusName(r.campus_id)}
|
||||||
|
<span className="text-xs text-muted-foreground capitalize">
|
||||||
|
{r.assignment_type}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{r.scheduled_days_per_week} day{r.scheduled_days_per_week === 1 ? "" : "s"}/week
|
||||||
|
</span>
|
||||||
|
{editing && (
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => remove.mutate(r.id)}>
|
||||||
|
<Trash2 className="h-4 w-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{DAYS.map((d) => (
|
||||||
|
<label key={d.key} className="flex items-center gap-1.5 text-sm">
|
||||||
|
<Checkbox
|
||||||
|
checked={!!r[d.key as DayKey]}
|
||||||
|
disabled={!editing}
|
||||||
|
onCheckedChange={(v) => patch.mutate({ id: r.id, values: { [d.key]: !!v } })}
|
||||||
|
/>
|
||||||
|
{d.short}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editing && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-2 mt-3">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Effective from</Label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
defaultValue={r.effective_start ?? ""}
|
||||||
|
onBlur={(e) =>
|
||||||
|
patch.mutate({ id: r.id, values: { effective_start: e.target.value } })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Until (optional)</Label>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
defaultValue={r.effective_end ?? ""}
|
||||||
|
onBlur={(e) =>
|
||||||
|
patch.mutate({ id: r.id, values: { effective_end: e.target.value || null } })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label className="flex items-center gap-2 text-sm mt-6">
|
||||||
|
<Checkbox
|
||||||
|
checked={!!r.early_dropoff}
|
||||||
|
onCheckedChange={(v) =>
|
||||||
|
patch.mutate({ id: r.id, values: { early_dropoff: !!v } })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
Early drop-off
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-2 text-sm mt-6">
|
||||||
|
<Checkbox
|
||||||
|
checked={!!r.late_pickup}
|
||||||
|
onCheckedChange={(v) =>
|
||||||
|
patch.mutate({ id: r.id, values: { late_pickup: !!v } })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
Late pick-up
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{(rows ?? []).length === 0 && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No campus schedule yet. Invoice runs skip students without one.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editing && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Select value={newCampus} onValueChange={setNewCampus}>
|
||||||
|
<SelectTrigger className="max-w-xs">
|
||||||
|
<SelectValue placeholder="Add a campus…" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(campuses ?? []).map((c) => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>
|
||||||
|
{c.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button onClick={() => add.mutate()} disabled={!newCampus || add.isPending}>
|
||||||
|
<Plus className="h-4 w-4 mr-1" /> Add
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tags ────────────────────────────────────────────────────────────────────
|
||||||
|
function TagsCard({ studentId, canEdit }: { studentId: string; canEdit: boolean }) {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
|
||||||
|
const { data: tags } = useQuery({
|
||||||
|
queryKey: ["student-tags"],
|
||||||
|
queryFn: async () =>
|
||||||
|
(
|
||||||
|
await supabase
|
||||||
|
.from("student_tags")
|
||||||
|
.select("id, name")
|
||||||
|
.eq("is_active", true)
|
||||||
|
.order("sort_order")
|
||||||
|
).data ?? [],
|
||||||
|
});
|
||||||
|
const { data: assigned } = useQuery({
|
||||||
|
queryKey: ["student-tag-assignments", studentId],
|
||||||
|
queryFn: async () =>
|
||||||
|
(
|
||||||
|
await supabase
|
||||||
|
.from("student_tag_assignments")
|
||||||
|
.select("id, tag_id")
|
||||||
|
.eq("student_id", studentId)
|
||||||
|
).data ?? [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const assignedIds = new Set((assigned ?? []).map((a) => a.tag_id));
|
||||||
|
|
||||||
|
const toggle = useMutation({
|
||||||
|
mutationFn: async ({ tagId, on }: { tagId: string; on: boolean }) => {
|
||||||
|
if (on) {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from("student_tag_assignments")
|
||||||
|
.insert({ student_id: studentId, tag_id: tagId });
|
||||||
|
if (error) throw error;
|
||||||
|
} else {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from("student_tag_assignments")
|
||||||
|
.delete()
|
||||||
|
.eq("student_id", studentId)
|
||||||
|
.eq("tag_id", tagId);
|
||||||
|
if (error) throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSuccess: () => qc.invalidateQueries({ queryKey: ["student-tag-assignments", studentId] }),
|
||||||
|
onError: (e: Error) => toast.error(e.message),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-card border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||||
|
Tags
|
||||||
|
</h3>
|
||||||
|
<EditToggle editing={editing} setEditing={setEditing} canEdit={canEdit} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editing ? (
|
||||||
|
<div className="flex flex-wrap gap-x-6 gap-y-2">
|
||||||
|
{(tags ?? []).map((t) => (
|
||||||
|
<label key={t.id} className="flex items-center gap-2 text-sm">
|
||||||
|
<Checkbox
|
||||||
|
checked={assignedIds.has(t.id)}
|
||||||
|
onCheckedChange={(v) => toggle.mutate({ tagId: t.id, on: !!v })}
|
||||||
|
/>
|
||||||
|
{t.name}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{(tags ?? [])
|
||||||
|
.filter((t) => assignedIds.has(t.id))
|
||||||
|
.map((t) => (
|
||||||
|
<span
|
||||||
|
key={t.id}
|
||||||
|
className="inline-flex items-center gap-1 text-xs bg-muted px-2 py-1 rounded"
|
||||||
|
>
|
||||||
|
<Tag className="h-3 w-3" />
|
||||||
|
{t.name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{(tags ?? []).filter((t) => assignedIds.has(t.id)).length === 0 && (
|
||||||
|
<span className="text-sm text-muted-foreground">No tags.</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user