feat: reporter dashboard — user-scoped incident submissions with status

app/(protected)/reporter/page.tsx

@@ -1,9 +1,115 @@
-// app/(protected)/reporter/page.tsx
+export const dynamic = 'force-dynamic'
-export default function ReporterHome() {
+
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+
+const STATUS_LABELS: Record<string, string> = {
+  reported: 'Reported',
+  triaged: 'Triaged',
+  investigating: 'Investigating',
+  capa_pending: 'CAPA Pending',
+  verification: 'Verification',
+  closed: 'Closed',
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  reported: 'bg-gray-100 text-gray-600',
+  triaged: 'bg-yellow-100 text-yellow-800',
+  investigating: 'bg-blue-100 text-blue-700',
+  capa_pending: 'bg-orange-100 text-orange-700',
+  verification: 'bg-purple-100 text-purple-700',
+  closed: 'bg-green-100 text-green-700',
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  injury: 'Injury', near_miss: 'Near Miss', hazard: 'Hazard',
+  asset_damage: 'Asset Damage', environmental: 'Environmental', security: 'Security', fire: 'Fire',
+}
+
+export default async function ReporterPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/login')
+
+  const { data: profile } = await supabase.from('users').select('name').eq('id', user.id).single()
+
+  const { data: incidents } = await supabase
+    .from('incidents')
+    .select('id, reference_no, incident_type, status, reported_at, severity, sites (name)')
+    .eq('reported_by', user.id)
+    .order('reported_at', { ascending: false })
+
+  const rows = incidents ?? []
+  const openCount = rows.filter(r => r.status !== 'closed').length
+  const closedCount = rows.filter(r => r.status === 'closed').length
+
   return (
-    <main className="p-8 max-w-4xl mx-auto">
+    <main className="max-w-2xl mx-auto px-4 py-6">
-      <h1 className="text-2xl font-bold">Reporter Dashboard</h1>
+      <div className="flex items-center justify-between mb-6">
-      <p className="mt-2 text-gray-500">Phase 1: Incident report form coming here.</p>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">My Reports</h1>
+          <p className="text-sm text-gray-400 mt-0.5">Welcome, {profile?.name ?? user.email}</p>
+        </div>
+        <Link
+          href="/report"
+          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
+        >
+          + New Report
+        </Link>
+      </div>
+
+      <div className="flex gap-4 mb-6 text-sm">
+        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
+          <p className="text-2xl font-bold text-gray-900">{rows.length}</p>
+          <p className="text-xs text-gray-500 mt-1">Total Submitted</p>
+        </div>
+        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
+          <p className="text-2xl font-bold text-yellow-600">{openCount}</p>
+          <p className="text-xs text-gray-500 mt-1">In Progress</p>
+        </div>
+        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
+          <p className="text-2xl font-bold text-green-600">{closedCount}</p>
+          <p className="text-xs text-gray-500 mt-1">Closed</p>
+        </div>
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="bg-white rounded-xl shadow-sm p-8 text-center">
+          <p className="text-gray-400 text-sm mb-4">No incidents reported yet.</p>
+          <Link href="/report" className="text-blue-600 text-sm hover:underline">Submit your first report →</Link>
+        </div>
+      ) : (
+        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
+          {rows.map(inc => {
+            const siteName = (inc.sites as unknown as { name: string } | null)?.name
+            return (
+              <div key={inc.id} className="p-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-semibold text-gray-900">
+                      {inc.reference_no ?? inc.id.slice(0, 8)}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-0.5">
+                      {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
+                      {siteName ? ` · ${siteName}` : ''}
+                      {inc.severity ? ` · Severity ${inc.severity}` : ''}
+                    </p>
+                    <p className="text-xs text-gray-400 mt-0.5">
+                      {new Date(inc.reported_at as string).toLocaleDateString('en-MY', {
+                        day: 'numeric', month: 'short', year: 'numeric',
+                      })}
+                    </p>
+                  </div>
+                  <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                    {STATUS_LABELS[inc.status] ?? inc.status}
+                  </span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
     </main>
   )
 }