added timezone settings

components/CoinsManager.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { useSettings } from '@/hooks/useSettings'
+import { getDateInTimezone } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { formatNumber } from '@/lib/utils/formatNumber'
 import { History } from 'lucide-react'
@@ -10,7 +11,6 @@ import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { toast } from '@/hooks/use-toast'
 import { useCoins } from '@/hooks/useCoins'
-import { format } from 'date-fns'
 import Link from 'next/link'
 
 export default function CoinsManager() {
@@ -145,7 +145,8 @@ export default function CoinsManager() {
                 <div className="text-sm text-blue-800 dark:text-blue-100 mb-1">Today's Transactions</div>
                 <div className="text-2xl font-bold text-blue-900 dark:text-blue-50">
                   {transactions.filter(t =>
-                    new Date(t.timestamp).toDateString() === new Date().toDateString()
+                    getDateInTimezone(t.timestamp, settings.system.timezone).toDateString() ===
+                    getDateInTimezone(new Date(), settings.system.timezone).toDateString()
                   ).length} 📊
                 </div>
               </div>
@@ -212,7 +213,7 @@ export default function CoinsManager() {
                           </span>
                         </div>
                         <p className="text-sm text-gray-500">
-                          {format(new Date(transaction.timestamp), 'PPpp')}
+                          {getDateInTimezone(transaction.timestamp, settings.system.timezone).toLocaleString()}
                         </p>
                       </div>
                       <span
@@ -231,6 +232,6 @@ export default function CoinsManager() {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </div >
   )
 }

components/DailyOverview.tsx

@@ -1,6 +1,8 @@
 import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
+import { useSettings } from '@/hooks/useSettings'
+import { getTodayInTimezone } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
@@ -22,7 +24,8 @@ export default function DailyOverview({
   onComplete,
   onUndo
 }: UpcomingItemsProps) {
-  const today = new Date().toISOString().split('T')[0]
+  const { settings } = useSettings()
+  const today = getTodayInTimezone(settings.system.timezone)
   const todayCompletions = habits.filter(habit =>
     habit.completions.includes(today)
   )

components/DynamicTime.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import moment from 'moment-timezone'
+
+interface DynamicTimeProps {
+  timezone: string
+}
+
+export function DynamicTime({ timezone }: DynamicTimeProps) {
+  const [time, setTime] = useState(moment())
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(moment())
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <div className="text-sm text-muted-foreground">
+      {time.tz(timezone).format('dddd, MMMM D, YYYY h:mm:ss A')}
+    </div>
+  )
+}

components/DynamicTimeNoSSR.tsx

@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic'
+import { DynamicTime } from './DynamicTime'
+
+const DynamicTimeNoSSR = dynamic(() => Promise.resolve(DynamicTime), {
+  ssr: false
+})
+
+export { DynamicTimeNoSSR }

components/HabitItem.tsx

@@ -1,4 +1,6 @@
 import { Habit } from '@/lib/types'
+import { useSettings } from '@/hooks/useSettings'
+import { getTodayInTimezone } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Coins, Edit, Trash2, Check, Undo2 } from 'lucide-react'
@@ -13,7 +15,8 @@ interface HabitItemProps {
 }
 
 export default function HabitItem({ habit, onEdit, onDelete, onComplete, onUndo }: HabitItemProps) {
-  const today = new Date().toISOString().split('T')[0]
+  const { settings } = useSettings()
+  const today = getTodayInTimezone(settings.system.timezone)
   const isCompletedToday = habit.completions?.includes(today)
   const [isHighlighted, setIsHighlighted] = useState(false)
 

components/HabitOverview.tsx

@@ -1,6 +1,8 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { BarChart } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { useSettings } from '@/hooks/useSettings'
+import { getTodayInTimezone } from '@/lib/utils'
 import { loadHabitsData } from '@/app/actions/data'
 import { Habit } from '@/lib/types'
 
@@ -15,7 +17,8 @@ export default function HabitOverview() {
     fetchHabits()
   }, [])
 
-  const today = new Date().toISOString().split('T')[0]
+  const { settings } = useSettings()
+  const today = getTodayInTimezone(settings.system.timezone)
 
   const completedToday = habits.filter(habit =>
     habit.completions.includes(today)

components/HabitStreak.tsx

@@ -2,6 +2,8 @@
 
 import { Habit } from '@/lib/types'
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useSettings } from '@/hooks/useSettings'
+import { getDateInTimezone } from '@/lib/utils'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
 
 interface HabitStreakProps {
@@ -11,7 +13,8 @@ interface HabitStreakProps {
 export default function HabitStreak({ habits }: HabitStreakProps) {
   // Get the last 30 days of data
   const dates = Array.from({ length: 30 }, (_, i) => {
-    const d = new Date()
+    const { settings } = useSettings()
+    const d = getDateInTimezone(new Date(), settings.system.timezone)
     d.setDate(d.getDate() - i)
     return d.toISOString().split('T')[0]
   }).reverse()