2e3c2d6db8
- Create ProfessionAdminListPage component for admin list views - Update all 9 profession pages to use /api/admin/<profession> endpoints - Remove unused FALLBACK_* constants from onboarding-schemas - Improves performance and data accuracy for admin profession management
229 lines
11 KiB
TypeScript
229 lines
11 KiB
TypeScript
import { A } from '@solidjs/router';
|
|
import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
|
|
|
|
const API = '/api/gateway';
|
|
|
|
type SortMode = 'newest' | 'oldest' | 'name_asc' | 'name_desc';
|
|
|
|
async function fetchProfessionList(endpoint: string): Promise<any[]> {
|
|
try {
|
|
const res = await fetch(`${API}${endpoint}`);
|
|
if (!res.ok) throw new Error(`Failed to load: ${res.status}`);
|
|
const data = await res.json();
|
|
return Array.isArray(data) ? data : [];
|
|
} catch (e) {
|
|
console.error(`Failed to fetch from ${endpoint}:`, e);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function statusBadge(status?: string) {
|
|
const normalized = (status || '').toUpperCase();
|
|
if (normalized === 'ACTIVE') return 'inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700';
|
|
if (normalized === 'PENDING') return 'inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700';
|
|
return 'inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600';
|
|
}
|
|
|
|
export default function ProfessionAdminListPage(props: {
|
|
endpoint: string;
|
|
title: string;
|
|
subtitle: string;
|
|
emptyLabel: string;
|
|
viewHref: (id: string) => string;
|
|
nameField?: string;
|
|
}) {
|
|
const nameField = props.nameField || 'first_name';
|
|
const [items] = createResource(() => props.endpoint, fetchProfessionList);
|
|
const [search, setSearch] = createSignal('');
|
|
const [statusFilter, setStatusFilter] = createSignal<'all' | 'ACTIVE' | 'INACTIVE' | 'PENDING'>('all');
|
|
const [sortBy, setSortBy] = createSignal<SortMode>('newest');
|
|
const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
|
|
const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
|
|
|
|
const filtered = createMemo(() => {
|
|
const list = items() ?? [];
|
|
const q = search().toLowerCase().trim();
|
|
const f = statusFilter();
|
|
const sorted = list.filter((u) => {
|
|
const firstName = String(u.first_name || '').toLowerCase();
|
|
const lastName = String(u.last_name || '').toLowerCase();
|
|
const fullName = `${firstName} ${lastName}`.trim();
|
|
const email = String(u.email || '').toLowerCase();
|
|
const st = String(u.status || '').toUpperCase();
|
|
const matchesSearch = !q || fullName.includes(q) || email.includes(q);
|
|
const matchesStatus = f === 'all' || st === f;
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
sorted.sort((a, b) => {
|
|
const aDate = new Date(a.created_at || 0).getTime();
|
|
const bDate = new Date(b.created_at || 0).getTime();
|
|
if (sortBy() === 'oldest') return aDate - bDate;
|
|
if (sortBy() === 'name_asc') return `${a.first_name || ''} ${a.last_name || ''}`.localeCompare(`${b.first_name || ''} ${b.last_name || ''}`);
|
|
if (sortBy() === 'name_desc') return `${b.first_name || ''} ${b.last_name || ''}`.localeCompare(`${a.first_name || ''} ${a.last_name || ''}`);
|
|
return bDate - aDate;
|
|
});
|
|
|
|
return sorted;
|
|
});
|
|
|
|
const exportCsv = () => {
|
|
const headers = ['First Name', 'Last Name', 'Email', 'Phone', 'Status', 'Registered'];
|
|
const rows = filtered().map((item) => [
|
|
String(item.first_name || ''),
|
|
String(item.last_name || ''),
|
|
String(item.email || ''),
|
|
String(item.phone || ''),
|
|
String(item.status || ''),
|
|
item.created_at ? new Date(item.created_at).toLocaleDateString() : '',
|
|
]);
|
|
const csv = [headers, ...rows]
|
|
.map((line) => line.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
|
|
.join('\n');
|
|
|
|
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `${props.title.toLowerCase().replace(/\s+/g, '-')}-export.csv`;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
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">
|
|
<h1 class="text-xl font-semibold text-gray-900">{props.title}</h1>
|
|
<p class="text-sm text-gray-500 mt-0.5">{props.subtitle}</p>
|
|
</div>
|
|
|
|
<div class="flex-1 p-6">
|
|
<div class="mb-4 flex flex-wrap items-center gap-2" style="position:relative;z-index:20;">
|
|
<input
|
|
type="text"
|
|
placeholder="Search by name or email..."
|
|
value={search()}
|
|
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#FF5E13] w-72"
|
|
/>
|
|
|
|
<div style="position:relative;">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
|
|
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
|
>
|
|
Sort
|
|
</button>
|
|
<Show when={sortMenuOpen()}>
|
|
<div style="position:absolute;right:0;top:38px;z-index:40;min-width:180px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;box-shadow:0 12px 24px rgba(2,6,23,0.12);padding:8px">
|
|
<For each={[
|
|
{ key: 'newest', label: 'Newest First' },
|
|
{ key: 'oldest', label: 'Oldest First' },
|
|
{ key: 'name_asc', label: 'Name A-Z' },
|
|
{ key: 'name_desc', label: 'Name Z-A' },
|
|
] as { key: SortMode; label: string }[]}>
|
|
{(item) => (
|
|
<button
|
|
type="button"
|
|
onClick={() => { setSortBy(item.key); setSortMenuOpen(false); }}
|
|
style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === item.key ? '#FF5E13' : '#374151'};background:${sortBy() === item.key ? '#FFF1EB' : 'transparent'}`}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
<div style="position:relative;">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
|
|
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
|
>
|
|
Filters
|
|
</button>
|
|
<Show when={filterMenuOpen()}>
|
|
<div style="position:absolute;right:0;top:38px;z-index:40;min-width:180px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;box-shadow:0 12px 24px rgba(2,6,23,0.12);padding:8px">
|
|
<For each={[
|
|
{ key: 'all', label: 'All Status' },
|
|
{ key: 'ACTIVE', label: 'Active' },
|
|
{ key: 'INACTIVE', label: 'Inactive' },
|
|
{ key: 'PENDING', label: 'Pending' },
|
|
] as { key: 'all' | 'ACTIVE' | 'INACTIVE' | 'PENDING'; label: string }[]}>
|
|
{(item) => (
|
|
<button
|
|
type="button"
|
|
onClick={() => { setStatusFilter(item.key); setFilterMenuOpen(false); }}
|
|
style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === item.key ? '#FF5E13' : '#374151'};background:${statusFilter() === item.key ? '#FFF1EB' : 'transparent'}`}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={exportCsv}
|
|
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;padding:0 12px;font-size:12px;font-weight:600;color:#0f172a;cursor:pointer"
|
|
>
|
|
Export
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-card">
|
|
<div class="overflow-x-auto">
|
|
<table class="data-table w-full text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Status</th>
|
|
<th>Registered</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<Show when={items.loading}>
|
|
<tr><td colspan="6" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
|
</Show>
|
|
<Show when={!items.loading && items.error}>
|
|
<tr><td colspan="6" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
|
</Show>
|
|
<Show when={!items.loading && !items.error && filtered().length === 0}>
|
|
<tr><td colspan="6" class="text-center py-8 text-slate-400">{props.emptyLabel}</td></tr>
|
|
</Show>
|
|
<Show when={!items.loading && !items.error && filtered().length > 0}>
|
|
<For each={filtered()}>
|
|
{(item) => (
|
|
<tr class="hover:bg-slate-50">
|
|
<td class="font-semibold text-slate-900">{item.first_name || ''} {item.last_name || ''}</td>
|
|
<td class="text-slate-500">{item.email}</td>
|
|
<td class="text-slate-500">{item.phone || '—'}</td>
|
|
<td>
|
|
<span class={statusBadge(item.status)}>{item.status?.toUpperCase() || '—'}</span>
|
|
</td>
|
|
<td class="text-slate-500">{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}</td>
|
|
<td>
|
|
<div class="flex items-center justify-end gap-1">
|
|
<A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={props.viewHref(String(item.id))}>View</A>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|