import { For, Show, createMemo, createSignal, onMount } from 'solid-js'; import AdminShell from '~/components/AdminShell'; import { createModuleRecord, deleteModuleRecord, listModuleRecords, updateModuleRecord } from '~/lib/admin/client'; import type { CrudRecord } from '~/lib/admin/types'; type DepartmentRecord = CrudRecord & { code?: string; description?: string; totalEmployees?: number; createdDate?: string; departmentHead?: string; departmentEmail?: string; }; const FALLBACK_DEPARTMENTS: DepartmentRecord[] = [ { id: 'd1', name: 'Marketing', code: 'MKT-002', description: 'Brand management and digital marketing', totalEmployees: 23, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd2', name: 'Human Resources', code: 'HR-003', description: 'Employee relations and talent acquisition', totalEmployees: 12, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd3', name: 'Finance', code: 'FIN-004', description: 'Financial planning and accounting', totalEmployees: 18, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd4', name: 'Operations', code: 'OPS-005', description: 'Business operations and process management', totalEmployees: 31, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd5', name: 'Customer Success', code: 'CS-006', description: 'Client support and relationship management', totalEmployees: 27, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd6', name: 'Product', code: 'PRD-007', description: 'Product strategy and development', totalEmployees: 19, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd7', name: 'Sales', code: 'SAL-008', description: 'Revenue generation and client acquisition', totalEmployees: 34, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'd8', name: 'Engineering', code: 'ENG-001', description: 'Software development and technical architecture', totalEmployees: 45, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, ]; export default function DepartmentManagementPage() { const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all'); const [createTab, setCreateTab] = createSignal<'general' | 'settings' | 'permissions'>('general'); const [search, setSearch] = createSignal(''); const [rows, setRows] = createSignal([]); const [openMenuId, setOpenMenuId] = createSignal(null); const [editingId, setEditingId] = createSignal(null); const [name, setName] = createSignal(''); const [code, setCode] = createSignal(''); const [description, setDescription] = createSignal(''); const [departmentHead, setDepartmentHead] = createSignal(''); const [departmentEmail, setDepartmentEmail] = createSignal(''); const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE'); const [transfersEnabled, setTransfersEnabled] = createSignal(false); const load = async () => { try { const res = await fetch(`/api/gateway/api/admin/departments?page=1&limit=100&q=${encodeURIComponent(search().trim())}`); if (res.ok) { const payload = await res.json().catch(() => null); const list = Array.isArray(payload) ? payload : Array.isArray(payload?.data) ? payload.data : Array.isArray(payload?.items) ? payload.items : []; if (list.length > 0) { setRows( list.map((item: any, i: number) => ({ id: String(item.id ?? item.department_id ?? `dep-${i + 1}`), name: String(item.name ?? item.department_name ?? ''), code: String(item.code ?? item.department_code ?? ''), description: String(item.description ?? ''), totalEmployees: Number(item.totalEmployees ?? item.total_employees ?? item.employee_count ?? 0), status: String(item.status ?? 'ACTIVE').toUpperCase() === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE', updatedAt: String(item.updatedAt ?? item.updated_at ?? new Date().toISOString().slice(0, 10)), createdDate: String(item.createdDate ?? item.created_at ?? new Date().toISOString().slice(0, 10)), })), ); return; } } } catch {} try { const data = await listModuleRecords('department', { q: search().trim() || undefined }); setRows(Array.isArray(data) && data.length > 0 ? data : FALLBACK_DEPARTMENTS); } catch { setRows(FALLBACK_DEPARTMENTS); } }; onMount(() => void load()); const resetForm = () => { setEditingId(null); setName(''); setCode(''); setDescription(''); setDepartmentHead(''); setDepartmentEmail(''); setStatus('ACTIVE'); setTransfersEnabled(false); setCreateTab('general'); }; const openCreate = () => { resetForm(); setMainTab('create'); }; const openEdit = (row: DepartmentRecord) => { setEditingId(row.id); setName(row.name || ''); setCode(String(row.code || '')); setDescription(String(row.description || '')); setDepartmentHead(String(row.departmentHead || '')); setDepartmentEmail(String(row.departmentEmail || '')); setStatus(row.status === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE'); setMainTab('create'); setCreateTab('general'); }; const saveDepartment = async () => { const payload: Partial = { name: name().trim() || 'New Department', code: code().trim() || undefined, description: description().trim(), departmentHead: departmentHead().trim(), departmentEmail: departmentEmail().trim(), status: status(), transfersEnabled: transfersEnabled(), }; if (editingId()) { await updateModuleRecord('department', editingId()!, payload); } else { await createModuleRecord('department', payload); } setMainTab('all'); setOpenMenuId(null); resetForm(); await load(); }; const filteredRows = createMemo(() => rows() ?? []); const permissionGroups = [ { title: 'Employee Management', items: ['View Employees', 'Create Employees', 'Edit Employees', 'Delete Employees'], }, { title: 'Role Management', items: ['View Roles', 'Assign Roles'], }, { title: 'Department Settings', items: ['Manage Department Settings'], }, ]; const formatDate = (value?: string) => { const input = value || ''; if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input; const fallback = input || new Date().toISOString().slice(0, 10); return fallback.slice(0, 10); }; return (

Department Management

Manage all departments and organizational structure

{(row) => ( )}
DEPARTMENT NAME DEPARTMENT CODE DESCRIPTION TOTAL EMPLOYEES STATUS CREATED DATE ACTIONS
{row.name} {String(row.code || '')} {String(row.description || '')} {Number(row.totalEmployees || 0)} {row.status === 'ACTIVE' ? 'Active' : 'Inactive'} {formatDate(String(row.createdDate || row.updatedAt || ''))}

Showing 1-{rows().length} of {rows().length} departments