```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerApp: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; export default HabitTrackerApp; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const darkMode = useSelector((state: any) => state.habits.settings.darkMode); React.useEffect(() => { if (darkMode) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }, [darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` Implemented dark mode functionality by connecting the Redux dark mode setting to the document's dark class, which automatically applies the dark theme styles when the user toggles dark mode in settings. ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const darkMode = useSelector((state: any) => state.habits.settings.darkMode); React.useEffect(() => { if (darkMode) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }, [darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` Error while applying llm output. Retrying. ```ts src/data/habitTrackerMockData.ts import { HabitCategory, HabitFrequency, BadgeType, ReminderTime } from '../types/enums'; // Data for global state store export const mockStore = { habits: [ { id: '1', name: 'Drink 8 glasses of water', category: HabitCategory.HEALTH, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.MORNING, customReminderTime: null, currentStreak: 12, bestStreak: 15, totalCompleted: 45, createdAt: '2024-01-01T00:00:00Z', isActive: true }, { id: '2', name: 'Morning workout', category: HabitCategory.FITNESS, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.MORNING, customReminderTime: null, currentStreak: 8, bestStreak: 20, totalCompleted: 32, createdAt: '2024-01-05T00:00:00Z', isActive: true }, { id: '3', name: 'Read for 30 minutes', category: HabitCategory.LEARNING, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.EVENING, customReminderTime: null, currentStreak: 5, bestStreak: 25, totalCompleted: 28, createdAt: '2024-01-10T00:00:00Z', isActive: true } ], completions: [ { habitId: '1', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '1', date: '2024-01-21T00:00:00Z', completed: true }, { habitId: '2', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '2', date: '2024-01-21T00:00:00Z', completed: false }, { habitId: '3', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '3', date: '2024-01-21T00:00:00Z', completed: true } ], badges: [ { type: BadgeType.FIRST_HABIT, earnedAt: '2024-01-01T00:00:00Z' }, { type: BadgeType.STREAK_7, earnedAt: '2024-01-08T00:00:00Z' }, { type: BadgeType.PERFECT_WEEK, earnedAt: '2024-01-15T00:00:00Z' } ], settings: { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }, currentView: 'daily', selectedDate: '2024-01-21T00:00:00Z' }; // Data passed as props to the root component export const mockRootProps = { initialView: 'daily' }; ``` ```ts src/data/habitTrackerMockData.ts import { HabitCategory, HabitFrequency, BadgeType, ReminderTime } from '../types/enums'; // Data for global state store export const mockStore = { habits: [ { id: '1', name: 'Drink 8 glasses of water', category: HabitCategory.HEALTH, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.MORNING, customReminderTime: null, currentStreak: 12, bestStreak: 15, totalCompleted: 45, createdAt: '2024-01-01T00:00:00Z', isActive: true }, { id: '2', name: 'Morning workout', category: HabitCategory.FITNESS, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.MORNING, customReminderTime: null, currentStreak: 8, bestStreak: 20, totalCompleted: 32, createdAt: '2024-01-05T00:00:00Z', isActive: true }, { id: '3', name: 'Read for 30 minutes', category: HabitCategory.LEARNING, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.EVENING, customReminderTime: null, currentStreak: 5, bestStreak: 25, totalCompleted: 28, createdAt: '2024-01-10T00:00:00Z', isActive: true } ], completions: [ { habitId: '1', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '1', date: '2024-01-21T00:00:00Z', completed: true }, { habitId: '2', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '2', date: '2024-01-21T00:00:00Z', completed: false }, { habitId: '3', date: '2024-01-20T00:00:00Z', completed: true }, { habitId: '3', date: '2024-01-21T00:00:00Z', completed: true } ], badges: [ { type: BadgeType.FIRST_HABIT, earnedAt: '2024-01-01T00:00:00Z' }, { type: BadgeType.STREAK_7, earnedAt: '2024-01-08T00:00:00Z' }, { type: BadgeType.PERFECT_WEEK, earnedAt: '2024-01-15T00:00:00Z' } ], settings: { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }, currentView: 'daily', selectedDate: '2024-01-21T00:00:00Z' }; // Data passed as props to the root component export const mockRootProps = { initialView: 'daily' }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; customReminderTime: string | null; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; customReminderTime: string | null; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; customReminderTime: string | null; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` Error while applying llm output. Retrying. ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: null }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` Error while applying llm output. Retrying. ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0 }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits.habits); const completions = useSelector((state: any) => state.habits.completions); const selectedDate = useSelector((state: any) => state.habits.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; customReminderTime: string | null; }) => { dispatch(addHabit({ ...habitData, isActive: true })); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

