From 1bd7fe646c6b51dfff20df61fb33d9257c83849a Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Fri, 27 Mar 2026 02:05:28 +0100 Subject: [PATCH] feat(department): add View Department panel with row detail display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - View Department tab now shows department details (code, head, email, employees, visibility, date) - Clicking ⋮ → View Department on a row populates the view panel - Table hides when View tab is active (style:display reactive binding) - Dropdown menu items rewritten with inline styles for proper spacing (4 items: View, Edit, Deactivate, Delete) Co-Authored-By: Claude Sonnet 4.6 --- src/routes/admin/department.tsx | 85 ++++++++++++++++++++++++++++----- 1 file changed, 74 insertions(+), 11 deletions(-) diff --git a/src/routes/admin/department.tsx b/src/routes/admin/department.tsx index 3116f9f..b8e33a6 100644 --- a/src/routes/admin/department.tsx +++ b/src/routes/admin/department.tsx @@ -105,6 +105,7 @@ export default function DepartmentManagementPage() { const [rows, setRows] = createSignal([]); const [openMenuId, setOpenMenuId] = createSignal(null); const [editingId, setEditingId] = createSignal(null); + const [viewingDept, setViewingDept] = createSignal(null); const [name, setName] = createSignal(''); const [code, setCode] = createSignal(''); @@ -285,8 +286,69 @@ export default function DepartmentManagementPage() { ))} + {/* View Department panel */} + + +
+

No department selected

+

Click the ⋮ menu on any department row and choose View Department.

+
+ + +
+ {/* Header */} +
+
+

{viewingDept()!.name}

+

{viewingDept()!.description || 'No description'}

+
+ +
+ {/* Details grid — 3 cols using flex rows */} +
+
+
+

Department Code

+

{viewingDept()!.code || '—'}

+
+
+

Department Head

+

{viewingDept()!.departmentHead || '—'}

+
+
+

Department Email

+

{viewingDept()!.departmentEmail || '—'}

+
+
+
+
+

Total Employees

+

{String(viewingDept()!.totalEmployees ?? 0)}

+
+
+

Visibility

+

{viewingDept()!.visibility || 'INTERNAL'}

+
+
+

Created Date

+

{viewingDept()!.createdDate?.slice(0, 10) || '—'}

+
+
+
+ {/* Actions */} +
+ + +
+
+ + + {/* Table card */} -
+
+
{/* Filter bar */}
@@ -394,13 +456,13 @@ export default function DepartmentManagementPage() { -
- - -
+
@@ -461,6 +523,7 @@ export default function DepartmentManagementPage() {
+
{/* ── FORM VIEW (Create / Edit) ── */}