e70a2854f4
Roadmap P0
- Ship /logo.svg fallback and rewire asset references (superseded later by
the project-manager PNG in a separate commit).
Roadmap P1
- Response envelope alignment ({items,total,page,size}) across services
and query hooks.
- Approval/ticket UX updates tied to the new backend rollback semantics.
Roadmap P2
- React.lazy + Vite manualChunks to split vendor-radix/charts/icons/forms
from the main bundle and cut initial JS.
- Fix the 181 tsc errors (PaginationParams class + per-service generics).
- Auto-refresh flow for JWT refresh tokens wired into api-client.ts.
Roadmap P3
- i18n: i18next + language detector, en/ar locales, RTL auto-switch,
LanguageToggle component in RoleLayout and AdminLmsLayout.
- GDPR: PrivacyCenter page for data export and right-to-erasure, backed
by gdpr.service.ts; logout via AuthContext after erasure.
- Human-in-the-loop exam review UI: admin ExamReviewQueue + ExamReviewDetail
pages, useExamReview hooks, exam-review.service.ts.
- AI quality loop: AIPromptEditor (versioning + render preview),
AIFeedbackButtons for students, AIFeedbackTriage admin page, dedicated
services, hooks, and types.
- Dark mode: ThemeProvider + ThemeToggle + chart color tokens.
- Accessibility: DialogDescription on every DialogContent; alert-dialog
and sheet updates.
- Retire dead pages: ExamPage marketing, Index, ProfilePage import.
- Playwright e2e scaffolding: playwright.config.ts + e2e/login.spec.ts
smoke tests, npm scripts test:e2e / test:e2e:install.
Made-with: Cursor
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useTimetable } from "@/hooks/queries";
|
|
|
|
const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] as const;
|
|
const hours = ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"];
|
|
|
|
export default function StudentTimetable() {
|
|
const { data: timetableSessions = [], isLoading } = useTimetable();
|
|
if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;
|
|
|
|
const mySessions = timetableSessions.filter(s => ["c1", "c2", "c5", "c8"].includes(String(s.course_id)));
|
|
|
|
function getSessionAt(day: string, hour: string) {
|
|
return mySessions.find(s => s.day === day && s.start_time <= hour && s.end_time > hour);
|
|
}
|
|
|
|
function isStart(day: string, hour: string) {
|
|
return mySessions.find(s => s.day === day && s.start_time === hour);
|
|
}
|
|
|
|
function getSpan(session: (typeof mySessions)[0]) {
|
|
const start = parseInt(session.start_time.split(":")[0]);
|
|
const end = parseInt(session.end_time.split(":")[0]);
|
|
const startMin = parseInt(session.start_time.split(":")[1]);
|
|
const endMin = parseInt(session.end_time.split(":")[1]);
|
|
return (end - start) + (endMin > 0 ? 0.5 : 0) - (startMin > 0 ? 0.5 : 0);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Timetable</h1>
|
|
<p className="text-muted-foreground">Your weekly class schedule.</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6 overflow-x-auto">
|
|
<div className="min-w-[700px]">
|
|
<div className="grid grid-cols-6 gap-1">
|
|
<div className="text-xs font-medium text-muted-foreground p-2" />
|
|
{days.map(d => (
|
|
<div key={d} className="text-xs font-semibold text-center p-2 bg-muted rounded">{d}</div>
|
|
))}
|
|
</div>
|
|
{hours.map(hour => (
|
|
<div key={hour} className="grid grid-cols-6 gap-1 min-h-[48px]">
|
|
<div className="text-xs text-muted-foreground p-2 flex items-start">{hour}</div>
|
|
{days.map(day => {
|
|
const session = isStart(day, hour);
|
|
const occupied = getSessionAt(day, hour);
|
|
if (session) {
|
|
return (
|
|
<div
|
|
key={day}
|
|
className="rounded-md p-2 text-xs text-white"
|
|
style={{ backgroundColor: session.color, minHeight: `${getSpan(session) * 48}px` }}
|
|
>
|
|
<p className="font-semibold">{session.course_name}</p>
|
|
<p className="opacity-80">{session.start_time}-{session.end_time}</p>
|
|
<p className="opacity-70">{session.room}</p>
|
|
</div>
|
|
);
|
|
}
|
|
if (occupied && !session) return <div key={day} />;
|
|
return <div key={day} className="border border-dashed border-border/50 rounded-md" />;
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|