Current state

2026-06-26 14:31:38 +02:00
commit 7a76841309
982 changed files with 451988 additions and 0 deletions
@@ -0,0 +1,124 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useTheme } from "next-themes"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { cn } from "@/lib/utils"
+import { Sun, Moon, Monitor } from "lucide-react"
+
+const COLOR_THEME_KEY = "crm-color-theme"
+
+const modeOptions = [
+  { value: "light", icon: Sun, label: "Light" },
+  { value: "dark", icon: Moon, label: "Dark" },
+  { value: "system", icon: Monitor, label: "System" },
+]
+
+const themeOptions = [
+  { value: "default", label: "Default", color: "bg-blue-600", ring: "ring-blue-600" },
+  { value: "ocean", label: "Ocean", color: "bg-teal-500", ring: "ring-teal-500" },
+  { value: "forest", label: "Forest", color: "bg-green-600", ring: "ring-green-600" },
+  { value: "sunset", label: "Sunset", color: "bg-orange-500", ring: "ring-orange-500" },
+  { value: "midnight", label: "Midnight", color: "bg-indigo-600", ring: "ring-indigo-600" },
+  { value: "rose", label: "Rose", color: "bg-pink-600", ring: "ring-pink-600" },
+  { value: "amber", label: "Amber", color: "bg-amber-500", ring: "ring-amber-500" },
+  { value: "violet", label: "Violet", color: "bg-violet-600", ring: "ring-violet-600" },
+  { value: "slate", label: "Slate", color: "bg-slate-500", ring: "ring-slate-500" },
+  { value: "ruby", label: "Ruby", color: "bg-red-600", ring: "ring-red-600" },
+]
+
+function getStoredColorTheme(): string {
+  if (typeof window === "undefined") return "default"
+  return localStorage.getItem(COLOR_THEME_KEY) || "default"
+}
+
+function applyColorTheme(theme: string) {
+  document.documentElement.className = document.documentElement.className
+    .replace(/\b(default|ocean|forest|sunset|midnight|rose|amber|violet|slate|ruby)\b/g, "")
+    .trim()
+  if (theme !== "default") {
+    document.documentElement.classList.add(theme)
+  }
+  localStorage.setItem(COLOR_THEME_KEY, theme)
+}
+
+export function ThemeSettings() {
+  const { theme, setTheme } = useTheme()
+  const [colorTheme, setColorTheme] = useState("default")
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    setColorTheme(getStoredColorTheme())
+    applyColorTheme(getStoredColorTheme())
+  }, [])
+
+  function handleColorChange(value: string) {
+    setColorTheme(value)
+    applyColorTheme(value)
+  }
+
+  if (!mounted) return null
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Theme Mode</CardTitle>
+          <CardDescription>
+            Choose your preferred appearance mode.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup value={theme || "dark"} onValueChange={setTheme} className="grid grid-cols-3 gap-4">
+            {modeOptions.map(({ value, icon: Icon, label }) => (
+              <div key={value}>
+                <RadioGroupItem value={value} id={`mode-${value}`} className="peer sr-only" />
+                <Label
+                  htmlFor={`mode-${value}`}
+                  className={cn(
+                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
+                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
+                  )}
+                >
+                  <Icon className="h-6 w-6" />
+                  <span className="text-sm font-medium">{label}</span>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Color Theme</CardTitle>
+          <CardDescription>
+            Select a color accent for the dashboard.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup value={colorTheme} onValueChange={handleColorChange} className="grid grid-cols-5 gap-4">
+            {themeOptions.map(({ value, label, color, ring }) => (
+              <div key={value}>
+                <RadioGroupItem value={value} id={`color-${value}`} className="peer sr-only" />
+                <Label
+                  htmlFor={`color-${value}`}
+                  className={cn(
+                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
+                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
+                  )}
+                >
+                  <div className={cn("h-8 w-8 rounded-full", color, ring, "ring-2 ring-offset-2 ring-offset-background")} />
+                  <span className="text-sm font-medium">{label}</span>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}