Merge pull request 'feat: enhance UI components and add vibrant theme support' (#17) from ui-fixers into Dev

Reviewed-on: #17

Frontend/erp-system/app/dashboard/hrm/attendance/[id]/page.tsx

@@ -112,7 +112,7 @@ export default function AttendanceBatchDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">{batch.docNo}</h1>
           <p className="text-base text-muted-foreground">{new Date(batch.periodStart).toLocaleDateString()} – {new Date(batch.periodEnd).toLocaleDateString()} · {batch.rowCountTotal} rows</p>
@@ -132,9 +132,9 @@ export default function AttendanceBatchDetailPage() {
                 <FieldGroup>
                   <Field><FieldLabel htmlFor="u-reason">Reason</FieldLabel><Input id="u-reason" value={unlockReason} onChange={(e) => setUnlockReason(e.target.value)} /></Field>
                 </FieldGroup>
-                <div className="flex justify-center gap-3 pt-2">
+                <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                  <Button variant="outline" className="min-w-32" onClick={() => setUnlockOpen(false)}>Cancel</Button>
+                  <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setUnlockOpen(false)}>Cancel</Button>
-                  <Button className="min-w-32" onClick={unlock} disabled={busy}>Unlock</Button>
+                  <Button className="w-full sm:w-auto sm:min-w-32" onClick={unlock} disabled={busy}>Unlock</Button>
                 </div>
               </DialogContent>
             </Dialog>

Frontend/erp-system/app/dashboard/hrm/attendance/page.tsx

@@ -69,7 +69,7 @@ export default function AttendanceBatchesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Attendance</h1>
           <p className="text-base text-muted-foreground">Upload → Preview → Confirm. Once Confirmed, a batch becomes payroll&apos;s source of truth.</p>
@@ -86,7 +86,7 @@ export default function AttendanceBatchesPage() {
                 <DialogDescription>Columns: Employee Code, Date, Check In, Check Out.</DialogDescription>
               </DialogHeader>
               <FieldGroup>
-                <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                   <Field><FieldLabel htmlFor="a-start">Period start</FieldLabel><Input id="a-start" type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)} /></Field>
                   <Field><FieldLabel htmlFor="a-end">Period end</FieldLabel><Input id="a-end" type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} /></Field>
                 </div>
@@ -95,9 +95,9 @@ export default function AttendanceBatchesPage() {
                   <Input id="a-file" type="file" accept=".xlsx,.csv" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
                 </Field>
               </FieldGroup>
-              <div className="flex justify-center gap-3 pt-2">
+              <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+                <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-                <Button className="min-w-32" onClick={handleUpload} disabled={submitting}><Upload className="size-4" />{submitting ? "Uploading…" : "Upload"}</Button>
+                <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleUpload} disabled={submitting}><Upload className="size-4" />{submitting ? "Uploading…" : "Upload"}</Button>
               </div>
             </DialogContent>
           </Dialog>

Frontend/erp-system/app/dashboard/hrm/employees/[id]/page.tsx

@@ -208,7 +208,7 @@ export default function EmployeeDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">{employee.fullName}</h1>
           <p className="text-base text-muted-foreground">
