ui(step-1): match reference layout for dept/designation/employees/roles pages
- All pages: white sticky page header + tab bar with orange underline, -mx-6 -mt-6 negative margin to stretch headers edge-to-edge - department: full columns (ID, Name, Description, Created By, etc.), icon-only action buttons, navy Add Department button - designation: Designations List / Add Designation tabs, status filter dropdown, inline create/edit form, full columns with status badge - employees: View/Add tabs, icon-only action buttons, status badges - roles/index: clean table with Name+code subtext, Description, actions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ashwin Kumar
parent
c44152154f
commit
d6405b55f6
5 changed files with 908 additions and 987 deletions
|
|
@ -675,34 +675,39 @@ export default function ApprovalPage() {
|
|||
|
||||
return (
|
||||
<AdminShell>
|
||||
{/* Page header */}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Approval Management</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">Review, approve, reject and configure approval workflows.</p>
|
||||
</div>
|
||||
<div class="flex flex-col -mx-6 -mt-6 min-h-full">
|
||||
|
||||
{/* ── Page header ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Approval Management</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Review, approve, reject and configure approval workflows.</p>
|
||||
</div>
|
||||
|
||||
{/* Status tabs */}
|
||||
<div style="display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:16px;gap:0;overflow-x:auto">
|
||||
{/* ── Status tabs ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center gap-6 sticky top-0 z-10 overflow-x-auto">
|
||||
<For each={STATUS_TABS}>
|
||||
{(t) => {
|
||||
const count = countFor(t.key);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={`admin-tab${activeTab() === t.key ? ' active' : ''}`}
|
||||
onClick={() => {
|
||||
setActiveTab(t.key);
|
||||
setShowDetail(false);
|
||||
setCurrentPage(1);
|
||||
setDocRequestedOnly(false);
|
||||
}}
|
||||
style="white-space:nowrap;display:flex;align-items:center;gap:6px"
|
||||
class={`flex shrink-0 items-center gap-1.5 py-3 border-b-2 text-sm font-medium transition-colors ${
|
||||
activeTab() === t.key
|
||||
? 'border-orange-500 text-orange-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
<Show when={!approvals.loading && count > 0}>
|
||||
<span style={`display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;font-size:10px;font-weight:700;padding:0 5px;background:${activeTab() === t.key ? t.color : '#e2e8f0'};color:${activeTab() === t.key ? '#fff' : '#64748b'}`}>
|
||||
<span class={`inline-flex items-center justify-center min-w-[18px] h-[18px] rounded-full text-[10px] font-bold px-1 ${
|
||||
activeTab() === t.key ? 'bg-orange-500 text-white' : 'bg-slate-200 text-slate-600'
|
||||
}`}>
|
||||
{count}
|
||||
</span>
|
||||
</Show>
|
||||
|
|
@ -712,6 +717,8 @@ export default function ApprovalPage() {
|
|||
</For>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 p-6">
|
||||
|
||||
<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" style="margin-bottom:12px">{actionError()}</div>
|
||||
</Show>
|
||||
|
|
@ -1058,6 +1065,8 @@ export default function ApprovalPage() {
|
|||
</div>
|
||||
</section>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,36 @@
|
|||
import { A } from '@solidjs/router';
|
||||
import { createResource, createSignal, createMemo, Show, For } from 'solid-js';
|
||||
import { Plus, Pencil, Archive, RotateCcw, Trash2, ChevronLeft, ChevronRight } from 'lucide-solid';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type Department = {
|
||||
id: string;
|
||||
departmentId?: string;
|
||||
name?: string;
|
||||
departmentName?: string;
|
||||
description?: string;
|
||||
createdBy?: string;
|
||||
updatedBy?: string;
|
||||
is_archived?: boolean;
|
||||
status?: string | number;
|
||||
created_at?: string;
|
||||
createdAt?: string;
|
||||
created_at?: string;
|
||||
updatedAt?: string;
|
||||
};
|
||||
|
||||
async function loadDepartments(): Promise<Department[]> {
|
||||
type ViewMode = 'list' | 'create' | 'update';
|
||||
|
||||
async function loadDepartments(params: { page: number; limit: number; status: string }): Promise<{ items: Department[]; total: number }> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments`);
|
||||
const res = await fetch(`${API}/api/admin/departments?page=${params.page}&limit=${params.limit}&status=${params.status}`);
|
||||
if (!res.ok) throw new Error('Failed to load');
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : (data.departments ?? []);
|
||||
const items = Array.isArray(data) ? data : (data.departments ?? []);
|
||||
const total = data.total ?? items.length;
|
||||
return { items, total };
|
||||
} catch {
|
||||
return [];
|
||||
return { items: [], total: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,21 +49,24 @@ function deptLabel(item: Department): string {
|
|||
|
||||
function fmtDate(val?: string): string {
|
||||
if (!val) return '—';
|
||||
try {
|
||||
return new Date(val).toLocaleDateString();
|
||||
} catch {
|
||||
return val;
|
||||
}
|
||||
try { return new Date(val).toLocaleDateString(); } catch { return val; }
|
||||
}
|
||||
|
||||
export default function DepartmentPage() {
|
||||
const [departments, { refetch }] = createResource(loadDepartments);
|
||||
const [view, setView] = createSignal<ViewMode>('list');
|
||||
const [statusFilter, setStatusFilter] = createSignal<'active' | 'archived'>('active');
|
||||
const [page, setPage] = createSignal(1);
|
||||
const limit = 10;
|
||||
|
||||
// tabs
|
||||
const [tab, setTab] = createSignal<'active' | 'archived'>('active');
|
||||
const fetchParams = createMemo(() => ({
|
||||
page: page(),
|
||||
limit,
|
||||
status: statusFilter() === 'archived' ? '2' : '1',
|
||||
}));
|
||||
|
||||
// create form
|
||||
const [showCreate, setShowCreate] = createSignal(false);
|
||||
const [data, { refetch }] = createResource(fetchParams, loadDepartments);
|
||||
|
||||
// form state
|
||||
const [createName, setCreateName] = createSignal('');
|
||||
const [createDesc, setCreateDesc] = createSignal('');
|
||||
const [creating, setCreating] = createSignal(false);
|
||||
|
|
@ -68,18 +79,20 @@ export default function DepartmentPage() {
|
|||
const [saving, setSaving] = createSignal(false);
|
||||
const [editError, setEditError] = createSignal('');
|
||||
|
||||
// row-level busy
|
||||
const [busy, setBusy] = createSignal('');
|
||||
const [actionError, setActionError] = createSignal('');
|
||||
|
||||
const items = () => data()?.items ?? [];
|
||||
const total = () => data()?.total ?? 0;
|
||||
const totalPages = () => Math.ceil(total() / limit);
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const all = departments() ?? [];
|
||||
return tab() === 'archived'
|
||||
const all = items();
|
||||
return statusFilter() === 'archived'
|
||||
? all.filter((d) => isArchived(d))
|
||||
: all.filter((d) => !isArchived(d));
|
||||
});
|
||||
|
||||
// ---------- CREATE ----------
|
||||
const handleCreate = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!createName().trim()) return;
|
||||
|
|
@ -89,19 +102,14 @@ export default function DepartmentPage() {
|
|||
const res = await fetch(`${API}/api/admin/departments`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: createName().trim(),
|
||||
description: createDesc().trim(),
|
||||
}),
|
||||
body: JSON.stringify({ name: createName().trim(), description: createDesc().trim() }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error((err as any).message || 'Failed to create');
|
||||
}
|
||||
setCreateName('');
|
||||
setCreateDesc('');
|
||||
setShowCreate(false);
|
||||
setTab('active');
|
||||
setCreateName(''); setCreateDesc('');
|
||||
setView('list'); setStatusFilter('active'); setPage(1);
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setCreateError(err.message || 'Failed to create department');
|
||||
|
|
@ -110,261 +118,237 @@ export default function DepartmentPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// ---------- EDIT ----------
|
||||
const startEdit = (item: Department) => {
|
||||
setEditingId(item.id);
|
||||
setEditName(deptLabel(item));
|
||||
setEditDesc(item.description ?? '');
|
||||
setEditError('');
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingId('');
|
||||
setEditError('');
|
||||
setEditingId(item.id); setEditName(deptLabel(item)); setEditDesc(item.description ?? ''); setEditError('');
|
||||
};
|
||||
const cancelEdit = () => { setEditingId(''); setEditError(''); };
|
||||
|
||||
const handleUpdate = async (id: string) => {
|
||||
if (!editName().trim()) return;
|
||||
setSaving(true);
|
||||
setEditError('');
|
||||
setSaving(true); setEditError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: editName().trim(),
|
||||
description: editDesc().trim(),
|
||||
}),
|
||||
body: JSON.stringify({ name: editName().trim(), description: editDesc().trim() }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error((err as any).message || 'Failed to update');
|
||||
}
|
||||
setEditingId('');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setEditError(err.message || 'Failed to update department');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error((err as any).message || 'Failed to update'); }
|
||||
setEditingId(''); refetch();
|
||||
} catch (err: any) { setEditError(err.message || 'Failed to update department'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
// ---------- ARCHIVE / RESTORE ----------
|
||||
const handleArchive = async (id: string) => {
|
||||
setBusy(id);
|
||||
setActionError('');
|
||||
setBusy(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_archived: true }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to archive');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to archive department');
|
||||
} finally {
|
||||
setBusy('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to archive department'); }
|
||||
finally { setBusy(''); }
|
||||
};
|
||||
|
||||
const handleRestore = async (id: string) => {
|
||||
setBusy(id);
|
||||
setActionError('');
|
||||
setBusy(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_archived: false }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to restore');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to restore department');
|
||||
} finally {
|
||||
setBusy('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to restore department'); }
|
||||
finally { setBusy(''); }
|
||||
};
|
||||
|
||||
// ---------- DELETE ----------
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Delete department "${name}"?`)) return;
|
||||
setBusy(id);
|
||||
setActionError('');
|
||||
setBusy(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
const res = await fetch(`${API}/api/admin/departments/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('Failed to delete');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to delete department');
|
||||
} finally {
|
||||
setBusy('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to delete department'); }
|
||||
finally { setBusy(''); }
|
||||
};
|
||||
|
||||
const switchTab = (t: 'active' | 'archived') => {
|
||||
setView('list'); setStatusFilter(t); setPage(1); setEditingId('');
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
{/* Header */}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Departments</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">Manage organization departments</p>
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
onClick={() => {
|
||||
setShowCreate((v) => !v);
|
||||
setCreateError('');
|
||||
}}
|
||||
>
|
||||
{showCreate() ? 'Cancel' : 'Add Department'}
|
||||
</button>
|
||||
<div class="flex flex-col -mx-6 -mt-6 min-h-full">
|
||||
|
||||
{/* ── Page header ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Departments</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Manage organization structure and units.</p>
|
||||
</div>
|
||||
|
||||
{/* ── Tab + action bar ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-10">
|
||||
<div class="flex gap-8">
|
||||
<For each={(['active', 'archived'] as const)}>
|
||||
{(t) => (
|
||||
<button
|
||||
onClick={() => switchTab(t)}
|
||||
class={`py-3 border-b-2 text-sm font-medium capitalize transition-colors ${
|
||||
view() === 'list' && statusFilter() === t
|
||||
? 'border-orange-500 text-orange-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{t} Departments
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
<Show when={view() === 'create'}>
|
||||
<button class="py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium">
|
||||
Create Department
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={view() === 'update'}>
|
||||
<button class="py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium">
|
||||
Update Department
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={view() === 'list'}>
|
||||
<button
|
||||
onClick={() => { setView('create'); setCreateError(''); setCreateName(''); setCreateDesc(''); }}
|
||||
class="flex items-center gap-2 rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#0f2a4e] shadow-sm"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add Department
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div class="flex-1">
|
||||
|
||||
{/* Create form */}
|
||||
<Show when={showCreate()}>
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm mb-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<form onSubmit={handleCreate}>
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
<Show when={view() === 'create'}>
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-6">
|
||||
<form onSubmit={handleCreate} class="grid grid-cols-1 gap-6 md:grid-cols-2 max-w-4xl">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Department Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
type="text" required
|
||||
placeholder="e.g. Engineering"
|
||||
value={createName()}
|
||||
onInput={(e) => setCreateName(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Description</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Optional description"
|
||||
value={createDesc()}
|
||||
onInput={(e) => setCreateDesc(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={createError()}>
|
||||
<p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-top:10px">{createError()}</p>
|
||||
<p class="md:col-span-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{createError()}</p>
|
||||
</Show>
|
||||
<div class="actions" style="margin-top:16px">
|
||||
<button
|
||||
type="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"
|
||||
onClick={() => {
|
||||
setShowCreate(false);
|
||||
setCreateError('');
|
||||
}}
|
||||
>
|
||||
<div class="md:col-span-2 flex justify-end gap-3 pt-2 border-t border-gray-100">
|
||||
<button type="button" onClick={() => setView('list')} class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" 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" disabled={creating()}>
|
||||
{creating() ? 'Saving...' : 'Save'}
|
||||
<button type="submit" disabled={creating()} class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
|
||||
{creating() ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</Show>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style="display:flex;gap:24px;border-bottom:1px solid #e2e8f0;margin-bottom:16px">
|
||||
<button
|
||||
class={`admin-tab${tab() === 'active' ? ' active' : ''}`}
|
||||
onClick={() => setTab('active')}
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
class={`admin-tab${tab() === 'archived' ? ' active' : ''}`}
|
||||
onClick={() => setTab('archived')}
|
||||
>
|
||||
Archived
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Action error */}
|
||||
<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" style="margin-bottom:12px">{actionError()}</div>
|
||||
</Show>
|
||||
|
||||
{/* Table */}
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding:0;overflow:hidden">
|
||||
{/* List view */}
|
||||
<Show when={view() === 'list'}>
|
||||
<div class="p-6">
|
||||
<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>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Created At</th>
|
||||
<th>Created By</th>
|
||||
<th>Created</th>
|
||||
<th>Last Updated By</th>
|
||||
<th>Last Updated At</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={departments.loading}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#64748b">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={data.loading}>
|
||||
<tr><td colspan="8" class="py-10 text-center text-sm text-slate-400">Loading…</td></tr>
|
||||
</Show>
|
||||
<Show when={!departments.loading && departments.error}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#b91c1c">
|
||||
Failed to load. Is the backend running?
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={!data.loading && data.error}>
|
||||
<tr><td colspan="8" class="py-10 text-center text-sm text-red-500">Failed to load. Is the backend running?</td></tr>
|
||||
</Show>
|
||||
<Show when={!departments.loading && !departments.error && filtered().length === 0}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#94a3b8">
|
||||
No departments found.
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={!data.loading && !data.error && filtered().length === 0}>
|
||||
<tr><td colspan="8" class="py-10 text-center text-sm text-slate-400">No departments found.</td></tr>
|
||||
</Show>
|
||||
<Show when={!departments.loading && !departments.error && filtered().length > 0}>
|
||||
<For each={filtered()}>
|
||||
{(item) => (
|
||||
<>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0f172a">{deptLabel(item)}</td>
|
||||
<td style="color:#475569">{item.description || '—'}</td>
|
||||
<td style="color:#475569">{fmtDate(item.createdAt || item.created_at)}</td>
|
||||
<tr class="group hover:bg-slate-50">
|
||||
<td class="font-mono text-xs text-slate-500">{item.departmentId || item.id.slice(0, 8)}</td>
|
||||
<td class="font-semibold text-slate-900">{deptLabel(item)}</td>
|
||||
<td class="text-slate-500">{item.description || '—'}</td>
|
||||
<td class="text-blue-600 hover:underline"><a href={`mailto:${item.createdBy}`}>{item.createdBy || '—'}</a></td>
|
||||
<td class="text-slate-500">{fmtDate(item.createdAt || item.created_at)}</td>
|
||||
<td class="text-blue-600 hover:underline"><a href={`mailto:${item.updatedBy || item.createdBy}`}>{item.updatedBy || item.createdBy || '—'}</a></td>
|
||||
<td class="text-slate-500">{fmtDate(item.updatedAt)}</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<div class="flex items-center justify-end gap-1.5">
|
||||
<Show when={!isArchived(item)}>
|
||||
<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"
|
||||
title="Edit"
|
||||
onClick={() => startEdit(item)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Edit
|
||||
<Pencil size={14} class="text-gray-600" />
|
||||
</button>
|
||||
<Show when={tab() === 'active'}>
|
||||
<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"
|
||||
title="Archive"
|
||||
disabled={busy() === item.id}
|
||||
onClick={() => handleArchive(item.id)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
{busy() === item.id ? '...' : 'Archive'}
|
||||
<Archive size={14} class="text-gray-600" />
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={tab() === 'archived'}>
|
||||
<Show when={isArchived(item)}>
|
||||
<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"
|
||||
title="Restore"
|
||||
disabled={busy() === item.id}
|
||||
onClick={() => handleRestore(item.id)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
{busy() === item.id ? '...' : 'Restore'}
|
||||
<RotateCcw size={14} class="text-green-600" />
|
||||
</button>
|
||||
</Show>
|
||||
<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"
|
||||
title="Delete"
|
||||
disabled={busy() === item.id}
|
||||
onClick={() => handleDelete(item.id, deptLabel(item))}
|
||||
class="action-btn flex items-center justify-center border-red-100 bg-red-50 hover:bg-red-100 transition-colors"
|
||||
>
|
||||
{busy() === item.id ? '...' : 'Delete'}
|
||||
<Trash2 size={14} class="text-red-600" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -372,40 +356,27 @@ export default function DepartmentPage() {
|
|||
{/* Inline edit row */}
|
||||
<Show when={editingId() === item.id}>
|
||||
<tr>
|
||||
<td colspan="4" style="background:#f8fafc;padding:16px">
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2" style="margin-bottom:10px">
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={editName()}
|
||||
onInput={(e) => setEditName(e.currentTarget.value)}
|
||||
/>
|
||||
<td colspan="8" class="bg-slate-50 px-6 py-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 max-w-2xl">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-700">Name *</label>
|
||||
<input type="text" required value={editName()} onInput={(e) => setEditName(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editDesc()}
|
||||
onInput={(e) => setEditDesc(e.currentTarget.value)}
|
||||
/>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-700">Description</label>
|
||||
<input type="text" value={editDesc()} onInput={(e) => setEditDesc(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]" />
|
||||
</div>
|
||||
</div>
|
||||
<Show when={editError()}>
|
||||
<p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:8px">{editError()}</p>
|
||||
<p class="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">{editError()}</p>
|
||||
</Show>
|
||||
<div class="actions">
|
||||
<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={cancelEdit}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
type="button"
|
||||
disabled={saving()}
|
||||
onClick={() => handleUpdate(item.id)}
|
||||
>
|
||||
{saving() ? 'Saving...' : 'Save'}
|
||||
<div class="mt-3 flex gap-2">
|
||||
<button type="button" onClick={cancelEdit} class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Cancel</button>
|
||||
<button type="button" disabled={saving()} onClick={() => handleUpdate(item.id)}
|
||||
class="rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
|
||||
{saving() ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -414,11 +385,37 @@ export default function DepartmentPage() {
|
|||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Show when={totalPages() > 1}>
|
||||
<div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4">
|
||||
<span class="text-sm text-gray-500">Page {page()} of {totalPages()}</span>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
disabled={page() === 1}
|
||||
onClick={() => setPage((p) => p - 1)}
|
||||
class="rounded-lg border border-gray-200 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 transition-colors"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
disabled={page() >= totalPages()}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
class="rounded-lg border border-gray-200 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 transition-colors"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { A } from '@solidjs/router';
|
||||
import { createResource, createSignal, createMemo, Show, For } from 'solid-js';
|
||||
import { Pencil, Archive, RotateCcw, ChevronLeft, ChevronRight } from 'lucide-solid';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
|
@ -12,30 +12,40 @@ type Department = {
|
|||
|
||||
type Designation = {
|
||||
id: string;
|
||||
designationId?: string;
|
||||
name: string;
|
||||
departmentId?: string;
|
||||
departmentName?: string;
|
||||
department?: string;
|
||||
description?: string;
|
||||
activeUsersCount?: number;
|
||||
activeJobsCount?: number;
|
||||
createdBy?: string;
|
||||
updatedBy?: string;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
is_archived?: boolean;
|
||||
status?: string;
|
||||
};
|
||||
|
||||
async function loadDesignations(): Promise<Designation[]> {
|
||||
type ViewMode = 'list' | 'create' | 'edit';
|
||||
|
||||
async function loadDesignations(params: { page: number; limit: number; status: string }): Promise<{ items: Designation[]; total: number }> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/designations`);
|
||||
const res = await fetch(`${API}/api/admin/designations?page=${params.page}&limit=${params.limit}&status=${params.status}`);
|
||||
if (!res.ok) throw new Error('Failed to load');
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : (data.designations ?? []);
|
||||
const items = Array.isArray(data) ? data : (data.designations ?? []);
|
||||
return { items, total: data.total ?? items.length };
|
||||
} catch {
|
||||
return [];
|
||||
return { items: [], total: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDepartments(): Promise<Department[]> {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments`);
|
||||
if (!res.ok) throw new Error('Failed to load');
|
||||
const res = await fetch(`${API}/api/admin/departments?status=1&limit=200`);
|
||||
if (!res.ok) throw new Error('Failed');
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : (data.departments ?? []);
|
||||
} catch {
|
||||
|
|
@ -43,14 +53,14 @@ async function loadDepartments(): Promise<Department[]> {
|
|||
}
|
||||
}
|
||||
|
||||
function deptDisplay(item: Designation): string {
|
||||
return item.departmentName || item.department || '—';
|
||||
}
|
||||
|
||||
function deptName(d: Department): string {
|
||||
return d.departmentName || d.name || d.id;
|
||||
}
|
||||
|
||||
function deptDisplay(item: Designation): string {
|
||||
return item.departmentName || item.department || '—';
|
||||
}
|
||||
|
||||
function isArchived(item: Designation): boolean {
|
||||
if (item.is_archived !== undefined) return item.is_archived;
|
||||
if (item.status !== undefined) {
|
||||
|
|
@ -60,366 +70,344 @@ function isArchived(item: Designation): boolean {
|
|||
return false;
|
||||
}
|
||||
|
||||
function fmtDate(val?: string): string {
|
||||
if (!val) return '—';
|
||||
try { return new Date(val).toLocaleDateString(); } catch { return val; }
|
||||
}
|
||||
|
||||
export default function DesignationPage() {
|
||||
const [designations, { refetch }] = createResource(loadDesignations);
|
||||
const [view, setView] = createSignal<ViewMode>('list');
|
||||
const [statusFilter, setStatusFilter] = createSignal<'active' | 'archived'>('active');
|
||||
const [page, setPage] = createSignal(1);
|
||||
const limit = 10;
|
||||
|
||||
const fetchParams = createMemo(() => ({
|
||||
page: page(),
|
||||
limit,
|
||||
status: statusFilter() === 'archived' ? 'ARCHIVED' : 'ACTIVE',
|
||||
}));
|
||||
|
||||
const [data, { refetch }] = createResource(fetchParams, loadDesignations);
|
||||
const [departments] = createResource(loadDepartments);
|
||||
|
||||
// tabs
|
||||
const [tab, setTab] = createSignal<'active' | 'archived'>('active');
|
||||
// editing
|
||||
const [editingDesignation, setEditingDesignation] = createSignal<Designation | null>(null);
|
||||
|
||||
// create form
|
||||
const [showCreate, setShowCreate] = createSignal(false);
|
||||
const [createName, setCreateName] = createSignal('');
|
||||
const [createDeptId, setCreateDeptId] = createSignal('');
|
||||
const [createDesc, setCreateDesc] = createSignal('');
|
||||
const [creating, setCreating] = createSignal(false);
|
||||
const [createError, setCreateError] = createSignal('');
|
||||
// form state (shared create/edit)
|
||||
const [formName, setFormName] = createSignal('');
|
||||
const [formDeptId, setFormDeptId] = createSignal('');
|
||||
const [formDesc, setFormDesc] = createSignal('');
|
||||
const [formLoading, setFormLoading] = createSignal(false);
|
||||
const [formError, setFormError] = createSignal('');
|
||||
|
||||
// inline edit
|
||||
const [editingId, setEditingId] = createSignal('');
|
||||
const [editName, setEditName] = createSignal('');
|
||||
const [editDeptId, setEditDeptId] = createSignal('');
|
||||
const [editDesc, setEditDesc] = createSignal('');
|
||||
const [saving, setSaving] = createSignal(false);
|
||||
const [editError, setEditError] = createSignal('');
|
||||
|
||||
// row busy / errors
|
||||
const [deleting, setDeleting] = createSignal('');
|
||||
const [busy, setBusy] = createSignal('');
|
||||
const [actionError, setActionError] = createSignal('');
|
||||
|
||||
const items = () => data()?.items ?? [];
|
||||
const total = () => data()?.total ?? 0;
|
||||
const totalPages = () => Math.ceil(total() / limit);
|
||||
|
||||
const filtered = createMemo(() => {
|
||||
const all = designations() ?? [];
|
||||
return tab() === 'archived'
|
||||
const all = items();
|
||||
return statusFilter() === 'archived'
|
||||
? all.filter((d) => isArchived(d))
|
||||
: all.filter((d) => !isArchived(d));
|
||||
});
|
||||
|
||||
// ---------- CREATE ----------
|
||||
const resetForm = () => {
|
||||
const depts = departments() ?? [];
|
||||
setFormName(''); setFormDeptId(depts[0]?.id ?? ''); setFormDesc(''); setFormError('');
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
resetForm(); setEditingDesignation(null); setView('create');
|
||||
};
|
||||
|
||||
const openEdit = (item: Designation) => {
|
||||
setEditingDesignation(item);
|
||||
setFormName(item.name); setFormDeptId(item.departmentId ?? ''); setFormDesc(item.description ?? ''); setFormError('');
|
||||
setView('edit');
|
||||
};
|
||||
|
||||
const handleCreate = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!createName().trim() || !createDeptId()) return;
|
||||
setCreating(true);
|
||||
setCreateError('');
|
||||
if (!formName().trim() || !formDeptId()) return;
|
||||
setFormLoading(true); setFormError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/designations`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: createName().trim(),
|
||||
department_id: createDeptId(),
|
||||
description: createDesc().trim(),
|
||||
}),
|
||||
body: JSON.stringify({ name: formName().trim(), department_id: formDeptId(), description: formDesc().trim() }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error((err as any).message || 'Failed to create');
|
||||
}
|
||||
setCreateName('');
|
||||
setCreateDeptId('');
|
||||
setCreateDesc('');
|
||||
setShowCreate(false);
|
||||
setTab('active');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setCreateError(err.message || 'Failed to create designation');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error((err as any).message || 'Failed to create'); }
|
||||
resetForm(); setView('list'); setStatusFilter('active'); setPage(1); refetch();
|
||||
} catch (err: any) { setFormError(err.message || 'Failed to create designation'); }
|
||||
finally { setFormLoading(false); }
|
||||
};
|
||||
|
||||
// ---------- INLINE EDIT ----------
|
||||
const startEdit = (item: Designation) => {
|
||||
setEditingId(item.id);
|
||||
setEditName(item.name);
|
||||
setEditDeptId(item.departmentId ?? '');
|
||||
setEditDesc(item.description ?? '');
|
||||
setEditError('');
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingId('');
|
||||
setEditError('');
|
||||
};
|
||||
|
||||
const handleUpdate = async (id: string) => {
|
||||
if (!editName().trim()) return;
|
||||
setSaving(true);
|
||||
setEditError('');
|
||||
const handleUpdate = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
const editing = editingDesignation();
|
||||
if (!editing || !formName().trim() || !formDeptId()) return;
|
||||
setFormLoading(true); setFormError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/designations/${id}`, {
|
||||
const res = await fetch(`${API}/api/admin/designations/${editing.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: editName().trim(),
|
||||
department_id: editDeptId(),
|
||||
description: editDesc().trim(),
|
||||
}),
|
||||
body: JSON.stringify({ name: formName().trim(), department_id: formDeptId(), description: formDesc().trim() }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error((err as any).message || 'Failed to update');
|
||||
}
|
||||
setEditingId('');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setEditError(err.message || 'Failed to update designation');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error((err as any).message || 'Failed to update'); }
|
||||
setEditingDesignation(null); setView('list'); refetch();
|
||||
} catch (err: any) { setFormError(err.message || 'Failed to update designation'); }
|
||||
finally { setFormLoading(false); }
|
||||
};
|
||||
|
||||
// ---------- DELETE ----------
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Delete designation "${name}"?`)) return;
|
||||
setDeleting(id);
|
||||
setActionError('');
|
||||
const handleArchive = async (id: string) => {
|
||||
setBusy(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/designations/${id}`, {
|
||||
method: 'DELETE',
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_archived: true }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete');
|
||||
if (!res.ok) throw new Error('Failed to archive');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to delete designation');
|
||||
} finally {
|
||||
setDeleting('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to archive designation'); }
|
||||
finally { setBusy(''); }
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
{/* Header */}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Designations</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">Manage job designations</p>
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
onClick={() => {
|
||||
setShowCreate((v) => !v);
|
||||
setCreateError('');
|
||||
// Pre-select first department when opening
|
||||
const depts = departments() ?? [];
|
||||
if (!createDeptId() && depts.length > 0) setCreateDeptId(depts[0].id);
|
||||
}}
|
||||
>
|
||||
{showCreate() ? 'Cancel' : 'Add Designation'}
|
||||
</button>
|
||||
</div>
|
||||
const handleRestore = async (id: string) => {
|
||||
setBusy(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/designations/${id}`, {
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_archived: false }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to restore');
|
||||
refetch();
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to restore designation'); }
|
||||
finally { setBusy(''); }
|
||||
};
|
||||
|
||||
{/* Create form */}
|
||||
<Show when={showCreate()}>
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm mb-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<form onSubmit={handleCreate}>
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
const FormContent = () => {
|
||||
const depts = () => departments() ?? [];
|
||||
return (
|
||||
<form onSubmit={view() === 'create' ? handleCreate : handleUpdate} class="max-w-4xl space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Designation Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="e.g. Senior Engineer"
|
||||
value={createName()}
|
||||
onInput={(e) => setCreateName(e.currentTarget.value)}
|
||||
type="text" required
|
||||
value={formName()}
|
||||
onInput={(e) => setFormName(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Department *</label>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Department *</label>
|
||||
<select
|
||||
required
|
||||
value={createDeptId()}
|
||||
onChange={(e) => setCreateDeptId(e.currentTarget.value)}
|
||||
value={formDeptId()}
|
||||
onChange={(e) => setFormDeptId(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]"
|
||||
>
|
||||
<option value="">Select a department...</option>
|
||||
<Show when={departments.loading}>
|
||||
<option disabled>Loading departments...</option>
|
||||
<Show when={depts().length === 0}>
|
||||
<option value="" disabled>No active departments found</option>
|
||||
</Show>
|
||||
<For each={departments() ?? []}>
|
||||
<For each={depts()}>
|
||||
{(d) => <option value={d.id}>{deptName(d)}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field" style="grid-column:1/-1">
|
||||
<label>Description</label>
|
||||
<div class="md:col-span-2">
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Description</label>
|
||||
<textarea
|
||||
placeholder="Optional description"
|
||||
rows="3"
|
||||
value={createDesc()}
|
||||
onInput={(e) => setCreateDesc(e.currentTarget.value)}
|
||||
rows="4"
|
||||
value={formDesc()}
|
||||
onInput={(e) => setFormDesc(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={createError()}>
|
||||
<p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-top:10px">{createError()}</p>
|
||||
<Show when={formError()}>
|
||||
<p class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{formError()}</p>
|
||||
</Show>
|
||||
<div class="actions" style="margin-top:16px">
|
||||
<button
|
||||
type="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"
|
||||
onClick={() => {
|
||||
setShowCreate(false);
|
||||
setCreateError('');
|
||||
}}
|
||||
>
|
||||
<div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
|
||||
<button type="button" onClick={() => { setView('list'); setEditingDesignation(null); }}
|
||||
class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
disabled={creating() || (departments() ?? []).length === 0}
|
||||
>
|
||||
{creating() ? 'Saving...' : 'Save'}
|
||||
<button type="submit" disabled={formLoading() || depts().length === 0}
|
||||
class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
|
||||
{formLoading() ? (view() === 'create' ? 'Creating…' : 'Updating…') : (view() === 'create' ? 'Create Designation' : 'Update Designation')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
{/* Tabs */}
|
||||
<div style="display:flex;gap:24px;border-bottom:1px solid #e2e8f0;margin-bottom:16px">
|
||||
<button
|
||||
class={`admin-tab${tab() === 'active' ? ' active' : ''}`}
|
||||
onClick={() => setTab('active')}
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
class={`admin-tab${tab() === 'archived' ? ' active' : ''}`}
|
||||
onClick={() => setTab('archived')}
|
||||
>
|
||||
Archived
|
||||
</button>
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="flex flex-col -mx-6 -mt-6 min-h-full">
|
||||
|
||||
{/* ── Page header ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Designations</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Manage job titles and roles within departments.</p>
|
||||
</div>
|
||||
|
||||
{/* Action error */}
|
||||
<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" style="margin-bottom:12px">{actionError()}</div>
|
||||
{/* ── Tab + action bar ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-10">
|
||||
<div class="flex gap-8">
|
||||
<button
|
||||
onClick={() => { setView('list'); setEditingDesignation(null); }}
|
||||
class={`py-3 border-b-2 text-sm font-medium transition-colors ${
|
||||
view() === 'list' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Designations List
|
||||
</button>
|
||||
<button
|
||||
onClick={openCreate}
|
||||
class={`py-3 border-b-2 text-sm font-medium transition-colors ${
|
||||
view() === 'create' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Add Designation
|
||||
</button>
|
||||
<Show when={view() === 'edit' && editingDesignation()}>
|
||||
<button class="py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium">
|
||||
Edit: {editingDesignation()?.name}
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Status filter — only in list view */}
|
||||
<Show when={view() === 'list'}>
|
||||
<select
|
||||
value={statusFilter()}
|
||||
onChange={(e) => { setStatusFilter(e.currentTarget.value as 'active' | 'archived'); setPage(1); }}
|
||||
class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
|
||||
>
|
||||
<option value="active">Active</option>
|
||||
<option value="archived">Archived</option>
|
||||
</select>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div class="flex-1">
|
||||
|
||||
{/* Create / Edit form */}
|
||||
<Show when={view() === 'create' || view() === 'edit'}>
|
||||
<div class="bg-white px-6 py-6 border-b border-gray-100">
|
||||
<FormContent />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Table */}
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding:0;overflow:hidden">
|
||||
{/* List */}
|
||||
<Show when={view() === 'list'}>
|
||||
<div class="p-6">
|
||||
<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>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Department</th>
|
||||
<th>Description</th>
|
||||
<th>Active Users</th>
|
||||
<th>Active Jobs</th>
|
||||
<th>Status</th>
|
||||
<th>Created By</th>
|
||||
<th>Created At</th>
|
||||
<th>Last Updated By</th>
|
||||
<th>Last Updated At</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={designations.loading}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#64748b">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={data.loading}>
|
||||
<tr><td colspan="12" class="py-10 text-center text-sm text-slate-400">Loading…</td></tr>
|
||||
</Show>
|
||||
<Show when={!designations.loading && designations.error}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#b91c1c">
|
||||
Failed to load. Is the backend running?
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={!data.loading && data.error}>
|
||||
<tr><td colspan="12" class="py-10 text-center text-sm text-red-500">Failed to load. Is the backend running?</td></tr>
|
||||
</Show>
|
||||
<Show when={!designations.loading && !designations.error && filtered().length === 0}>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align:center;padding:32px;color:#94a3b8">
|
||||
No designations found.
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={!data.loading && !data.error && filtered().length === 0}>
|
||||
<tr><td colspan="12" class="py-10 text-center text-sm text-slate-400">No designations found.</td></tr>
|
||||
</Show>
|
||||
<Show when={!designations.loading && !designations.error && filtered().length > 0}>
|
||||
<For each={filtered()}>
|
||||
{(item) => (
|
||||
<>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0f172a">{item.name}</td>
|
||||
<td style="color:#475569">{deptDisplay(item)}</td>
|
||||
<td style="color:#475569">{item.description || '—'}</td>
|
||||
{(item) => {
|
||||
const archived = () => isArchived(item);
|
||||
return (
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="font-mono text-xs text-slate-500">{(item.designationId || item.id).slice(0, 16)}</td>
|
||||
<td class="font-semibold text-slate-900">{item.name}</td>
|
||||
<td class="text-slate-500">{deptDisplay(item)}</td>
|
||||
<td class="text-slate-500 max-w-xs truncate" title={item.description}>{item.description || '—'}</td>
|
||||
<td class="text-slate-500">{item.activeUsersCount ?? 0}</td>
|
||||
<td class="text-slate-500">{item.activeJobsCount ?? 0}</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<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"
|
||||
onClick={() => startEdit(item)}
|
||||
>
|
||||
Edit
|
||||
<span class={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${archived() ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}`}>
|
||||
{archived() ? 'ARCHIVED' : 'ACTIVE'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-blue-600 hover:underline"><a href={`mailto:${item.createdBy}`}>{item.createdBy || '—'}</a></td>
|
||||
<td class="text-slate-500">{fmtDate(item.createdAt)}</td>
|
||||
<td class="text-blue-600 hover:underline"><a href={`mailto:${item.updatedBy}`}>{item.updatedBy || '—'}</a></td>
|
||||
<td class="text-slate-500">{fmtDate(item.updatedAt)}</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-1.5">
|
||||
<button title="Edit" onClick={() => openEdit(item)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Pencil size={14} class="text-gray-600" />
|
||||
</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"
|
||||
disabled={deleting() === item.id}
|
||||
onClick={() => handleDelete(item.id, item.name)}
|
||||
>
|
||||
{deleting() === item.id ? '...' : 'Delete'}
|
||||
<Show when={!archived()}>
|
||||
<button title="Archive" disabled={busy() === item.id} onClick={() => handleArchive(item.id)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Archive size={14} class="text-gray-600" />
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={archived()}>
|
||||
<button title="Restore" disabled={busy() === item.id} onClick={() => handleRestore(item.id)}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<RotateCcw size={14} class="text-green-600" />
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Inline edit row */}
|
||||
<Show when={editingId() === item.id}>
|
||||
<tr>
|
||||
<td colspan="4" style="background:#f8fafc;padding:16px">
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2" style="margin-bottom:10px">
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={editName()}
|
||||
onInput={(e) => setEditName(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Department</label>
|
||||
<select
|
||||
value={editDeptId()}
|
||||
onChange={(e) => setEditDeptId(e.currentTarget.value)}
|
||||
>
|
||||
<option value="">Select a department...</option>
|
||||
<For each={departments() ?? []}>
|
||||
{(d) => (
|
||||
<option value={d.id}>{deptName(d)}</option>
|
||||
)}
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field" style="grid-column:1/-1">
|
||||
<label>Description</label>
|
||||
<textarea
|
||||
rows="3"
|
||||
value={editDesc()}
|
||||
onInput={(e) => setEditDesc(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={editError()}>
|
||||
<p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:8px">{editError()}</p>
|
||||
</Show>
|
||||
<div class="actions">
|
||||
<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={cancelEdit}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
type="button"
|
||||
disabled={saving()}
|
||||
onClick={() => handleUpdate(item.id)}
|
||||
>
|
||||
{saving() ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Show when={totalPages() > 1}>
|
||||
<div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4">
|
||||
<span class="text-sm text-gray-500">Page {page()} of {totalPages()}</span>
|
||||
<div class="flex gap-2">
|
||||
<button disabled={page() === 1} onClick={() => setPage((p) => p - 1)}
|
||||
class="rounded-lg border border-gray-200 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 transition-colors">
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<button disabled={page() >= totalPages()} onClick={() => setPage((p) => p + 1)}
|
||||
class="rounded-lg border border-gray-200 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 transition-colors">
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { A, useNavigate, useSearchParams } from '@solidjs/router';
|
||||
import { A } from '@solidjs/router';
|
||||
import { createResource, createSignal, Show, For, onMount } from 'solid-js';
|
||||
import { Pencil, Trash2, UserCheck, UserX } from 'lucide-solid';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
|
@ -58,161 +59,156 @@ function isActive(e: Employee): boolean {
|
|||
return s === 'ACTIVE' || s === 'TRUE' || s === '1';
|
||||
}
|
||||
|
||||
type EmployeesPageProps = {
|
||||
initialView?: 'list' | 'create';
|
||||
};
|
||||
|
||||
export default function EmployeesPage(props: EmployeesPageProps = {}) {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
export default function EmployeesPage() {
|
||||
const [employees, { refetch }] = createResource(loadEmployees);
|
||||
const [roles] = createResource(loadRoles);
|
||||
const [view, setView] = createSignal<'list' | 'create'>('list');
|
||||
|
||||
// tabs: list | create
|
||||
const [view, setView] = createSignal<'list' | 'create'>(props.initialView || 'list');
|
||||
|
||||
onMount(() => {
|
||||
if (searchParams.tab === 'create') {
|
||||
setView('create');
|
||||
}
|
||||
});
|
||||
|
||||
// create form fields
|
||||
// create form
|
||||
const [formName, setFormName] = createSignal('');
|
||||
const [formEmail, setFormEmail] = createSignal('');
|
||||
const [formPassword, setFormPassword] = createSignal('');
|
||||
const [formRoleId, setFormRoleId] = createSignal('');
|
||||
const [creating, setCreating] = createSignal(false);
|
||||
const [createError, setCreateError] = createSignal('');
|
||||
const [createSuccess, setCreateSuccess] = createSignal('');
|
||||
|
||||
// row actions
|
||||
const [deleting, setDeleting] = createSignal('');
|
||||
const [toggling, setToggling] = createSignal('');
|
||||
const [deleting, setDeleting] = createSignal('');
|
||||
const [actionError, setActionError] = createSignal('');
|
||||
|
||||
const resetCreateForm = () => {
|
||||
setFormName('');
|
||||
setFormEmail('');
|
||||
setFormPassword('');
|
||||
setFormRoleId('');
|
||||
setCreateError('');
|
||||
setCreateSuccess('');
|
||||
const resetForm = () => {
|
||||
setFormName(''); setFormEmail(''); setFormPassword(''); setFormRoleId(''); setCreateError('');
|
||||
};
|
||||
|
||||
// ---------- CREATE ----------
|
||||
const handleCreate = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!formName().trim() || !formEmail().trim() || !formPassword().trim()) return;
|
||||
setCreating(true);
|
||||
setCreateError('');
|
||||
setCreateSuccess('');
|
||||
setCreating(true); setCreateError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/employees`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: formName().trim(),
|
||||
email: formEmail().trim(),
|
||||
password: formPassword(),
|
||||
role_id: formRoleId() || undefined,
|
||||
}),
|
||||
body: JSON.stringify({ name: formName().trim(), email: formEmail().trim(), password: formPassword(), role_id: formRoleId() || undefined }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error((err as any).message || 'Failed to create');
|
||||
}
|
||||
setCreateSuccess('Internal user created successfully.');
|
||||
resetCreateForm();
|
||||
setView('list');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setCreateError(err.message || 'Failed to create internal user');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error((err as any).message || 'Failed to create'); }
|
||||
resetForm(); setView('list'); refetch();
|
||||
} catch (err: any) { setCreateError(err.message || 'Failed to create internal user'); }
|
||||
finally { setCreating(false); }
|
||||
};
|
||||
|
||||
// ---------- TOGGLE STATUS ----------
|
||||
const handleToggleStatus = async (id: string, current: boolean) => {
|
||||
setToggling(id);
|
||||
setActionError('');
|
||||
setToggling(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/employees/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_active: !current }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update status');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to update status');
|
||||
} finally {
|
||||
setToggling('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to update status'); }
|
||||
finally { setToggling(''); }
|
||||
};
|
||||
|
||||
// ---------- DELETE ----------
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Delete internal user "${name}"?`)) return;
|
||||
setDeleting(id);
|
||||
setActionError('');
|
||||
setDeleting(id); setActionError('');
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/employees/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
const res = await fetch(`${API}/api/admin/employees/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('Failed to delete');
|
||||
refetch();
|
||||
} catch (err: any) {
|
||||
setActionError(err.message || 'Failed to delete internal user');
|
||||
} finally {
|
||||
setDeleting('');
|
||||
}
|
||||
} catch (err: any) { setActionError(err.message || 'Failed to delete internal user'); }
|
||||
finally { setDeleting(''); }
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
{/* Header */}
|
||||
<div class="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Internal User Management</h1>
|
||||
</div>
|
||||
<div class="flex flex-col -mx-6 -mt-6 min-h-full">
|
||||
|
||||
{/* ── Page header ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Internal User Management</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Manage internal team members and their access.</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style="display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:24px;gap:0;overflow-x:auto;">
|
||||
{/* ── Tab bar ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-10">
|
||||
<div class="flex gap-8">
|
||||
<button
|
||||
class={`admin-tab${view() === 'list' ? ' active' : ''}`}
|
||||
onClick={() => setView('list')}
|
||||
class={`py-3 border-b-2 text-sm font-medium transition-colors ${view() === 'list' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
|
||||
>
|
||||
View Internal Users
|
||||
</button>
|
||||
<button
|
||||
class={`admin-tab${view() === 'create' ? ' active' : ''}`}
|
||||
onClick={() => {
|
||||
resetCreateForm();
|
||||
setView('create');
|
||||
}}
|
||||
onClick={() => { resetForm(); setView('create'); }}
|
||||
class={`py-3 border-b-2 text-sm font-medium transition-colors ${view() === 'create' ? 'border-orange-500 text-orange-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
|
||||
>
|
||||
Add Internal User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success notice (shown briefly after create) */}
|
||||
<Show when={createSuccess()}>
|
||||
<div class="notice" style="margin-bottom:12px">{createSuccess()}</div>
|
||||
{/* ── Content ── */}
|
||||
<div class="flex-1">
|
||||
|
||||
{/* Create form */}
|
||||
<Show when={view() === 'create'}>
|
||||
<div class="bg-white border-b border-gray-100 px-6 py-6">
|
||||
<form onSubmit={handleCreate} class="max-w-4xl space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Full Name *</label>
|
||||
<input type="text" required placeholder="e.g. John Doe" value={formName()} onInput={(e) => setFormName(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Email *</label>
|
||||
<input type="email" required placeholder="e.g. john@company.com" value={formEmail()} onInput={(e) => setFormEmail(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Password *</label>
|
||||
<input type="password" required placeholder="Set a password" value={formPassword()} onInput={(e) => setFormPassword(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700">Role</label>
|
||||
<select value={formRoleId()} onChange={(e) => setFormRoleId(e.currentTarget.value)}
|
||||
class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]">
|
||||
<option value="">Select a role…</option>
|
||||
<Show when={roles.loading}><option disabled>Loading roles…</option></Show>
|
||||
<For each={roles() ?? []}>{(r) => <option value={r.id}>{r.name}</option>}</For>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={createError()}>
|
||||
<p class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{createError()}</p>
|
||||
</Show>
|
||||
<div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
|
||||
<button type="button" onClick={() => { resetForm(); setView('list'); }}
|
||||
class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={creating()}
|
||||
class="rounded-lg bg-[#0a1d37] px-6 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors disabled:opacity-60">
|
||||
{creating() ? 'Creating…' : 'Create Internal User'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* ===== LIST VIEW ===== */}
|
||||
{/* List */}
|
||||
<Show when={view() === 'list'}>
|
||||
<div class="p-6">
|
||||
<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" style="margin-bottom:12px">{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>
|
||||
|
||||
<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">
|
||||
<table class="w-full text-sm">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
@ -224,141 +220,65 @@ export default function EmployeesPage(props: EmployeesPageProps = {}) {
|
|||
</thead>
|
||||
<tbody>
|
||||
<Show when={employees.loading}>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align:center;padding:32px;color:#64748b">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="5" class="py-10 text-center text-sm text-slate-400">Loading…</td></tr>
|
||||
</Show>
|
||||
<Show when={!employees.loading && employees.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="py-10 text-center text-sm text-red-500">Failed to load. Is the backend running?</td></tr>
|
||||
</Show>
|
||||
<Show when={!employees.loading && !employees.error && (employees()?.length ?? 0) === 0}>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align:center;padding:32px;color:#94a3b8">
|
||||
No internal users found.
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="5" class="py-10 text-center text-sm text-slate-400">No internal users found.</td></tr>
|
||||
</Show>
|
||||
<Show when={!employees.loading && !employees.error && (employees()?.length ?? 0) > 0}>
|
||||
<For each={employees()}>
|
||||
{(item) => (
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0f172a">{employeeName(item)}</td>
|
||||
<td style="color:#475569">{item.email}</td>
|
||||
<td style="color:#475569">{roleName(item)}</td>
|
||||
{(item) => {
|
||||
const active = () => isActive(item);
|
||||
return (
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="font-semibold text-slate-900">{employeeName(item)}</td>
|
||||
<td class="text-slate-500">{item.email}</td>
|
||||
<td class="text-slate-500">{roleName(item)}</td>
|
||||
<td>
|
||||
<span class={`inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600${isActive(item) ? ' active' : ''}`}>
|
||||
{isActive(item) ? 'ACTIVE' : 'INACTIVE'}
|
||||
<span class={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${active() ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-700'}`}>
|
||||
{active() ? 'ACTIVE' : 'INACTIVE'}
|
||||
</span>
|
||||
</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/employees/${item.id}/edit`}>
|
||||
Edit
|
||||
<div class="flex items-center justify-end gap-1.5">
|
||||
<A href={`/admin/employees/${item.id}/edit`}
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors" title="Edit">
|
||||
<Pencil size={14} class="text-gray-600" />
|
||||
</A>
|
||||
<button
|
||||
class={isActive(item) ? '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' : 'inline-flex items-center rounded-lg bg-[#fd6216] px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors'}
|
||||
title={active() ? 'Deactivate' : 'Activate'}
|
||||
disabled={toggling() === item.id}
|
||||
onClick={() => handleToggleStatus(item.id, isActive(item))}
|
||||
onClick={() => handleToggleStatus(item.id, active())}
|
||||
class={`action-btn flex items-center justify-center transition-colors ${active() ? 'border-red-100 bg-red-50 hover:bg-red-100' : 'hover:bg-green-50 border-green-100 bg-green-50'}`}
|
||||
>
|
||||
{toggling() === item.id ? '...' : isActive(item) ? 'Deactivate' : 'Activate'}
|
||||
<Show when={active()} fallback={<UserCheck size={14} class="text-green-600" />}>
|
||||
<UserX size={14} class="text-red-600" />
|
||||
</Show>
|
||||
</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"
|
||||
title="Delete"
|
||||
disabled={deleting() === item.id}
|
||||
onClick={() => handleDelete(item.id, employeeName(item))}
|
||||
class="action-btn flex items-center justify-center border-red-100 bg-red-50 hover:bg-red-100 transition-colors"
|
||||
>
|
||||
{deleting() === item.id ? '...' : 'Delete'}
|
||||
<Trash2 size={14} class="text-red-600" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* ===== CREATE VIEW ===== */}
|
||||
<Show when={view() === 'create'}>
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm mb-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<form onSubmit={handleCreate}>
|
||||
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="field">
|
||||
<label>Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="e.g. John Doe"
|
||||
value={formName()}
|
||||
onInput={(e) => setFormName(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="e.g. john@company.com"
|
||||
value={formEmail()}
|
||||
onInput={(e) => setFormEmail(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Password *</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
placeholder="Set a password"
|
||||
value={formPassword()}
|
||||
onInput={(e) => setFormPassword(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Role</label>
|
||||
<select
|
||||
value={formRoleId()}
|
||||
onChange={(e) => setFormRoleId(e.currentTarget.value)}
|
||||
>
|
||||
<option value="">Select a role...</option>
|
||||
<Show when={roles.loading}>
|
||||
<option disabled>Loading roles...</option>
|
||||
</Show>
|
||||
<For each={roles() ?? []}>
|
||||
{(r) => <option value={r.id}>{r.name}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={createError()}>
|
||||
<p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-top:10px">{createError()}</p>
|
||||
</Show>
|
||||
<div class="actions" style="margin-top:16px">
|
||||
<button
|
||||
type="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"
|
||||
onClick={() => {
|
||||
resetCreateForm();
|
||||
setView('list');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" 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" disabled={creating()}>
|
||||
{creating() ? 'Creating...' : 'Create Internal User'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</Show>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { A } from '@solidjs/router';
|
||||
import { createResource, createSignal, Show } from 'solid-js';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { Eye, Pencil, Trash2 } from 'lucide-solid';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
|
|
@ -36,9 +36,8 @@ export default function InternalRolesPage() {
|
|||
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Delete role "${name}"? This cannot be undone.`)) return;
|
||||
setDeleting(id); setDeleteError('');
|
||||
try {
|
||||
setDeleting(id);
|
||||
setDeleteError('');
|
||||
const res = await fetch(`${API}/api/admin/roles/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('Failed to delete role');
|
||||
refetch();
|
||||
|
|
@ -51,93 +50,101 @@ export default function InternalRolesPage() {
|
|||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="mb-8">
|
||||
<h1 class="text-[52px] font-extrabold tracking-tight text-[#071b3d] sm:text-[36px] lg:text-[52px]">Roles Management</h1>
|
||||
<p class="mt-2 text-[17px] text-[#4b5563]">Configure and maintain internal system roles and access privileges.</p>
|
||||
<div class="flex flex-col -mx-6 -mt-6 min-h-full">
|
||||
|
||||
{/* ── Page header ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Internal Role Management</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Manage internal employee roles and permissions.</p>
|
||||
</div>
|
||||
|
||||
<nav class="hidden" aria-label="Role Management Navigation">
|
||||
<A class="hidden" href="/admin/roles">Internal Roles</A>
|
||||
<A class="hidden" href="/admin/runtime-roles">External Runtime Roles</A>
|
||||
<A class="hidden" href="/admin/onboarding-schemas">Onboarding Schemas</A>
|
||||
</nav>
|
||||
{/* ── Tab bar ── */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-10">
|
||||
<div class="flex gap-8">
|
||||
<A href="/admin/roles"
|
||||
class="py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium">
|
||||
Roles
|
||||
</A>
|
||||
<A href="/admin/roles/create"
|
||||
class="py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||
Create Role
|
||||
</A>
|
||||
<A href="/admin/roles/templates"
|
||||
class="py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||
View Roles
|
||||
</A>
|
||||
</div>
|
||||
<A
|
||||
href="/admin/roles/create"
|
||||
class="flex items-center gap-2 rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#0f2a4e] shadow-sm"
|
||||
>
|
||||
Create Internal Role
|
||||
</A>
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div class="p-6">
|
||||
<Show when={deleteError()}>
|
||||
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{deleteError()}</div>
|
||||
</Show>
|
||||
|
||||
<section class="overflow-hidden rounded-[22px] border border-[#d8dbe5] bg-white shadow-[0_14px_28px_-20px_rgba(15,23,42,0.35)]">
|
||||
<div class="table-card">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full min-w-[860px] text-sm">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-[#071b3d] text-white">
|
||||
<th class="px-8 py-5 text-left text-[14px] font-semibold uppercase tracking-[0.08em]">ID</th>
|
||||
<th class="px-8 py-5 text-left text-[14px] font-semibold uppercase tracking-[0.08em]">Name</th>
|
||||
<th class="px-8 py-5 text-left text-[14px] font-semibold uppercase tracking-[0.08em]">Issue Type</th>
|
||||
<th class="px-8 py-5 text-center text-[14px] font-semibold uppercase tracking-[0.08em]">Edit</th>
|
||||
<th class="px-8 py-5 text-center text-[14px] font-semibold uppercase tracking-[0.08em]">Delete</th>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={roles.loading}>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align:center;padding:32px;color:#64748b;">Loading internal roles...</td>
|
||||
</tr>
|
||||
<tr><td colspan="3" class="py-10 text-center text-sm text-slate-400">Loading internal roles…</td></tr>
|
||||
</Show>
|
||||
<Show when={!roles.loading && roles.error}>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align:center;padding:32px;color:#b91c1c;">Failed to load roles. Is the backend running?</td>
|
||||
</tr>
|
||||
<tr><td colspan="3" class="py-10 text-center text-sm text-red-500">Failed to load roles. Is the backend running?</td></tr>
|
||||
</Show>
|
||||
<Show when={!roles.loading && !roles.error && roles()?.length === 0}>
|
||||
<tr>
|
||||
<td colspan="5" style="text-align:center;padding:32px;color:#94a3b8;">No internal roles found. Create your first role.</td>
|
||||
</tr>
|
||||
<Show when={!roles.loading && !roles.error && (roles()?.length ?? 0) === 0}>
|
||||
<tr><td colspan="3" class="py-10 text-center text-sm text-slate-400">No internal roles found. Create your first role.</td></tr>
|
||||
</Show>
|
||||
<Show when={!roles.loading && !roles.error && (roles()?.length ?? 0) > 0}>
|
||||
{roles()!.map((role) => (
|
||||
<tr class="border-b border-[#e4e7ef] text-[17px]">
|
||||
<td class="px-8 py-7 font-medium text-[#364152]">{role.code || role.id?.slice(0, 6).toUpperCase() || 'ROL247'}</td>
|
||||
<td class="px-8 py-7 font-semibold text-[#0f172a]">{role.name}</td>
|
||||
<td class="px-8 py-7">
|
||||
<A class="inline-flex items-center gap-2 font-semibold text-[#fd6216] hover:text-orange-700" href={`/admin/roles/${role.id}`} title="View Role" aria-label={`View ${role.name}`}>
|
||||
<span>View</span>
|
||||
<Eye size={16} />
|
||||
</A>
|
||||
<For each={roles()}>
|
||||
{(role) => (
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td>
|
||||
<p class="font-medium text-gray-900">{role.name}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-500">{role.code || role.id?.slice(0, 8) || '—'}</p>
|
||||
</td>
|
||||
<td class="px-8 py-7 text-center">
|
||||
<A class="inline-flex h-9 w-9 items-center justify-center rounded-md text-[#071b3d] hover:bg-slate-100" href={`/admin/roles/${role.id}/edit`} title="Edit Role" aria-label={`Edit ${role.name}`}>
|
||||
<Pencil size={17} />
|
||||
<td class="text-slate-600">{role.description || 'No description added yet.'}</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<A href={`/admin/roles/${role.id}`} title="View Role"
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Eye size={14} class="text-gray-600" />
|
||||
</A>
|
||||
<A href={`/admin/roles/${role.id}/edit`} title="Edit Role"
|
||||
class="action-btn flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||
<Pencil size={14} class="text-gray-600" />
|
||||
</A>
|
||||
</td>
|
||||
<td class="px-8 py-7 text-center">
|
||||
<button
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md text-[#c81e1e] hover:bg-red-50 disabled:opacity-60"
|
||||
title="Delete Role"
|
||||
disabled={deleting() === role.id}
|
||||
onClick={() => handleDelete(role.id, role.name)}
|
||||
title="Delete Role"
|
||||
aria-label={`Delete ${role.name}`}
|
||||
class="action-btn flex items-center justify-center border-red-100 bg-red-50 hover:bg-red-100 transition-colors"
|
||||
>
|
||||
{deleting() === role.id ? '...' : <Trash2 size={17} />}
|
||||
<Trash2 size={14} class="text-red-600" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-[#e4e7ef] px-8 py-5">
|
||||
<p class="text-[14px] font-semibold uppercase tracking-[0.1em] text-[#485163]">Showing 1 to 5 of {(roles()?.length || 0) || 5} entries</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="h-11 min-w-11 rounded-xl border border-[#d4d8e2] bg-white px-3 text-[#111827]">{'<'}</button>
|
||||
<button class="h-11 min-w-11 rounded-xl bg-[#fd6216] px-3 font-bold text-white">1</button>
|
||||
<button class="h-11 min-w-11 rounded-xl border border-[#d4d8e2] bg-white px-3 font-bold text-[#111827]">2</button>
|
||||
<button class="h-11 min-w-11 rounded-xl border border-[#d4d8e2] bg-white px-3 font-bold text-[#111827]">3</button>
|
||||
<button class="h-11 min-w-11 rounded-xl border border-[#d4d8e2] bg-white px-3 text-[#111827]">{'>'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue