nxtgauge-admin-solid/src/routes/admin/roles/templates.tsx

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

const API = '/api/gateway';

type RoleTemplate = {
  id: string;
  name: string;
  description?: string;
  code?: string;
  audience?: string;
};

async function fetchTemplates(): Promise<RoleTemplate[]> {
  try {
    const res = await fetch(`${API}/api/admin/roles?audience=INTERNAL`);
    if (!res.ok) return [];
    const data = await res.json();
    const rows = Array.isArray(data) ? data : (data.roles || []);
    return rows.map((r: any) => ({
      id: r.id,
      name: r.name,
      description: r.description || '',
      code: r.code || r.key || '',
      audience: r.audience || 'INTERNAL',
    }));
  } catch {
    return [];
  }
}

export default function RoleTemplatesPage() {
  const [templates] = createResource(fetchTemplates);
  const count = createMemo(() => (templates() || []).length);

  return (
    <AdminShell>
      <div class="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">Role Templates</h1>
          <p class="mt-1 text-sm text-gray-500">Starter role presets for faster internal role creation and cloning.</p>
        </div>
        <A class="inline-flex items-center rounded-lg bg-[#fd6216] px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors" href="/admin/roles/create">Create Internal Role</A>
      </div>

      <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding:0;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e2e8f0">
          <h2 style="margin:0;font-size:16px">Available Templates</h2>
          <span style="font-size:12px;color:#64748b">{count()} template{count() !== 1 ? 's' : ''}</span>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Code</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <Show when={templates.loading}>
                <tr><td colspan="4" style="text-align:center;padding:32px;color:#64748b">Loading templates...</td></tr>
              </Show>
              <Show when={!templates.loading && count() === 0}>
                <tr><td colspan="4" style="text-align:center;padding:32px;color:#94a3b8">No templates available yet.</td></tr>
              </Show>
              <Show when={!templates.loading && count() > 0}>
                <For each={templates()}>
                  {(item) => (
                    <tr>
                      <td style="font-weight:600;color:#0f172a">{item.name}</td>
                      <td style="color:#475569">{item.description || '—'}</td>
                      <td style="color:#64748b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace">{item.code || '—'}</td>
                      <td>
                        <div class="flex items-center justify-end gap-1">
                          <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/roles/${item.id}`}>View</A>
                          <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/roles/create">Use As Base</A>
                        </div>
                      </td>
                    </tr>
                  )}
                </For>
              </Show>
            </tbody>
          </table>
        </div>
      </section>
    </AdminShell>
  );
}