import { For, Show, createMemo, createSignal, onMount } from 'solid-js'; import { useSearchParams } from '@solidjs/router'; import AdminShell from '~/components/AdminShell'; import type { CrudRecord } from '~/lib/admin/types'; const API = '/api/gateway'; type DepartmentRecord = CrudRecord & { code?: string; description?: string; totalEmployees?: number; createdDate?: string; departmentHead?: string; departmentEmail?: string; transfersEnabled?: boolean; visibility?: 'INTERNAL' | 'EXTERNAL'; }; const FALLBACK_DEPARTMENTS: DepartmentRecord[] = [ { id: 'd1', name: 'Engineering', code: 'ENG-001', description: 'Software development and technical architecture', totalEmployees: 45, departmentHead: 'Arun Kumar', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-15' }, { id: 'd2', name: 'Marketing', code: 'MKT-002', description: 'Brand management and digital marketing', totalEmployees: 23, departmentHead: 'Priya Sharma', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-15' }, { id: 'd3', name: 'Human Resources', code: 'HR-003', description: 'Employee relations and talent acquisition', totalEmployees: 12, departmentHead: 'Rekha Nair', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-20' }, { id: 'd4', name: 'Finance', code: 'FIN-004', description: 'Financial planning and accounting', totalEmployees: 18, departmentHead: 'Suresh Menon', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-20' }, { id: 'd5', name: 'Operations', code: 'OPS-005', description: 'Business operations and process management', totalEmployees: 31, departmentHead: 'Deepak Verma', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-01' }, { id: 'd6', name: 'Customer Success', code: 'CS-006', description: 'Client support and relationship management', totalEmployees: 27, departmentHead: 'Anita Pillai', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-01' }, { id: 'd7', name: 'Product', code: 'PRD-007', description: 'Product strategy and development', totalEmployees: 19, departmentHead: 'Kiran Rao', status: 'INACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-10' }, { id: 'd8', name: 'Sales', code: 'SAL-008', description: 'Revenue generation and client acquisition', totalEmployees: 34, departmentHead: 'Manoj Iyer', status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-10' }, ]; 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'] }, ]; type DepartmentListResponse = { departments?: any[]; data?: any[]; items?: any[]; }; function normalizeDepartment(item: any, idx: number): DepartmentRecord { const status = String(item.status ?? '').toUpperCase(); const isActive = typeof item.is_active === 'boolean' ? item.is_active : status ? status === 'ACTIVE' : true; return { id: String(item.id ?? `dep-${idx + 1}`), name: String(item.name ?? ''), code: String(item.code ?? ''), description: String(item.description ?? ''), totalEmployees: Number(item.totalEmployees ?? item.total_employees ?? 0), departmentHead: String(item.departmentHead ?? item.department_head ?? ''), departmentEmail: String(item.departmentEmail ?? item.department_email ?? ''), transfersEnabled: Boolean(item.transfersEnabled ?? item.transfers_enabled ?? false), visibility: String(item.visibility ?? 'INTERNAL').toUpperCase() === 'EXTERNAL' ? 'EXTERNAL' : 'INTERNAL', status: isActive ? 'ACTIVE' : 'INACTIVE', updatedAt: String(item.updatedAt ?? item.updated_at ?? ''), createdDate: String(item.createdDate ?? item.created_at ?? ''), }; } function StatusBadge(props: { status: string }) { const active = () => props.status === 'ACTIVE'; return ( {active() ? 'Active' : 'Inactive'} ); } function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: string }) { return ( ); } export default function DepartmentManagementPage() { const [searchParams] = useSearchParams(); const isPreview = () => searchParams._preview === '1'; const [view, setView] = createSignal<'list' | 'form'>('list'); const [formTab, setFormTab] = createSignal<'general' | 'settings' | 'permissions'>('general'); const [listTab, setListTab] = createSignal<'all' | 'create' | 'view' | 'inactive'>('all'); const [search, setSearch] = createSignal(''); const [statusFilter, setStatusFilter] = createSignal('all'); const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'employees_desc' | 'employees_asc'>('name_asc'); const [sortMenuOpen, setSortMenuOpen] = createSignal(false); const [filterMenuOpen, setFilterMenuOpen] = createSignal(false); 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 [visibility, setVisibility] = createSignal<'INTERNAL' | 'EXTERNAL'>('INTERNAL'); const [isLoading, setIsLoading] = createSignal(false); const [isSaving, setIsSaving] = createSignal(false); const [error, setError] = createSignal(''); const load = async () => { setIsLoading(true); setError(''); try { try { const params = new URLSearchParams({ page: '1', per_page: '100', q: search().trim(), }); if (statusFilter() !== 'all') { params.set('status', statusFilter()); } const res = await fetch(`${API}/api/admin/departments?${params.toString()}`); if (!res.ok) { throw new Error(`Request failed (${res.status})`); } const payload = (await res.json().catch(() => null)) as DepartmentListResponse | null; const list = Array.isArray(payload) ? payload : Array.isArray(payload?.departments) ? payload.departments : Array.isArray(payload?.data) ? payload.data : Array.isArray(payload?.items) ? payload.items : []; if (list.length === 0) { setRows(FALLBACK_DEPARTMENTS); } else { setRows(list.map(normalizeDepartment)); } } catch { setRows(FALLBACK_DEPARTMENTS); setError('Could not reach departments API, showing fallback data.'); } } finally { setIsLoading(false); } }; onMount(() => void load()); const filteredRows = createMemo(() => { let r = rows(); if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase()); const q = search().toLowerCase(); if (q) { r = r.filter((d) => d.name.toLowerCase().includes(q) || String(d.code ?? '').toLowerCase().includes(q) || String(d.description ?? '').toLowerCase().includes(q) ); } const sorted = [...r]; const mode = sortBy(); sorted.sort((a, b) => { if (mode === 'name_desc') return b.name.localeCompare(a.name); if (mode === 'employees_desc') return Number(b.totalEmployees || 0) - Number(a.totalEmployees || 0); if (mode === 'employees_asc') return Number(a.totalEmployees || 0) - Number(b.totalEmployees || 0); return a.name.localeCompare(b.name); }); r = sorted; return r; }); const resetForm = () => { setEditingId(null); setName(''); setCode(''); setDescription(''); setDepartmentHead(''); setDepartmentEmail(''); setStatus('ACTIVE'); setTransfersEnabled(false); setVisibility('INTERNAL'); setFormTab('general'); setError(''); }; const openCreate = () => { resetForm(); setView('form'); }; 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'); setTransfersEnabled(Boolean(row.transfersEnabled)); setVisibility(row.visibility === 'EXTERNAL' ? 'EXTERNAL' : 'INTERNAL'); setFormTab('general'); setView('form'); setOpenMenuId(null); }; const save = async () => { if (!name().trim() || !code().trim()) { setError('Department name and code are required.'); setFormTab('general'); return; } setIsSaving(true); setError(''); const payload = { name: name().trim(), code: code().trim(), description: description().trim() || null, department_head: departmentHead().trim() || null, department_email: departmentEmail().trim() || null, status: status(), visibility: visibility(), transfers_enabled: transfersEnabled(), }; try { const endpoint = editingId() ? `${API}/api/admin/departments/${editingId()}` : `${API}/api/admin/departments`; const method = editingId() ? 'PATCH' : 'POST'; const res = await fetch(endpoint, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error((body as any).message || `Request failed (${res.status})`); } setView('list'); resetForm(); await load(); } catch (err: any) { setError(err?.message || 'Failed to save department.'); } finally { setIsSaving(false); } }; const formatDate = (v?: string) => { const s = v || ''; if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s; return s.slice(0, 10) || '—'; }; return (
{/* Page header */}

