ims/app/(protected)/hse/dashboard/page.tsx

export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { StatCard } from '@/components/dashboard/stat-card'

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 HseDashboardPage() {
  const supabase = await createClient()

  const { data: incidents } = await supabase
    .from('incidents')
    .select('id, status, incident_type, sites (name)')

  const rows = incidents ?? []
  const total = rows.length
  const closed = rows.filter(r => r.status === 'closed').length
  const open = total - closed

  const by_type: Record<string, number> = {}
  for (const r of rows) {
    by_type[r.incident_type] = (by_type[r.incident_type] ?? 0) + 1
  }

  const siteMap: Record<string, number> = {}
  for (const r of rows) {
    const name = (r.sites as unknown as { name: string } | null)?.name ?? 'Unknown'
    siteMap[name] = (siteMap[name] ?? 0) + 1
  }
  const by_site = Object.entries(siteMap).map(([name, count]) => ({ name, count }))
    .sort((a, b) => b.count - a.count)

  return (
    <main className="max-w-4xl mx-auto px-4 py-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline">
          View all incidents →
        </Link>
      </div>

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 mb-8">
        <StatCard label="Total Incidents" value={total} />
        <StatCard label="Open" value={open} accent="yellow" sub="awaiting action" />
        <StatCard label="Closed" value={closed} accent="green" sub="resolved" />
      </div>

      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Incident Type</h2>
        <div className="space-y-2">
          {Object.entries(by_type).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
            <div key={type} className="flex items-center gap-3">
              <span className="text-sm text-gray-600 w-32 shrink-0">{TYPE_LABELS[type] ?? type}</span>
              <div className="flex-1 bg-gray-100 rounded-full h-2">
                <div
                  className="bg-blue-500 h-2 rounded-full"
                  style={{ width: total > 0 ? `${(count / total) * 100}%` : '0%' }}
                />
              </div>
              <span className="text-sm font-semibold text-gray-900 w-6 text-right">{count}</span>
            </div>
          ))}
          {Object.keys(by_type).length === 0 && (
            <p className="text-sm text-gray-400">No incidents yet</p>
          )}
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm p-5">
        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">By Site</h2>
        <div className="space-y-2">
          {by_site.map(({ name, count }) => (
            <div key={name} className="flex items-center justify-between">
              <span className="text-sm text-gray-600">{name}</span>
              <span className="text-sm font-semibold text-gray-900">{count}</span>
            </div>
          ))}
          {by_site.length === 0 && <p className="text-sm text-gray-400">No data</p>}
        </div>
      </div>
    </main>
  )
}