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