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>