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

import { For, Show, createResource } from 'solid-js';
import AdminShell from '~/components/AdminShell';

const API = '/api/gateway';

async function fetchMetrics() {
  const res = await fetch(`${API}/api/admin/dashboard/metrics`);
  if (!res.ok) throw new Error('Failed to fetch dashboard metrics');
  return res.json();
}

const maxAmount = 80000;

export default function AdminDashboard() {
  const [data] = createResource(fetchMetrics);

  const kpis = () => data()?.kpis || [];
  const trendSeries = () => data()?.trend_series?.map((d: any) => d.Freelancers) || [0, 0, 0, 0, 0, 0];
  const revSeries = () => data()?.rev_series?.map((d: any) => d.Revenue) || [0, 0, 0, 0, 0, 0];
  const leadRows = () => data()?.lead_rows || [];

  return (
    <AdminShell>
      <div class="space-y-6">
        <section class="rounded-3xl border border-[#e3e5ec] bg-[#f7f7f8] px-6 py-5">
          <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <h1 class="text-[40px] font-semibold leading-[1.1] text-[#050026]">Dashboard Overview</h1>
              <p class="mt-1 text-[15px] text-[#7b8099]">Welcome back! Here&apos;s what&apos;s happening with your platform today.</p>
            </div>
            <button class="inline-flex h-11 items-center rounded-2xl bg-[#050026] px-5 text-sm font-semibold text-white transition-colors hover:bg-[#0a0044]">
              Export Report
            </button>
          </div>
        </section>

        <Show when={data.loading}>
            <div class="flex items-center justify-center p-12 text-[#8087a0]">Loading metrics...</div>
        </Show>

        <Show when={!data.loading && data()}>
          <section class="grid gap-4 xl:grid-cols-4">
            <For each={kpis()}>
              {(item: any) => (
                <article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5 shadow-[0_0_0_1px_rgba(0,0,0,0.01)]">
                  <div class="flex items-center justify-between">
                    <div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-[#fff1ea] text-xs font-bold text-[#fd6116]">
                        {item.id === 'users' ? 'US' : item.id === 'companies' ? 'CP' : item.id === 'leads' ? 'LD' : 'CR'}
                    </div>
                    <span
                      class={`inline-flex items-center rounded-xl px-2.5 py-1 text-xs font-semibold ${
                        item.trendUp ? 'bg-[#ffe8dc] text-[#fd6116]' : 'bg-[#eceff6] text-[#383e5c]'
                      }`}
                    >
                      {item.trend}
                    </span>
                  </div>
                  <p class="mt-5 text-[15px] text-[#747a93]">{item.title}</p>
                  <p class="mt-1 text-[44px] font-semibold leading-none text-[#050026]">{item.value}</p>
                  <p class="mt-1 text-[14px] text-[#8a90a8]">{item.trendUp ? 'Increased from last month' : 'Decreased from last month'}</p>
                </article>
              )}
            </For>
          </section>

          <section class="grid gap-4 xl:grid-cols-2">
            <article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5">
              <h2 class="text-[34px] font-semibold leading-[1.1] text-[#050026]">Leads Trend</h2>
              <p class="mt-1 text-[14px] text-[#8087a0]">Monthly leads performance overview</p>
              <div class="mt-5 rounded-2xl border border-[#e2e6ee] bg-[#f5f5f6] p-4">
                <div class="relative h-52">
                  <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.1"
                      points={trendSeries().map((v: number, i: number) => `${i * 20},${40 - v / 3}`).join(' ')}
                    />
                    <polygon
                      fill="url(#trendFill)"
                      points={`0,40 ${trendSeries().map((v: number, i: number) => `${i * 20},${40 - v / 3}`).join(' ')} 100,40`}
                    />
                  </svg>
                </div>
                <div class="mt-1 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
                  <For each={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}>{(day) => <span>{day}</span>}</For>
                </div>
              </div>
            </article>

            <article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5">
              <h2 class="text-[34px] font-semibold leading-[1.1] text-[#050026]">Revenue Overview</h2>
              <p class="mt-1 text-[14px] text-[#8087a0]">Monthly revenue vs expenses comparison</p>
              <div class="mt-5 rounded-2xl border border-[#e2e6ee] bg-[#f5f5f6] p-4">
                <div class="relative h-52">
                  <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: number) => (
                        <div class="flex h-full flex-1 items-end justify-center">
                          <div class="w-2.5 rounded-t bg-[#050026]" style={{ height: `${(value / maxAmount) * 100}%` }} />
                        </div>
                      )}
                    </For>
                  </div>
                </div>
                <div class="mt-1 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
                  <For each={['Wk 1', 'Wk 2', 'Wk 3', 'Wk 4']}>{(week) => <span>{week}</span>}</For>
                </div>
              </div>
            </article>
          </section>

          <section class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-1">
            <div class="flex flex-col gap-3 px-5 py-4 md:flex-row md:items-center md:justify-between">
              <div>
                <h2 class="text-[32px] font-semibold leading-[1.1] text-[#050026]">Recent Leads</h2>
                <p class="mt-1 text-[14px] text-[#8087a0]">Latest customer inquiries and opportunities</p>
              </div>
              <button class="inline-flex h-10 items-center rounded-2xl border border-[#d9dde6] bg-white px-4 text-sm font-semibold text-[#050026] hover:bg-[#f8f9fc]">
                View All Leads
              </button>
            </div>

            <div class="overflow-x-auto px-1 pb-1">
              <table class="w-full min-w-[860px] border-collapse overflow-hidden rounded-2xl">
                <thead>
                  <tr class="bg-[#eef1f7] text-left">
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Lead Title</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Customer</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Category</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Budget</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Status</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Date</th>
                    <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <For each={leadRows()}>
                    {(row: any) => (
                      <tr class="border-t border-[#e1e6f0] bg-white transition-colors hover:bg-[#f8f9fc]">
                        <td class="px-5 py-3 text-sm font-medium text-[#050026]">{row.service}</td>
                        <td class="px-5 py-3 text-sm text-[#3c4260]">{row.client}</td>
                        <td class="px-5 py-3 text-sm text-[#3c4260]">{row.service}</td>
                        <td class="px-5 py-3 text-sm font-semibold text-[#050026]">{row.value}</td>
                        <td class="px-5 py-3 text-sm text-[#3c4260]">{row.status}</td>
                        <td class="px-5 py-3 text-sm text-[#3c4260]">{row.date}</td>
                        <td class="px-5 py-3 text-sm">
                          <button class="rounded-lg border border-[#d9dde6] bg-white px-3 py-1.5 font-medium text-[#050026] hover:bg-[#f8f9fc]">
                            Open
                          </button>
                        </td>
                      </tr>
                    )}
                  </For>
                </tbody>
              </table>
            </div>
          </section>
        </Show>
      </div>
    </AdminShell>
  );
}