@@ -237,7 +237,7 @@ export default function EmployeeDetailPage() {
 
       {tab === "Overview" && (
         <FieldGroup className="max-w-2xl">
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
             <Field><FieldLabel>Full name</FieldLabel><Input value={employee.fullName} onChange={(e) => setEmployee({ ...employee, fullName: e.target.value })} /></Field>
             <Field><FieldLabel>Email</FieldLabel><Input type="email" value={employee.email ?? ""} onChange={(e) => setEmployee({ ...employee, email: e.target.value })} /></Field>
             <Field><FieldLabel>NIC</FieldLabel><Input value={employee.nic ?? ""} onChange={(e) => setEmployee({ ...employee, nic: e.target.value })} /></Field>
@@ -363,7 +363,7 @@ export default function EmployeeDetailPage() {
                     <DialogDescription>Supersedes the current open-ended structure from this date.</DialogDescription>
                   </DialogHeader>
                   <FieldGroup>
-                    <div className="grid grid-cols-2 gap-3">
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                       <Field><FieldLabel>Effective from</FieldLabel><Input type="date" value={structureEffectiveFrom} onChange={(e) => setStructureEffectiveFrom(e.target.value)} /></Field>
                       <Field><FieldLabel>Basic salary</FieldLabel><Input type="number" min={0} value={structureBasic} onChange={(e) => setStructureBasic(Number(e.target.value))} /></Field>
                     </div>
@@ -383,9 +383,9 @@ export default function EmployeeDetailPage() {
                       </div>
                     </Field>
                   </FieldGroup>
-                  <div className="flex justify-center gap-3 pt-2">
+                  <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                    <Button variant="outline" className="min-w-32" onClick={() => setStructureOpen(false)} disabled={busy}>Cancel</Button>
+                    <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setStructureOpen(false)} disabled={busy}>Cancel</Button>
-                    <Button className="min-w-32" onClick={createStructure} disabled={busy}>{busy ? "Saving…" : "Save"}</Button>
+                    <Button className="w-full sm:w-auto sm:min-w-32" onClick={createStructure} disabled={busy}>{busy ? "Saving…" : "Save"}</Button>
                   </div>
                 </DialogContent>
               </Dialog>
@@ -433,7 +433,7 @@ export default function EmployeeDetailPage() {
                         <SelectContent><SelectItem value="Loan">Loan</SelectItem><SelectItem value="Advance">Advance</SelectItem></SelectContent>
                       </Select>
                     </Field>
-                    <div className="grid grid-cols-2 gap-3">
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                       <Field><FieldLabel>Principal</FieldLabel><Input type="number" min={0} value={loanPrincipal} onChange={(e) => setLoanPrincipal(Number(e.target.value))} /></Field>
                       <Field><FieldLabel>Installment amount</FieldLabel><Input type="number" min={0} value={loanInstallmentAmount} onChange={(e) => setLoanInstallmentAmount(Number(e.target.value))} /></Field>
                       <Field><FieldLabel># installments</FieldLabel><Input type="number" min={1} value={loanCount} onChange={(e) => setLoanCount(Number(e.target.value))} /></Field>
@@ -445,9 +445,9 @@ export default function EmployeeDetailPage() {
                       </Field>
                     </div>
                   </FieldGroup>
-                  <div className="flex justify-center gap-3 pt-2">
+                  <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                    <Button variant="outline" className="min-w-32" onClick={() => setLoanOpen(false)} disabled={busy}>Cancel</Button>
+                    <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setLoanOpen(false)} disabled={busy}>Cancel</Button>
-                    <Button className="min-w-32" onClick={createLoan} disabled={busy}>{busy ? "Creating…" : "Create"}</Button>
+                    <Button className="w-full sm:w-auto sm:min-w-32" onClick={createLoan} disabled={busy}>{busy ? "Creating…" : "Create"}</Button>
                   </div>
                 </DialogContent>
               </Dialog>

Frontend/erp-system/app/dashboard/hrm/employees/page.tsx

@@ -121,7 +121,7 @@ export default function EmployeesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Employees</h1>
           <p className="text-base text-muted-foreground">Staff records — separate from system login accounts (see the link chip below).</p>
@@ -134,7 +134,7 @@ export default function EmployeesPage() {
               <DialogDescription>Not every employee needs a login — a system user account is optional and separate.</DialogDescription>
             </DialogHeader>
             <FieldGroup>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field data-invalid={!!errors.employeeCode}>
                   <FieldLabel htmlFor="e-code">Employee code</FieldLabel>
                   <Input id="e-code" value={form.employeeCode} onChange={(e) => setForm((f) => ({ ...f, employeeCode: e.target.value }))} aria-invalid={!!errors.employeeCode} />
@@ -170,7 +170,7 @@ export default function EmployeesPage() {
                   </div>
                 )}
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field data-invalid={!!errors.departmentId}>
                   <FieldLabel htmlFor="e-dept">Department</FieldLabel>
                   <Select value={form.departmentId ? String(form.departmentId) : undefined} onValueChange={(v) => setForm((f) => ({ ...f, departmentId: Number(v) }))}>
@@ -205,9 +205,9 @@ export default function EmployeesPage() {
                 </Field>
               </div>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/leave/page.tsx

@@ -102,7 +102,7 @@ export default function LeaveRequestsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Leave</h1>
           <p className="text-base text-muted-foreground">Approved leave feeds Attendance&apos;s OnLeave status and Payroll&apos;s No-Pay calculation.</p>
@@ -129,15 +129,15 @@ export default function LeaveRequestsPage() {
                   <SelectContent>{leaveTypes.map((t) => <SelectItem key={t.leaveTypeId} value={String(t.leaveTypeId)}>{t.name}</SelectItem>)}</SelectContent>
                 </Select>
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field><FieldLabel>Start date</FieldLabel><Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} /></Field>
                 <Field><FieldLabel>End date</FieldLabel><Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} /></Field>
               </div>
               <Field><FieldLabel>Reason (optional)</FieldLabel><Input value={reason} onChange={(e) => setReason(e.target.value)} /></Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Submitting…" : "Submit"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Submitting…" : "Submit"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/payroll/[id]/lines/[lineId]/page.tsx

@@ -64,7 +64,7 @@ export default function PayrollLineDetailPage() {
         </table>
       </div>
 
-      <div className="grid grid-cols-3 gap-3 text-sm text-muted-foreground">
+      <div className="grid grid-cols-2 gap-3 text-sm text-muted-foreground sm:grid-cols-3">
         <div>Present days: {line.presentDays}</div>
         <div>Absent days: {line.absentDays}</div>
         <div>Leave days: {line.leaveDays}</div>

Frontend/erp-system/app/dashboard/hrm/payroll/[id]/page.tsx

@@ -88,12 +88,12 @@ export default function PayrollRunDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">{run.docNo}</h1>
           <p className="text-base text-muted-foreground">{run.periodMonth.toString().padStart(2, "0")}/{run.periodYear} · {run.employeeCount} employees</p>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-3">
           <Badge variant="outline" className="h-7 px-3 text-sm">{run.status}</Badge>
           {run.status === "Draft" && <Button onClick={approve} disabled={busy}>Approve</Button>}
           {run.status === "Approved" && <Button onClick={lock} disabled={busy}>Lock Payroll</Button>}
@@ -110,9 +110,9 @@ export default function PayrollRunDetailPage() {
                   <FieldGroup>
                     <Field><FieldLabel htmlFor="p-reason">Reason</FieldLabel><Input id="p-reason" value={unlockReason} onChange={(e) => setUnlockReason(e.target.value)} /></Field>
                   </FieldGroup>
-                  <div className="flex justify-center gap-3 pt-2">
+                  <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                    <Button variant="outline" className="min-w-32" onClick={() => setUnlockOpen(false)}>Cancel</Button>
+                    <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setUnlockOpen(false)}>Cancel</Button>
-                    <Button className="min-w-32" onClick={unlock} disabled={busy}>Unlock</Button>
+                    <Button className="w-full sm:w-auto sm:min-w-32" onClick={unlock} disabled={busy}>Unlock</Button>
                   </div>
                 </DialogContent>
               </Dialog>

Frontend/erp-system/app/dashboard/hrm/payroll/page.tsx

@@ -63,7 +63,7 @@ export default function PayrollRunsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Payroll</h1>
           <p className="text-base text-muted-foreground">Generate → Review → Approve → Lock → Payslips.</p>
@@ -76,14 +76,14 @@ export default function PayrollRunsPage() {
               <DialogDescription>Blocked if attendance for this period isn&apos;t fully Confirmed yet.</DialogDescription>
             </DialogHeader>
             <FieldGroup>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field><FieldLabel>Year</FieldLabel><Input type="number" value={periodYear} onChange={(e) => setPeriodYear(Number(e.target.value))} /></Field>
                 <Field><FieldLabel>Month</FieldLabel><Input type="number" min={1} max={12} value={periodMonth} onChange={(e) => setPeriodMonth(Number(e.target.value))} /></Field>
               </div>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleGenerate} disabled={submitting}>{submitting ? "Generating…" : "Generate"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleGenerate} disabled={submitting}>{submitting ? "Generating…" : "Generate"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/departments/page.tsx

@@ -92,7 +92,7 @@ export default function DepartmentsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Departments</h1>
           <p className="text-base text-muted-foreground">Org structure — unlimited nesting, optionally scoped to a branch.</p>
@@ -140,9 +140,9 @@ export default function DepartmentsPage() {
                 </Select>
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/document-types/page.tsx

@@ -79,7 +79,7 @@ export default function DocumentTypesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Document Types</h1>
           <p className="text-base text-muted-foreground">The staff document catalog — NIC, contracts, certificates, etc.</p>
@@ -120,9 +120,9 @@ export default function DocumentTypesPage() {
                 <FieldLabel htmlFor="dt-expiry">Track expiry date (e.g. passport, visa)</FieldLabel>
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/leave-types/page.tsx

@@ -81,7 +81,7 @@ export default function LeaveTypesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Leave Types</h1>
           <p className="text-base text-muted-foreground">Annual, Casual, Medical, Unpaid, etc. — drives Attendance&apos;s OnLeave classification and Payroll&apos;s No-Pay calc.</p>
@@ -121,9 +121,9 @@ export default function LeaveTypesPage() {
                 <FieldLabel htmlFor="lt-carry">Carry-forward allowed</FieldLabel>
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/salary-components/page.tsx

@@ -78,7 +78,7 @@ export default function SalaryComponentsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Salary Components</h1>
           <p className="text-base text-muted-foreground">Allowances and ad hoc other deductions — OT/Late/No-Pay/Loan/EPF/ETF/Tax are computed automatically, not components.</p>
@@ -120,9 +120,9 @@ export default function SalaryComponentsPage() {
                 <FieldLabel htmlFor="sc-epfetf">EPF/ETF applicable</FieldLabel>
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/statutory/page.tsx

@@ -85,7 +85,7 @@ export default function StatutorySettingsPage() {
       {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}
 
       <section className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <h2 className="text-lg font-semibold text-foreground">EPF / ETF Rates</h2>
           <Dialog open={settingOpen} onOpenChange={setSettingOpen}>
             <DialogTrigger render={<Button size="sm"><Plus className="size-4" />New Setting</Button>} />
@@ -101,9 +101,9 @@ export default function StatutorySettingsPage() {
                 <Field><FieldLabel>ETF employer rate (0-1)</FieldLabel><Input type="number" step="0.001" value={etfEmployerRate} onChange={(e) => setEtfEmployerRate(Number(e.target.value))} /></Field>
                 <Field><FieldLabel>Default OT multiplier</FieldLabel><Input type="number" step="0.1" value={otMultiplierDefault} onChange={(e) => setOtMultiplierDefault(Number(e.target.value))} /></Field>
               </FieldGroup>
-              <div className="flex justify-center gap-3 pt-2">
+              <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                <Button variant="outline" className="min-w-32" onClick={() => setSettingOpen(false)} disabled={submitting}>Cancel</Button>
+                <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setSettingOpen(false)} disabled={submitting}>Cancel</Button>
-                <Button className="min-w-32" onClick={createSetting} disabled={submitting}>{submitting ? "Saving…" : "Save"}</Button>
+                <Button className="w-full sm:w-auto sm:min-w-32" onClick={createSetting} disabled={submitting}>{submitting ? "Saving…" : "Save"}</Button>
               </div>
             </DialogContent>
           </Dialog>
@@ -133,7 +133,7 @@ export default function StatutorySettingsPage() {
       </section>
 
       <section className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <h2 className="text-lg font-semibold text-foreground">Tax Slabs</h2>
           <Dialog open={slabOpen} onOpenChange={setSlabOpen}>
             <DialogTrigger render={<Button size="sm"><Plus className="size-4" />New Slab</Button>} />
@@ -148,9 +148,9 @@ export default function StatutorySettingsPage() {
                 <Field><FieldLabel>Upper bound (optional)</FieldLabel><Input type="number" value={upperBound} onChange={(e) => setUpperBound(e.target.value)} placeholder="And above" /></Field>
                 <Field><FieldLabel>Rate (0-1)</FieldLabel><Input type="number" step="0.01" value={rate} onChange={(e) => setRate(Number(e.target.value))} /></Field>
               </FieldGroup>
-              <div className="flex justify-center gap-3 pt-2">
+              <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                <Button variant="outline" className="min-w-32" onClick={() => setSlabOpen(false)} disabled={submitting}>Cancel</Button>
+                <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setSlabOpen(false)} disabled={submitting}>Cancel</Button>
-                <Button className="min-w-32" onClick={createSlab} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+                <Button className="w-full sm:w-auto sm:min-w-32" onClick={createSlab} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
               </div>
             </DialogContent>
           </Dialog>

Frontend/erp-system/app/dashboard/hrm/settings/work-shifts/page.tsx

@@ -99,7 +99,7 @@ export default function WorkShiftsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Work Shifts</h1>
           <p className="text-base text-muted-foreground">The baseline Attendance computes Late/Early/OT against.</p>
@@ -122,7 +122,7 @@ export default function WorkShiftsPage() {
                 <Input id="w-name" value={name} onChange={(e) => setName(e.target.value)} aria-invalid={!!errors.name} />
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field>
                   <FieldLabel htmlFor="w-start">Start time</FieldLabel>
                   <Input id="w-start" type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} />
@@ -136,7 +136,7 @@ export default function WorkShiftsPage() {
                 <Checkbox id="w-overnight" checked={isOvernight} onCheckedChange={(v) => setIsOvernight(v === true)} />
                 <FieldLabel htmlFor="w-overnight">Overnight shift (end time rolls past midnight)</FieldLabel>
               </Field>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                 <Field>
                   <FieldLabel htmlFor="w-grace">Grace (minutes)</FieldLabel>
                   <Input id="w-grace" type="number" min={0} value={graceMinutes} onChange={(e) => setGraceMinutes(Number(e.target.value))} />
@@ -166,9 +166,9 @@ export default function WorkShiftsPage() {
                 </div>
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-32" onClick={() => setOpen(false)} disabled={submitting}>Cancel</Button>
-              <Button className="min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
+              <Button className="w-full sm:w-auto sm:min-w-32" onClick={handleCreate} disabled={submitting}>{submitting ? "Creating…" : "Create"}</Button>
             </div>
           </DialogContent>
         </Dialog>

Frontend/erp-system/app/dashboard/layout.tsx

@@ -13,10 +13,10 @@ export default function DashboardLayout({
     <AuthProvider>
       <div className="flex h-screen overflow-hidden bg-background">
         <AppSidebar />
-        <main className="flex flex-1 flex-col">
+        <main className="flex min-w-0 flex-1 flex-col">
           <Header />
-          <div className="flex-1 overflow-auto">
+          <div className="min-w-0 flex-1 overflow-auto">
-            <div className="p-6 lg:p-8">
+            <div className="min-w-0 px-6 pt-3 pb-6 lg:px-8 lg:pt-4 lg:pb-8">
               <Breadcrumbs />
               <div className="rounded-xl bg-card border border-border shadow-sm">
                 <div className="p-6">

Frontend/erp-system/app/dashboard/procurement/purchase-orders/[id]/page.tsx

@@ -267,7 +267,7 @@ export default function PurchaseOrderDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/procurement/purchase-orders" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -283,7 +283,7 @@ export default function PurchaseOrderDetailPage() {
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-3">
           {po.status === "Draft" && (
             <>
               <Button variant="outline" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>

Frontend/erp-system/app/dashboard/procurement/purchase-orders/page.tsx

@@ -64,7 +64,7 @@ export default function PurchaseOrdersListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Purchase Orders</h1>
           <p className="text-base text-muted-foreground">Auto-approved on creation and freely editable while open (FR-PROC-03..05).</p>

Frontend/erp-system/app/dashboard/procurement/purchase-returns/page.tsx

@@ -48,7 +48,7 @@ export default function PurchaseReturnsListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Purchase Returns</h1>
           <p className="text-base text-muted-foreground">Return received goods to a vendor, referencing the original GRN line (FR-PROC-08).</p>

Frontend/erp-system/app/dashboard/procurement/requisitions/[id]/page.tsx

@@ -72,7 +72,7 @@ export default function RequisitionDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/procurement/requisitions" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -86,7 +86,7 @@ export default function RequisitionDetailPage() {
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
           {requisition.status === "Draft" && (
             <Button size="lg" onClick={handleSubmit} disabled={submitting}>
               <Send className="size-5" />

Frontend/erp-system/app/dashboard/procurement/requisitions/page.tsx

@@ -43,7 +43,7 @@ export default function RequisitionsListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Requisitions</h1>
           <p className="text-base text-muted-foreground">Raise a purchase requisition and submit it into procurement (FR-PROC-01).</p>

Frontend/erp-system/app/dashboard/procurement/rfqs/page.tsx

@@ -28,7 +28,7 @@ export default function RfqsListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">RFQs</h1>
           <p className="text-base text-muted-foreground">Request quotations from vendors and compare pricing (FR-PROC-02).</p>

Frontend/erp-system/app/dashboard/products/[id]/page.tsx

@@ -181,7 +181,7 @@ export default function ItemDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/products/brands/page.tsx

@@ -155,7 +155,7 @@ export default function BrandsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -180,11 +180,11 @@ export default function BrandsPage() {
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleSubmit} disabled={submitting}>
                 {submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/products/categories/[id]/page.tsx

@@ -111,7 +111,7 @@ export default function CategorySubCategoriesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products/categories" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -138,11 +138,11 @@ export default function CategorySubCategoriesPage() {
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleSubmit} disabled={submitting}>
                 {submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/products/categories/page.tsx

@@ -154,7 +154,7 @@ export default function CategoriesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -179,11 +179,11 @@ export default function CategoriesPage() {
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleSubmit} disabled={submitting}>
                 {submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/products/item-types/page.tsx

@@ -108,7 +108,7 @@ export default function ItemTypesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -141,11 +141,11 @@ export default function ItemTypesPage() {
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleSubmit} disabled={submitting}>
                 {submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/products/page.tsx

@@ -100,7 +100,7 @@ export default function ItemsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Items</h1>
           <p className="text-base text-muted-foreground">Item master — SKU, tracking mode, category, default vendor (FR-MD-01).</p>

Frontend/erp-system/app/dashboard/products/uoms/page.tsx

@@ -57,7 +57,7 @@ export default function UomsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -82,11 +82,11 @@ export default function UomsPage() {
                 <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/receiving/grn/[id]/page.tsx

@@ -116,7 +116,7 @@ export default function GrnDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/receiving/grn" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/receiving/grn/new/page.tsx

@@ -400,20 +400,7 @@ export default function NewGrnPage() {
           )}
 
           <div className="flex flex-col gap-3">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div>
-                <h2 className="text-base font-semibold text-foreground">Lines</h2>
-                {mode === "po" && (
-                  <p className="text-sm text-muted-foreground">
-                    Lines default from the PO&apos;s open quantities — add a row for anything received that wasn&apos;t ordered.
-                  </p>
-                )}
-              </div>
-              <Button type="button" variant="outline" onClick={() => setLines((prev) => [...prev, emptyLine()])}>
-                <Plus className="size-5" />
-                Add line
-              </Button>
-            <div className="flex items-center justify-between gap-3">
               <div>
                 <h2 className="text-base font-semibold text-foreground">Lines</h2>
                 {mode === "po" && (
@@ -422,7 +409,7 @@ export default function NewGrnPage() {
                   </p>
                 )}
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2">
                 {/* Off-PO items are allowed on a PO-based GRN — the server treats a line with
                     no poLineId as a direct receipt (docs/10 FR-GRN-01, revised). */}
                 <Button type="button" variant="outline" onClick={() => setLines((prev) => [...prev, emptyLine()])}>

Frontend/erp-system/app/dashboard/receiving/grn/page.tsx

@@ -72,7 +72,7 @@ export default function GrnListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Goods Receipt Notes</h1>
           <p className="text-base text-muted-foreground">

Frontend/erp-system/app/dashboard/settings/roles/page.tsx

@@ -123,7 +123,7 @@ export default function RolesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Roles</h1>
           <p className="text-base text-muted-foreground">
@@ -182,11 +182,11 @@ export default function RolesPage() {
               )}
             </div>
 
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/settings/users/page.tsx

@@ -147,7 +147,7 @@ export default function UsersPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Users</h1>
           <p className="text-base text-muted-foreground">
@@ -242,11 +242,11 @@ export default function UsersPage() {
                 <FieldError errors={[errors.userTypeId ? { message: errors.userTypeId } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/stock/adjustments/page.tsx

@@ -37,7 +37,7 @@ export default function AdjustmentsListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/stock/counts/[id]/page.tsx

@@ -89,7 +89,7 @@ export default function CountDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock/counts" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/stock/counts/page.tsx

@@ -34,7 +34,7 @@ export default function CountsListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/stock/transfers/[id]/page.tsx

@@ -83,7 +83,7 @@ export default function TransferDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock/transfers" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/stock/transfers/page.tsx

@@ -34,7 +34,7 @@ export default function TransfersListPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/stock/wastage/page.tsx

@@ -66,7 +66,7 @@ export default function WastagePage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/vendors/[id]/page.tsx

@@ -130,7 +130,7 @@ export default function VendorDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/vendors" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />

Frontend/erp-system/app/dashboard/vendors/page.tsx

@@ -127,7 +127,7 @@ export default function VendorsPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-foreground">Vendors</h1>
           <p className="text-base text-muted-foreground">Supplier master data — code, terms, tax registration, currency (FR-MD-06).</p>
@@ -172,11 +172,11 @@ export default function VendorsPage() {
                 <FieldError errors={[errors.currency ? { message: errors.currency } : undefined]} />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>
@@ -303,7 +303,7 @@ export default function VendorsPage() {
                             </div>
                           </div>
                           <div className="flex justify-center pt-2">
-                            <DialogClose render={<Button variant="outline" className="min-w-36" />}>Close</DialogClose>
+                            <DialogClose render={<Button variant="outline" className="w-full sm:w-auto sm:min-w-36" />}>Close</DialogClose>
                           </div>
                         </DialogContent>
                       </Dialog>

Frontend/erp-system/app/dashboard/warehouse/[id]/page.tsx

@@ -88,7 +88,7 @@ export default function WarehouseDetailPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard/warehouse" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -124,11 +124,11 @@ export default function WarehouseDetailPage() {
                 <Input id="bin-type" value={binType} onChange={(e) => setBinType(e.target.value)} placeholder="Shelf, Pallet, …" />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/dashboard/warehouse/page.tsx

@@ -98,7 +98,7 @@ export default function WarehousesPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <Link href="/dashboard" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
             <ArrowLeft className="size-5" />
@@ -134,11 +134,11 @@ export default function WarehousesPage() {
                 <Input id="wh-code" value={generatedCode} readOnly disabled placeholder="Enter a name to generate a code" className="text-muted-foreground" />
               </Field>
             </FieldGroup>
-            <div className="flex justify-center gap-3 pt-2">
+            <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-              <Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
+              <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
                 Cancel
               </Button>
-              <Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
+              <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreate} disabled={submitting}>
                 {submitting ? "Creating…" : "Create"}
               </Button>
             </div>

Frontend/erp-system/app/globals.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark *, .vibrant *));
 
 @theme inline {
   --color-background: var(--background);
@@ -129,6 +129,69 @@
   --sidebar-ring: oklch(0.68 0.186 265.215);
 }
 
+/* Vibrant — the "System" toggle option. Light content area (background,
+   cards, header, table panels) paired with a dark sidebar — the same split
+   Linear/Vercel/Notion use in their light themes. One violet accent drives
+   every interactive state; the sidebar keeps its own dark token family
+   (applied via .sidebar-surface below) so it stays dark regardless. */
+.vibrant {
+  --background: oklch(0.97 0.004 265);
+  --foreground: oklch(0.2 0.02 265);
+  --card: oklch(0.995 0.002 265);
+  --card-foreground: oklch(0.2 0.02 265);
+  --popover: oklch(0.995 0.002 265);
+  --popover-foreground: oklch(0.2 0.02 265);
+  --primary: oklch(0.55 0.2 275);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.93 0.02 275);
+  --secondary-foreground: oklch(0.32 0.15 275);
+  --muted: oklch(0.94 0.006 265);
+  --muted-foreground: oklch(0.48 0.02 265);
+  --accent: oklch(0.55 0.14 210);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.58 0.22 25);
+  --border: oklch(0.88 0.012 265);
+  --input: oklch(0.92 0.01 265);
+  --ring: oklch(0.55 0.2 275);
+  --success: oklch(0.55 0.15 150);
+  --warning: oklch(0.72 0.15 80);
+  --error: oklch(0.58 0.22 25);
+  --info: oklch(0.55 0.14 210);
+  --chart-1: oklch(0.55 0.2 275);
+  --chart-2: oklch(0.55 0.14 210);
+  --chart-3: oklch(0.55 0.15 150);
+  --chart-4: oklch(0.72 0.15 80);
+  --chart-5: oklch(0.58 0.22 25);
+  --sidebar: oklch(0.18 0.02 265);
+  --sidebar-foreground: oklch(0.96 0.005 265);
+  --sidebar-primary: oklch(0.64 0.19 275);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.28 0.03 265);
+  --sidebar-accent-foreground: oklch(0.96 0.005 265);
+  --sidebar-border: oklch(0.26 0.025 265);
+  --sidebar-ring: oklch(0.64 0.19 275);
+}
+
+/* Re-points the shared tokens (--card, --foreground, --muted*, --primary...)
+   at the sidebar's own dark family for anything inside this scope, so
+   AppSidebar's existing bg-card/text-foreground/text-muted-foreground
+   classes render dark without AppSidebar.tsx needing sidebar-specific
+   classes. CSS custom properties resolve against the cascade at point of
+   use, so this indirection (the same trick .dark/.vibrant use at the root)
+   works scoped to just this subtree. */
+.vibrant .sidebar-surface {
+  --card: var(--sidebar);
+  --card-foreground: var(--sidebar-foreground);
+  --popover: var(--sidebar);
+  --popover-foreground: var(--sidebar-foreground);
+  --foreground: var(--sidebar-foreground);
+  --muted: var(--sidebar-accent);
+  --muted-foreground: oklch(0.72 0.015 265);
+  --primary: var(--sidebar-primary);
+  --primary-foreground: var(--sidebar-primary-foreground);
+  --border: var(--sidebar-border);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -154,4 +217,5 @@
   h4 {
     @apply text-lg;
   }
-}
+}
+

Frontend/erp-system/app/layout.tsx

@@ -31,7 +31,12 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="min-h-full flex flex-col">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          themes={["light", "dark", "vibrant"]}
+          disableTransitionOnChange
+        >
           <TooltipProvider>{children}</TooltipProvider>
         </ThemeProvider>
       </body>

Frontend/erp-system/app/login/forgot/otp/page.tsx

@@ -25,10 +25,10 @@ export default function ForgotOtpPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 p-4">
-      <div className="w-full max-w-2xl rounded-xl bg-card p-8 shadow-lg border border-gray-200">
+      <div className="w-full max-w-2xl rounded-xl bg-card p-8 shadow-lg border border-border">
         <div className="flex flex-col items-center mb-8">
-          <div className="bg-black/10 rounded-full p-4 mb-4">
+          <div className="bg-foreground/10 rounded-full p-4 mb-4">
-            <Mail className="text-black size-6" />
+            <Mail className="text-foreground size-6" />
           </div>
           <h1 className="text-2xl font-bold text-foreground text-center">Verify your email</h1>
         </div>
@@ -46,7 +46,7 @@ export default function ForgotOtpPage() {
                   e.preventDefault()
                   handleResend()
                 }}
-                className="text-sm font-medium text-black hover:text-black/80 transition-colors"
+                className="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors"
               >
                 Didn't receive the code? Resend
               </button>
@@ -57,10 +57,10 @@ export default function ForgotOtpPage() {
 
           <div className="flex gap-3">
             <Link href="/login" className="flex-1">
-              <Button variant="outline" className="w-full h-12 rounded-full border-gray-300 text-black hover:bg-black/5">Back</Button>
+              <Button variant="outline" className="w-full h-12 rounded-full border-input text-foreground hover:bg-foreground/5">Back</Button>
             </Link>
             <Link href="/login/forgot/reset" className="flex-1">
-              <Button className="w-full h-12 rounded-full bg-black text-white hover:bg-black/90">Verify</Button>
+              <Button className="w-full h-12 rounded-full bg-foreground text-background hover:bg-foreground/90">Verify</Button>
             </Link>
           </div>
         </div>

Frontend/erp-system/app/login/forgot/page.tsx

@@ -19,7 +19,7 @@ export default function ForgotEmailPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 px-4 py-8">
-      <div className="w-full max-w-2xl rounded-xl bg-card p-8 pl-10 shadow-lg border border-gray-200">
+      <div className="w-full max-w-2xl rounded-xl bg-card p-8 pl-10 shadow-lg border border-border">
         <div className="mb-8 text-center">
           <h1 className="text-2xl font-bold text-foreground">Reset your password</h1>
           <p className="mt-2 text-sm text-muted-foreground">Enter the email address associated with your account and we'll send you a one-time code to verify your identity.</p>
@@ -40,19 +40,28 @@ export default function ForgotEmailPage() {
             {emailError !== "" && <p className="text-sm text-error mt-2 font-medium">{emailError}</p>}
           </div>
 
-          <Button
+          <div className="flex gap-3">
-            className="w-full h-12 text-base font-medium rounded-full bg-black text-white hover:bg-black/90"
+            <Button
-            disabled={emailError !== ""}
+              variant="outline"
-            onClick={() => {
+              onClick={() => router.push('/login')}
-              if (email.length === 0) {
+              className="flex-1 h-12 rounded-full border-input text-foreground hover:bg-foreground/5"
-                setEmailError('Email is required')
+            >
-                return
+              Back
-              }
+            </Button>
-              if (emailError === "") router.push('/login/forgot/otp')
+            <Button
-            }}
+              className="flex-1 h-12 text-base font-medium rounded-full bg-foreground text-background hover:bg-foreground/90"
-          >
+              disabled={emailError !== ""}
-            Send verification code
+              onClick={() => {
-          </Button>
+                if (email.length === 0) {
+                  setEmailError('Email is required')
+                  return
+                }
+                if (emailError === "") router.push('/login/forgot/otp')
+              }}
+            >
+              Send verification code
+            </Button>
+          </div>
         </div>
       </div>
     </div>

Frontend/erp-system/app/login/forgot/reset/page.tsx

@@ -39,7 +39,7 @@ export default function ForgotResetPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-background/95 p-4">
-      <div className="w-full max-w-xl rounded-xl bg-card p-8 shadow-lg border border-gray-200">
+      <div className="w-full max-w-xl rounded-xl bg-card p-8 shadow-lg border border-border">
         <div className="mb-8 text-center">
           <h1 className="text-2xl font-bold text-foreground">Create a new password</h1>
           <p className="mt-2 text-sm text-muted-foreground">Choose a strong password to secure your account.</p>
@@ -103,15 +103,15 @@ export default function ForgotResetPage() {
           <div className="flex gap-3">
             <Button
               variant="outline"
-              onClick={() => router.back()}
+              onClick={() => router.push('/login')}
-              className="flex-1 h-12 rounded-full border-gray-300 text-black hover:bg-black/5"
+              className="flex-1 h-12 rounded-full border-input text-foreground hover:bg-foreground/5"
             >
               Back
             </Button>
             <Button
               disabled={!allValid}
               onClick={() => setShowSuccess(true)}
-              className="flex-1 h-12 rounded-full bg-black text-white hover:bg-black/90"
+              className="flex-1 h-12 rounded-full bg-foreground text-background hover:bg-foreground/90"
             >
               Change password
             </Button>
@@ -131,7 +131,7 @@ export default function ForgotResetPage() {
                 </div>
               </div>
             </DialogHeader>
-            <Button onClick={() => router.push('/login')} className="w-4/5 mx-auto h-12 mt-6 rounded-full bg-black text-white hover:bg-black/90">
+            <Button onClick={() => router.push('/login')} className="w-4/5 mx-auto h-12 mt-6 rounded-full bg-foreground text-background hover:bg-foreground/90">
               Return to sign in
             </Button>
           </DialogContent>

Frontend/erp-system/app/login/page.tsx

@@ -17,29 +17,6 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 
-function GoogleIcon() {
-  return (
-    <svg viewBox="0 0 24 24" className="size-4">
-      <path
-        fill="#4285F4"
-        d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.89c2.27-2.09 3.56-5.17 3.56-8.82Z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 24c3.24 0 5.95-1.07 7.93-2.91l-3.89-3c-1.08.73-2.46 1.15-4.04 1.15-3.1 0-5.73-2.09-6.67-4.9H1.32v3.09A12 12 0 0 0 12 24Z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.33 14.34a7.2 7.2 0 0 1 0-4.68V6.57H1.32a12 12 0 0 0 0 10.86l4.01-3.09Z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 4.77c1.76 0 3.35.6 4.6 1.79l3.45-3.45C17.94 1.19 15.23 0 12 0A12 12 0 0 0 1.32 6.57l4.01 3.09C6.27 6.86 8.9 4.77 12 4.77Z"
-      />
-    </svg>
-  )
-}
-
 export default function LoginPage() {
   return (
     <Suspense fallback={null}>
@@ -77,19 +54,28 @@ function LoginForm() {
 
   return (
     <div className="relative min-h-screen overflow-hidden">
-      {/* Full-page background photo — right side only */}
+      {/* Full-page background photo — right side only. Dark mode swaps to the backdrop-free
-      <div className="absolute inset-y-0 left-[45%] right-0">
+          cutout (whithoutbackground.png) so there's no white scene box floating on the
+          dark panel. */}
+      <div className="absolute inset-y-0 left-[45%] right-0 bg-white dark:bg-background">
         <Image
           src="/images/loginerps.png"
           alt="ERP Illustration"
           fill
-          className="object-contain object-center bg-white"
+          className="object-contain object-center dark:hidden"
+          priority
+        />
+        <Image
+          src="/images/whithoutbackground.png"
+          alt="ERP Illustration"
+          fill
+          className="hidden object-contain object-center dark:block"
           priority
         />
       </div>
 
       {/* Login panel — overlays left side, no hard border with the photo */}
-      <main className="relative z-10 flex min-h-screen w-full flex-col justify-center bg-white px-6 py-12 sm:px-12 md:w-[45%]">
+      <main className="relative z-10 flex min-h-screen w-full flex-col justify-center bg-white dark:bg-background px-6 py-12 sm:px-12 md:w-[45%]">
         <div className="mb-8 flex justify-center">
           <Link href="/" className="inline-flex items-center">
             <Image src="/images/logo%20(2).png" alt="Hexa ERP" width={300} height={150} />
@@ -153,7 +139,7 @@ function LoginForm() {
               </div>
               <FieldError errors={[form.formState.errors.password]} />
               <div className="flex justify-end mt-1">
-                <Link href="/login/forgot" className="text-sm font-medium text-black hover:text-black/70 transition-colors">
+                <Link href="/login/forgot" className="text-sm font-medium text-foreground hover:text-foreground/70 transition-colors">
                   Forgot password?
                 </Link>
               </div>
@@ -168,7 +154,7 @@ function LoginForm() {
 
             <Button
               type="submit"
-              className="w-1/2 mx-auto mt-8 h-12 text-sm font-medium rounded-full bg-black text-white hover:bg-black/90"
+              className="w-1/2 mx-auto mt-8 h-12 text-sm font-medium rounded-full bg-foreground text-background hover:bg-foreground/90"
               disabled={form.formState.isSubmitting}
             >
               {form.formState.isSubmitting ? "Signing in…" : "Sign in"}
@@ -181,27 +167,9 @@ function LoginForm() {
           {Object.values(form.formState.errors).length > 0 && "There are errors in the form."}
         </div>
 
-        <div className="my-8 flex items-center gap-4">
-          <div className="flex-1 h-px bg-border" />
-          <span className="text-sm text-muted-foreground font-medium">Or continue with</span>
-          <div className="flex-1 h-px bg-border" />
-        </div>
-
-        <Button
-          type="button"
-          className="w-full h-11 text-base font-medium inline-flex items-center justify-center gap-3 rounded-full bg-transparent text-foreground border border-gray-300 hover:bg-black/5"
-          onClick={() => {
-            alert('Google OAuth flow placeholder')
-          }}
-          aria-label="Continue with Google"
-        >
-          <GoogleIcon />
-          Continue with Google
-        </Button>
-
         <div className="mt-12 text-center">
           <p className="text-sm text-muted-foreground">
-            Don&apos;t have an account? <Link href="#" className="font-semibold text-black hover:text-black/80 transition-colors">Create an account</Link>
+            Don&apos;t have an account? <Link href="#" className="font-semibold text-foreground hover:text-foreground/80 transition-colors">Create an account</Link>
           </p>
         </div>
       </main>

Frontend/erp-system/components/Layouts/AppSidebar.tsx

@@ -47,6 +47,9 @@ const navItems: {
   /** Where clicking the row actually navigates, if different from `href`. `href` itself
    * stays the section prefix used to decide whether this row is "active". */
   landingHref?: string
+  /** This item's own href has no page of its own (no landingHref either) — clicking the
+   * row should only expand/collapse its children, never navigate. */
+  expandOnly?: boolean
   icon: LucideIcon
   chevron?: boolean
   children?: { title: string; code: string; href: string; icon: LucideIcon }[]
@@ -106,6 +109,7 @@ const navItems: {
     title: "Settings",
     code: "settings",
     href: "/dashboard/settings",
+    expandOnly: true,
     icon: Settings,
     chevron: true,
     children: [
@@ -139,9 +143,13 @@ function SidebarContent({
   const [expanded, setExpanded] = useState<Record<string, boolean>>({})
 
   useEffect(() => {
-    const parent = items.find((i) =>
+    const parent = items.find((i) => {
-      i.children?.some((c) => pathname === c.href || pathname.startsWith(`${c.href}/`))
+      if (!i.children?.length) return false
-    )
+      if (i.children.some((c) => pathname === c.href || pathname.startsWith(`${c.href}/`))) return true
+      // Landing on the parent's own hub page (e.g. /dashboard/settings itself,
+      // not one of its children) should also reveal its sub-items.
+      return pathname === i.href || pathname.startsWith(`${i.href}/`)
+    })
     if (parent) {
       setExpanded((prev) => (prev[parent.code] ? prev : { ...prev, [parent.code]: true }))
     }
@@ -153,7 +161,7 @@ function SidebarContent({
   return (
     <nav
       className={cn(
-        "flex h-full flex-col rounded-3xl bg-card p-3 shadow-sm ring-1 ring-foreground/10 transition-[width] duration-300 ease-in-out",
+        "sidebar-surface flex h-full flex-col rounded-3xl bg-card p-3 shadow-sm ring-1 ring-foreground/10 transition-[width] duration-300 ease-in-out",
         !isMobile && (collapsed ? "w-20" : "w-64")
       )}
     >
@@ -187,7 +195,7 @@ function SidebarContent({
 
       {/* Nav items — scrolls internally when it overflows, without a visible
           scrollbar so the rounded panel stays clean. */}
-      <ul className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <ul className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {items.map((item) => {
           const isActive =
             item.href === "/dashboard" ? pathname === item.href : pathname.startsWith(item.href)
@@ -205,15 +213,18 @@ function SidebarContent({
                 <Link
                   href={item.landingHref ?? item.href}
                   title={iconOnly ? item.title : undefined}
-                  onClick={onClose}
+                  onClick={() => {
+                    onClose?.()
+                    if (hasChildren) setExpanded((prev) => (prev[item.code] ? prev : { ...prev, [item.code]: true }))
+                  }}
                   className={cn(
-                    "flex flex-1 items-center gap-3 rounded-2xl px-4 py-3 text-base font-semibold",
+                    "flex flex-1 items-center gap-3 rounded-2xl px-4 py-1.5 text-base font-normal",
                     iconOnly && "justify-center px-0",
                     isActive ? "text-primary" : "text-foreground"
                   )}
                 >
                   <item.icon
-                    className={cn("size-5 shrink-0", isActive ? "text-primary" : "text-muted-foreground")}
+                    className={cn("size-3.5 shrink-0", isActive ? "text-primary" : "text-muted-foreground")}
                   />
                   {!iconOnly && (
                     <>
@@ -270,14 +281,14 @@ function SidebarContent({
                                 onClick={onClose}
                                 tabIndex={isOpen ? undefined : -1}
                                 className={cn(
-                                  "flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition-colors",
+                                  "flex items-center gap-2.5 rounded-xl px-3 py-1 text-sm font-medium transition-colors",
                                   childActive
                                     ? "bg-primary/10 text-primary"
                                     : "text-muted-foreground hover:bg-muted hover:text-foreground"
                                 )}
                               >
                                 <child.icon
-                                  className={cn("size-4 shrink-0", childActive ? "text-primary" : "text-muted-foreground")}
+                                  className={cn("size-3 shrink-0", childActive ? "text-primary" : "text-muted-foreground")}
                                 />
                                 {child.title}
                               </Link>
@@ -362,9 +373,9 @@ export function AppSidebar() {
         type="button"
         onClick={() => setMobileOpen(true)}
         aria-label="Open menu"
-        className="fixed top-5 left-5 z-40 flex size-10 items-center justify-center rounded-2xl bg-card shadow-sm ring-1 ring-foreground/10 text-muted-foreground hover:bg-muted lg:hidden"
+        className="fixed top-8 left-5 z-40 flex size-8 items-center justify-center rounded-xl bg-card shadow-sm ring-1 ring-foreground/10 text-muted-foreground hover:bg-muted lg:hidden"
       >
-        <Menu className="size-5" />
+        <Menu className="size-4" />
       </button>
 
       {/* ── Mobile overlay backdrop ──────────────────────── */}

Frontend/erp-system/components/Layouts/Header.tsx

@@ -164,8 +164,8 @@ export function Header() {
   }
 
   return (
-    <header className="mx-6 mt-3 mb-6 flex items-center justify-between gap-2 rounded-3xl bg-card py-4 pr-4 pl-14 shadow-sm ring-1 ring-foreground/10 lg:mx-8 lg:mt-4 lg:gap-4 lg:p-4">
+    <header className="mx-3 mt-3 mb-3 flex items-center justify-between gap-2 rounded-3xl bg-card py-4 pr-3 pl-12 shadow-sm ring-1 ring-foreground/10 sm:mx-6 sm:pr-4 sm:pl-14 lg:mx-8 lg:mt-4 lg:mb-4 lg:gap-4 lg:p-4">
-      <div className="flex items-center gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
         {showBackButton && (
           <button
             type="button"
@@ -176,10 +176,10 @@ export function Header() {
             <ArrowLeft className="size-5" />
           </button>
         )}
-        <h1 className="text-base font-bold tracking-tight text-foreground sm:text-xl">{title}</h1>
+        <h1 className="min-w-0 truncate text-base font-bold tracking-tight text-foreground sm:text-xl">{title}</h1>
       </div>
 
-      <div className="flex items-center gap-2 sm:gap-3">
+      <div className="flex shrink-0 items-center gap-1.5 sm:gap-3">
         <ThemeToggle />
 
         <Popover>

Frontend/erp-system/components/theme-toggle.tsx

@@ -1,38 +1,62 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun, Monitor } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { cn } from "@/lib/utils"
 
+const options = [
+  { value: "light", label: "Light mode", icon: Sun },
+  { value: "vibrant", label: "Vibrant theme", icon: Monitor },
+  { value: "dark", label: "Dark mode", icon: Moon },
+] as const
+
 /**
- * Renders an empty slot until mounted: `resolvedTheme` is unknown on the server (and on
+ * Renders an empty slot until mounted: `theme` is unknown on the server (and on the
- * the client's first paint, before next-themes reads localStorage), so rendering an icon
+ * client's first paint, before next-themes reads localStorage), so rendering the active
- * before that would either be wrong or cause a hydration mismatch.
+ * segment before that would either be wrong or cause a hydration mismatch.
  */
 export function ThemeToggle({ className }: { className?: string }) {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
   useEffect(() => setMounted(true), [])
 
   if (!mounted) {
-    return <div className={cn("size-10 shrink-0", className)} aria-hidden="true" />
+    return <div className={cn("h-10 w-27 shrink-0", className)} aria-hidden="true" />
   }
 
-  const isDark = resolvedTheme === "dark"
-
   return (
-    <button
+    <div
-      type="button"
+      role="radiogroup"
-      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label="Theme"
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className={cn("flex shrink-0 items-center gap-0.5 rounded-full bg-muted p-1", className)}
-      className={cn(
-        "flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground",
-        className
-      )}
     >
-      {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
+      {options.map(({ value, label, icon: Icon }) => {
-    </button>
+        const isActive = theme === value
+        const isVibrant = value === "vibrant"
+        return (
+          <button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={label}
+            title={label}
+            onClick={() => setTheme(value)}
+            className={cn(
+              "flex size-8 shrink-0 items-center justify-center rounded-full transition-colors",
+              isActive
+                ? isVibrant
+                  ? "bg-linear-to-br from-indigo-500 to-violet-600 text-white shadow-sm"
+                  : "bg-card text-primary shadow-sm ring-1 ring-foreground/10"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            <Icon className="size-4" />
+          </button>
+        )
+      })}
+    </div>
   )
 }

Frontend/erp-system/components/ui/data-table.tsx

@@ -143,12 +143,11 @@ export function DataTable<T>({
 
       <Table>
         <TableHeader>
-          <TableRow className="bg-indigo-50 hover:bg-indigo-50">
+          <TableRow className="border-b-0 hover:bg-primary/5">
             {columns.map((column, index) => (
               <TableHead
                 key={column.key}
                 className={cn(
-                  "text-indigo-700",
                   index === 0 && "rounded-l-lg pl-3",
                   index === columns.length - 1 && !actions && "rounded-r-lg pr-3",
                   column.headerClassName
@@ -158,7 +157,7 @@ export function DataTable<T>({
               </TableHead>
             ))}
             {actions && (
-              <TableHead className="rounded-r-lg pr-3 text-right text-indigo-700">
+              <TableHead className="rounded-r-lg pr-3 text-right">
                 Actions
               </TableHead>
             )}

Frontend/erp-system/components/ui/table.tsx

@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn("bg-primary/5 [&_tr]:border-b [&_tr]:hover:bg-primary/5", className)}
       {...props}
     />
   )
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle font-semibold whitespace-nowrap text-primary [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}