nxtgauge-admin-solid/src/routes/admin/requirements/[id].tsx

import { A, useParams } from '@solidjs/router';
import { createMemo, createResource, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell';

const API = '/api/gateway';

type Requirement = {
  id: string;
  title?: string;
  description?: string;
  profession_key?: string;
  location?: string;
  budget?: number;
  preferred_date?: string;
  status?: string;
  request_count?: number;
  accepted_count?: number;
  customer_id?: string;
  created_at?: string;
  updated_at?: string;
};

async function fetchRequirement(id: string): Promise<Requirement | null> {
  try {
    const res = await fetch(`${API}/api/requirements/${id}`);
    if (!res.ok) return null;
    const data = await res.json();
    return data.requirement || data;
  } catch {
    return null;
  }
}

export default function RequirementDetailPage() {
  const params = useParams();
  const [requirement] = createResource(() => params.id, fetchRequirement);

  const createdAt = createMemo(() => requirement()?.created_at || '');
  const updatedAt = createMemo(() => requirement()?.updated_at || '');

  return (
    <AdminShell>
      <div class="page-hero-card page-actions">
        <div>
          <h1 class="page-title">Requirement Request</h1>
          <p class="page-subtitle">Review full requirement request details before approval action.</p>
        </div>
        <A class="btn" href="/admin/approval">Back to Approval Management</A>
      </div>

      <Show when={requirement.loading}>
        <div class="card"><p class="notice">Loading requirement...</p></div>
      </Show>

      <Show when={!requirement.loading && !requirement()}>
        <div class="card"><p class="notice">Requirement not found.</p></div>
      </Show>

      <Show when={requirement()}>
        <section class="card">
          <div class="field-grid-2">
            <div>
              <p class="hint">Title</p>
              <p style="margin:6px 0 0;font-weight:700;color:#0f172a">{requirement()!.title || '—'}</p>
            </div>
            <div>
              <p class="hint">Status</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.status || '—'}</p>
            </div>
            <div>
              <p class="hint">Profession Key</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.profession_key || '—'}</p>
            </div>
            <div>
              <p class="hint">Location</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.location || '—'}</p>
            </div>
            <div>
              <p class="hint">Budget</p>
              <p style="margin:6px 0 0;color:#334155">
                {requirement()!.budget != null ? `₹${requirement()!.budget}` : '—'}
              </p>
            </div>
            <div>
              <p class="hint">Preferred Date</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.preferred_date || '—'}</p>
            </div>
            <div>
              <p class="hint">Request Count</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.request_count ?? 0}</p>
            </div>
            <div>
              <p class="hint">Accepted Count</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.accepted_count ?? 0}</p>
            </div>
            <div>
              <p class="hint">Customer ID</p>
              <p style="margin:6px 0 0;color:#334155">{requirement()!.customer_id || '—'}</p>
            </div>
            <div>
              <p class="hint">Created</p>
              <p style="margin:6px 0 0;color:#334155">{createdAt() ? new Date(createdAt()).toLocaleString() : '—'}</p>
            </div>
            <Show when={updatedAt()}>
              <div>
                <p class="hint">Updated</p>
                <p style="margin:6px 0 0;color:#334155">{new Date(updatedAt()!).toLocaleString()}</p>
              </div>
            </Show>
          </div>

          <div style="margin-top:18px">
            <p class="hint">Description</p>
            <p style="margin:6px 0 0;color:#334155;white-space:pre-wrap">{requirement()!.description || '—'}</p>
          </div>
        </section>
      </Show>
    </AdminShell>
  );
}