Department Management

Manage all departments and organizational structure

{/* ── LIST VIEW ── */}
{/* Tabs */}
{([ { key: 'all', label: 'All Departments', action: () => { setListTab('all'); setStatusFilter('all'); void load(); } }, { key: 'create', label: 'Create Department', action: () => { setListTab('create'); openCreate(); } }, { key: 'view', label: 'View Department', action: () => setListTab('view') }, ] as const).map((tab) => ( ))}
{/* Table card */}
{/* Filter bar */}
{ setSearch(e.currentTarget.value); void load(); }} placeholder="Search departments..." style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none" />
{(['name_asc', 'name_desc', 'employees_desc', 'employees_asc'] as const).map((s, i) => ( ))}
{(['all', 'active', 'inactive'] as const).map((s) => ( ))}
{/* Table */}
0} fallback={ } > {(row) => ( )}
Department Name Department Code Description Total Employees Status Created Date Actions

No departments found

Create your first department to get started.

{row.name}

 {String(row.code || '—')}

{String(row.description || '—')}

 {Number(row.totalEmployees || 0)} {formatDate(String(row.createdDate || row.updatedAt || ''))}
{/* Pagination */} 0}>

Showing 1–{filteredRows().length} of {filteredRows().length} departments

{/* ── FORM VIEW (Create / Edit) ── */} {/* Top tabs */}
{/* Sub-tabs */}
{(['general', 'settings', 'permissions'] as const).map((tab, i) => { const labels = ['General Information', 'Department Settings', 'Permissions']; const active = () => formTab() === tab; return ( ); })}
{error()}
{/* General Information */}