From 10c7ba0934d40b422881a58752c9c8e297b5d0c4 Mon Sep 17 00:00:00 2001
From: Tracewebstudio Dev <dev@tracewebstudio.com>
Date: Wed, 15 Apr 2026 15:17:12 +0200
Subject: [PATCH] fix: close div tag properly in department.tsx settings tab

---
 src/routes/admin/department.tsx | 110 ++++++++++++++++----------------
 1 file changed, 54 insertions(+), 56 deletions(-)

diff --git a/src/routes/admin/department.tsx b/src/routes/admin/department.tsx
index 43f8967..5dd9a8d 100644
--- a/src/routes/admin/department.tsx
+++ b/src/routes/admin/department.tsx
@@ -62,29 +62,29 @@ function StatusBadge(props: { status: string }) {
 }
 
 function FormInput(props: {
-   label: string;
-   required?: boolean;
-   value: string;
-   onInput: (v: string) => void;
-   placeholder?: string;
-   type?: string;
- }) {
-   return (
-     <label style="display:block">
-       <span style="font-size:13px;font-weight:600;color:#374151">
-         {props.label}
-         {props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
-       </span>
-       <input
-         type={props.type ?? "text"}
-         value={props.value}
-         onInput={(e) => props.onInput(e.currentTarget.value)}
-         placeholder={props.placeholder}
-         required={props.required}
-         style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
-       />
-     </label>
-   );
+  label: string;
+  required?: boolean;
+  value: string;
+  onInput: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <label style="display:block">
+      <span style="font-size:13px;font-weight:600;color:#374151">
+        {props.label}
+        {props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
+      </span>
+      <input
+        type={props.type ?? "text"}
+        value={props.value}
+        onInput={(e) => props.onInput(e.currentTarget.value)}
+        placeholder={props.placeholder}
+        required={props.required}
+        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
+      />
+    </label>
+  );
 }
 
 export default function DepartmentManagementPage() {
@@ -920,21 +920,21 @@ export default function DepartmentManagementPage() {
             <Show when={formTab() === "general"}>
               <div style="display:flex;flex-direction:column;gap:20px">
                 <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
-                   <FormInput
-                     label="Department Name"
-                     required
-                     value={name()}
-                     onInput={setName}
-                     placeholder="e.g. Engineering"
-                   />
-                    <FormInput
-                      label="Department Code"
-                      required
-                      value={code()}
-                      onInput={setCode}
-                      placeholder="e.g. ENG-001"
-                   />
-                 </div>
+                  <FormInput
+                    label="Department Name"
+                    required
+                    value={name()}
+                    onInput={setName}
+                    placeholder="e.g. Engineering"
+                  />
+                  <FormInput
+                    label="Department Code"
+                    required
+                    value={code()}
+                    onInput={setCode}
+                    placeholder="e.g. ENG-001"
+                  />
+                </div>
                 <label style="display:block">
                   <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
                   <textarea
@@ -965,26 +965,24 @@ export default function DepartmentManagementPage() {
 
             {/* Department Settings */}
             <Show when={formTab() === "settings"}>
-                <div style="display:flex;flex-direction:column;gap:32px">
-                  <div>
-                    <p style="font-size:14px;font-weight:600;color:#111827">Department Status</p>
-                    <p style="margin-top:2px;font-size:13px;color:#6B7280">
-                      Set whether this department is currently active
-                    </p>
-                    <div style="margin-top:12px;display:flex;gap:10px">
-                      {(["ACTIVE", "INACTIVE"] as const).map((s) => (
-                        <button
-                          type="button"
-                          onClick={() => setStatus(s)}
-                          style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${status() === s ? "#FF5E13" : "#E5E7EB"};background:${status() === s ? "#FFF3EE" : "white"};color:${status() === s ? "#FF5E13" : "#6B7280"}`}
-                        >
-                          {s === "ACTIVE" ? "Active" : "Inactive"}
-                        </button>
-                      ))}
-                    </div>
+              <div style="display:flex;flex-direction:column;gap:32px">
+                <div>
+                  <p style="font-size:14px;font-weight:600;color:#111827">Department Status</p>
+                  <p style="margin-top:2px;font-size:13px;color:#6B7280">
+                    Set whether this department is currently active
+                  </p>
+                  <div style="margin-top:12px;display:flex;gap:10px">
+                    {(["ACTIVE", "INACTIVE"] as const).map((s) => (
+                      <button
+                        type="button"
+                        onClick={() => setStatus(s)}
+                        style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${status() === s ? "#FF5E13" : "#E5E7EB"};background:${status() === s ? "#FFF3EE" : "white"};color:${status() === s ? "#FF5E13" : "#6B7280"}`}
+                      >
+                        {s === "ACTIVE" ? "Active" : "Inactive"}
+                      </button>
+                    ))}
                   </div>
                 </div>
-                </div>
 
                 <div>
                   <p style="font-size:14px;font-weight:600;color:#111827">Department Visibility</p>