Initial commit

components/Dashboard.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { loadCoinsData } from '@/app/actions/data'
+import { useHabits } from '@/hooks/useHabits'
+import { useWishlist } from '@/hooks/useWishlist'
+import { useEffect, useState } from 'react'
+import CoinBalance from './CoinBalance'
+import DailyOverview from './DailyOverview'
+import HabitOverview from './HabitOverview'
+import HabitStreak from './HabitStreak'
+
+export default function Dashboard() {
+  const { habits, completeHabit, undoComplete } = useHabits()
+  const [coinBalance, setCoinBalance] = useState(0)
+  const { wishlistItems } = useWishlist()
+
+  useEffect(() => {
+    const loadData = async () => {
+      const coinsData = await loadCoinsData()
+      setCoinBalance(coinsData.balance)
+    }
+    loadData()
+  }, [])
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <CoinBalance coinBalance={coinBalance} />
+        {/* <HabitOverview /> */}
+        <HabitStreak habits={habits} />
+        <DailyOverview
+          wishlistItems={wishlistItems}
+          habits={habits}
+          coinBalance={coinBalance}
+          onComplete={async (habit) => {
+            const newBalance = await completeHabit(habit)
+            if (newBalance !== null) {
+              setCoinBalance(newBalance)
+            }
+          }}
+          onUndo={async (habit) => {
+            const newBalance = await undoComplete(habit)
+            if (newBalance !== null) {
+              setCoinBalance(newBalance)
+            }
+          }}
+        />
+
+        {/* <HabitHeatmap habits={habits} /> */}
+      </div>
+    </div>
+  )
+}
+