ashwin/nxtgauge-admin-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(step-2): apply reference layout to 8 management pages

Browse source 
- customer, candidate, photographer, makeup-artist, users, company,
  developers, tutors: all get white sticky header, -mx-6/-mt-6 layout,
  data-table/table-card CSS classes, navy primary buttons, orange tab
  underlines, Tailwind classes replacing inline styles on all table cells

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ashwin Kumar 2026-03-24 04:51:40 +01:00
parent d6405b55f6
commit 0bb59b99ef
8 changed files with 754 additions and 722 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/routes/admin/candidate.tsx
View file

@ -36,26 +36,26 @@ export default function CandidatePage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Candidate Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all job seeker accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Candidate Management</h1>
<p class="text-sm text-gray-500 mt-0.5">Manage all job seeker accounts on the platform.</p>
</div> </div>
</div> {/* Content */}
<div class="flex-1 p-6">
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> <div class="mb-4 flex flex-wrap items-center gap-3">
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +64,9 @@ export default function CandidatePage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +78,20 @@ export default function CandidatePage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No job seeker users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No job seeker users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,16 +100,16 @@ export default function CandidatePage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
<div class="flex items-center justify-end gap-1"> <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/users/${item.id}`}>View</A> <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/users/${item.id}`}>View</A>
</div> </div>
</td> </td>
</tr> </tr>
@ -118,7 +119,9 @@ export default function CandidatePage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

44
src/routes/admin/company.tsx
View file