{/* Category Filter */} setSelectedCategory(value as HabitCategory | 'all')}> All {Object.values(HabitCategory).map((category) => ( {formatCategory(category)} ))} {/* Add Habit Button */} {/* Habits List */} {filteredHabits.length === 0 ? (

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

)} {/* Delete Confirmation Dialog */} setHabitToDelete(null)}> Delete Habit Are you sure you want to delete this habit? This action cannot be undone. Cancel habitToDelete && handleDeleteHabit(habitToDelete)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" > Delete

); }; ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits.habits); const completions = useSelector((state: any) => state.habits.completions); const selectedDate = useSelector((state: any) => state.habits.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; customReminderTime: string | null; }) => { dispatch(addHabit({ ...habitData, isActive: true })); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0 }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime || null }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0 }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE, customReminderTime: null }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; }) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit(formData); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits.habits); const completions = useSelector((state: any) => state.habits.completions); const selectedDate = useSelector((state: any) => state.habits.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: { name: string; category: HabitCategory; frequency: HabitFrequency; reminderTime: ReminderTime; }) => { dispatch(addHabit({ ...habitData, isActive: true, customReminderTime: null })); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction & { customReminderTime: string | null }>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0 }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction & { customReminderTime: string | null }>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime || null }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits.habits); const completions = useSelector((state: any) => state.habits.completions); const selectedDate = useSelector((state: any) => state.habits.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: any) => { dispatch(addHabit({ ...habitData, isActive: true, customReminderTime: null })); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits.habits); const completions = useSelector((state: any) => state.habits.completions); const selectedDate = useSelector((state: any) => state.habits.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: any) => { dispatch(addHabit({ ...habitData, isActive: true, customReminderTime: null })); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```tsx src/components/AddHabitDialog.tsx import React, { useState } from 'react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Plus } from 'lucide-react'; import { HabitCategory, HabitFrequency, ReminderTime } from '../types/enums'; import { formatCategory, formatReminderTime } from '../utils/formatters'; interface AddHabitDialogProps { onAddHabit: (habit: any) => void; } export const AddHabitDialog: React.FC = ({ onAddHabit }) => { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); const [errors, setErrors] = useState>({}); const validateForm = () => { const newErrors: Record = {}; if (!formData.name.trim()) { newErrors.name = 'Habit name is required'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!validateForm()) return; onAddHabit({ ...formData, customReminderTime: null, isActive: true }); setFormData({ name: '', category: HabitCategory.OTHER, frequency: HabitFrequency.DAILY, reminderTime: ReminderTime.NONE }); setErrors({}); setOpen(false); }; const handleClose = () => { setOpen(false); setErrors({}); }; return ( ); }; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction>) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { ...action.payload, id: Date.now().toString(), createdAt: new Date().toISOString(), currentStreak: 0, bestStreak: 0, totalCompleted: 0, customReminderTime: action.payload.customReminderTime }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/HabitCard.tsx import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { Progress } from '@/components/ui/progress'; import { Heart, Dumbbell, BookOpen, Target, User, MoreHorizontal, Flame } from 'lucide-react'; import { Habit } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatStreakDays } from '../utils/formatters'; interface HabitCardProps { habit: Habit; isCompleted: boolean; onToggleComplete: () => void; onEdit: () => void; onDelete: () => void; } const categoryIcons = { [HabitCategory.HEALTH]: Heart, [HabitCategory.FITNESS]: Dumbbell, [HabitCategory.LEARNING]: BookOpen, [HabitCategory.PRODUCTIVITY]: Target, [HabitCategory.PERSONAL]: User, [HabitCategory.OTHER]: Target }; const categoryColors = { [HabitCategory.HEALTH]: 'bg-green-100 text-green-800', [HabitCategory.FITNESS]: 'bg-orange-100 text-orange-800', [HabitCategory.LEARNING]: 'bg-purple-100 text-purple-800', [HabitCategory.PRODUCTIVITY]: 'bg-yellow-100 text-yellow-800', [HabitCategory.PERSONAL]: 'bg-pink-100 text-pink-800', [HabitCategory.OTHER]: 'bg-gray-100 text-gray-800' }; export const HabitCard: React.FC = ({ habit, isCompleted, onToggleComplete, onEdit, onDelete }) => { const CategoryIcon = categoryIcons[habit.category]; const streakPercentage = Math.min((habit.currentStreak / 30) * 100, 100); return (

{formatCategory(habit.category)}

{habit.name}

{habit.currentStreak > 0 && (

{formatStreakDays(habit.currentStreak)} • Best: {formatStreakDays(habit.bestStreak)}

)}

Edit Habit Delete Habit

); }; ``` ```tsx src/components/HabitCard.tsx import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { Progress } from '@/components/ui/progress'; import { Heart, Dumbbell, BookOpen, Target, User, MoreHorizontal, Flame } from 'lucide-react'; import { Habit } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatStreakDays } from '../utils/formatters'; interface HabitCardProps { habit: Habit; isCompleted: boolean; onToggleComplete: () => void; onEdit: () => void; onDelete: () => void; } const categoryIcons = { [HabitCategory.HEALTH]: Heart, [HabitCategory.FITNESS]: Dumbbell, [HabitCategory.LEARNING]: BookOpen, [HabitCategory.PRODUCTIVITY]: Target, [HabitCategory.PERSONAL]: User, [HabitCategory.OTHER]: Target }; const categoryColors = { [HabitCategory.HEALTH]: 'bg-green-100 text-green-800', [HabitCategory.FITNESS]: 'bg-orange-100 text-orange-800', [HabitCategory.LEARNING]: 'bg-purple-100 text-purple-800', [HabitCategory.PRODUCTIVITY]: 'bg-yellow-100 text-yellow-800', [HabitCategory.PERSONAL]: 'bg-pink-100 text-pink-800', [HabitCategory.OTHER]: 'bg-gray-100 text-gray-800' }; export const HabitCard: React.FC = ({ habit, isCompleted, onToggleComplete, onEdit, onDelete }) => { const CategoryIcon = categoryIcons[habit.category]; const streakPercentage = Math.min((habit.currentStreak / 30) * 100, 100); return (

{formatCategory(habit.category)}

{habit.name}

{habit.currentStreak > 0 && (

{formatStreakDays(habit.currentStreak)} • Best: {formatStreakDays(habit.bestStreak)}

)}

Edit Habit Delete Habit

); }; ``` ```tsx src/components/HabitCard.tsx import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { Progress } from '@/components/ui/progress'; import { Heart, Dumbbell, BookOpen, Target, User, MoreHorizontal, Flame } from 'lucide-react'; import { Habit } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatStreakDays } from '../utils/formatters'; interface HabitCardProps { habit: Habit; isCompleted: boolean; onToggleComplete: () => void; onEdit: () => void; onDelete: () => void; } const categoryIcons = { [HabitCategory.HEALTH]: Heart, [HabitCategory.FITNESS]: Dumbbell, [HabitCategory.LEARNING]: BookOpen, [HabitCategory.PRODUCTIVITY]: Target, [HabitCategory.PERSONAL]: User, [HabitCategory.OTHER]: Target }; const categoryColors = { [HabitCategory.HEALTH]: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', [HabitCategory.FITNESS]: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200', [HabitCategory.LEARNING]: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', [HabitCategory.PRODUCTIVITY]: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', [HabitCategory.PERSONAL]: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200', [HabitCategory.OTHER]: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' }; export const HabitCard: React.FC = ({ habit, isCompleted, onToggleComplete, onEdit, onDelete }) => { const CategoryIcon = categoryIcons[habit.category]; const streakPercentage = Math.min((habit.currentStreak / 30) * 100, 100); return (

{formatCategory(habit.category)}

{habit.name}

{habit.currentStreak > 0 && (

{formatStreakDays(habit.currentStreak)} • Best: {formatStreakDays(habit.bestStreak)}

)}

Edit Habit Delete Habit

); }; ``` ```tsx src/components/HabitCard.tsx import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { Progress } from '@/components/ui/progress'; import { Heart, Dumbbell, BookOpen, Target, User, MoreHorizontal, Flame } from 'lucide-react'; import { Habit } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatStreakDays } from '../utils/formatters'; interface HabitCardProps { habit: Habit; isCompleted: boolean; onToggleComplete: () => void; onEdit: () => void; onDelete: () => void; } const categoryIcons = { [HabitCategory.HEALTH]: Heart, [HabitCategory.FITNESS]: Dumbbell, [HabitCategory.LEARNING]: BookOpen, [HabitCategory.PRODUCTIVITY]: Target, [HabitCategory.PERSONAL]: User, [HabitCategory.OTHER]: Target }; const categoryColors = { [HabitCategory.HEALTH]: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', [HabitCategory.FITNESS]: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200', [HabitCategory.LEARNING]: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', [HabitCategory.PRODUCTIVITY]: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', [HabitCategory.PERSONAL]: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200', [HabitCategory.OTHER]: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' }; export const HabitCard: React.FC = ({ habit, isCompleted, onToggleComplete, onEdit, onDelete }) => { const CategoryIcon = categoryIcons[habit.category]; const streakPercentage = Math.min((habit.currentStreak / 30) * 100, 100); return (

{formatCategory(habit.category)}

{habit.name}

{habit.currentStreak > 0 && (

{formatStreakDays(habit.currentStreak)} • Best: {formatStreakDays(habit.bestStreak)}

)}

Edit Habit Delete Habit

); }; ``` ```css src/theme.css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--card); --color-popover-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-health: var(--health); --color-fitness: var(--fitness); --color-learning: var(--learning); --color-productivity: var(--productivity); --color-personal: var(--personal); --color-chart-1: var(--primary); --color-chart-2: var(--success); --color-chart-3: var(--warning); --color-chart-4: var(--health); --color-chart-5: var(--fitness); --color-sidebar: var(--card); --color-sidebar-foreground: var(--card-foreground); --color-sidebar-primary: var(--primary); --color-sidebar-primary-foreground: var(--primary-foreground); --color-sidebar-accent: var(--accent); --color-sidebar-accent-foreground: var(--accent-foreground); --color-sidebar-border: var(--border); --color-sidebar-ring: var(--ring); } :root { --radius: 0.75rem; /* Primary brand colors - calming blue-green palette */ --primary: #2563eb; --primary-foreground: #f8fafc; /* Success/completion colors - vibrant green */ --success: #10b981; --success-foreground: #f0fdf4; /* Warning/streak colors - warm orange */ --warning: #f59e0b; --warning-foreground: #fffbeb; /* Habit category colors */ --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; /* Background and surface colors */ --background: #ffffff; --foreground: #0f172a; --card: #f8fafc; --card-foreground: #0f172a; /* Muted colors for secondary elements */ --muted: #f1f5f9; --muted-foreground: #64748b; /* Border and input styling */ --border: #e2e8f0; --input: #f1f5f9; --ring: #2563eb; /* Secondary accent */ --secondary: #f1f5f9; --secondary-foreground: #334155; /* Accent for highlights */ --accent: #e2e8f0; --accent-foreground: #334155; /* Destructive for delete actions */ --destructive: #ef4444; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --muted: #334155; --muted-foreground: #94a3b8; --border: #475569; --input: #334155; --ring: #3b82f6; --secondary: #334155; --secondary-foreground: #e2e8f0; --accent: #475569; --accent-foreground: #e2e8f0; } @layer base { * { @apply border-border outline-ring/50; } .dark { color-scheme: dark; } } ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const darkMode = useSelector((state: any) => state.habits.settings.darkMode); React.useEffect(() => { if (darkMode) { document.documentElement.classList.add('dark'); document.body.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); document.body.classList.remove('dark'); } }, [darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```css index.css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import "./src/theme.css"; :root { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Inter', system-ui, sans-serif; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; background-color: hsl(var(--background)); color: hsl(var(--foreground)); transition: background-color 0.3s ease, color 0.3s ease; } #root { margin: auto; width: 100%; } ``` ```css src/theme.css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--card); --color-popover-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-health: var(--health); --color-fitness: var(--fitness); --color-learning: var(--learning); --color-productivity: var(--productivity); --color-personal: var(--personal); --color-chart-1: var(--primary); --color-chart-2: var(--success); --color-chart-3: var(--warning); --color-chart-4: var(--health); --color-chart-5: var(--fitness); --color-sidebar: var(--card); --color-sidebar-foreground: var(--card-foreground); --color-sidebar-primary: var(--primary); --color-sidebar-primary-foreground: var(--primary-foreground); --color-sidebar-accent: var(--accent); --color-sidebar-accent-foreground: var(--accent-foreground); --color-sidebar-border: var(--border); --color-sidebar-ring: var(--ring); } :root { --radius: 0.75rem; /* Primary brand colors - calming blue-green palette */ --primary: #2563eb; --primary-foreground: #f8fafc; /* Success/completion colors - vibrant green */ --success: #10b981; --success-foreground: #f0fdf4; /* Warning/streak colors - warm orange */ --warning: #f59e0b; --warning-foreground: #fffbeb; /* Habit category colors */ --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; /* Background and surface colors */ --background: #ffffff; --foreground: #0f172a; --card: #f8fafc; --card-foreground: #0f172a; /* Muted colors for secondary elements */ --muted: #f1f5f9; --muted-foreground: #64748b; /* Border and input styling */ --border: #e2e8f0; --input: #f1f5f9; --ring: #2563eb; /* Secondary accent */ --secondary: #f1f5f9; --secondary-foreground: #334155; /* Accent for highlights */ --accent: #e2e8f0; --accent-foreground: #334155; /* Destructive for delete actions */ --destructive: #ef4444; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --muted: #334155; --muted-foreground: #94a3b8; --border: #475569; --input: #334155; --ring: #3b82f6; --secondary: #334155; --secondary-foreground: #e2e8f0; --accent: #475569; --accent-foreground: #e2e8f0; --success: #10b981; --warning: #f59e0b; --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; } @layer base { * { @apply border-border outline-ring/50; } .dark { color-scheme: dark; } } ``` ```css src/theme.css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--card); --color-popover-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-health: var(--health); --color-fitness: var(--fitness); --color-learning: var(--learning); --color-productivity: var(--productivity); --color-personal: var(--personal); --color-chart-1: var(--primary); --color-chart-2: var(--success); --color-chart-3: var(--warning); --color-chart-4: var(--health); --color-chart-5: var(--fitness); --color-sidebar: var(--card); --color-sidebar-foreground: var(--card-foreground); --color-sidebar-primary: var(--primary); --color-sidebar-primary-foreground: var(--primary-foreground); --color-sidebar-accent: var(--accent); --color-sidebar-accent-foreground: var(--accent-foreground); --color-sidebar-border: var(--border); --color-sidebar-ring: var(--ring); } :root { --radius: 0.75rem; /* Primary brand colors - calming blue-green palette */ --primary: #2563eb; --primary-foreground: #f8fafc; /* Success/completion colors - vibrant green */ --success: #10b981; --success-foreground: #f0fdf4; /* Warning/streak colors - warm orange */ --warning: #f59e0b; --warning-foreground: #fffbeb; /* Habit category colors */ --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; /* Background and surface colors */ --background: #ffffff; --foreground: #0f172a; --card: #f8fafc; --card-foreground: #0f172a; /* Muted colors for secondary elements */ --muted: #f1f5f9; --muted-foreground: #64748b; /* Border and input styling */ --border: #e2e8f0; --input: #f1f5f9; --ring: #2563eb; /* Secondary accent */ --secondary: #f1f5f9; --secondary-foreground: #334155; /* Accent for highlights */ --accent: #e2e8f0; --accent-foreground: #334155; /* Destructive for delete actions */ --destructive: #ef4444; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --muted: #334155; --muted-foreground: #94a3b8; --border: #475569; --input: #334155; --ring: #3b82f6; --secondary: #334155; --secondary-foreground: #e2e8f0; --accent: #475569; --accent-foreground: #e2e8f0; --success: #10b981; --warning: #f59e0b; --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; } @layer base { * { @apply border-border outline-ring/50; } .dark { color-scheme: dark; } html, body { transition: background-color 0.3s ease, color 0.3s ease; } } ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const darkMode = useSelector((state: any) => state.habits.settings.darkMode); React.useEffect(() => { const root = document.documentElement; if (darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```css src/theme.css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--card); --color-popover-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-health: var(--health); --color-fitness: var(--fitness); --color-learning: var(--learning); --color-productivity: var(--productivity); --color-personal: var(--personal); --color-chart-1: var(--primary); --color-chart-2: var(--success); --color-chart-3: var(--warning); --color-chart-4: var(--health); --color-chart-5: var(--fitness); --color-sidebar: var(--card); --color-sidebar-foreground: var(--card-foreground); --color-sidebar-primary: var(--primary); --color-sidebar-primary-foreground: var(--primary-foreground); --color-sidebar-accent: var(--accent); --color-sidebar-accent-foreground: var(--accent-foreground); --color-sidebar-border: var(--border); --color-sidebar-ring: var(--ring); } :root { --radius: 0.75rem; /* Primary brand colors - calming blue-green palette */ --primary: #2563eb; --primary-foreground: #f8fafc; /* Success/completion colors - vibrant green */ --success: #10b981; --success-foreground: #f0fdf4; /* Warning/streak colors - warm orange */ --warning: #f59e0b; --warning-foreground: #fffbeb; /* Habit category colors */ --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; /* Background and surface colors */ --background: #ffffff; --foreground: #0f172a; --card: #f8fafc; --card-foreground: #0f172a; /* Muted colors for secondary elements */ --muted: #f1f5f9; --muted-foreground: #64748b; /* Border and input styling */ --border: #e2e8f0; --input: #f1f5f9; --ring: #2563eb; /* Secondary accent */ --secondary: #f1f5f9; --secondary-foreground: #334155; /* Accent for highlights */ --accent: #e2e8f0; --accent-foreground: #334155; /* Destructive for delete actions */ --destructive: #ef4444; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --muted: #334155; --muted-foreground: #94a3b8; --border: #475569; --input: #334155; --ring: #3b82f6; --secondary: #334155; --secondary-foreground: #e2e8f0; --accent: #475569; --accent-foreground: #e2e8f0; --success: #10b981; --warning: #f59e0b; --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; } @layer base { * { @apply border-border outline-ring/50; } .dark { color-scheme: dark; } * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } } ``` ```css index.css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import "./src/theme.css"; :root { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Inter', system-ui, sans-serif; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; background-color: hsl(var(--background)); color: hsl(var(--foreground)); transition: background-color 0.2s ease, color 0.2s ease; } #root { margin: auto; width: 100%; } ``` ```css src/theme.css @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--card); --color-popover-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-health: var(--health); --color-fitness: var(--fitness); --color-learning: var(--learning); --color-productivity: var(--productivity); --color-personal: var(--personal); --color-chart-1: var(--primary); --color-chart-2: var(--success); --color-chart-3: var(--warning); --color-chart-4: var(--health); --color-chart-5: var(--fitness); --color-sidebar: var(--card); --color-sidebar-foreground: var(--card-foreground); --color-sidebar-primary: var(--primary); --color-sidebar-primary-foreground: var(--primary-foreground); --color-sidebar-accent: var(--accent); --color-sidebar-accent-foreground: var(--accent-foreground); --color-sidebar-border: var(--border); --color-sidebar-ring: var(--ring); } :root { --radius: 0.75rem; /* Primary brand colors - calming blue-green palette */ --primary: #2563eb; --primary-foreground: #f8fafc; /* Success/completion colors - vibrant green */ --success: #10b981; --success-foreground: #f0fdf4; /* Warning/streak colors - warm orange */ --warning: #f59e0b; --warning-foreground: #fffbeb; /* Habit category colors */ --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; /* Background and surface colors */ --background: #ffffff; --foreground: #0f172a; --card: #f8fafc; --card-foreground: #0f172a; /* Muted colors for secondary elements */ --muted: #f1f5f9; --muted-foreground: #64748b; /* Border and input styling */ --border: #e2e8f0; --input: #f1f5f9; --ring: #2563eb; /* Secondary accent */ --secondary: #f1f5f9; --secondary-foreground: #334155; /* Accent for highlights */ --accent: #e2e8f0; --accent-foreground: #334155; /* Destructive for delete actions */ --destructive: #ef4444; } .dark { --background: #0f172a; --foreground: #f1f5f9; --card: #1e293b; --card-foreground: #f1f5f9; --muted: #334155; --muted-foreground: #94a3b8; --border: #475569; --input: #334155; --ring: #3b82f6; --secondary: #334155; --secondary-foreground: #e2e8f0; --accent: #475569; --accent-foreground: #e2e8f0; --success: #10b981; --warning: #f59e0b; --health: #10b981; --fitness: #f97316; --learning: #8b5cf6; --productivity: #f59e0b; --personal: #ec4899; } @layer base { * { @apply border-border outline-ring/50; } .dark { color-scheme: dark; } html { transition: background-color 0.2s ease, color 0.2s ease; } } ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const settings = useSelector((state: any) => state.habits.settings); const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const settings = useSelector((state: any) => state.habits.settings); React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const settings = useSelector((state: any) => state.habits.settings); React.useEffect(() => { const root = document.documentElement; if (settings && settings.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const settings = useSelector((state: any) => state.habits?.settings); React.useEffect(() => { if (settings) { const root = document.documentElement; if (settings.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } } }, [settings]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habits = useSelector((state: any) => state.habits?.habits || []); const completions = useSelector((state: any) => state.habits?.completions || []); const selectedDate = useSelector((state: any) => state.habits?.selectedDate); const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: any) => { dispatch(addHabit(habitData)); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```tsx src/components/WeeklyView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { CheckCircle, Circle } from 'lucide-react'; import { Habit, HabitCompletion } from '../types/schema'; import { formatCategory } from '../utils/formatters'; interface WeeklyViewProps {} export const WeeklyView: React.FC = () => { const habits = useSelector((state: any) => state.habits?.habits || []); const completions = useSelector((state: any) => state.habits?.completions || []); const getWeekDates = () => { const today = new Date(); const startOfWeek = new Date(today); startOfWeek.setDate(today.getDate() - today.getDay()); return Array.from({ length: 7 }, (_, i) => { const date = new Date(startOfWeek); date.setDate(startOfWeek.getDate() + i); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); }; const weekDates = getWeekDates(); const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const isHabitCompletedOnDate = (habitId: string, date: string) => { return completions.some(c => c.habitId === habitId && c.date === date && c.completed); }; const getWeeklyStats = () => { const totalPossible = habits.length * 7; const totalCompleted = habits.reduce((acc, habit) => { return acc + weekDates.filter(date => isHabitCompletedOnDate(habit.id, date)).length; }, 0); return { completed: totalCompleted, total: totalPossible, percentage: totalPossible > 0 ? Math.round((totalCompleted / totalPossible) * 100) : 0 }; }; const stats = getWeeklyStats(); return (

{/* Weekly Stats */} This Week

{stats.completed}

Completed

{stats.total}

Total

{stats.percentage}%

Success Rate

{/* Weekly Grid */} Weekly Progress

{/* Day Headers */}

Habit

{dayNames.map((day, index) => (

{day}

{new Date(weekDates[index]).getDate()}

))}

{/* Habit Rows */} {habits.map((habit) => (

{habit.name}

{formatCategory(habit.category)}

{weekDates.map((date, index) => { const isCompleted = isHabitCompletedOnDate(habit.id, date); const isToday = new Date(date).toDateString() === new Date().toDateString(); return (

{isCompleted ? ( ) : ( )}

); })}

))}

{habits.length === 0 && (

No habits to display

Add some habits to see your weekly progress

)}

); }; ``` ```tsx src/components/MonthlyView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Calendar } from '@/components/ui/calendar'; import { Badge } from '@/components/ui/badge'; import { Habit, HabitCompletion } from '../types/schema'; interface MonthlyViewProps {} export const MonthlyView: React.FC = () => { const habits = useSelector((state: any) => state.habits?.habits || []); const completions = useSelector((state: any) => state.habits?.completions || []); const [selectedDate, setSelectedDate] = React.useState(new Date()); const getMonthDates = () => { const today = new Date(); const year = today.getFullYear(); const month = today.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); return Array.from({ length: daysInMonth }, (_, i) => { const date = new Date(year, month, i + 1); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); }; const monthDates = getMonthDates(); const getCompletionRate = (date: string) => { const dayCompletions = completions.filter(c => c.date === date && c.completed); return habits.length > 0 ? (dayCompletions.length / habits.length) * 100 : 0; }; const getMonthlyStats = () => { const totalPossible = habits.length * monthDates.length; const totalCompleted = monthDates.reduce((acc, date) => { const dayCompletions = completions.filter(c => c.date === date && c.completed); return acc + dayCompletions.length; }, 0); return { completed: totalCompleted, total: totalPossible, percentage: totalPossible > 0 ? Math.round((totalCompleted / totalPossible) * 100) : 0, perfectDays: monthDates.filter(date => getCompletionRate(date) === 100).length }; }; const stats = getMonthlyStats(); const getDayClassName = (date: Date) => { const dateString = date.toISOString().split('T')[0] + 'T00:00:00Z'; const completionRate = getCompletionRate(dateString); if (completionRate === 100) { return 'bg-success text-success-foreground'; } else if (completionRate >= 50) { return 'bg-warning text-warning-foreground'; } else if (completionRate > 0) { return 'bg-primary/20 text-primary'; } return ''; }; return (

{/* Monthly Stats */}

{stats.completed}

Completed

{stats.total}

Total

{stats.percentage}%

Success Rate

{stats.perfectDays}

Perfect Days

{/* Calendar and Legend */}

Monthly Calendar Legend

100% Complete

50-99% Complete

1-49% Complete

No Progress

{/* Selected Date Details */} {selectedDate && ( {selectedDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

{habits.map((habit) => { const dateString = selectedDate.toISOString().split('T')[0] + 'T00:00:00Z'; const isCompleted = completions.some( c => c.habitId === habit.id && c.date === dateString && c.completed ); return (

{habit.name} {isCompleted ? "Completed" : "Not Done"}

); })} {habits.length === 0 && (

No habits to display

)}

); }; ``` ```tsx src/components/InsightsView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, LineChart, Line, PieChart, Pie, Cell } from 'recharts'; import { TrendingUp, Target, Award, Flame } from 'lucide-react'; import { Habit, HabitCompletion, Badge as BadgeType } from '../types/schema'; import { formatBadgeName, formatCategory, formatStreakDays } from '../utils/formatters'; interface InsightsViewProps {} export const InsightsView: React.FC = () => { const habits = useSelector((state: any) => state.habits?.habits || []); const completions = useSelector((state: any) => state.habits?.completions || []); const badges = useSelector((state: any) => state.habits?.badges || []); const getWeeklyData = () => { const last7Days = Array.from({ length: 7 }, (_, i) => { const date = new Date(); date.setDate(date.getDate() - (6 - i)); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); return last7Days.map(date => { const dayCompletions = completions.filter(c => c.date === date && c.completed); const dayName = new Date(date).toLocaleDateString('en-US', { weekday: 'short' }); return { day: dayName, completed: dayCompletions.length, total: habits.length, rate: habits.length > 0 ? Math.round((dayCompletions.length / habits.length) * 100) : 0 }; }); }; const getCategoryData = () => { const categoryStats = habits.reduce((acc, habit) => { const categoryCompletions = completions.filter( c => c.habitId === habit.id && c.completed ).length; if (!acc[habit.category]) { acc[habit.category] = { category: formatCategory(habit.category), completed: 0, total: 0 }; } acc[habit.category].completed += categoryCompletions; acc[habit.category].total += habit.totalCompleted; return acc; }, {} as Record); return Object.values(categoryStats); }; const getOverallStats = () => { const totalCompletions = completions.filter(c => c.completed).length; const totalPossible = habits.length * 30; // Assuming 30 days const averageStreak = habits.length > 0 ? Math.round(habits.reduce((acc, h) => acc + h.currentStreak, 0) / habits.length) : 0; const bestStreak = Math.max(...habits.map(h => h.bestStreak), 0); return { totalCompletions, completionRate: totalPossible > 0 ? Math.round((totalCompletions / totalPossible) * 100) : 0, averageStreak, bestStreak, totalHabits: habits.length, activeDays: new Set(completions.filter(c => c.completed).map(c => c.date)).size }; }; const weeklyData = getWeeklyData(); const categoryData = getCategoryData(); const stats = getOverallStats(); const chartConfig = { completed: { label: "Completed", color: "hsl(var(--success))", }, rate: { label: "Success Rate", color: "hsl(var(--primary))", }, }; const COLORS = ['#10b981', '#f59e0b', '#8b5cf6', '#f97316', '#ec4899']; return (

{/* Overview Stats */}

{stats.totalHabits}

Total Habits

{stats.completionRate}%

Success Rate

{stats.bestStreak}

Best Streak

{badges.length}

Badges Earned

{/* Charts */}

{/* Weekly Progress Chart */} Weekly Progress

} />

{/* Success Rate Trend */} Success Rate Trend

} />

{/* Habit Streaks and Badges */}

{/* Top Performing Habits */} Top Performing Habits

{[...habits] .sort((a, b) => b.currentStreak - a.currentStreak) .slice(0, 5) .map((habit) => (

{habit.name}

{formatCategory(habit.category)}

{formatStreakDays(habit.currentStreak)}

Best: {formatStreakDays(habit.bestStreak)}

))} {habits.length === 0 && (

No habits to display

)}

{/* Achievement Badges */} Achievement Badges

{badges.map((badge, index) => (

{formatBadgeName(badge.type)}

{new Date(badge.earnedAt).toLocaleDateString()}

))} {badges.length === 0 && (

No badges earned yet

Keep building habits to unlock achievements!

)}

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const settings = useSelector((state: any) => state.habits?.settings || {}); const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const settings = useSelector((state: any) => state.habits?.settings); React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: { ...mockStore, settings: { darkMode: false, notifications: true, defaultReminderTime: 'morning' } } } }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: { ...mockStore, settings: { darkMode: false, notifications: true, defaultReminderTime: 'morning' } } } }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: { ...mockStore, settings: { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } } } }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: mockStore } }); ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || {}; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || {}; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || {}; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || {}; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/DailyView.tsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'; import { Calendar, CheckCircle, TrendingUp } from 'lucide-react'; import { HabitCard } from './HabitCard'; import { AddHabitDialog } from './AddHabitDialog'; import { toggleHabitCompletion, addHabit, deleteHabit } from '../store/habitStore'; import { Habit, HabitCompletion } from '../types/schema'; import { HabitCategory } from '../types/enums'; import { formatCategory, formatDate } from '../utils/formatters'; interface DailyViewProps {} export const DailyView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const habits = habitState?.habits || []; const completions = habitState?.completions || []; const selectedDate = habitState?.selectedDate; const [selectedCategory, setSelectedCategory] = React.useState('all'); const [habitToDelete, setHabitToDelete] = React.useState(null); const today = new Date().toISOString().split('T')[0] + 'T00:00:00Z'; const todayCompletions = completions.filter(c => c.date === today); const filteredHabits = habits.filter(habit => selectedCategory === 'all' || habit.category === selectedCategory ); const completedToday = todayCompletions.filter(c => c.completed).length; const totalHabits = filteredHabits.length; const completionRate = totalHabits > 0 ? Math.round((completedToday / totalHabits) * 100) : 0; const handleToggleCompletion = (habitId: string) => { dispatch(toggleHabitCompletion({ habitId, date: today })); }; const handleAddHabit = (habitData: any) => { dispatch(addHabit(habitData)); }; const handleDeleteHabit = (habitId: string) => { dispatch(deleteHabit(habitId)); setHabitToDelete(null); }; const isHabitCompleted = (habitId: string) => { return todayCompletions.some(c => c.habitId === habitId && c.completed); }; return (

