I fixed the lightmode on the sidebar and added

more colour themes. I fixed the settings buttons.

src/components/settings/company-settings-form.tsx

@@ -1,13 +1,72 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Button } from "@/components/ui/button"
-import { COMPANY_NAME } from "@/lib/constants"
 import { toast } from "sonner"
 
+interface CompanyData {
+  companyName: string
+  companyEmail: string
+  companyPhone: string
+  companyWebsite: string
+  companyAddress: string
+}
+
 export function CompanySettingsForm() {
+  const [data, setData] = useState<CompanyData>({
+    companyName: "",
+    companyEmail: "",
+    companyPhone: "",
+    companyWebsite: "",
+    companyAddress: "",
+  })
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/settings/company")
+        if (res.ok) {
+          const json = await res.json()
+          setData(json)
+        }
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  async function handleSave() {
+    setSaving(true)
+    try {
+      const res = await fetch("/api/settings/company", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      })
+      if (res.ok) {
+        toast.success("Company settings saved")
+      } else {
+        toast.error("Failed to save company settings")
+      }
+    } catch {
+      toast.error("Failed to save company settings")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function update(field: keyof CompanyData, value: string) {
+    setData((prev) => ({ ...prev, [field]: value }))
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -20,27 +79,29 @@ export function CompanySettingsForm() {
         <div className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-2">
             <Label htmlFor="company-name">Company Name</Label>
-            <Input id="company-name" defaultValue={COMPANY_NAME} />
+            <Input id="company-name" disabled={loading} value={data.companyName} onChange={(e) => update("companyName", e.target.value)} />
           </div>
           <div className="space-y-2">
             <Label htmlFor="company-email">Company Email</Label>
-            <Input id="company-email" type="email" defaultValue="info@coastalit.com" />
+            <Input id="company-email" type="email" disabled={loading} value={data.companyEmail} onChange={(e) => update("companyEmail", e.target.value)} />
           </div>
           <div className="space-y-2">
             <Label htmlFor="company-phone">Phone</Label>
-            <Input id="company-phone" defaultValue="(555) 123-4567" />
+            <Input id="company-phone" disabled={loading} value={data.companyPhone} onChange={(e) => update("companyPhone", e.target.value)} />
           </div>
           <div className="space-y-2">
             <Label htmlFor="company-website">Website</Label>
-            <Input id="company-website" defaultValue="https://coastalit.com" />
+            <Input id="company-website" disabled={loading} value={data.companyWebsite} onChange={(e) => update("companyWebsite", e.target.value)} />
           </div>
           <div className="space-y-2 sm:col-span-2">
             <Label htmlFor="company-address">Address</Label>
-            <Input id="company-address" defaultValue="123 Business Ave, Suite 100, San Francisco, CA 94105" />
+            <Input id="company-address" disabled={loading} value={data.companyAddress} onChange={(e) => update("companyAddress", e.target.value)} />
           </div>
         </div>
         <div className="flex justify-end pt-4">
-          <Button onClick={() => toast.success("Company settings saved")}>Save Changes</Button>
+          <Button onClick={handleSave} disabled={loading || saving}>
+            {saving ? "Saving..." : "Save Changes"}
+          </Button>
         </div>
       </CardContent>
     </Card>

src/components/settings/theme-settings.tsx

@@ -1,5 +1,6 @@
 "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"
@@ -7,42 +8,117 @@ 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)
 
-  const options = [
-    { value: "light", icon: Sun, label: "Light" },
-    { value: "dark", icon: Moon, label: "Dark" },
-    { value: "system", icon: Monitor, label: "System" },
-  ]
+  useEffect(() => {
+    setMounted(true)
+    setColorTheme(getStoredColorTheme())
+    applyColorTheme(getStoredColorTheme())
+  }, [])
+
+  function handleColorChange(value: string) {
+    setColorTheme(value)
+    applyColorTheme(value)
+  }
+
+  if (!mounted) return null
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Theme Settings</CardTitle>
-        <CardDescription>
-          Choose your preferred appearance for the dashboard.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <RadioGroup value={theme} onValueChange={setTheme} className="grid grid-cols-3 gap-4">
-          {options.map(({ value, icon: Icon, label }) => (
-            <div key={value}>
-              <RadioGroupItem value={value} id={value} className="peer sr-only" />
-              <Label
-                htmlFor={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>
+    <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>
   )
 }

src/components/settings/user-preferences-form.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Button } from "@/components/ui/button"
@@ -12,7 +13,58 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
+interface Preferences {
+  timezone: string
+  dateFormat: string
+  itemsPerPage: number
+}
+
 export function UserPreferencesForm() {
+  const [prefs, setPrefs] = useState<Preferences>({
+    timezone: "america-los_angeles",
+    dateFormat: "mdy",
+    itemsPerPage: 20,
+  })
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/settings/preferences")
+        if (res.ok) {
+          const json = await res.json()
+          setPrefs(json)
+        }
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  async function handleSave() {
+    setSaving(true)
+    try {
+      const res = await fetch("/api/settings/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(prefs),
+      })
+      if (res.ok) {
+        toast.success("Preferences saved")
+      } else {
+        toast.error("Failed to save preferences")
+      }
+    } catch {
+      toast.error("Failed to save preferences")
+    } finally {
+      setSaving(false)
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -25,7 +77,7 @@ export function UserPreferencesForm() {
         <div className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-2">
             <Label htmlFor="timezone">Timezone</Label>
-            <Select defaultValue="america-los_angeles">
+            <Select disabled={loading} value={prefs.timezone} onValueChange={(v) => setPrefs((p) => ({ ...p, timezone: v }))}>
               <SelectTrigger id="timezone">
                 <SelectValue />
               </SelectTrigger>
@@ -39,7 +91,7 @@ export function UserPreferencesForm() {
           </div>
           <div className="space-y-2">
             <Label htmlFor="date-format">Date Format</Label>
-            <Select defaultValue="mdy">
+            <Select disabled={loading} value={prefs.dateFormat} onValueChange={(v) => setPrefs((p) => ({ ...p, dateFormat: v }))}>
               <SelectTrigger id="date-format">
                 <SelectValue />
               </SelectTrigger>
@@ -52,7 +104,7 @@ export function UserPreferencesForm() {
           </div>
           <div className="space-y-2">
             <Label htmlFor="items-per-page">Items Per Page</Label>
-            <Select defaultValue="20">
+            <Select disabled={loading} value={String(prefs.itemsPerPage)} onValueChange={(v) => setPrefs((p) => ({ ...p, itemsPerPage: parseInt(v) }))}>
               <SelectTrigger id="items-per-page">
                 <SelectValue />
               </SelectTrigger>
@@ -66,7 +118,9 @@ export function UserPreferencesForm() {
           </div>
         </div>
         <div className="flex justify-end pt-4">
-          <Button onClick={() => toast.success("Preferences saved")}>Save Preferences</Button>
+          <Button onClick={handleSave} disabled={loading || saving}>
+            {saving ? "Saving..." : "Save Preferences"}
+          </Button>
         </div>
       </CardContent>
     </Card>