c526a376d5
Replace per-page AdminShell wrapping with a single SolidStart layout file (src/routes/admin.tsx) so the shell mounts once and persists across all /admin/* navigation — eliminating the sidebar bounce and session re-check flash that occurred on every page transition. - Create src/routes/admin.tsx as layout with <Outlet /> for child routes - Remove <AdminShell> import/wrapper from all 66 route files and 2 shared components (RoleUserManagementTablePage, UserListPage) - Fix company.tsx: wrong fetch URL /api/admin/companies → /api/gateway/api/admin/companies - Add missing auth headers (Authorization Bearer) to company.tsx and users.tsx - Fix admin/index.tsx API constant from hardcoded localhost:8000 → /api/gateway Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
import { A } from '@solidjs/router';
|
|
import { createMemo, createResource, For, Show } from 'solid-js';
|
|
|
|
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 (
|
|
<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">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-xl font-semibold text-gray-900">Role Templates</h1>
|
|
<p class="text-sm text-gray-500 mt-0.5">Starter role presets for faster internal role creation and cloning.</p>
|
|
</div>
|
|
<A class="btn-primary" href="/admin/roles/create">Create Internal Role</A>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 p-6">
|
|
<div class="table-card">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
|
|
<h2 class="text-sm font-semibold text-gray-900">Available Templates</h2>
|
|
<span class="text-xs text-slate-500">{count()} template{count() !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table data-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" class="text-center px-8 py-8 text-slate-500">Loading templates...</td></tr>
|
|
</Show>
|
|
<Show when={!templates.loading && count() === 0}>
|
|
<tr><td colspan="4" class="text-center px-8 py-8 text-slate-400">No templates available yet.</td></tr>
|
|
</Show>
|
|
<Show when={!templates.loading && count() > 0}>
|
|
<For each={templates()}>
|
|
{(item) => (
|
|
<tr class="hover:bg-slate-50">
|
|
<td class="font-semibold text-slate-900">{item.name}</td>
|
|
<td class="text-slate-500">{item.description || '—'}</td>
|
|
<td class="text-slate-500 font-mono">{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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|