feat: enhance UI components and add vibrant theme support

- Updated layout and styling for various dashboard pages including stock adjustments, counts, transfers, wastage, and vendors to improve responsiveness and visual consistency.
- Introduced a vibrant theme option in the theme toggle component, allowing users to switch between light, dark, and vibrant themes.
- Refactored button styles across login and forgot password pages for better accessibility and visual feedback.
- Improved sidebar navigation with expanded functionality for items without dedicated pages.
- Enhanced data table styling for better readability and user interaction.
- Added new background images to support the vibrant theme.

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
- * the client's first paint, before next-themes reads localStorage), so rendering an icon
- * before that would either be wrong or cause a hydration mismatch.
+ * Renders an empty slot until mounted: `theme` is unknown on the server (and on the
+ * client's first paint, before next-themes reads localStorage), so rendering the active
+ * 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
-      type="button"
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      className={cn(
-        "flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground",
-        className
-      )}
+    <div
+      role="radiogroup"
+      aria-label="Theme"
+      className={cn("flex shrink-0 items-center gap-0.5 rounded-full bg-muted p-1", className)}
     >
-      {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
-    </button>
+      {options.map(({ value, label, icon: Icon }) => {
+        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>
   )
 }