mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
422 lines
20 KiB
React
422 lines
20 KiB
React
import { useEffect, useState, useMemo } from 'react';
|
|
import {
|
|
CheckCircle2, Circle, BookOpen, Users, Search, ChevronLeft, ChevronRight, RefreshCcw, AlertTriangle
|
|
} from 'lucide-react';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Pagination, PaginationContent, PaginationItem,
|
|
PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
|
|
} from '@/components/ui/pagination';
|
|
import { useAdminCourseReadingProgress } from '@/contexts/AdminCourseReadingProgressContext';
|
|
import { useDateFormat } from '@/hooks/useDateFormat';
|
|
|
|
const PAGE_SIZE = 10;
|
|
|
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function StatusBadge({ status }) {
|
|
if (!status) return <Badge variant="outline" className="text-muted-foreground text-xs">Not started</Badge>;
|
|
return status === 'completed'
|
|
? <Badge variant="outline" className="text-emerald-600 border-emerald-400 text-xs">Completed</Badge>
|
|
: <Badge><RefreshCcw />In Progress</Badge>;
|
|
}
|
|
|
|
function ProgressBar({ value, total, className = '' }) {
|
|
const pct = total > 0 ? Math.round((value / total) * 100) : 0;
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
|
|
<div
|
|
className="h-full bg-emerald-500 transition-all duration-300"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
|
|
{value} / {total}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Only relevant once reading is fully done but the course still isn't 'completed' —
|
|
// i.e. a still-unpassed unit quiz and/or course assessment is what's blocking it.
|
|
function PendingNotice({ entry }) {
|
|
const readingDone = entry.lessons_total > 0 && entry.lessons_completed === entry.lessons_total;
|
|
if (!readingDone || entry.course_status === 'completed') return null;
|
|
if (!entry.quizzes_pending && !entry.assessment_pending) return null;
|
|
|
|
const parts = [];
|
|
if (entry.quizzes_pending > 0) {
|
|
parts.push(`${entry.quizzes_pending} quiz${entry.quizzes_pending === 1 ? '' : 'zes'} needed`);
|
|
}
|
|
if (entry.assessment_pending) parts.push('Assessment needed');
|
|
|
|
return (
|
|
<p className="flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-400">
|
|
<AlertTriangle className="size-3.5 shrink-0" />
|
|
{parts.join(' · ')}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function UserAvatar({ name, email, avatarUrl }) {
|
|
const initials = name
|
|
? name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
|
|
: (email?.[0] ?? '?').toUpperCase();
|
|
return (
|
|
<Avatar className="size-9 shrink-0">
|
|
<AvatarImage src={avatarUrl ?? undefined} alt={name ?? email} />
|
|
<AvatarFallback className="text-xs font-semibold bg-secondary text-secondary-foreground">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
// ─── Dialog: full breakdown for one user ─────────────────────────────────────
|
|
|
|
function UserDetailDialog({ open, onOpenChange, entry, courseId }) {
|
|
const { detailCache, detailLoading, fetchUserReadingProgress } = useAdminCourseReadingProgress();
|
|
const { fmtDate, fmtDateShort } = useDateFormat();
|
|
const breakdown = entry ? detailCache[entry.user_id] : null;
|
|
|
|
useEffect(() => {
|
|
if (open && entry && !breakdown) {
|
|
fetchUserReadingProgress(courseId, entry.user_id);
|
|
}
|
|
}, [open, entry]);
|
|
|
|
const lastSeen = entry?.last_accessed_at ? fmtDate(entry.last_accessed_at) : '—';
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-3">
|
|
{entry && <UserAvatar name={entry.user.full_name} email={entry.user.email} avatarUrl={entry.user.avatar_url} />}
|
|
<div className="min-w-0">
|
|
<DialogTitle className="truncate">
|
|
{entry?.user.full_name ?? <span className="italic text-muted-foreground">No name</span>}
|
|
</DialogTitle>
|
|
<DialogDescription className="truncate">{entry?.user.email}</DialogDescription>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
{/* ── Meta strip ── */}
|
|
{entry && (
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<StatusBadge status={entry.course_status} />
|
|
<span className="text-xs">Last seen {lastSeen}</span>
|
|
<span className="text-xs text-muted-foreground ml-auto">
|
|
{entry.lessons_completed} / {entry.lessons_total} lessons
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{entry && <PendingNotice entry={entry} />}
|
|
|
|
{/* ── Progress bar ── */}
|
|
{entry && (
|
|
<ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* ── Unit / lesson breakdown — fills remaining height and scrolls ── */}
|
|
<ScrollArea className="max-h-[50vh] pr-2">
|
|
{detailLoading && !breakdown ? (
|
|
<div className="space-y-3 py-1">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="space-y-1.5">
|
|
<Skeleton className="h-4 w-48" />
|
|
<Skeleton className="h-3 w-36 ml-5" />
|
|
<Skeleton className="h-3 w-40 ml-5" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : breakdown?.length ? (
|
|
<div className="space-y-4 py-1">
|
|
{breakdown.map((unit, ui) => (
|
|
<div key={unit.unit_id} className="space-y-2">
|
|
{/* Unit header */}
|
|
<div className="flex items-center gap-2">
|
|
{unit.status === 'completed'
|
|
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
|
: unit.status === 'in_progress'
|
|
? <Circle className="size-4 text-amber-400 shrink-0" />
|
|
: <Circle className="size-4 text-muted-foreground/30 shrink-0" />
|
|
}
|
|
<span className="text-sm font-semibold truncate flex-1">
|
|
Unit {ui + 1}: {unit.title}
|
|
</span>
|
|
{unit.status && <StatusBadge status={unit.status} />}
|
|
</div>
|
|
|
|
{/* Lesson rows */}
|
|
<div className="ml-6 space-y-1.5 border-l pl-3">
|
|
{unit.lessons.map((lesson) => (
|
|
<div key={lesson.lesson_id} className="flex items-center gap-2">
|
|
{lesson.status === 'completed'
|
|
? <CheckCircle2 className="size-3 text-emerald-500 shrink-0" />
|
|
: lesson.status === 'in_progress'
|
|
? <Circle className="size-3 text-amber-400 shrink-0" />
|
|
: <Circle className="size-3 text-muted-foreground/25 shrink-0" />
|
|
}
|
|
<span className={`text-xs truncate flex-1 ${lesson.status ? 'text-foreground' : 'text-muted-foreground'}`}>
|
|
{lesson.title}
|
|
</span>
|
|
{lesson.status === 'completed' && lesson.completed_at && (
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
|
|
{fmtDateShort(lesson.completed_at)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground py-4 text-center">No lesson data available.</p>
|
|
)}
|
|
</ScrollArea>
|
|
|
|
<DialogFooter showCloseButton>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
// ─── User summary card ────────────────────────────────────────────────────────
|
|
|
|
function UserCard({ entry, onOpen }) {
|
|
const { fmtDate } = useDateFormat();
|
|
const lastSeen = entry.last_accessed_at ? fmtDate(entry.last_accessed_at) : '—';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onOpen(entry)}
|
|
className="bg-background w-full text-left border rounded-lg p-4 flex items-center gap-3 hover:bg-accent/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<UserAvatar name={entry.user.full_name} email={entry.user.email} avatarUrl={entry.user.avatar_url} />
|
|
|
|
<div className="flex-1 min-w-0 space-y-1">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<span className="text-sm font-medium truncate flex-1">
|
|
{entry.user.full_name ?? <span className="italic text-muted-foreground">No name</span>}
|
|
</span>
|
|
<StatusBadge status={entry.course_status} />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground truncate">{entry.user.email}</p>
|
|
<PendingNotice entry={entry} />
|
|
<ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
|
|
<p className="text-xs">Last seen {lastSeen}</p>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ─── Pagination controls ──────────────────────────────────────────────────────
|
|
|
|
function PaginationControls({ page, totalPages, onPage }) {
|
|
if (totalPages <= 1) return null;
|
|
|
|
const pages = [];
|
|
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
|
|
|
// Show at most 5 page numbers around current
|
|
const getVisible = () => {
|
|
if (totalPages <= 5) return pages;
|
|
if (page <= 3) return [1, 2, 3, 4, null, totalPages];
|
|
if (page >= totalPages - 2) return [1, null, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
|
|
return [1, null, page - 1, page, page + 1, null, totalPages];
|
|
};
|
|
|
|
return (
|
|
<Pagination className="mt-4">
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
href="#"
|
|
onClick={(e) => { e.preventDefault(); if (page > 1) onPage(page - 1); }}
|
|
className={page === 1 ? 'pointer-events-none opacity-50' : ''}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{getVisible().map((p, i) =>
|
|
p === null ? (
|
|
<PaginationItem key={`ellipsis-${i}`}>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>
|
|
) : (
|
|
<PaginationItem key={p}>
|
|
<PaginationLink
|
|
href="#"
|
|
isActive={p === page}
|
|
onClick={(e) => { e.preventDefault(); onPage(p); }}
|
|
>
|
|
{p}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
)
|
|
)}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
href="#"
|
|
onClick={(e) => { e.preventDefault(); if (page < totalPages) onPage(page + 1); }}
|
|
className={page === totalPages ? 'pointer-events-none opacity-50' : ''}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
);
|
|
}
|
|
|
|
// ─── Main component ───────────────────────────────────────────────────────────
|
|
|
|
export default function CourseReadingProgressList({ courseId }) {
|
|
const { progressList, listLoading, fetchCourseReadingProgress } = useAdminCourseReadingProgress();
|
|
|
|
const [searchInput, setSearchInput] = useState('');
|
|
const [query, setQuery] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
const [dialogEntry, setDialogEntry] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetchCourseReadingProgress(courseId);
|
|
}, [courseId]);
|
|
|
|
const handleSearchSubmit = (e) => {
|
|
e.preventDefault();
|
|
setQuery(searchInput.trim());
|
|
setPage(1);
|
|
};
|
|
|
|
// ── Filter ────────────────────────────────────────────────────────────────
|
|
const filtered = useMemo(() => {
|
|
const q = query.trim().toLowerCase();
|
|
if (!q) return progressList;
|
|
return progressList.filter((e) =>
|
|
e.user.full_name?.toLowerCase().includes(q) ||
|
|
e.user.email?.toLowerCase().includes(q)
|
|
);
|
|
}, [progressList, query]);
|
|
|
|
// ── Paginate ──────────────────────────────────────────────────────────────
|
|
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
|
|
const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
|
|
|
|
const completedCount = progressList.filter((e) => e.course_status === 'completed').length;
|
|
const inProgressCount = progressList.length - completedCount;
|
|
|
|
// ── Loading skeleton ──────────────────────────────────────────────────────
|
|
if (listLoading) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<Skeleton className="h-9 w-full rounded-md" />
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="border rounded-lg p-4 flex items-center gap-3">
|
|
<Skeleton className="size-9 rounded-full shrink-0" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-3.5 w-40" />
|
|
<Skeleton className="h-3 w-56" />
|
|
<Skeleton className="h-1.5 w-full rounded-full" />
|
|
</div>
|
|
<Skeleton className="h-5 w-20 rounded-full shrink-0" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Empty state ───────────────────────────────────────────────────────────
|
|
if (!progressList.length) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-10 text-center gap-2">
|
|
<BookOpen className="size-8 text-muted-foreground/40" />
|
|
<p className="text-sm text-muted-foreground">No students have started reading this course yet.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* ── Summary strip ── */}
|
|
<div className="flex items-center gap-4 flex-wrap text-sm">
|
|
<span className="flex items-center gap-1.5">
|
|
<Users className="size-3.5" />
|
|
{progressList.length} enrolled
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<CheckCircle2 className="size-3.5 text-emerald-500" />
|
|
{completedCount} completed
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<Circle className="size-3.5 text-amber-400" />
|
|
{inProgressCount} in progress
|
|
</span>
|
|
</div>
|
|
|
|
{/* ── Search ── */}
|
|
<form onSubmit={handleSearchSubmit} className="flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
|
|
<Input
|
|
placeholder="Search by name or email…"
|
|
value={searchInput}
|
|
onChange={(e) => setSearchInput(e.target.value.slice(0, 50))}
|
|
maxLength={50}
|
|
className="bg-background pl-9 pr-16"
|
|
/>
|
|
<span className={`absolute right-3 top-1/2 -translate-y-1/2 text-xs tabular-nums pointer-events-none ${searchInput.length >= 50 ? 'text-destructive' : 'text-muted-foreground'}`}>
|
|
{searchInput.length}/50
|
|
</span>
|
|
</div>
|
|
<Button type="submit" variant="outline" className="shrink-0">
|
|
<Search className="size-4" />
|
|
Search
|
|
</Button>
|
|
</form>
|
|
|
|
{/* ── List ── */}
|
|
{filtered.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-6">No results for "{query}".</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{paginated.map((entry) => (
|
|
<UserCard
|
|
key={entry.user_id}
|
|
entry={entry}
|
|
onOpen={setDialogEntry}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Pagination ── */}
|
|
<PaginationControls page={page} totalPages={totalPages} onPage={setPage} />
|
|
|
|
{/* ── Detail Dialog ── */}
|
|
<UserDetailDialog
|
|
open={!!dialogEntry}
|
|
onOpenChange={(v) => { if (!v) setDialogEntry(null); }}
|
|
entry={dialogEntry}
|
|
courseId={courseId}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|