feat: enhance UI components and implement password reset flow with improved styling and validation

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

@@ -141,7 +141,7 @@ export function AppSidebar() {
   return (
     <>
       {/* ── Desktop sidebar ─────────────────────────────── */}
-      <div className="hidden lg:flex">
+      <div className="my-3 hidden lg:my-4 lg:flex">
         <SidebarContent
           collapsed={collapsed}
           onCollapse={() => setCollapsed((v) => !v)}

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

@@ -6,11 +6,11 @@ export function Footer({ className }: { className?: string }) {
   return (
     <footer
       className={cn(
-        "w-full rounded-3xl bg-white shadow-sm ring-1 ring-black/5",
+        "mx-6 w-auto rounded-3xl bg-white shadow-sm ring-1 ring-black/5 lg:mx-8",
         className
       )}
     >
-      <div className="flex flex-col items-center gap-3 p-5">
+      <div className="flex flex-col items-center gap-1.5 p-3">
         {/* Logo + name */}
         <div className="flex items-center gap-2">
           <div className="flex size-7 items-center justify-center rounded-lg bg-indigo-600">

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

@@ -73,7 +73,7 @@ export function Header() {
     setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })))
 
   return (
-    <header className="mb-6 flex items-center justify-between gap-2 rounded-3xl bg-white py-4 pr-4 pl-14 shadow-sm ring-1 ring-black/5 lg:gap-4 lg:p-4">
+    <header className="mx-6 mt-3 mb-6 flex items-center justify-between gap-2 rounded-3xl bg-white py-4 pr-4 pl-14 shadow-sm ring-1 ring-black/5 lg:mx-8 lg:mt-4 lg:gap-4 lg:p-4">
       <div className="flex items-center gap-3">
         {showBackButton && (
           <button

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

@@ -17,7 +17,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-gray-200 after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       )}
       {...props}

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

@@ -15,7 +15,7 @@ const badgeVariants = cva(
         destructive:
           "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+          "border-gray-200 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:
           "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",

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

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-sm hover:shadow-md",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-sm hover:shadow-md",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary",
+        default: "bg-black text-white hover:bg-black/90 active:bg-black",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/20 dark:hover:bg-input/40",
+          "border-black bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/20 dark:hover:bg-input/40",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:

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

@@ -42,7 +42,7 @@ function ToastList() {
           <ToastPrimitive.Content className="flex items-start justify-between gap-3">
             <div className="flex flex-col gap-0.5">
               {toast.title && (
-                <ToastPrimitive.Title className="font-semibold leading-snug">
+                <ToastPrimitive.Title className="text-xs font-semibold leading-snug">
                   {toast.title}
                 </ToastPrimitive.Title>
               )}