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 DesignationRecord = CrudRecord & { code?: string; department?: string; level?: string; description?: string; totalEmployees?: number; createdDate?: string; canManageTeam?: boolean; canApprove?: boolean; }; const FALLBACK_DESIGNATIONS: DesignationRecord[] = [ { id: 'z1', name: 'Senior Software Engineer', code: 'SSE-001', department: 'Engineering', level: 'Senior', totalEmployees: 12, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'z2', name: 'Marketing Manager', code: 'MM-002', department: 'Marketing', level: 'Manager', totalEmployees: 8, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'z3', name: 'Sales Executive', code: 'SE-003', department: 'Sales', level: 'Executive', totalEmployees: 15, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, { id: 'z4', name: 'HR Specialist', code: 'HRS-004', department: 'Human Resources', level: 'Specialist', totalEmployees: 5, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-03-01' }, ]; export default function DesignationManagementPage() { 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 [department, setDepartment] = createSignal(''); const [level, setLevel] = createSignal(''); const [description, setDescription] = createSignal(''); const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE'); const [canManageTeam, setCanManageTeam] = createSignal(false); const [canApprove, setCanApprove] = createSignal(false); const load = async () => { try { const res = await fetch(`/api/gateway/api/admin/designations?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.designation_id ?? `des-${i + 1}`), name: String(item.name ?? item.designation_name ?? ''), code: String(item.code ?? item.designation_code ?? ''), department: String(item.department ?? item.department_name ?? ''), level: String(item.level ?? ''), 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('designation', { q: search().trim() || undefined }); setRows(Array.isArray(data) && data.length > 0 ? data : FALLBACK_DESIGNATIONS); } catch { setRows(FALLBACK_DESIGNATIONS); } }; onMount(() => void load()); const resetForm = () => { setEditingId(null); setName(''); setCode(''); setDepartment(''); setLevel(''); setDescription(''); setStatus('ACTIVE'); setCanManageTeam(false); setCanApprove(false); setCreateTab('general'); }; const openCreate = () => { resetForm(); setMainTab('create'); }; const openEdit = (row: DesignationRecord) => { setEditingId(row.id); setName(row.name || ''); setCode(String(row.code || '')); setDepartment(String(row.department || '')); setLevel(String(row.level || '')); setDescription(String(row.description || '')); setStatus(row.status === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE'); setCanManageTeam(Boolean(row.canManageTeam)); setCanApprove(Boolean(row.canApprove)); setMainTab('create'); setCreateTab('general'); }; const saveDesignation = async () => { const payload: Partial = { name: name().trim() || 'New Designation', code: code().trim() || undefined, department: department().trim(), level: level().trim(), description: description().trim(), status: status(), canManageTeam: canManageTeam(), canApprove: canApprove(), }; if (editingId()) { await updateModuleRecord('designation', editingId()!, payload); } else { await createModuleRecord('designation', payload); } setMainTab('all'); setOpenMenuId(null); resetForm(); await load(); }; const filteredRows = createMemo(() => rows() ?? []); const formatDate = (value?: string) => { const input = value || ''; if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input; return (input || new Date().toISOString().slice(0, 10)).slice(0, 10); }; return (

Designation Management

Manage all designations and job positions

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

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