feat: initial frontend codebase — EnCoach v3

React 18 + TypeScript + Vite 5 + Tailwind CSS + shadcn/ui frontend:
- Multi-role auth: student, teacher, admin, corporate, agent, developer
- Student portal: dashboard, courses, adaptive learning, exams, placement
- Teacher portal: courses, assignments, grading, attendance, AI workbench
- Admin portal: 60+ management pages (LMS, exams, users, entities, AI)
- AI-powered features: study coach, generation page, gap analysis, TTS
- Exam system: session, auto-save, results, grading queue
- Full IELTS workflow: reading/listening/writing/speaking modules

Made-with: Cursor

src/pages/student/StudentAnnouncements.tsx

@@ -0,0 +1,65 @@
+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>
+  );
+}