ui(step-2): apply reference layout to 8 management pages
- 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
parent
d6405b55f6
commit
0bb59b99ef
8 changed files with 754 additions and 722 deletions
|
|
@ -36,89 +36,92 @@ 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>
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No job seeker users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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={`/admin/users/${item.id}`}>View</A>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/users/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,86 +72,94 @@ 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">
|
||||||
<div>
|
{/* White page header */}
|
||||||
<h1 class="text-2xl font-bold text-gray-900">Company 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 company accounts on the platform.</p>
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-xl font-semibold text-gray-900">Company Management</h1>
|
||||||
|
<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>
|
</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>
|
|
||||||
|
|
||||||
<Show when={actionError()}>
|
{/* Content */}
|
||||||
<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="flex-1 p-6">
|
||||||
</Show>
|
<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>
|
||||||
|
</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>
|
||||||
<th>Industry</th>
|
<th>Industry</th>
|
||||||
<th>City</th>
|
<th>City</th>
|
||||||
<th>Email</th>
|
<th>Email</th>
|
||||||
<th>Status</th>
|
<th>Status</th>
|
||||||
<th class="text-right">Actions</th>
|
<th class="text-right">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</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>
|
||||||
<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/company/${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/company/${item.id}`}>View</A>
|
||||||
<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"
|
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"
|
||||||
disabled={deleting() === item.id}
|
disabled={deleting() === item.id}
|
||||||
onClick={() => handleDelete(item.id, displayName)}
|
onClick={() => handleDelete(item.id, displayName)}
|
||||||
>
|
>
|
||||||
{deleting() === item.id ? '...' : 'Delete'}
|
{deleting() === item.id ? '...' : 'Delete'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</For>
|
</For>
|
||||||
</Show>
|
</Show>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,89 +36,92 @@ 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>
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No customer users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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={`/admin/users/${item.id}`}>View</A>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/users/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,89 +36,94 @@ 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>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">Manage all developer accounts on the platform.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
{/* Search / Filters */}
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No developer users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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="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>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/users/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,89 +36,92 @@ 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>
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No makeup artist users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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={`/admin/users/${item.id}`}>View</A>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/users/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,89 +36,92 @@ 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>
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No photographer users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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={`/admin/photographer/${item.id}`}>View</A>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/photographer/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,89 +36,94 @@ 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>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">Manage all tutor accounts on the platform.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div class="flex-1 p-6">
|
||||||
|
{/* Search / Filters */}
|
||||||
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
|
<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-[#0a1d37] w-64"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={statusFilter()}
|
||||||
|
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||||
|
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="ACTIVE">ACTIVE</option>
|
||||||
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
|
<option value="PENDING">PENDING</option>
|
||||||
|
</select>
|
||||||
|
</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>Status</th>
|
||||||
|
<th>Registered</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length === 0}>
|
||||||
|
<tr><td colspan="5" class="text-center py-8 text-slate-400">No tutor users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
||||||
|
<For each={filtered()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
{item.status?.toUpperCase() === 'INACTIVE' && (
|
||||||
|
<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' && (
|
||||||
|
<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>}
|
||||||
|
</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="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>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
|
||||||
<div style="display:flex;gap:12px;padding:16px;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={statusFilter()}
|
|
||||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;"
|
|
||||||
>
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Registered</th>
|
|
||||||
<th class="text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Show when={users.loading}>
|
|
||||||
<tr><td colspan="5" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<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>
|
|
||||||
</Show>
|
|
||||||
<Show when={!users.loading && !users.error && filtered().length > 0}>
|
|
||||||
<For each={filtered()}>
|
|
||||||
{(item) => (
|
|
||||||
<tr>
|
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
|
||||||
<td style="color:#475569">{item.email}</td>
|
|
||||||
<td>
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{item.status?.toUpperCase() === 'INACTIVE' && (
|
|
||||||
<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' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
{!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 style="color:#475569">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
|
|
||||||
</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/users/${item.id}`}>View</A>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,175 +106,178 @@ 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>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">Manage all external platform users.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="admin-segmented">
|
{/* Tabs */}
|
||||||
<button
|
<div class="bg-white border-b border-gray-200 px-6 flex items-center gap-8 sticky top-0 z-10">
|
||||||
class={`admin-segment ${activeTab() === 'list' ? 'active' : ''}`}
|
<button
|
||||||
type="button"
|
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'}`}
|
||||||
onClick={() => setActiveTab('list')}
|
type="button"
|
||||||
>
|
onClick={() => setActiveTab('list')}
|
||||||
User List
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class={`admin-segment ${activeTab() === 'view' ? 'active' : ''}`}
|
|
||||||
type="button"
|
|
||||||
disabled={!selectedUser()}
|
|
||||||
onClick={() => setActiveTab('view')}
|
|
||||||
>
|
|
||||||
View Details
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<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;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by name or email..."
|
|
||||||
value={search()}
|
|
||||||
onInput={(e) => {
|
|
||||||
setSearch(e.currentTarget.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
}}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;width:260px;outline:none;"
|
|
||||||
/>
|
|
||||||
<select
|
|
||||||
value={filterRole()}
|
|
||||||
onChange={(e) => {
|
|
||||||
setFilterRole(e.currentTarget.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
}}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;background:#fff;outline:none;"
|
|
||||||
>
|
>
|
||||||
<option value="">All Roles</option>
|
User List
|
||||||
<For each={ROLE_OPTIONS}>
|
</button>
|
||||||
{(r) => <option value={r}>{r}</option>}
|
<button
|
||||||
</For>
|
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'}`}
|
||||||
</select>
|
type="button"
|
||||||
<select
|
disabled={!selectedUser()}
|
||||||
value={filterStatus()}
|
onClick={() => setActiveTab('view')}
|
||||||
onChange={(e) => {
|
|
||||||
setFilterStatus(e.currentTarget.value);
|
|
||||||
setCurrentPage(1);
|
|
||||||
}}
|
|
||||||
style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;background:#fff;outline:none;"
|
|
||||||
>
|
>
|
||||||
<option value="">All Status</option>
|
View Details
|
||||||
<option value="ACTIVE">ACTIVE</option>
|
</button>
|
||||||
<option value="INACTIVE">INACTIVE</option>
|
|
||||||
<option value="PENDING">PENDING</option>
|
|
||||||
</select>
|
|
||||||
<Show when={!users.loading}>
|
|
||||||
<span style="font-size:13px;color:#64748b;margin-left:auto;">
|
|
||||||
Showing {paginated().length} of {filtered().length} users
|
|
||||||
</span>
|
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={activeTab() === 'list'}>
|
{/* Content */}
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
|
<div class="flex-1 p-6">
|
||||||
<div class="overflow-x-auto">
|
<Show when={activeTab() === 'list'}>
|
||||||
<table class="w-full text-sm">
|
{/* Filters */}
|
||||||
<thead>
|
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||||
<tr>
|
<input
|
||||||
<th>User ID</th>
|
type="text"
|
||||||
<th>Name</th>
|
placeholder="Search by name or email..."
|
||||||
<th>Email</th>
|
value={search()}
|
||||||
<th>Registration Role</th>
|
onInput={(e) => {
|
||||||
<th>Status</th>
|
setSearch(e.currentTarget.value);
|
||||||
<th>Created</th>
|
setCurrentPage(1);
|
||||||
<th class="text-right">Actions</th>
|
}}
|
||||||
</tr>
|
class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
|
||||||
</thead>
|
/>
|
||||||
<tbody>
|
<select
|
||||||
<Show when={users.loading}>
|
value={filterRole()}
|
||||||
<tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
onChange={(e) => {
|
||||||
</Show>
|
setFilterRole(e.currentTarget.value);
|
||||||
<Show when={!users.loading && users.error}>
|
setCurrentPage(1);
|
||||||
<tr><td colspan="7" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr>
|
}}
|
||||||
</Show>
|
class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
|
||||||
<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>
|
<option value="">All Roles</option>
|
||||||
</Show>
|
<For each={ROLE_OPTIONS}>
|
||||||
<Show when={!users.loading && !users.error && paginated().length > 0}>
|
{(r) => <option value={r}>{r}</option>}
|
||||||
<For each={paginated()}>
|
</For>
|
||||||
{(item) => (
|
</select>
|
||||||
<tr>
|
<select
|
||||||
<td style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#64748b">{shortId(item.id)}</td>
|
value={filterStatus()}
|
||||||
<td style="font-weight:600;color:#0f172a">{item.name || item.full_name || '—'}</td>
|
onChange={(e) => {
|
||||||
<td style="color:#475569">{item.email}</td>
|
setFilterStatus(e.currentTarget.value);
|
||||||
<td style="color:#475569">{registrationRole(item)}</td>
|
setCurrentPage(1);
|
||||||
<td>
|
}}
|
||||||
<StatusBadge status={item.status} />
|
class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
|
||||||
</td>
|
>
|
||||||
<td style="color:#475569">
|
<option value="">All Status</option>
|
||||||
{(item.created_at || item.createdAt)
|
<option value="ACTIVE">ACTIVE</option>
|
||||||
? new Date((item.created_at || item.createdAt)!).toLocaleDateString()
|
<option value="INACTIVE">INACTIVE</option>
|
||||||
: '—'}
|
<option value="PENDING">PENDING</option>
|
||||||
</td>
|
</select>
|
||||||
<td>
|
<Show when={!users.loading}>
|
||||||
<div class="flex items-center justify-end gap-1">
|
<span class="text-xs text-slate-500 ml-auto">
|
||||||
<A class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" href={`/admin/users/details/${item.id}`} title="Open Detail Page">↗</A>
|
Showing {paginated().length} of {filtered().length} users
|
||||||
<button class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" type="button" onClick={() => onView(item)} title="Quick View">👁</button>
|
</span>
|
||||||
<A class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" href={`/admin/users/${item.id}/edit`} title="Edit User">✎</A>
|
</Show>
|
||||||
<button class="rounded p-1.5 text-red-500 hover:bg-red-50 hover:text-red-700 text-sm" type="button" title="Delete User">🗑</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</Show>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="admin-pagination">
|
|
||||||
<button 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" type="button" disabled={currentPage() <= 1} onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
<span>Page {currentPage()} of {totalPages()}</span>
|
|
||||||
<button 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" type="button" disabled={currentPage() >= totalPages()} onClick={() => setCurrentPage((p) => Math.min(totalPages(), p + 1))}>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={activeTab() === 'view'}>
|
|
||||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm">
|
|
||||||
<Show when={selectedUser()} fallback={<p class="notice">Select a user from list to view details.</p>}>
|
|
||||||
<div class="list-header">
|
|
||||||
<h2>User Details</h2>
|
|
||||||
<button 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" type="button" onClick={() => setActiveTab('list')}>Back To List</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="grid" style="margin-top:0">
|
|
||||||
<div class="list-item">
|
<div class="table-card">
|
||||||
<h3>Profile</h3>
|
<div class="overflow-x-auto">
|
||||||
<p><strong>User ID:</strong> {selectedUser()!.id}</p>
|
<table class="data-table w-full text-sm">
|
||||||
<p><strong>Name:</strong> {selectedUser()!.name || selectedUser()!.full_name || '—'}</p>
|
<thead>
|
||||||
<p><strong>Email:</strong> {selectedUser()!.email}</p>
|
<tr>
|
||||||
<p><strong>Role:</strong> {registrationRole(selectedUser()!)}</p>
|
<th>User ID</th>
|
||||||
<p><strong>Status:</strong> {selectedUser()!.status}</p>
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Registration Role</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Created</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<Show when={users.loading}>
|
||||||
|
<tr><td colspan="7" class="text-center py-8 text-slate-500">Loading...</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && users.error}>
|
||||||
|
<tr><td colspan="7" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && paginated().length === 0}>
|
||||||
|
<tr><td colspan="7" class="text-center py-8 text-slate-400">No users found.</td></tr>
|
||||||
|
</Show>
|
||||||
|
<Show when={!users.loading && !users.error && paginated().length > 0}>
|
||||||
|
<For each={paginated()}>
|
||||||
|
{(item) => (
|
||||||
|
<tr class="hover:bg-slate-50">
|
||||||
|
<td class="text-slate-500" style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace">{shortId(item.id)}</td>
|
||||||
|
<td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
|
||||||
|
<td class="text-slate-500">{item.email}</td>
|
||||||
|
<td class="text-slate-500">{registrationRole(item)}</td>
|
||||||
|
<td>
|
||||||
|
<StatusBadge status={item.status} />
|
||||||
|
</td>
|
||||||
|
<td class="text-slate-500">
|
||||||
|
{(item.created_at || item.createdAt)
|
||||||
|
? new Date((item.created_at || item.createdAt)!).toLocaleDateString()
|
||||||
|
: '—'}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center justify-end gap-1">
|
||||||
|
<A class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" href={`/admin/users/details/${item.id}`} title="Open Detail Page">↗</A>
|
||||||
|
<button class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" type="button" onClick={() => onView(item)} title="Quick View">👁</button>
|
||||||
|
<A class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 text-sm" href={`/admin/users/${item.id}/edit`} title="Edit User">✎</A>
|
||||||
|
<button class="rounded p-1.5 text-red-500 hover:bg-red-50 hover:text-red-700 text-sm" type="button" title="Delete User">🗑</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</Show>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-item">
|
<div class="admin-pagination">
|
||||||
<h3>Account</h3>
|
<button 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" type="button" disabled={currentPage() <= 1} onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}>
|
||||||
<p><strong>Created:</strong> {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}</p>
|
Previous
|
||||||
<p><strong>Role ID:</strong> {selectedUser()!.roleId || '—'}</p>
|
</button>
|
||||||
<div class="actions">
|
<span>Page {currentPage()} of {totalPages()}</span>
|
||||||
<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>
|
<button 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" type="button" disabled={currentPage() >= totalPages()} onClick={() => setCurrentPage((p) => Math.min(totalPages(), p + 1))}>
|
||||||
<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>
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={activeTab() === 'view'}>
|
||||||
|
<div class="table-card">
|
||||||
|
<Show when={selectedUser()} fallback={<p class="notice">Select a user from list to view details.</p>}>
|
||||||
|
<div class="list-header">
|
||||||
|
<h2>User Details</h2>
|
||||||
|
<button 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" type="button" onClick={() => setActiveTab('list')}>Back To List</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="grid" style="margin-top:0">
|
||||||
|
<div class="list-item">
|
||||||
|
<h3>Profile</h3>
|
||||||
|
<p><strong>User ID:</strong> {selectedUser()!.id}</p>
|
||||||
|
<p><strong>Name:</strong> {selectedUser()!.name || selectedUser()!.full_name || '—'}</p>
|
||||||
|
<p><strong>Email:</strong> {selectedUser()!.email}</p>
|
||||||
|
<p><strong>Role:</strong> {registrationRole(selectedUser()!)}</p>
|
||||||
|
<p><strong>Status:</strong> {selectedUser()!.status}</p>
|
||||||
|
</div>
|
||||||
|
<div class="list-item">
|
||||||
|
<h3>Account</h3>
|
||||||
|
<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>
|
||||||
|
<div class="actions">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</section>
|
</div>
|
||||||
</Show>
|
</div>
|
||||||
</AdminShell>
|
</AdminShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue