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: {
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>