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

import { For } from 'solid-js';
import AdminShell from '~/components/AdminShell';
import { ActionButton } from '~/components/admin/AdminUi';
import { Eye, Pencil, Trash2 } from 'lucide-solid';

const kpis = [
  { title: 'Total Users', value: '12,458', delta: '+12.5%', note: '+1,245 from last month', tone: 'up' as const, icon: 'users' as const },
  { title: 'Active Companies', value: '1,234', delta: '+8.2%', note: '+94 from last month', tone: 'up' as const, icon: 'building' as const },
  { title: 'Open Leads', value: '847', delta: '-3.1%', note: '-27 from last month', tone: 'down' as const, icon: 'trend' as const },
  { title: 'Credits Purchased', value: '$45,890', delta: '+18.7%', note: '+$7,234 from last 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: 'Graphics 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' }) {
  const common = 'h-10 w-10 text-[#fd6116]';
  if (props.kind === 'users') {
    return (
      <svg class={common} 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={common} 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={common} 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={common} 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>
  );
}

export default function AdminHomePage() {
  return (
    <AdminShell>
      <div class="w-full space-y-6">
      <section class="flex items-center justify-between">
        <div>
          <h1 class="text-[24px] font-bold leading-[32px] text-[#000032]">Dashboard Overview</h1>
          <p class="mt-1 text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Welcome back! Here&apos;s what&apos;s happening with your platform today.</p>
        </div>
        <ActionButton tone="primary" class="h-10 rounded-2xl px-5 text-[14px] font-medium">
          <span class="inline-flex items-center gap-2">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M12 3v11" />
              <path d="m8 10 4 4 4-4" />
              <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
            </svg>
            Export Report
          </span>
        </ActionButton>
      </section>

      <section class="grid grid-cols-4 gap-4">
        <For each={kpis}>
          {(item) => (
            <article class="min-h-[182px] rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[2px] pt-[22px]">
              <div class="flex items-center justify-between">
                <div class="h-10 w-10">
                  <KpiIcon kind={item.icon} />
                </div>
                <span
                  class={`inline-flex h-6 items-center gap-1 rounded-[10px] px-[10px] text-[12px] font-bold ${
                    item.tone === 'up' ? 'bg-[rgba(250,80,20,0.1)] text-[#fa5014]' : 'bg-[rgba(0,0,50,0.1)] text-[#000032]'
                  }`}
                >
                  <span class="leading-none">{item.tone === 'up' ? '↗' : '↘'}</span>
                  {item.delta}
                </span>
              </div>
              <p class="mt-3 text-[12px] font-medium leading-4 text-[rgba(0,0,50,0.6)]">{item.title}</p>
              <p class="mt-1 text-[24px] font-bold leading-[32px] tracking-[-0.01em] text-[#000032]">{item.value}</p>
              <p class="mt-2 text-[12px] leading-4 text-[rgba(0,0,50,0.5)]">{item.note}</p>
            </article>
          )}
        </For>
      </section>

      <section class="grid grid-cols-2 gap-4">
        <article class="rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[2px] pt-[22px] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_0px_rgba(0,0,0,0.1)]">
          <h2 class="text-[18px] font-bold leading-7 text-[#000032]">Leads Trend</h2>
          <p class="mt-0.5 text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Monthly leads performance overview</p>
          <div class="mt-4">
            <div class="grid grid-cols-[52px_1fr] gap-3">
              <div class="flex h-64 flex-col justify-between pb-8 text-right text-xs font-semibold text-[#283055]">
                <span>120</span>
                <span>90</span>
                <span>60</span>
                <span>30</span>
                <span>0</span>
              </div>
              <div>
                <div class="relative h-64">
                  <div class="absolute inset-0">
                    <For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-dashed border-[#d9dde6]" />}</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="#fd6116" stop-opacity="0.28" />
                    <stop offset="100%" stop-color="#fd6116" stop-opacity="0.02" />
                  </linearGradient>
                </defs>
                <polyline
                  fill="none"
                  stroke="#050026"
                  stroke-width="1"
                  points={trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')}
                />
                <polygon
                  fill="url(#trendFill)"
                  points={`0,40 ${trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')} 100,40`}
                />
                  </svg>
                </div>
                <div class="mt-2 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
                  <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(month) => <span>{month}</span>}</For>
                </div>
                <div class="mt-4 flex items-center justify-center gap-6 text-[14px] font-medium">
                  <span class="inline-flex items-center gap-2 text-[#fd6116]"><span class="h-2.5 w-2.5 rounded-full bg-[#fd6116]" />Total Leads</span>
                  <span class="inline-flex items-center gap-2 text-[#050026]"><span class="h-2.5 w-2.5 rounded-full bg-[#050026]" />Converted</span>
                </div>
              </div>
            </div>
          </div>
        </article>

        <article class="rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[2px] pt-[22px] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_0px_rgba(0,0,0,0.1)]">
          <h2 class="text-[18px] font-bold leading-7 text-[#000032]">Revenue Overview</h2>
          <p class="mt-0.5 text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Monthly revenue vs expenses comparison</p>
          <div class="mt-4">
            <div class="grid grid-cols-[88px_1fr] gap-3">
              <div class="flex h-64 flex-col justify-between pb-8 text-right text-xs font-semibold text-[#283055]">
                <span>80000</span>
                <span>60000</span>
                <span>40000</span>
                <span>20000</span>
                <span>0</span>
              </div>
              <div>
                <div class="relative h-64">
                  <div class="absolute inset-0">
                    <For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-dashed border-[#d9dde6]" />}</For>
                  </div>
                  <div class="relative flex h-full items-end gap-4 px-2">
                    <For each={revSeries}>
                      {(value) => (
                        <div class="flex h-full flex-1 items-end justify-center">
                          <div class="w-3 rounded-t bg-[#050026]" style={{ height: `${(value / maxAmount) * 100}%` }} />
                        </div>
                      )}
                    </For>
                  </div>
                </div>
                <div class="mt-2 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
                  <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(month) => <span>{month}</span>}</For>
                </div>
                <div class="mt-4 flex items-center justify-center gap-6 text-[14px] font-medium">
                  <span class="inline-flex items-center gap-2 text-[#fd6116]"><span class="h-2.5 w-2.5 rounded-full bg-[#fd6116]" />Revenue</span>
                  <span class="inline-flex items-center gap-2 text-[#050026]"><span class="h-2.5 w-2.5 rounded-full bg-[#050026]" />Expenses</span>
                </div>
              </div>
            </div>
          </div>
        </article>
      </section>

      <section class="overflow-hidden rounded-2xl border-2 border-[#e5e7eb] bg-white shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]">
        <div class="flex h-20 items-center justify-between border-b-2 border-[#e5e7eb] bg-[linear-gradient(90deg,#ffffff_0%,#fdfdfe_33%,#fbfcfc_66%,#f9fafb_100%)] px-6">
          <div>
            <h2 class="text-[18px] font-bold leading-7 text-[#000032]">Recent Leads</h2>
            <p class="text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Latest customer inquiries and opportunities</p>
          </div>
          <ActionButton tone="primary" class="h-9 rounded-2xl px-5 text-[12px] font-semibold">View All Leads</ActionButton>
        </div>

        <div class="overflow-x-auto">
          <table class="min-w-full">
            <thead class="border-b-2 border-[#e5e7eb] bg-[#f9fafb] text-left">
              <tr class="h-[41px] text-[12px] font-bold tracking-[0.6px] text-[rgba(0,0,50,0.6)]">
                <th class="px-6 py-0 uppercase">LEAD TITLE</th>
                <th class="px-6 py-0 uppercase">CUSTOMER</th>
                <th class="px-6 py-0 uppercase">CATEGORY</th>
                <th class="px-6 py-0 uppercase">BUDGET</th>
                <th class="px-6 py-0 uppercase">STATUS</th>
                <th class="px-6 py-0 uppercase">ACTIONS</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-[#e5e7eb]">
              <For each={recentLeads}>
                {(lead, index) => (
                  <tr class={index() < 3 ? 'h-[89px]' : 'h-[68px]'}>
                    <td class="px-6 py-0 text-[14px] font-semibold leading-5 text-[#000032]">{lead.title}</td>
                    <td class="px-6 py-0 text-[14px] font-normal leading-5 text-[rgba(0,0,50,0.8)]">{lead.customer}</td>
                    <td class="px-6 py-0 text-[14px] font-normal leading-5 text-[rgba(0,0,50,0.6)]">{lead.category}</td>
                    <td class="px-6 py-0 text-[14px] font-bold leading-5 text-[#000032]">{lead.budget}</td>
                    <td class="px-6 py-4">
                      <span
                        class={`inline-flex h-[30px] items-center rounded-[10px] border px-3 text-[12px] font-bold ${
                          lead.status === 'Active'
                            ? 'border-[rgba(250,80,20,0.2)] bg-[rgba(250,80,20,0.1)] text-[#fa5014]'
                            : lead.status === 'Pending'
                              ? 'border-[rgba(0,0,50,0.2)] bg-[rgba(0,0,50,0.1)] text-[#000032]'
                              : 'border-[#e5e7eb] bg-[#f9fafb] text-[rgba(0,0,50,0.6)]'
                        }`}
                      >
                        {lead.status}
                      </span>
                    </td>
                    <td class="px-6 py-0">
                      <div class="inline-flex items-center gap-[6px] text-[#707795]">
                        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#6b728a] hover:bg-[#f3f4f6]">
                          <Eye size={16} />
                        </button>
                        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#6b728a] hover:bg-[#f3f4f6]">
                          <Pencil size={16} />
                        </button>
                        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#6b728a] hover:bg-[#f3f4f6]">
                          <Trash2 size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                )}
              </For>
            </tbody>
          </table>
        </div>
      </section>
      </div>
    </AdminShell>
  );
}