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="flex flex-col -mx-6 -mt-6 min-h-full">
      <div class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 class="text-xl font-semibold text-gray-900">Requirement Request</h1>
          <p class="text-sm text-gray-500 mt-0.5">Review full requirement request details before approval action.</p>
        </div>
        <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/approval">Back to Approval Management</A>
      </div>
      <div class="p-6 flex-1">

      <Show when={requirement.loading}>
        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Loading requirement...</p></div>
      </Show>

      <Show when={!requirement.loading && !requirement()}>
        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Requirement not found.</p></div>
      </Show>

      <Show when={requirement()}>
        <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
          <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-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>
      </div>
      </div>
    </AdminShell>
  );
}