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

import { For } from 'solid-js';
import AdminShell from '~/components/AdminShell';
import { GripVertical } 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;

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>
          <div>
            <h1 class="text-[28px] font-bold leading-tight tracking-[-0.01em] text-[#0B1246]">Dashboard Overview</h1>
            <p class="mt-1.5 text-[14px] text-[#7E849F]">Welcome back! Here's what's happening with your platform today.</p>
          </div>
        </div>

        {/* KPI cards */}
        <div class="grid grid-cols-4 gap-5">
          <For each={kpis}>
            {(item) => (
              <div class="rounded-[18px] border border-[#D6DAE4] bg-white px-5 pb-4.5 pt-4 shadow-[0_2px_10px_rgba(15,23,42,0.04)]">
                <div class="flex items-center justify-between">
                  <div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-[#FFF5EF] text-[#FA5014]">
                    <KpiIcon kind={item.icon} />
                  </div>
                  <span
                    class={`inline-flex shrink-0 items-center gap-0.5 rounded-full px-2.5 py-1 text-[11px] font-semibold leading-none ${
                      item.tone === 'up'
                        ? 'bg-[#FFF1EB] text-[#FA5014]'
                        : 'bg-[#FEF2F2] text-[#DC2626]'
                    }`}
                  >
                    {item.tone === 'up' ? '↗' : '↘'} {item.delta}
                  </span>
                </div>

                <div class="mt-3.5 space-y-1.5">
                  <p class="text-[12px] font-medium uppercase tracking-[0.04em] text-[#8D93AA]">{item.title}</p>
                  <p class="text-[28px] font-bold leading-none tracking-[-0.01em] tabular-nums text-[#0B1246]">{item.value}</p>
                  <div class="border-t border-[#EEF1F6] pt-1.5">
                    <p class="text-[11px] leading-snug text-[#97A0B8]">{item.note}</p>
                  </div>
                </div>
              </div>
            )}
          </For>
        </div>

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

          {/* Leads Trend */}
          <div class="rounded-[18px] border border-[#D6DAE4] bg-white shadow-[0_2px_10px_rgba(15,23,42,0.04)]">
            <div class="flex items-center justify-between border-b border-[#E8EBF2] px-6 py-4.5">
              <div>
                <h2 class="text-[17px] font-bold text-[#0B1246]">Leads Trend</h2>
                <p class="mt-0.5 text-[11px] text-[#8D93AA]">Monthly leads performance overview</p>
              </div>
              <DragHandle />
            </div>
            <div class="px-6 pb-5 pt-4">
              <div class="grid grid-cols-[44px_1fr] gap-3">
                <div class="flex h-56 flex-col justify-between text-right text-[10px] font-semibold text-[#7A81A1]">
                  <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-2.5 grid grid-cols-6 text-center text-[10px] font-semibold text-[#6D7390]">
                    <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(m) => <span>{m}</span>}</For>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Revenue Overview */}
          <div class="rounded-[18px] border border-[#D6DAE4] bg-white shadow-[0_2px_10px_rgba(15,23,42,0.04)]">
            <div class="flex items-center justify-between border-b border-[#E8EBF2] px-6 py-4.5">
              <div>
                <h2 class="text-[17px] font-bold text-[#0B1246]">Revenue Overview</h2>
                <p class="mt-0.5 text-[11px] text-[#8D93AA]">Monthly revenue vs expenses comparison</p>
              </div>
              <DragHandle />
            </div>
            <div class="px-6 pb-5 pt-4">
              <div class="grid grid-cols-[56px_1fr] gap-3">
                <div class="flex h-56 flex-col justify-between text-right text-[10px] font-semibold text-[#7A81A1]">
                  <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-[#06083f] transition-all"
                              style={{ height: `${(value / maxAmount) * 100}%` }}
                            />
                          </div>
                        )}
                      </For>
                    </div>
                  </div>
                  <div class="mt-2.5 grid grid-cols-6 text-center text-[10px] font-semibold text-[#6D7390]">
                    <For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(m) => <span>{m}</span>}</For>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  );
}