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

import { For } from 'solid-js';
import AdminShell from '~/components/AdminShell';
import { Eye, GripVertical, LayoutDashboard } from 'lucide-solid';

const kpis = [
  { title: 'Total Users', value: '12,458', delta: '+12.5%', note: '+1,245 this month', tone: 'up' as const, icon: 'users' as const },
  { title: 'Active Companies', value: '1,234', delta: '+8.2%', note: '+94 this month', tone: 'up' as const, icon: 'building' as const },
  { title: 'Open Leads', value: '847', delta: '-3.1%', note: '27 fewer than last month', tone: 'down' as const, icon: 'trend' as const },
  { title: 'Credits Purchased', value: '₹45,890', delta: '+18.7%', note: '₹7,234 more this month', tone: 'up' as const, icon: 'card' as const },
];

const trendSeries = [62, 70, 81, 75, 88, 102];
const revSeries = [42000, 48000, 55000, 51000, 62000, 69000];
const maxAmount = 80000;

const recentLeads = [
  { title: 'Website Redesign Project', customer: 'TechCorp Inc.', category: 'Developers', budget: '₹15,000', status: 'Active' },
  { title: 'Corporate Event Photography', customer: 'EventMasters LLC', category: 'Photographer', budget: '₹3,500', status: 'Pending' },
  { title: 'Marketing Campaign Design', customer: 'BrandHub Co.', category: 'Graphic Designer', budget: '₹8,200', status: 'Active' },
  { title: 'Social Media Management', customer: 'GrowthStart', category: 'Social Media Manager', budget: '₹5,000', status: 'Negotiating' },
];

function KpiIcon(props: { kind: 'users' | 'building' | 'trend' | 'card' }) {
  if (props.kind === 'users') {
    return (
      <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
        <path d="M8 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
        <path d="M16 11a3 3 0 1 0 0-6" />
        <path d="M3.5 20a5 5 0 0 1 9 0" />
        <path d="M14.5 19.5a4 4 0 0 1 6 0" />
      </svg>
    );
  }
  if (props.kind === 'building') {
    return (
      <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
        <rect x="4" y="3" width="16" height="18" rx="2.5" />
        <path d="M8 7h2M12 7h2M8 11h2M12 11h2M8 15h2M12 15h2M11 21v-3h2v3" />
      </svg>
    );
  }
  if (props.kind === 'trend') {
    return (
      <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
        <path d="m3 16 6-6 4 4 8-8" />
        <path d="M16 6h5v5" />
      </svg>
    );
  }
  return (
    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2.5" />
      <path d="M3 10h18" />
    </svg>
  );
}

function DragHandle() {
  return (
    <button
      type="button"
      class="cursor-grab touch-none text-[#D1D5DB] hover:text-[#9CA3AF] transition-colors"
      aria-label="Drag to reorder"
    >
      <GripVertical size={18} />
    </button>
  );
}

