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

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

const API = '/api/gateway';

type LedgerEntry = {
  id: string;
  entry_type?: string;
  type?: string;
  order_id?: string;
  invoice_id?: string;
  user_id?: string;
  amount?: number;
  note?: string;
  created_at?: string;
};

async function loadLedger(): Promise<LedgerEntry[]> {
  try {
    const res = await fetch(`${API}/api/admin/ledger`);
    if (!res.ok) throw new Error('Failed to load');
    const data = await res.json();
    return Array.isArray(data) ? data : (data.entries || data.ledger || []);
  } catch {
    return [];
  }
}

function typeBadgeStyle(entryType: string): string {
  switch ((entryType || '').toUpperCase()) {
    case 'TRACECOIN_PURCHASE':
      return 'background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe';
    case 'PAYMENT':
      return 'background:#dcfce7;color:#166534;border-color:#bbf7d0';
    case 'DISCOUNT':
      return 'background:#fff7ed;color:#c2410c;border-color:#fed7aa';
    case 'COUPON':
      return 'background:#f3e8ff;color:#7e22ce;border-color:#e9d5ff';
    case 'INVOICE':
    default:
      return 'background:#f1f5f9;color:#475569;border-color:#e2e8f0';
  }
}

function formatAmount(entry: LedgerEntry): string {
  const t = (entry.entry_type || entry.type || '').toUpperCase();
  if (t === 'TRACECOIN_PURCHASE') {
    return entry.amount != null ? `${entry.amount} TC` : '—';
  }
  if (entry.amount == null) return '—';
  return `₹${(entry.amount / 100).toFixed(2)}`;
}

export default function LedgerPage() {
  const [entries] = createResource(loadLedger);

  return (
    <AdminShell>
      <div class="page-actions">
        <div>
          <h1 class="page-title">Ledger Management</h1>
          <p class="page-subtitle">Platform financial ledger</p>
        </div>
      </div>

      <section class="card" style="padding: 0; overflow: hidden;">
        <div class="table-wrap">
          <table class="list-table">
            <thead>
              <tr>
                <th>Type</th>
                <th>Order ID</th>
                <th>Invoice ID</th>
                <th>User ID</th>
                <th>Amount</th>
                <th>Note</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              <Show when={entries.loading}>
                <tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
              </Show>
              <Show when={!entries.loading && entries.error}>
                <tr><td colspan="7" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr>
              </Show>
              <Show when={!entries.loading && !entries.error && entries()?.length === 0}>
                <tr><td colspan="7" style="text-align:center;padding:32px;color:#94a3b8">No ledger entries found.</td></tr>
              </Show>
              <Show when={!entries.loading && !entries.error && (entries()?.length ?? 0) > 0}>
                <For each={entries()}>
                  {(item) => {
                    const entryType = item.entry_type || item.type || '—';
                    return (
                      <tr>
                        <td>
                          <span style={`${typeBadgeStyle(entryType)};padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid;display:inline-block`}>
                            {entryType}
                          </span>
                        </td>
                        <td style="color:#475569;font-size:12px;font-family:monospace">{item.order_id || '—'}</td>
                        <td style="color:#475569;font-size:12px;font-family:monospace">{item.invoice_id || '—'}</td>
                        <td style="color:#475569;font-size:12px;font-family:monospace">{item.user_id || '—'}</td>
                        <td style="font-weight:600;color:#0f172a">{formatAmount(item)}</td>
                        <td style="color:#475569">{item.note || '—'}</td>
                        <td style="color:#475569">{item.created_at ? new Date(item.created_at).toLocaleString() : '—'}</td>
                      </tr>
                    );
                  }}
                </For>
              </Show>
            </tbody>
          </table>
        </div>
      </section>
    </AdminShell>
  );
}