{/* Header Stats */}

Today

{formatDate(new Date())}

Completed

{completedToday} / {totalHabits}

Success Rate

{completionRate}%

No habits yet

Add your first habit to get started

) : (

{filteredHabits.map((habit) => ( handleToggleCompletion(habit.id)} onEdit={() => {/* TODO: Implement edit */}} onDelete={() => setHabitToDelete(habit.id)} /> ))}

); }; ``` ```tsx src/components/WeeklyView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { CheckCircle, Circle } from 'lucide-react'; import { Habit, HabitCompletion } from '../types/schema'; import { formatCategory } from '../utils/formatters'; interface WeeklyViewProps {} export const WeeklyView: React.FC = () => { const habitState = useSelector((state: any) => state.habits); const habits = habitState?.habits || []; const completions = habitState?.completions || []; const getWeekDates = () => { const today = new Date(); const startOfWeek = new Date(today); startOfWeek.setDate(today.getDate() - today.getDay()); return Array.from({ length: 7 }, (_, i) => { const date = new Date(startOfWeek); date.setDate(startOfWeek.getDate() + i); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); }; const weekDates = getWeekDates(); const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const isHabitCompletedOnDate = (habitId: string, date: string) => { return completions.some(c => c.habitId === habitId && c.date === date && c.completed); }; const getWeeklyStats = () => { const totalPossible = habits.length * 7; const totalCompleted = habits.reduce((acc, habit) => { return acc + weekDates.filter(date => isHabitCompletedOnDate(habit.id, date)).length; }, 0); return { completed: totalCompleted, total: totalPossible, percentage: totalPossible > 0 ? Math.round((totalCompleted / totalPossible) * 100) : 0 }; }; const stats = getWeeklyStats(); return (

{/* Weekly Stats */} This Week

{stats.completed}

Completed

{stats.total}

Total

{stats.percentage}%

Success Rate

{/* Weekly Grid */} Weekly Progress

{/* Day Headers */}

Habit

{dayNames.map((day, index) => (

{day}

{new Date(weekDates[index]).getDate()}

))}

{/* Habit Rows */} {habits.map((habit) => (

{habit.name}

{formatCategory(habit.category)}

{weekDates.map((date, index) => { const isCompleted = isHabitCompletedOnDate(habit.id, date); const isToday = new Date(date).toDateString() === new Date().toDateString(); return (

{isCompleted ? ( ) : ( )}

); })}

))}

{habits.length === 0 && (

No habits to display

Add some habits to see your weekly progress

)}

); }; ``` ```tsx src/components/MonthlyView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Calendar } from '@/components/ui/calendar'; import { Badge } from '@/components/ui/badge'; import { Habit, HabitCompletion } from '../types/schema'; interface MonthlyViewProps {} export const MonthlyView: React.FC = () => { const habitState = useSelector((state: any) => state.habits); const habits = habitState?.habits || []; const completions = habitState?.completions || []; const [selectedDate, setSelectedDate] = React.useState(new Date()); const getMonthDates = () => { const today = new Date(); const year = today.getFullYear(); const month = today.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); return Array.from({ length: daysInMonth }, (_, i) => { const date = new Date(year, month, i + 1); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); }; const monthDates = getMonthDates(); const getCompletionRate = (date: string) => { const dayCompletions = completions.filter(c => c.date === date && c.completed); return habits.length > 0 ? (dayCompletions.length / habits.length) * 100 : 0; }; const getMonthlyStats = () => { const totalPossible = habits.length * monthDates.length; const totalCompleted = monthDates.reduce((acc, date) => { const dayCompletions = completions.filter(c => c.date === date && c.completed); return acc + dayCompletions.length; }, 0); return { completed: totalCompleted, total: totalPossible, percentage: totalPossible > 0 ? Math.round((totalCompleted / totalPossible) * 100) : 0, perfectDays: monthDates.filter(date => getCompletionRate(date) === 100).length }; }; const stats = getMonthlyStats(); const getDayClassName = (date: Date) => { const dateString = date.toISOString().split('T')[0] + 'T00:00:00Z'; const completionRate = getCompletionRate(dateString); if (completionRate === 100) { return 'bg-success text-success-foreground'; } else if (completionRate >= 50) { return 'bg-warning text-warning-foreground'; } else if (completionRate > 0) { return 'bg-primary/20 text-primary'; } return ''; }; return (

{/* Monthly Stats */}

{stats.completed}

Completed

{stats.total}

Total

{stats.percentage}%

Success Rate

{stats.perfectDays}

Perfect Days

{/* Calendar and Legend */}

Monthly Calendar Legend

100% Complete

50-99% Complete

1-49% Complete

No Progress

{/* Selected Date Details */} {selectedDate && ( {selectedDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

{habit.name} {isCompleted ? "Completed" : "Not Done"}

); })} {habits.length === 0 && (

No habits to display

)}

); }; ``` ```tsx src/components/InsightsView.tsx import React from 'react'; import { useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, LineChart, Line, PieChart, Pie, Cell } from 'recharts'; import { TrendingUp, Target, Award, Flame } from 'lucide-react'; import { Habit, HabitCompletion, Badge as BadgeType } from '../types/schema'; import { formatBadgeName, formatCategory, formatStreakDays } from '../utils/formatters'; interface InsightsViewProps {} export const InsightsView: React.FC = () => { const habitState = useSelector((state: any) => state.habits); const habits = habitState?.habits || []; const completions = habitState?.completions || []; const badges = habitState?.badges || []; const getWeeklyData = () => { const last7Days = Array.from({ length: 7 }, (_, i) => { const date = new Date(); date.setDate(date.getDate() - (6 - i)); return date.toISOString().split('T')[0] + 'T00:00:00Z'; }); return last7Days.map(date => { const dayCompletions = completions.filter(c => c.date === date && c.completed); const dayName = new Date(date).toLocaleDateString('en-US', { weekday: 'short' }); return { day: dayName, completed: dayCompletions.length, total: habits.length, rate: habits.length > 0 ? Math.round((dayCompletions.length / habits.length) * 100) : 0 }; }); }; const getCategoryData = () => { const categoryStats = habits.reduce((acc, habit) => { const categoryCompletions = completions.filter( c => c.habitId === habit.id && c.completed ).length; if (!acc[habit.category]) { acc[habit.category] = { category: formatCategory(habit.category), completed: 0, total: 0 }; } acc[habit.category].completed += categoryCompletions; acc[habit.category].total += habit.totalCompleted; return acc; }, {} as Record); return Object.values(categoryStats); }; const getOverallStats = () => { const totalCompletions = completions.filter(c => c.completed).length; const totalPossible = habits.length * 30; // Assuming 30 days const averageStreak = habits.length > 0 ? Math.round(habits.reduce((acc, h) => acc + h.currentStreak, 0) / habits.length) : 0; const bestStreak = Math.max(...habits.map(h => h.bestStreak), 0); return { totalCompletions, completionRate: totalPossible > 0 ? Math.round((totalCompletions / totalPossible) * 100) : 0, averageStreak, bestStreak, totalHabits: habits.length, activeDays: new Set(completions.filter(c => c.completed).map(c => c.date)).size }; }; const weeklyData = getWeeklyData(); const categoryData = getCategoryData(); const stats = getOverallStats(); const chartConfig = { completed: { label: "Completed", color: "hsl(var(--success))", }, rate: { label: "Success Rate", color: "hsl(var(--primary))", }, }; const COLORS = ['#10b981', '#f59e0b', '#8b5cf6', '#f97316', '#ec4899']; return (

{/* Overview Stats */}

{stats.totalHabits}

Total Habits

{stats.completionRate}%

Success Rate

{stats.bestStreak}

Best Streak

{badges.length}

Badges Earned

{/* Charts */}

{/* Weekly Progress Chart */} Weekly Progress

} />

{/* Success Rate Trend */} Success Rate Trend

} />

