f1c4953a63
- Restructure: move backend from new_project/ to backend/ - Add full React/TypeScript frontend (37 pages, 17 services, 16 type defs, 11 query hooks) - Add docs/ with SRS specs, user stories, and workflow documentation - Update .gitignore for new directory layout Workflows implemented: WF1 User Signup, WF2 Placement Test, WF3 Exam Configuration, WF4 General English Exam, WF5 Course Generation, WF6 Entity Student Onboarding, AI Course Generation, Adaptive Learning Engine UI, White-Label Branding, Score Release Made-with: Cursor
66 lines
3.1 KiB
TypeScript
66 lines
3.1 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Megaphone, AlertTriangle, AlertCircle, Info } from "lucide-react";
|
|
import { useAnnouncements } from "@/hooks/queries";
|
|
import type { Announcement } from "@/types/communication";
|
|
|
|
const priorityConfig: Record<Announcement["priority"], { variant: "destructive" | "default" | "secondary"; icon: React.ReactNode }> = {
|
|
urgent: { variant: "destructive", icon: <AlertTriangle className="h-4 w-4" /> },
|
|
important: { variant: "default", icon: <AlertCircle className="h-4 w-4" /> },
|
|
normal: { variant: "secondary", icon: <Info className="h-4 w-4" /> },
|
|
};
|
|
|
|
export default function StudentAnnouncements() {
|
|
const { data: announcements = [], isLoading } = useAnnouncements();
|
|
|
|
const sorted = [...announcements]
|
|
.filter(a => a.is_published)
|
|
.sort((a, b) => new Date(b.published_at ?? b.expires_at ?? "").getTime() - new Date(a.published_at ?? a.expires_at ?? "").getTime());
|
|
|
|
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>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Announcements</h1>
|
|
<p className="text-muted-foreground">Stay up to date with the latest announcements from your courses.</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{sorted.map(a => {
|
|
const cfg = priorityConfig[a.priority];
|
|
return (
|
|
<Card key={a.id} className={a.priority === "urgent" ? "border-destructive/30" : ""}>
|
|
<CardContent className="flex items-start gap-4 py-4">
|
|
<div className={`h-10 w-10 rounded-lg flex items-center justify-center shrink-0 ${a.priority === "urgent" ? "bg-destructive/10 text-destructive" : a.priority === "important" ? "bg-yellow-500/10 text-yellow-600" : "bg-primary/10 text-primary"}`}>
|
|
{cfg.icon}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="font-medium">{a.title}</span>
|
|
<Badge variant={cfg.variant}>{a.priority}</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{a.content}</p>
|
|
<div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
|
<span>{a.author_name}</span>
|
|
{a.course_name && <><span>·</span><span>{a.course_name}</span></>}
|
|
{a.published_at && <><span>·</span><span>{new Date(a.published_at).toLocaleDateString()}</span></>}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
{sorted.length === 0 && (
|
|
<Card>
|
|
<CardContent className="py-12 text-center text-muted-foreground">
|
|
<Megaphone className="h-12 w-12 mx-auto mb-3 opacity-40" />
|
|
<p>No announcements right now.</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|