@ -33,7 +33,7 @@ function StatusBadge(props: { status: string }) {
return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>; return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>;
} }
if (props.status === 'PENDING') { if (props.status === 'PENDING') {
return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#f59e0b;color:#fff">PENDING</span>; return <span class="inline-flex items-center rounded-full bg-amber-500 px-2.5 py-0.5 text-xs font-medium text-white">PENDING</span>;
} }
return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">{props.status}</span>; return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">{props.status}</span>;
} }
@ -72,32 +72,38 @@ export default function CompanyPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
{/* White page header */}
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">Company Management</h1> <h1 class="text-xl font-semibold text-gray-900">Company Management</h1>
<p class="mt-1 text-sm text-gray-500">Manage all company accounts on the platform.</p> <p class="text-sm text-gray-500 mt-0.5">Manage all company accounts on the platform.</p>
</div>
<A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href="/admin/company/create">Create Company</A>
</div> </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/company/create">Create Company</A>
</div> </div>
{/* Content */}
<div class="flex-1 p-6">
<Show when={actionError()}> <Show when={actionError()}>
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{actionError()}</div> <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{actionError()}</div>
</Show> </Show>
{/* Search */} {/* Search */}
<div class="rounded-xl border border-gray-200 bg-white shadow-sm" style="margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;"> <div class="mb-4 flex flex-wrap items-center gap-3">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;width:260px;outline:none;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
</div> </div>
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> <div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Company Name</th> <th>Company Name</th>
@ -110,24 +116,24 @@ export default function CompanyPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={companies.loading}> <Show when={companies.loading}>
<tr><td colspan="6" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="6" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!companies.loading && companies.error}> <Show when={!companies.loading && companies.error}>
<tr><td colspan="6" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="6" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!companies.loading && !companies.error && filtered().length === 0}> <Show when={!companies.loading && !companies.error && filtered().length === 0}>
<tr><td colspan="6" style="text-align:center;padding:32px;color:#94a3b8">No companies found.</td></tr> <tr><td colspan="6" class="text-center py-8 text-slate-400">No companies found.</td></tr>
</Show> </Show>
<Show when={!companies.loading && !companies.error && filtered().length > 0}> <Show when={!companies.loading && !companies.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => { {(item) => {
const displayName = item.company_name || item.companyName || item.name || '—'; const displayName = item.company_name || item.companyName || item.name || '—';
return ( return (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{displayName}</td> <td class="font-semibold text-slate-900">{displayName}</td>
<td style="color:#475569">{item.industry || '—'}</td> <td class="text-slate-500">{item.industry || '—'}</td>
<td style="color:#475569">{item.city || '—'}</td> <td class="text-slate-500">{item.city || '—'}</td>
<td style="color:#475569">{item.email || '—'}</td> <td class="text-slate-500">{item.email || '—'}</td>
<td> <td>
<StatusBadge status={item.status} /> <StatusBadge status={item.status} />
</td> </td>
@ -151,7 +157,9 @@ export default function CompanyPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

45
src/routes/admin/customer.tsx
View file

@ -36,26 +36,26 @@ export default function CustomerPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Customer Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all customer accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Customer Management</h1>
<p class="text-sm text-gray-500 mt-0.5">Manage all customer accounts on the platform.</p>
</div> </div>
</div> {/* Content */}
<div class="flex-1 p-6">
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> <div class="mb-4 flex flex-wrap items-center gap-3">
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +64,9 @@ export default function CustomerPage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +78,20 @@ export default function CustomerPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No customer users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No customer users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,16 +100,16 @@ export default function CustomerPage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
<div class="flex items-center justify-end gap-1"> <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/users/${item.id}`}>View</A> <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/users/${item.id}`}>View</A>
</div> </div>
</td> </td>
</tr> </tr>
@ -118,7 +119,9 @@ export default function CustomerPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

43
src/routes/admin/developers.tsx
View file

@ -36,26 +36,28 @@ export default function DevelopersPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Developers Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all developer accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Developers Management</h1>
</div> <p class="text-sm text-gray-500 mt-0.5">Manage all developer accounts on the platform.</p>
</div> </div>
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> {/* Content */}
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;"> <div class="flex-1 p-6">
{/* Search / Filters */}
<div class="mb-4 flex flex-wrap items-center gap-3">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +66,9 @@ export default function DevelopersPage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +80,20 @@ export default function DevelopersPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No developer users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No developer users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,11 +102,11 @@ export default function DevelopersPage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700 border border-orange-200">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
@ -118,7 +121,9 @@ export default function DevelopersPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

45
src/routes/admin/makeup-artist.tsx
View file

@ -36,26 +36,26 @@ export default function MakeupArtistPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Makeup Artist Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all makeup artist accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Makeup Artist Management</h1>
<p class="text-sm text-gray-500 mt-0.5">Manage all makeup artist accounts on the platform.</p>
</div> </div>
</div> {/* Content */}
<div class="flex-1 p-6">
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> <div class="mb-4 flex flex-wrap items-center gap-3">
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +64,9 @@ export default function MakeupArtistPage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +78,20 @@ export default function MakeupArtistPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No makeup artist users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No makeup artist users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,16 +100,16 @@ export default function MakeupArtistPage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
<div class="flex items-center justify-end gap-1"> <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/users/${item.id}`}>View</A> <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/users/${item.id}`}>View</A>
</div> </div>
</td> </td>
</tr> </tr>
@ -118,7 +119,9 @@ export default function MakeupArtistPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

45
src/routes/admin/photographer.tsx
View file

@ -36,26 +36,26 @@ export default function PhotographerPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Photographer Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all photographer accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Photographer Management</h1>
<p class="text-sm text-gray-500 mt-0.5">Manage all photographer accounts on the platform.</p>
</div> </div>
</div> {/* Content */}
<div class="flex-1 p-6">
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> <div class="mb-4 flex flex-wrap items-center gap-3">
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +64,9 @@ export default function PhotographerPage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +78,20 @@ export default function PhotographerPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No photographer users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No photographer users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,16 +100,16 @@ export default function PhotographerPage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
<div class="flex items-center justify-end gap-1"> <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/photographer/${item.id}`}>View</A> <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/photographer/${item.id}`}>View</A>
</div> </div>
</td> </td>
</tr> </tr>
@ -118,7 +119,9 @@ export default function PhotographerPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

43
src/routes/admin/tutors.tsx
View file

@ -36,26 +36,28 @@ export default function TutorsPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">Tutors Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all tutor accounts on the platform.</p> <h1 class="text-xl font-semibold text-gray-900">Tutors Management</h1>
</div> <p class="text-sm text-gray-500 mt-0.5">Manage all tutor accounts on the platform.</p>
</div> </div>
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;"> {/* Content */}
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;"> <div class="flex-1 p-6">
{/* Search / Filters */}
<div class="mb-4 flex flex-wrap items-center gap-3">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={search()} value={search()}
onInput={(e) => setSearch(e.currentTarget.value)} onInput={(e) => setSearch(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={statusFilter()} value={statusFilter()}
onChange={(e) => setStatusFilter(e.currentTarget.value)} onChange={(e) => setStatusFilter(e.currentTarget.value)}
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -64,8 +66,9 @@ export default function TutorsPage() {
</select> </select>
</div> </div>
<div class="table-card">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -77,20 +80,20 @@ export default function TutorsPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length === 0}> <Show when={!users.loading && !users.error && filtered().length === 0}>
<tr><td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">No tutor users found.</td></tr> <tr><td colspan="5" class="text-center py-8 text-slate-400">No tutor users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && filtered().length > 0}> <Show when={!users.loading && !users.error && filtered().length > 0}>
<For each={filtered()}> <For each={filtered()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td> <td>
{item.status?.toUpperCase() === 'ACTIVE' && ( {item.status?.toUpperCase() === 'ACTIVE' && (
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span> <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
@ -99,11 +102,11 @@ export default function TutorsPage() {
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span> <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
)} )}
{item.status?.toUpperCase() === 'PENDING' && ( {item.status?.toUpperCase() === 'PENDING' && (
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#fff7ed;color:#c2410c;border-color:#fed7aa;">PENDING</span> <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700 border border-orange-200">PENDING</span>
)} )}
{!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>} {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
</td> </td>
<td> <td>
@ -118,7 +121,9 @@ export default function TutorsPage() {
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </div>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }

68
src/routes/admin/users.tsx
View file

@ -15,7 +15,6 @@ interface User {
created_at?: string; created_at?: string;
createdAt?: string; createdAt?: string;
roleId?: string; roleId?: string;
role_name?: string;
userType?: string | number; userType?: string | number;
} }
@ -56,7 +55,7 @@ function StatusBadge(props: { status: string }) {
return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>; return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>;
} }
if (props.status === 'PENDING') { if (props.status === 'PENDING') {
return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600" style="background:#f59e0b;color:#fff">PENDING</span>; return <span class="inline-flex items-center rounded-full bg-amber-500 px-2.5 py-0.5 text-xs font-medium text-white">PENDING</span>;
} }
return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>; return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>;
} }
@ -107,23 +106,24 @@ export default function UsersPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="mb-6 flex items-start justify-between gap-4"> <div class="flex flex-col -mx-6 -mt-6 min-h-full">
<div> {/* White page header */}
<h1 class="text-2xl font-bold text-gray-900">External User Management</h1> <div class="bg-white border-b border-gray-200 px-6 py-4">
<p class="mt-1 text-sm text-gray-500">Manage all external platform users.</p> <h1 class="text-xl font-semibold text-gray-900">External User Management</h1>
</div> <p class="text-sm text-gray-500 mt-0.5">Manage all external platform users.</p>
</div> </div>
<div class="admin-segmented"> {/* Tabs */}
<div class="bg-white border-b border-gray-200 px-6 flex items-center gap-8 sticky top-0 z-10">
<button <button
class={`admin-segment ${activeTab() === 'list' ? 'active' : ''}`} class={`py-3 border-b-2 text-sm font-medium transition-colors ${activeTab() === 'list' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
type="button" type="button"
onClick={() => setActiveTab('list')} onClick={() => setActiveTab('list')}
> >
User List User List
</button> </button>
<button <button
class={`admin-segment ${activeTab() === 'view' ? 'active' : ''}`} class={`py-3 border-b-2 text-sm font-medium transition-colors ${activeTab() === 'view' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
type="button" type="button"
disabled={!selectedUser()} disabled={!selectedUser()}
onClick={() => setActiveTab('view')} onClick={() => setActiveTab('view')}
@ -132,9 +132,11 @@ export default function UsersPage() {
</button> </button>
</div> </div>
{/* Filters */} {/* Content */}
<div class="flex-1 p-6">
<Show when={activeTab() === 'list'}> <Show when={activeTab() === 'list'}>
<div class="rounded-xl border border-gray-200 bg-white shadow-sm" style="margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;"> {/* Filters */}
<div class="mb-4 flex flex-wrap items-center gap-3">
<input <input
type="text" type="text"
placeholder="Search by name or email..." placeholder="Search by name or email..."
@ -143,7 +145,7 @@ export default function UsersPage() {
setSearch(e.currentTarget.value); setSearch(e.currentTarget.value);
setCurrentPage(1); setCurrentPage(1);
}} }}
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;width:260px;outline:none;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
/> />
<select <select
value={filterRole()} value={filterRole()}
@ -151,7 +153,7 @@ export default function UsersPage() {
setFilterRole(e.currentTarget.value); setFilterRole(e.currentTarget.value);
setCurrentPage(1); setCurrentPage(1);
}} }}
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;background:#fff;outline:none;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Roles</option> <option value="">All Roles</option>
<For each={ROLE_OPTIONS}> <For each={ROLE_OPTIONS}>
@ -164,7 +166,7 @@ export default function UsersPage() {
setFilterStatus(e.currentTarget.value); setFilterStatus(e.currentTarget.value);
setCurrentPage(1); setCurrentPage(1);
}} }}
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;background:#fff;outline:none;" class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
> >
<option value="">All Status</option> <option value="">All Status</option>
<option value="ACTIVE">ACTIVE</option> <option value="ACTIVE">ACTIVE</option>
@ -172,17 +174,15 @@ export default function UsersPage() {
<option value="PENDING">PENDING</option> <option value="PENDING">PENDING</option>
</select> </select>
<Show when={!users.loading}> <Show when={!users.loading}>
<span style="font-size:13px;color:#64748b;margin-left:auto;"> <span class="text-xs text-slate-500 ml-auto">
Showing {paginated().length} of {filtered().length} users Showing {paginated().length} of {filtered().length} users
</span> </span>
</Show> </Show>
</div> </div>
</Show>
<Show when={activeTab() === 'list'}> <div class="table-card">
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="data-table w-full text-sm">
<thead> <thead>
<tr> <tr>
<th>User ID</th> <th>User ID</th>
@ -196,26 +196,26 @@ export default function UsersPage() {
</thead> </thead>
<tbody> <tbody>
<Show when={users.loading}> <Show when={users.loading}>
<tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr> <tr><td colspan="7" class="text-center py-8 text-slate-500">Loading...</td></tr>
</Show> </Show>
<Show when={!users.loading && users.error}> <Show when={!users.loading && users.error}>
<tr><td colspan="7" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr> <tr><td colspan="7" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && paginated().length === 0}> <Show when={!users.loading && !users.error && paginated().length === 0}>
<tr><td colspan="7" style="text-align:center;padding:32px;color:#94a3b8">No users found.</td></tr> <tr><td colspan="7" class="text-center py-8 text-slate-400">No users found.</td></tr>
</Show> </Show>
<Show when={!users.loading && !users.error && paginated().length > 0}> <Show when={!users.loading && !users.error && paginated().length > 0}>
<For each={paginated()}> <For each={paginated()}>
{(item) => ( {(item) => (
<tr> <tr class="hover:bg-slate-50">
<td style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#64748b">{shortId(item.id)}</td> <td class="text-slate-500" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace">{shortId(item.id)}</td>
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td> <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
<td style="color:#475569">{item.email}</td> <td class="text-slate-500">{item.email}</td>
<td style="color:#475569">{registrationRole(item)}</td> <td class="text-slate-500">{registrationRole(item)}</td>
<td> <td>
<StatusBadge status={item.status} /> <StatusBadge status={item.status} />
</td> </td>
<td style="color:#475569"> <td class="text-slate-500">
{(item.created_at || item.createdAt) {(item.created_at || item.createdAt)
? new Date((item.created_at || item.createdAt)!).toLocaleDateString() ? new Date((item.created_at || item.createdAt)!).toLocaleDateString()
: '—'} : '—'}
@ -244,11 +244,11 @@ export default function UsersPage() {
Next Next
</button> </button>
</div> </div>
</section> </div>
</Show> </Show>
<Show when={activeTab() === 'view'}> <Show when={activeTab() === 'view'}>
<section class="rounded-xl border border-gray-200 bg-white shadow-sm"> <div class="table-card">
<Show when={selectedUser()} fallback={<p class="notice">Select a user from list to view details.</p>}> <Show when={selectedUser()} fallback={<p class="notice">Select a user from list to view details.</p>}>
<div class="list-header"> <div class="list-header">
<h2>User Details</h2> <h2>User Details</h2>
@ -268,14 +268,16 @@ export default function UsersPage() {
<p><strong>Created:</strong> {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}</p> <p><strong>Created:</strong> {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}</p>
<p><strong>Role ID:</strong> {selectedUser()!.roleId || '—'}</p> <p><strong>Role ID:</strong> {selectedUser()!.roleId || '—'}</p>
<div class="actions"> <div class="actions">
<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/users/${selectedUser()!.id}/edit`}>Edit User</A> <A class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-semibold text-white hover:bg-[#0f2a4e] transition-colors" href={`/admin/users/${selectedUser()!.id}/edit`}>Edit User</A>
<button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" type="button">Deactivate</button> <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" type="button">Deactivate</button>
</div> </div>
</div> </div>
</div> </div>
</Show> </Show>
</section> </div>
</Show> </Show>
</div>
</div>
</AdminShell> </AdminShell>
); );
} }