From 7808cf53c24a2277b3e53a4bec18d34ffde5c23d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 17:12:49 +0000
Subject: [PATCH] fix: Persist Settings Panel preferences using Zustand store

Connect SettingsPanel form inputs to useSettingsStore hook so that
user preferences (weekly hours target, notifications) are saved to
localStorage and persist across sessions.

Fixes #10
---
 src/components/settings/SettingsPanel.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index 99b241f..7e0d5d3 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Card } from '@/components/ui';
 import { bcClient } from '@/services/bc/bcClient';
 import { useAuth } from '@/services/auth';
+import { useSettingsStore } from '@/hooks/useSettingsStore';
 import {
   BuildingOffice2Icon,
   EnvelopeIcon,
@@ -26,6 +27,7 @@ interface CompanyInfo {
 
 export function SettingsPanel() {
   const { account } = useAuth();
+  const { weeklyHoursTarget, notificationsEnabled, updateSettings } = useSettingsStore();
   const [companyInfo, setCompanyInfo] = useState<CompanyInfo | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -136,7 +138,15 @@ export function SettingsPanel() {
             </div>
             <input
               type="number"
-              defaultValue={40}
+              value={weeklyHoursTarget}
+              min={1}
+              max={168}
+              onChange={(e) => {
+                const value = parseInt(e.target.value, 10);
+                if (!isNaN(value) && value >= 1 && value <= 168) {
+                  updateSettings({ weeklyHoursTarget: value });
+                }
+              }}
               className="w-20 rounded-lg border border-dark-600 bg-dark-800 px-3 py-2 text-dark-100 focus:outline-none focus:ring-2 focus:ring-thyme-500"
             />
           </div>
@@ -146,7 +156,12 @@ export function SettingsPanel() {
               <p className="text-sm text-dark-400">Get reminded to fill in your timesheet</p>
             </div>
             <label className="relative inline-flex cursor-pointer items-center">
-              <input type="checkbox" defaultChecked className="peer sr-only" />
+              <input
+                type="checkbox"
+                checked={notificationsEnabled}
+                onChange={(e) => updateSettings({ notificationsEnabled: e.target.checked })}
+                className="peer sr-only"
+              />
               <div className="peer h-6 w-11 rounded-full bg-dark-600 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-thyme-600 peer-checked:after:translate-x-full peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-thyme-500"></div>
             </label>
           </div>