Added settings, enabled calendar

app/settings/page.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { useSettings } from '@/hooks/useSettings'
+
+export default function SettingsPage() {
+  const { settings, updateSettings } = useSettings()
+
+  if (!settings) return null
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">Settings</h1>
+      
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>UI Settings</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="number-formatting">Number Formatting</Label>
+              <div className="text-sm text-muted-foreground">
+                Format large numbers (e.g., 1K, 1M, 1B)
+              </div>
+            </div>
+            <Switch
+              id="number-formatting"
+              checked={settings.ui.useNumberFormatting}
+              onCheckedChange={(checked) =>
+                updateSettings({
+                  ...settings,
+                  ui: { ...settings.ui, useNumberFormatting: checked }
+                })
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="number-grouping">Number Grouping</Label>
+              <div className="text-sm text-muted-foreground">
+                Use thousand separators (e.g., 1,000 vs 1000)
+              </div>
+            </div>
+            <Switch
+              id="number-grouping"
+              checked={settings.ui.useGrouping}
+              onCheckedChange={(checked) =>
+                updateSettings({
+                  ...settings,
+                  ui: { ...settings.ui, useGrouping: checked }
+                })
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}