nxtgauge-admin-solid/src/routes/admin/index.tsx

import { A } from '@solidjs/router';
import AdminShell from '~/components/AdminShell';
import {
  Users, Building2, Briefcase, Clock, Ticket, Receipt,
  Package, Megaphone, Shield, UserCog, FormInput, LayoutDashboard,
  BadgeCheck, ArrowUpRight, Activity,
} from 'lucide-solid';
import type { Component } from 'solid-js';

type KpiCard = {
  label: string;
  value: string;
  href: string;
  icon: Component<any>;
  color: string;        // tailwind color name (e.g. 'blue')
};

type ControlLink = {
  label: string;
  href: string;
  desc: string;
  icon: Component<any>;
  iconBg: string;
  iconFg: string;
};

const KPI: KpiCard[] = [
  { label: 'Total Users',       value: '—', href: '/admin/users',    icon: Users,     color: 'violet' },
  { label: 'Companies',         value: '—', href: '/admin/company',  icon: Building2, color: 'blue'   },
  { label: 'Open Jobs',         value: '—', href: '/admin/jobs',     icon: Briefcase, color: 'amber'  },
  { label: 'Pending Approvals', value: '—', href: '/admin/approval', icon: Clock,     color: 'orange' },
  { label: 'Open Tickets',      value: '—', href: '/admin/support',  icon: Ticket,    color: 'rose'   },
  { label: 'Invoices',          value: '—', href: '/admin/invoice',  icon: Receipt,   color: 'teal'   },
  { label: 'Active Orders',     value: '—', href: '/admin/order',    icon: Package,   color: 'sky'    },
  { label: 'Active Leads',      value: '—', href: '/admin/leads',    icon: Megaphone, color: 'pink'   },
];

// Tailwind doesn't tree-shake dynamic class names, so we map them explicitly
const colorMap: Record<string, { chip: string; icon: string; value: string }> = {
  violet: { chip: 'bg-violet-100',  icon: 'text-violet-600', value: 'text-violet-700' },
  blue:   { chip: 'bg-blue-100',    icon: 'text-blue-600',   value: 'text-blue-700'   },
  amber:  { chip: 'bg-amber-100',   icon: 'text-amber-600',  value: 'text-amber-700'  },
  orange: { chip: 'bg-orange-100',  icon: 'text-orange-600', value: 'text-orange-700' },
  rose:   { chip: 'bg-rose-100',    icon: 'text-rose-600',   value: 'text-rose-700'   },
  teal:   { chip: 'bg-teal-100',    icon: 'text-teal-600',   value: 'text-teal-700'   },
  sky:    { chip: 'bg-sky-100',     icon: 'text-sky-600',    value: 'text-sky-700'    },
  pink:   { chip: 'bg-pink-100',    icon: 'text-pink-600',   value: 'text-pink-700'   },
};

const CONTROLS: ControlLink[] = [
  {
    label: 'Internal Roles',
    href: '/admin/roles',
    desc: 'Permissions and access levels for internal staff.',
    icon: Shield,
    iconBg: 'bg-blue-50',
    iconFg: 'text-blue-600',
  },
  {
    label: 'External Roles',
    href: '/admin/runtime-roles',
    desc: 'Modules, credits, and capabilities per external role.',
    icon: UserCog,
    iconBg: 'bg-violet-50',
    iconFg: 'text-violet-600',
  },
  {
    label: 'Onboarding Flows',
    href: '/admin/onboarding-schemas',
    desc: 'Schema-driven onboarding forms per external role.',
    icon: FormInput,
    iconBg: 'bg-amber-50',
    iconFg: 'text-amber-600',
  },
  {
    label: 'External Dashboards',
    href: '/admin/external-dashboard-management',
    desc: 'Sidebar, widgets, and runtimeConfig per external role.',
    icon: LayoutDashboard,
    iconBg: 'bg-teal-50',
    iconFg: 'text-teal-600',
  },
  {
    label: 'Internal Dashboards',
    href: '/admin/internal-dashboard-management',
    desc: 'Home widgets and KPI panels for internal staff.',
    icon: LayoutDashboard,
    iconBg: 'bg-orange-50',
    iconFg: 'text-orange-600',
  },
  {
    label: 'Approval Queue',
    href: '/admin/approval',
    desc: 'Review, approve, or reject pending action requests.',
    icon: BadgeCheck,
    iconBg: 'bg-rose-50',
    iconFg: 'text-rose-600',
  },
];

export default function AdminDashboard() {
  return (
    <AdminShell>
      <div class="mx-auto max-w-6xl space-y-7">

        {/* ── Page header ── */}
        <div class="flex items-start justify-between">
          <div>
            <h1 class="text-xl font-bold tracking-tight text-slate-900">Platform Overview</h1>
            <p class="mt-0.5 text-sm text-slate-400">Real-time snapshot of the Nxtgauge platform.</p>
          </div>
          <div class="flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1.5">
            <Activity class="h-3.5 w-3.5 text-emerald-500" />
            <span class="text-[11px] font-semibold text-emerald-600">Live</span>
          </div>
        </div>

        {/* ── KPI grid ── */}
        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
          {KPI.map((kpi) => {
            const Icon = kpi.icon;
            const c = colorMap[kpi.color];
            return (
              <A
                href={kpi.href}
                class="group flex flex-col gap-3 rounded-xl border border-slate-100 bg-white p-4 shadow-sm transition-all duration-200 hover:-translate-y-px hover:border-slate-200 hover:shadow-md"
              >
                <div class="flex items-center justify-between">
                  <div class={`flex h-8 w-8 items-center justify-center rounded-lg ${c.chip}`}>
                    <Icon class={`h-4 w-4 ${c.icon}`} />
                  </div>
                  <ArrowUpRight class="h-3.5 w-3.5 text-slate-200 transition-colors group-hover:text-slate-400" />
                </div>
                <div>
                  <p class="text-2xl font-bold tabular-nums tracking-tight text-slate-900">{kpi.value}</p>
                  <p class="mt-0.5 text-xs font-medium text-slate-400">{kpi.label}</p>
                </div>
              </A>
            );
          })}
        </div>

        {/* ── Control Plane ── */}
        <div>
          <div class="mb-3 flex items-center justify-between">
            <h2 class="text-sm font-semibold text-slate-700">Control Plane</h2>
            <span class="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
              {CONTROLS.length} modules
            </span>
          </div>
          <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
            {CONTROLS.map((item) => {
              const Icon = item.icon;
              return (
                <A
                  href={item.href}
                  class="group flex items-start gap-3.5 rounded-xl border border-slate-100 bg-white p-4 shadow-sm transition-all duration-200 hover:-translate-y-px hover:border-orange-100 hover:shadow-md"
                >
                  <div class={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${item.iconBg}`}>
                    <Icon class={`h-4 w-4 ${item.iconFg}`} />
                  </div>
                  <div class="min-w-0 flex-1">
                    <p class="text-[13px] font-semibold text-slate-800 transition-colors group-hover:text-[#fd6216]">{item.label}</p>
                    <p class="mt-0.5 text-[11px] leading-relaxed text-slate-400">{item.desc}</p>
                  </div>
                  <ArrowUpRight class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-200 transition-all group-hover:text-orange-400" />
                </A>
              );
            })}
          </div>
        </div>

      </div>
    </AdminShell>
  );
}