feat: implement theme toggle and enhance UI components

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

@@ -0,0 +1,38 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * 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.
+ */
+export function ThemeToggle({ className }: { className?: string }) {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) {
+    return <div className={cn("size-10 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
+      )}
+    >
+      {isDark ? <Sun className="size-5" /> : <Moon className="size-5" />}
+    </button>
+  )
+}