export default function AdminHomePage() {
  return (
    <AdminShell>
      <div class="w-full space-y-8 pb-8">

        {/* Page header */}
        <div class="flex items-end justify-between">
          <div>
            <p class="text-[12px] font-semibold uppercase tracking-widest text-[#FF5E13]">Overview</p>
            <h1 class="mt-1 text-[28px] font-bold leading-tight text-[#111827]">Dashboard</h1>
            <p class="mt-1 text-[14px] text-[#6B7280]">Welcome back — here's what's happening on your platform today.</p>
          </div>
          <button
            type="button"
            class="inline-flex items-center gap-2 rounded-xl border border-[#E5E7EB] bg-white px-4 py-2.5 text-[13px] font-semibold text-[#374151] shadow-sm hover:border-[#FF5E13] hover:text-[#FF5E13] transition-colors"
          >
            <LayoutDashboard size={15} />
            Customise Dashboard
          </button>
        </div>

        {/* KPI cards */}
        <div class="grid grid-cols-4 gap-6">
          <For each={kpis}>
            {(item) => (
              <div class="group relative overflow-hidden rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
                {/* top accent */}
                <div class="absolute inset-x-0 top-0 h-[3px] rounded-t-2xl bg-gradient-to-r from-[#FF5E13] to-[#ff9a6c] opacity-0 transition-opacity group-hover:opacity-100" />

                <div class="flex items-start justify-between gap-3">
                  {/* icon box */}
                  <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#FFF1EB] text-[#FF5E13]">
                    <KpiIcon kind={item.icon} />
                  </div>

                  {/* delta badge */}
                  <span
                    class={`inline-flex shrink-0 items-center gap-0.5 rounded-full px-2.5 py-1 text-[11px] font-bold leading-none ${
                      item.tone === 'up'
                        ? 'bg-[#ECFDF5] text-[#059669]'
                        : 'bg-[#FEF2F2] text-[#DC2626]'
                    }`}
                  >
                    {item.tone === 'up' ? '↑' : '↓'} {item.delta.replace(/^[+-]/, '')}
                  </span>
                </div>

                <p class="mt-5 text-[13px] font-medium text-[#6B7280]">{item.title}</p>
                <p class="mt-1 text-[26px] font-bold tracking-tight text-[#111827]">{item.value}</p>
                <p class="mt-2 text-[12px] text-[#9CA3AF]">{item.note}</p>
              </div>
            )}
          </For>
        </div>

        {/* Chart widgets */}
        <div class="grid grid-cols-2 gap-6">

          {/* Leads Trend */}
          <div class="rounded-2xl border border-[#E5E7EB] bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-[#F3F4F6] px-6 py-5">
              <div>
                <h2 class="text-[15px] font-bold text-[#111827]">Leads Trend</h2>
                <p class="mt-0.5 text-[12px] text-[#6B7280]">Monthly leads performance</p>
              </div>
              <DragHandle />
            </div>
            <div class="p-6">
              <div class="grid grid-cols-[44px_1fr] gap-4">
                <div class="flex h-56 flex-col justify-between text-right text-[11px] font-medium text-[#9CA3AF]">
                  <span>120</span>
                  <span>90</span>
                  <span>60</span>
                  <span>30</span>
                  <span>0</span>
                </div>
                <div>
                  <div class="relative h-56">
                    <div class="absolute inset-0">
                      <For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-[#F3F4F6]" />}</For>
                    </div>
                    <svg viewBox="0 0 100 40" class="relative h-full w-full overflow-visible" preserveAspectRatio="none" aria-hidden="true">
                      <defs>
                        <linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stop-color="#FF5E13" stop-opacity="0.2" />
                          <stop offset="100%" stop-color="#FF5E13" stop-opacity="0" />
                        </linearGradient>
                      </defs>
                      <polygon
                        fill="url(#trendFill)"
                        points={`0,40 ${trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')} 100,40`}
                      />
                      <polyline
                        fill="none"
                        stroke="#FF5E13"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                        stroke-linecap="round"
                        points={trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')}
                      />
                    </svg>
                  </div>
                  <div class="mt-3 grid grid-cols-6 text-center text-[11px] font-medium text-[#9CA3AF]">
                    <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(m) => <span>{m}</span>}</For>
                  </div>
                  <div class="mt-4 flex items-center justify-center gap-5 text-[12px] font-medium text-[#6B7280]">
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#FF5E13]" />Total Leads</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#E5E7EB]" />Converted</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Revenue Overview */}
          <div class="rounded-2xl border border-[#E5E7EB] bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-[#F3F4F6] px-6 py-5">
              <div>
                <h2 class="text-[15px] font-bold text-[#111827]">Revenue Overview</h2>
                <p class="mt-0.5 text-[12px] text-[#6B7280]">Monthly revenue vs expenses</p>
              </div>
              <DragHandle />
            </div>
            <div class="p-6">
              <div class="grid grid-cols-[56px_1fr] gap-4">
                <div class="flex h-56 flex-col justify-between text-right text-[11px] font-medium text-[#9CA3AF]">
                  <span>80k</span>
                  <span>60k</span>
                  <span>40k</span>
                  <span>20k</span>
                  <span>0</span>
                </div>
                <div>
                  <div class="relative h-56">
                    <div class="absolute inset-0">
                      <For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-[#F3F4F6]" />}</For>
                    </div>
                    <div class="relative flex h-full items-end gap-2 px-1">
                      <For each={revSeries}>
                        {(value) => (
                          <div class="flex h-full flex-1 items-end">
                            <div
                              class="w-full rounded-t-lg bg-gradient-to-t from-[#111827] to-[#374151] transition-all"
                              style={{ height: `${(value / maxAmount) * 100}%` }}
                            />
                          </div>
                        )}
                      </For>
                    </div>
                  </div>
                  <div class="mt-3 grid grid-cols-6 text-center text-[11px] font-medium text-[#9CA3AF]">
                    <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(m) => <span>{m}</span>}</For>
                  </div>
                  <div class="mt-4 flex items-center justify-center gap-5 text-[12px] font-medium text-[#6B7280]">
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#FF5E13]" />Revenue</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#111827]" />Expenses</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Recent Leads widget */}
        <div class="rounded-2xl border border-[#E5E7EB] bg-white shadow-sm">
          <div class="flex items-center justify-between border-b border-[#F3F4F6] px-6 py-5">
            <div>
              <h2 class="text-[15px] font-bold text-[#111827]">Recent Leads</h2>
              <p class="mt-0.5 text-[12px] text-[#6B7280]">Latest customer inquiries and opportunities</p>
            </div>
            <DragHandle />
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full">
              <thead>
                <tr class="border-b border-[#F3F4F6] bg-[#FAFAFA] text-left">
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Lead Title</th>
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Customer</th>
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Category</th>
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Budget</th>
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Status</th>
                  <th class="px-6 py-3.5 text-[11px] font-semibold uppercase tracking-wider text-[#9CA3AF]">Action</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-[#F3F4F6]">
                <For each={recentLeads}>
                  {(lead) => (
                    <tr class="group hover:bg-[#FAFAFA] transition-colors">
                      <td class="px-6 py-4 text-[13px] font-semibold text-[#111827]">{lead.title}</td>
                      <td class="px-6 py-4 text-[13px] text-[#374151]">{lead.customer}</td>
                      <td class="px-6 py-4 text-[13px] text-[#6B7280]">{lead.category}</td>
                      <td class="px-6 py-4 text-[13px] font-semibold text-[#111827]">{lead.budget}</td>
                      <td class="px-6 py-4">
                        <span
                          class={`inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold ${
                            lead.status === 'Active'
                              ? 'bg-[#ECFDF5] text-[#059669]'
                              : lead.status === 'Pending'
                                ? 'bg-[#FEF9C3] text-[#854D0E]'
                                : 'bg-[#F3F4F6] text-[#6B7280]'
                          }`}
                        >
                          {lead.status}
                        </span>
                      </td>
                      <td class="px-6 py-4">
                        <button
                          type="button"
                          class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-[#9CA3AF] hover:bg-[#F3F4F6] hover:text-[#374151] transition-colors"
                        >
                          <Eye size={15} />
                        </button>
                      </td>
                    </tr>
                  )}
                </For>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </AdminShell>
  );
}