ashwin/nxtgauge-admin-solid
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: close div tag properly in department.tsx settings tab

Browse source
This commit is contained in:
Tracewebstudio Dev 2026-04-15 15:17:12 +02:00
parent b316181e77
commit 10c7ba0934
1 changed files with 54 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/routes/admin/department.tsx
View file

@ -62,29 +62,29 @@ function StatusBadge(props: { status: string }) {
} }
function FormInput(props: { function FormInput(props: {
label: string; label: string;
required?: boolean; required?: boolean;
value: string; value: string;
onInput: (v: string) => void; onInput: (v: string) => void;
placeholder?: string; placeholder?: string;
type?: string; type?: string;
}) { }) {
return ( return (
<label style="display:block"> <label style="display:block">
<span style="font-size:13px;font-weight:600;color:#374151"> <span style="font-size:13px;font-weight:600;color:#374151">
{props.label} {props.label}
{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>} {props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
</span> </span>
<input <input
type={props.type ?? "text"} type={props.type ?? "text"}
value={props.value} value={props.value}
onInput={(e) => props.onInput(e.currentTarget.value)} onInput={(e) => props.onInput(e.currentTarget.value)}
placeholder={props.placeholder} placeholder={props.placeholder}
required={props.required} 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" 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>
); );
} }
export default function DepartmentManagementPage() { export default function DepartmentManagementPage() {
@ -920,21 +920,21 @@ export default function DepartmentManagementPage() {
<Show when={formTab() === "general"}> <Show when={formTab() === "general"}>
<div style="display:flex;flex-direction:column;gap:20px"> <div style="display:flex;flex-direction:column;gap:20px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
<FormInput <FormInput
label="Department Name" label="Department Name"
required required
value={name()} value={name()}
onInput={setName} onInput={setName}
placeholder="e.g. Engineering" placeholder="e.g. Engineering"
/> />
<FormInput <FormInput
label="Department Code" label="Department Code"
required required
value={code()} value={code()}
onInput={setCode} onInput={setCode}
placeholder="e.g. ENG-001" placeholder="e.g. ENG-001"
/> />
</div> </div>
<label style="display:block"> <label style="display:block">
<span style="font-size:13px;font-weight:600;color:#374151">Description</span> <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
<textarea <textarea
@ -965,26 +965,24 @@ export default function DepartmentManagementPage() {
{/* Department Settings */} {/* Department Settings */}
<Show when={formTab() === "settings"}> <Show when={formTab() === "settings"}>
<div style="display:flex;flex-direction:column;gap:32px"> <div style="display:flex;flex-direction:column;gap:32px">
<div> <div>
<p style="font-size:14px;font-weight:600;color:#111827">Department Status</p> <p style="font-size:14px;font-weight:600;color:#111827">Department Status</p>
<p style="margin-top:2px;font-size:13px;color:#6B7280"> <p style="margin-top:2px;font-size:13px;color:#6B7280">
Set whether this department is currently active Set whether this department is currently active
</p> </p>
<div style="margin-top:12px;display:flex;gap:10px"> <div style="margin-top:12px;display:flex;gap:10px">
{(["ACTIVE", "INACTIVE"] as const).map((s) => ( {(["ACTIVE", "INACTIVE"] as const).map((s) => (
<button <button
type="button" type="button"
onClick={() => setStatus(s)} 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"}`} 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"} {s === "ACTIVE" ? "Active" : "Inactive"}
</button> </button>
))} ))}
</div>
</div> </div>
</div> </div>
</div>
<div> <div>
<p style="font-size:14px;font-weight:600;color:#111827">Department Visibility</p> <p style="font-size:14px;font-weight:600;color:#111827">Department Visibility</p>