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

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

const API = '/api/gateway';

type Order = {
  id: string;
  order_number?: string;
  user_name?: string;
  user_email?: string;
  package_name?: string;
  tracecoin_amount?: number;
  coupon_code?: string;
  total?: number;
  amount?: number;
  status: string;
  created_at?: string;
};

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

function statusClass(status: string): string {
  const s = (status || '').toUpperCase();
  if (s === 'PAID' || s === 'COMPLETED') return 'active';
  if (s === 'PENDING') return 'pending';
  if (s === 'FAILED') return 'failed';
  return '';
}

function statusStyle(status: string): string {
  const s = (status || '').toUpperCase();
  if (s === 'PAID' || s === 'COMPLETED') return 'background:#dcfce7;color:#166534;border-color:#bbf7d0';
  if (s === 'PENDING') return 'background:#fff7ed;color:#c2410c;border-color:#fed7aa';
  if (s === 'FAILED') return 'background:#fee2e2;color:#991b1b;border-color:#fecaca';
  if (s === 'REFUNDED') return 'background:#f1f5f9;color:#475569;border-color:#e2e8f0';
  return '';
}

export default function OrderPage() {
  const [orders] = createResource(loadOrders);
  const [search, setSearch] = createSignal('');

  const filtered = createMemo(() => {
    const q = search().toLowerCase().trim();
    const all = orders() ?? [];
    if (!q) return all;
    return all.filter((o) => {
      const orderNum = (o.order_number || o.id || '').toLowerCase();
      const email = (o.user_email || '').toLowerCase();
      const name = (o.user_name || '').toLowerCase();
      const status = (o.status || '').toLowerCase();
      return orderNum.includes(q) || email.includes(q) || name.includes(q) || status.includes(q);
    });
  });

  const formatAmount = (order: Order) => {
    const raw = order.total ?? order.amount;
    if (raw == null) return '—';
    return `₹${(raw / 100).toFixed(2)}`;
  };

  return (
    <AdminShell>
      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
        <div class="bg-white border-b border-gray-200 px-6 py-4">
          <h1 class="text-xl font-semibold text-gray-900">Order Management</h1>
          <p class="text-sm text-gray-500 mt-0.5">TraceCoin package purchase orders</p>
        </div>

        <div class="flex-1 p-6">
          <div style="margin-bottom:16px">
            <input
              type="text"
              placeholder="Search by order number, user email, or status..."
              value={search()}
              onInput={(e) => setSearch(e.currentTarget.value)}
              class="rounded-lg border border-gray-200 px-3 py-2 text-sm"
              style="width:100%;max-width:420px"
            />
          </div>

          <div class="table-card">
            <div class="overflow-x-auto">
              <table class="data-table w-full text-sm">
                <thead>
                  <tr>
                    <th>Order #</th>
                    <th>User</th>
                    <th>Package</th>
                    <th>TraceCoins</th>
                    <th>Coupon</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Created At</th>
                  </tr>
                </thead>
                <tbody>
                  <Show when={orders.loading}>
                    <tr><td colspan="8" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
                  </Show>
                  <Show when={!orders.loading && orders.error}>
                    <tr><td colspan="8" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr>
                  </Show>
                  <Show when={!orders.loading && !orders.error && filtered().length === 0}>
                    <tr><td colspan="8" style="text-align:center;padding:32px;color:#94a3b8">No orders found.</td></tr>
                  </Show>
                  <Show when={!orders.loading && !orders.error && filtered().length > 0}>
                    <For each={filtered()}>
                      {(item) => (
                        <tr class="hover:bg-slate-50">
                          <td class="font-semibold text-slate-900" style="font-family:monospace">{item.order_number || item.id}</td>
                          <td class="text-slate-500">{item.user_name || item.user_email || '—'}</td>
                          <td class="text-slate-500">{item.package_name || '—'}</td>
                          <td class="text-slate-500">{item.tracecoin_amount ?? '—'}</td>
                          <td class="text-slate-500">{item.coupon_code || '—'}</td>
                          <td class="text-slate-500">{formatAmount(item)}</td>
                          <td>
                            <span
                              class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600"
                              style={`${statusStyle(item.status)};padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid`}
                            >
                              {item.status || '—'}
                            </span>
                          </td>
                          <td class="text-slate-500">{item.created_at ? new Date(item.created_at).toLocaleString() : '—'}</td>
                        </tr>
                      )}
                    </For>
                  </Show>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  );
}