Production ready

frontend/components/ui/ThemeToggle.tsx

@@ -1,70 +1,70 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { motion } from 'framer-motion'
-
-export function ThemeToggle() {
-    const [theme, setTheme] = useState<'light' | 'dark'>('light')
-    const [mounted, setMounted] = useState(false)
-
-    useEffect(() => {
-        setMounted(true)
-        // Check for stored preference or system preference
-        const stored = localStorage.getItem('theme')
-        if (stored === 'dark' || stored === 'light') {
-            setTheme(stored)
-        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            setTheme('dark')
-        }
-    }, [])
-
-    useEffect(() => {
-        if (!mounted) return
-
-        const root = document.documentElement
-        if (theme === 'dark') {
-            root.classList.add('dark')
-        } else {
-            root.classList.remove('dark')
-        }
-        localStorage.setItem('theme', theme)
-    }, [theme, mounted])
-
-    const toggleTheme = () => {
-        setTheme(prev => prev === 'light' ? 'dark' : 'light')
-    }
-
-    // Prevent hydration mismatch
-    if (!mounted) {
-        return (
-            <button className="p-2 rounded-lg bg-secondary/50 text-muted-foreground">
-                <Sun className="h-5 w-5" />
-            </button>
-        )
-    }
-
-    return (
-        <motion.button
-            onClick={toggleTheme}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            className="relative p-2 rounded-lg bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
-            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-        >
-            <motion.div
-                initial={false}
-                animate={{ rotate: theme === 'dark' ? 180 : 0 }}
-                transition={{ duration: 0.3, ease: 'easeInOut' }}
-            >
-                {theme === 'light' ? (
-                    <Moon className="h-5 w-5" />
-                ) : (
-                    <Sun className="h-5 w-5" />
-                )}
-            </motion.div>
-        </motion.button>
-    )
-}
-
-export default ThemeToggle
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { motion } from 'framer-motion'
+
+export function ThemeToggle() {
+    const [theme, setTheme] = useState<'light' | 'dark'>('light')
+    const [mounted, setMounted] = useState(false)
+
+    useEffect(() => {
+        setMounted(true)
+        // Check for stored preference or system preference
+        const stored = localStorage.getItem('theme')
+        if (stored === 'dark' || stored === 'light') {
+            setTheme(stored)
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            setTheme('dark')
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!mounted) return
+
+        const root = document.documentElement
+        if (theme === 'dark') {
+            root.classList.add('dark')
+        } else {
+            root.classList.remove('dark')
+        }
+        localStorage.setItem('theme', theme)
+    }, [theme, mounted])
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === 'light' ? 'dark' : 'light')
+    }
+
+    // Prevent hydration mismatch
+    if (!mounted) {
+        return (
+            <button className="p-2 rounded-lg bg-secondary/50 text-muted-foreground">
+                <Sun className="h-5 w-5" />
+            </button>
+        )
+    }
+
+    return (
+        <motion.button
+            onClick={toggleTheme}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="relative p-2 rounded-lg bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+        >
+            <motion.div
+                initial={false}
+                animate={{ rotate: theme === 'dark' ? 180 : 0 }}
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
+            >
+                {theme === 'light' ? (
+                    <Moon className="h-5 w-5" />
+                ) : (
+                    <Sun className="h-5 w-5" />
+                )}
+            </motion.div>
+        </motion.button>
+    )
+}
+
+export default ThemeToggle

frontend/components/ui/input.tsx

@@ -7,12 +7,13 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     hint?: string
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, label, error, hint, id, ...props }, ref) => {
-        const inputId = id || React.useId()
-
-        return (
-            <div className="w-full">
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, label, error, hint, id, ...props }, ref) => {
+        const generatedId = React.useId()
+        const inputId = id ?? generatedId
+
+        return (
+            <div className="w-full">
                 {label && (
                     <label
                         htmlFor={inputId}

frontend/components/ui/select.tsx

@@ -8,12 +8,13 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
     options: { value: string | number; label: string }[]
 }
 
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-    ({ className, label, error, hint, id, options, ...props }, ref) => {
-        const selectId = id || React.useId()
-
-        return (
-            <div className="w-full">
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ className, label, error, hint, id, options, ...props }, ref) => {
+        const generatedId = React.useId()
+        const selectId = id ?? generatedId
+
+        return (
+            <div className="w-full">
                 {label && (
                     <label
                         htmlFor={selectId}