From 18d0c0bdb9a23de104aafe0a98e1055997088a26 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sat, 4 Jul 2026 22:29:16 -0500
Subject: [PATCH] =?UTF-8?q?refactor(ts):=20SettingsPage=20=E2=86=92=20Type?=
 =?UTF-8?q?Script=20(auto-save=20settings=20+=20tracker=20layout=20toggles?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TS flagged a dead prop: onSaved was passed to NotificationPreferences (which only
takes settings) — removed it. Notification components imported from ProfilePage
(still .jsx) type as any until that page converts.
---
 .../{SettingsPage.jsx => SettingsPage.tsx}    | 63 ++++++++++++-------
 1 file changed, 42 insertions(+), 21 deletions(-)
 rename client/pages/{SettingsPage.jsx => SettingsPage.tsx} (90%)

diff --git a/client/pages/SettingsPage.jsx b/client/pages/SettingsPage.tsx
similarity index 90%
rename from client/pages/SettingsPage.jsx
rename to client/pages/SettingsPage.tsx
index b3c500e..1de511f 100644
--- a/client/pages/SettingsPage.jsx
+++ b/client/pages/SettingsPage.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, type ComponentType, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { AlertCircle, Moon, RefreshCw, Sun, Users } from 'lucide-react';
 import { api } from '@/api';
-import { cn } from '@/lib/utils';
+import { cn, errMessage } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { CalendarFeedManager } from '@/components/CalendarFeedManager';
@@ -18,7 +18,7 @@ import { SaveStatus } from '@/components/ui/save-status';
 import { NotificationPreferences, PushNotifications, asSettings } from '@/pages/ProfilePage';
 
 export const LINK_IMPORT_PREF_KEY = 'link_import_ask';
-export function getLinkImportPref() {
+export function getLinkImportPref(): boolean {
   return localStorage.getItem(LINK_IMPORT_PREF_KEY) !== 'false';
 }
 
@@ -26,12 +26,12 @@ export function getLinkImportPref() {
 //     preferences; Profile keeps identity, security, and privacy) ──────────────
 
 function NotificationsSection() {
-  const [settings, setSettings] = useState(null);
+  const [settings, setSettings] = useState<Record<string, unknown> | null>(null);
 
   const load = useCallback(() => {
     api.profileSettings()
       .then((data) => setSettings(asSettings(data)))
-      .catch((err) => toast.error(err.message || 'Failed to load notification settings.'));
+      .catch((err) => toast.error(errMessage(err, 'Failed to load notification settings.')));
   }, []);
 
   useEffect(() => { load(); }, [load]);
@@ -39,7 +39,7 @@ function NotificationsSection() {
   if (!settings) return null;
   return (
     <div className="space-y-4 mb-4">
-      <NotificationPreferences settings={settings} onSaved={setSettings} />
+      <NotificationPreferences settings={settings} />
       <PushNotifications settings={settings} onSaved={load} />
     </div>
   );
@@ -47,7 +47,7 @@ function NotificationsSection() {
 
 // ─── Card wrapper ─────────────────────────────────────────────────────────────
 
-function SectionCard({ title, children }) {
+function SectionCard({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="table-surface mb-4">
       <div className="px-6 py-4 border-b border-border/50">
@@ -62,7 +62,7 @@ function SectionCard({ title, children }) {
 
 // ─── Setting Row ──────────────────────────────────────────────────────────────
 
-function SettingRow({ label, description, children }) {
+function SettingRow({ label, description, children }: { label: ReactNode; description?: ReactNode; children: ReactNode }) {
   return (
     <div className="px-4 py-4 flex flex-col gap-3 sm:px-6 sm:flex-row sm:items-center sm:justify-between">
       <div className="flex-1 min-w-0 sm:mr-8">
@@ -80,7 +80,13 @@ function SettingRow({ label, description, children }) {
 
 // ─── Theme Card ───────────────────────────────────────────────────────────────
 
-function ThemeCard({ value, label, icon: Icon, currentTheme, onSelect }) {
+function ThemeCard({ value, label, icon: Icon, currentTheme, onSelect }: {
+  value: string;
+  label: string;
+  icon: ComponentType<{ className?: string }>;
+  currentTheme: string;
+  onSelect: (v: string) => void;
+}) {
   const selected = currentTheme === value;
   return (
     <button
@@ -132,7 +138,7 @@ function LoginModeRecoverySection() {
       refresh();
       navigate('/login', { replace: true });
     } catch (err) {
-      toast.error(err.message || 'Failed to restore multi-user mode.');
+      toast.error(errMessage(err, 'Failed to restore multi-user mode.'));
     } finally {
       setRestoring(false);
     }
@@ -246,7 +252,7 @@ function SettingsSkeleton() {
 function LinkImportToggle() {
   const [enabled, setEnabled] = useState(getLinkImportPref);
 
-  function toggle(next) {
+  function toggle(next: boolean) {
     localStorage.setItem(LINK_IMPORT_PREF_KEY, String(next));
     setEnabled(next);
     toast.success(next
@@ -264,15 +270,30 @@ function LinkImportToggle() {
   );
 }
 
-function settingsBool(value, fallback = true) {
+function settingsBool(value: unknown, fallback = true): boolean {
   if (value === undefined || value === null || value === '') return fallback;
   return value === true || value === 'true';
 }
 
+interface SettingsState {
+  currency: string;
+  date_format: string;
+  grace_period_days: number | string;
+  drift_threshold_pct: string;
+  tracker_show_bank_projection_banner: string;
+  tracker_bank_projection_banner_snoozed_until: string;
+  tracker_show_search_sort: string;
+  tracker_show_summary_cards: string;
+  tracker_show_safe_to_spend: string;
+  tracker_show_overdue_command_center: string;
+  tracker_show_drift_insights: string;
+  [key: string]: unknown;
+}
+
 // ─── SettingsPage ─────────────────────────────────────────────────────────────
 
 export default function SettingsPage() {
-  const DEFAULTS = {
+  const DEFAULTS: SettingsState = {
     currency:              'USD',
     date_format:           'MM/DD/YYYY',
     grace_period_days:     3,
@@ -286,22 +307,22 @@ export default function SettingsPage() {
     tracker_show_drift_insights: 'true',
   };
 
-  const [settings, setSettings] = useState(DEFAULTS);
+  const [settings, setSettings] = useState<SettingsState>(DEFAULTS);
   const [loading,   setLoading]   = useState(true);
-  const [loadError, setLoadError] = useState(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   const loadSettings = useCallback(() => {
     setLoading(true);
     setLoadError(null);
     api.settings()
-      .then((d) => setSettings({ ...DEFAULTS, ...d }))
-      .catch((err) => setLoadError(err.message || 'Failed to load settings'))
+      .then((d) => setSettings({ ...DEFAULTS, ...(d as Partial<SettingsState>) }))
+      .catch((err) => setLoadError(errMessage(err, 'Failed to load settings')))
       .finally(() => setLoading(false));
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => { loadSettings(); }, [loadSettings]);
 
-  const buildPayload = (s) => ({
+  const buildPayload = (s: SettingsState) => ({
     currency: s.currency,
     date_format: s.date_format,
     grace_period_days: s.grace_period_days,
@@ -320,17 +341,17 @@ export default function SettingsPage() {
   // don't save half-typed numbers.
   const { status: saveStatus, schedule } = useAutoSave(
     (payload) => api.saveSettings(payload).catch((err) => {
-      toast.error(err.message || 'Failed to save settings.');
+      toast.error(errMessage(err, 'Failed to save settings.'));
       throw err;
     }),
   );
 
-  const set = (k, v, delay) => setSettings((p) => {
+  const set = (k: string, v: unknown, delay?: number) => setSettings((p) => {
     const next = { ...p, [k]: v };
     schedule(buildPayload(next), delay);
     return next;
   });
-  const setTyped = (k, v) => set(k, v, 900); // for keystroke-driven inputs
+  const setTyped = (k: string, v: unknown) => set(k, v, 900); // for keystroke-driven inputs
 
   if (loading) {
     return (