{/* Habit Streaks and Badges */}

{/* Top Performing Habits */} Top Performing Habits

{[...habits] .sort((a, b) => b.currentStreak - a.currentStreak) .slice(0, 5) .map((habit) => (

{habit.name}

{formatCategory(habit.category)}

{formatStreakDays(habit.currentStreak)}

Best: {formatStreakDays(habit.bestStreak)}

))} {habits.length === 0 && (

No habits to display

)}

{/* Achievement Badges */} Achievement Badges

{badges.map((badge, index) => (

{formatBadgeName(badge.type)}

{new Date(badge.earnedAt).toLocaleDateString()}

))} {badges.length === 0 && (

No badges earned yet

Keep building habits to unlock achievements!

)}

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings && settings.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { if (state.settings) { state.settings = { ...state.settings, ...action.payload }; } else { state.settings = { ...action.payload } as AppSettings; } } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: mockStore } }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: { ...mockStore, settings: mockStore.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } }, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { if (state.settings) { state.settings = { ...state.settings, ...action.payload }; } else { state.settings = { ...action.payload } as AppSettings; } } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: mockStore } }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: { ...mockStore, settings: mockStore.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } }, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware), preloadedState: { habits: mockStore } }); ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: 'morning' }; React.useEffect(() => { const root = document.documentElement; if (settings && settings.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings || { darkMode: false, notifications: true, defaultReminderTime: 'morning' }; React.useEffect(() => { const root = document.documentElement; if (settings.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: { ...mockStore, settings: mockStore.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } }, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { if (!state.settings) { state.settings = { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; } state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: { ...mockStore, settings: mockStore.settings || { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } }, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode === true) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

); }; const HabitTrackerApp: React.FC = () => { return ( ); }; export default HabitTrackerApp; ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { if (!state.settings) { state.settings = { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING }; } Object.assign(state.settings, action.payload); } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: mockStore, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```ts src/store/habitStore.ts import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { Habit, HabitCompletion, Badge, AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { mockStore } from '../data/habitTrackerMockData'; // Habit slice const habitSlice = createSlice({ name: 'habits', initialState: { ...mockStore, settings: { darkMode: false, notifications: true, defaultReminderTime: ReminderTime.MORNING } }, reducers: { addHabit: (state, action: PayloadAction) => { const newHabit: Habit = { id: Date.now().toString(), name: action.payload.name, category: action.payload.category, frequency: action.payload.frequency, reminderTime: action.payload.reminderTime, customReminderTime: action.payload.customReminderTime, currentStreak: 0, bestStreak: 0, totalCompleted: 0, createdAt: new Date().toISOString(), isActive: action.payload.isActive }; state.habits.push(newHabit); }, updateHabit: (state, action: PayloadAction<{ id: string; updates: Partial }>) => { const index = state.habits.findIndex(h => h.id === action.payload.id); if (index !== -1) { state.habits[index] = { ...state.habits[index], ...action.payload.updates }; } }, deleteHabit: (state, action: PayloadAction) => { state.habits = state.habits.filter(h => h.id !== action.payload); state.completions = state.completions.filter(c => c.habitId !== action.payload); }, toggleHabitCompletion: (state, action: PayloadAction<{ habitId: string; date: string }>) => { const { habitId, date } = action.payload; const existingCompletion = state.completions.find( c => c.habitId === habitId && c.date === date ); if (existingCompletion) { existingCompletion.completed = !existingCompletion.completed; } else { state.completions.push({ habitId, date, completed: true }); } }, setCurrentView: (state, action: PayloadAction) => { state.currentView = action.payload; }, setSelectedDate: (state, action: PayloadAction) => { state.selectedDate = action.payload; }, updateSettings: (state, action: PayloadAction>) => { state.settings = { ...state.settings, ...action.payload }; } } }); // API slice for data fetching export const habitApi = createApi({ reducerPath: 'habitApi', baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), endpoints: (builder) => ({ getHabits: builder.query({ queryFn: () => ({ data: mockStore.habits }) }), getCompletions: builder.query({ queryFn: () => ({ data: mockStore.completions }) }), getBadges: builder.query({ queryFn: () => ({ data: mockStore.badges }) }) }) }); export const { addHabit, updateHabit, deleteHabit, toggleHabitCompletion, setCurrentView, setSelectedDate, updateSettings } = habitSlice.actions; export const { useGetHabitsQuery, useGetCompletionsQuery, useGetBadgesQuery } = habitApi; export const store = configureStore({ reducer: { habits: habitSlice.reducer, [habitApi.reducerPath]: habitApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(habitApi.middleware) }); ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx src/components/SettingsView.tsx import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Bell, Moon, Download, Trash2 } from 'lucide-react'; import { updateSettings } from '../store/habitStore'; import { AppSettings } from '../types/schema'; import { ReminderTime } from '../types/enums'; import { formatReminderTime } from '../utils/formatters'; export const SettingsView: React.FC = () => { const dispatch = useDispatch(); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; const handleSettingChange = (key: keyof AppSettings, value: any) => { dispatch(updateSettings({ [key]: value })); }; const handleExportData = () => { // TODO: Implement data export console.log('Exporting data...'); }; const handleClearData = () => { // TODO: Implement data clearing with confirmation console.log('Clearing data...'); }; return (

Notifications

Enable Notifications

Receive reminders for your daily habits

handleSettingChange('notifications', checked)} />

Default Reminder Time

Default reminder time for new habits

Appearance

Dark Mode

Switch between light and dark themes

{ handleSettingChange('darkMode', checked); }} />

Data Management

Download your habit data as a JSON file

Permanently delete all habits and progress data

About

Version

1.0.0

Build

2024.01.21

A simple and beautiful habit tracking app to help you build better habits and achieve your goals.

); }; ``` ```tsx HabitTrackerApp.tsx import React from 'react'; import { Provider, useSelector } from 'react-redux'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Calendar, CalendarDays, BarChart3, Settings, TrendingUp } from 'lucide-react'; import { store } from './src/store/habitStore'; import { DailyView } from './src/components/DailyView'; import { WeeklyView } from './src/components/WeeklyView'; import { MonthlyView } from './src/components/MonthlyView'; import { InsightsView } from './src/components/InsightsView'; import { SettingsView } from './src/components/SettingsView'; import { mockStore } from './src/data/habitTrackerMockData'; const HabitTrackerContent: React.FC = () => { const [activeView, setActiveView] = React.useState('daily'); const habitState = useSelector((state: any) => state.habits); const settings = habitState?.settings; React.useEffect(() => { const root = document.documentElement; if (settings?.darkMode) { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [settings?.darkMode]); return (

{/* Header */}

Habit Tracker

Build better habits, one day at a time

{/* Main Navigation */} Daily Weekly Monthly Insights Settings

Habit Tracker App

Setting up preview