Planning Phase

// Enums for habit tracking app

export enum HabitCategory {
  HEALTH = 'health',
  FITNESS = 'fitness', 
  LEARNING = 'learning',
  PRODUCTIVITY = 'productivity',
  PERSONAL = 'personal',
  OTHER = 'other'
}

export enum HabitFrequency {
  DAILY = 'daily',
  WEEKLY = 'weekly', 
  CUSTOM = 'custom'
}

export enum ViewType {
  DAILY = 'daily',
  WEEKLY = 'weekly',
  MONTHLY = 'monthly',
  INSIGHTS = 'insights',
  SETTINGS = 'settings'
}

export enum BadgeType {
  STREAK_7 = 'streak_7',
  STREAK_30 = 'streak_30', 
  STREAK_100 = 'streak_100',
  PERFECT_WEEK = 'perfect_week',
  PERFECT_MONTH = 'perfect_month',
  FIRST_HABIT = 'first_habit',
  HABIT_MASTER = 'habit_master'
}

export enum ReminderTime {
  MORNING = 'morning',
  AFTERNOON = 'afternoon', 
  EVENING = 'evening',
  CUSTOM = 'custom',
  NONE = 'none'
}

import { HabitCategory, BadgeType, ReminderTime } from '../types/enums';

export const formatCategory = (category: HabitCategory): string => {
  const categoryMap = {
    [HabitCategory.HEALTH]: 'Health',
    [HabitCategory.FITNESS]: 'Fitness',
    [HabitCategory.LEARNING]: 'Learning', 
    [HabitCategory.PRODUCTIVITY]: 'Productivity',
    [HabitCategory.PERSONAL]: 'Personal',
    [HabitCategory.OTHER]: 'Other'
  };
  return categoryMap[category];
};

export const formatBadgeName = (badge: BadgeType): string => {
  const badgeMap = {
    [BadgeType.STREAK_7]: '7 Day Streak',
    [BadgeType.STREAK_30]: '30 Day Streak',
    [BadgeType.STREAK_100]: '100 Day Streak', 
    [BadgeType.PERFECT_WEEK]: 'Perfect Week',
    [BadgeType.PERFECT_MONTH]: 'Perfect Month',
    [BadgeType.FIRST_HABIT]: 'First Habit',
    [BadgeType.HABIT_MASTER]: 'Habit Master'
  };
  return badgeMap[badge];
};

export const formatReminderTime = (time: ReminderTime): string => {
  const timeMap = {
    [ReminderTime.MORNING]: 'Morning (8:00 AM)',
    [ReminderTime.AFTERNOON]: 'Afternoon (2:00 PM)',
    [ReminderTime.EVENING]: 'Evening (8:00 PM)', 
    [ReminderTime.CUSTOM]: 'Custom Time',
    [ReminderTime.NONE]: 'No Reminder'
  };
  return timeMap[time];
};

export const formatStreakDays = (days: number): string => {
  if (days === 0) return 'No streak';
  if (days === 1) return '1 day';
  return `${days} days`;
};

export const formatCompletionRate = (completed: number, total: number): string => {
  if (total === 0) return '0%';
  const percentage = Math.round((completed / total) * 100);
  return `${percentage}%`;
};

export const formatDate = (date: Date): string => {
  return date.toLocaleDateString('en-US', { 
    weekday: 'short', 
    month: 'short', 
    day: 'numeric' 
  });
};

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
    },
    // ... existing code ...
  ],
  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'
};

import { HabitCategory, HabitFrequency, ReminderTime, BadgeType } from './enums';

// Props types (data passed to components)
export interface HabitTrackerProps {
  initialView?: string;
}

export interface Habit {
  id: string;
  name: string;
  category: HabitCategory;
  frequency: HabitFrequency;
  reminderTime: ReminderTime;
  customReminderTime?: string;
  currentStreak: number;
  bestStreak: number;
  totalCompleted: number;
  createdAt: string;
  isActive: boolean;
}

export interface HabitCompletion {
  habitId: string;
  date: string;
  completed: boolean;
}

export interface Badge {
  type: BadgeType;
  earnedAt: string;
}

// Store types (global state data)
export interface HabitStore {
  habits: Habit[];
  completions: HabitCompletion[];
  badges: Badge[];
  settings: AppSettings;
  currentView: string;
  selectedDate: string;
}

export interface AppSettings {
  darkMode: boolean;
  notifications: boolean;
  defaultReminderTime: ReminderTime;
}

// Query types (API response data)
export interface HabitsResponse {
  habits: Habit[];
  total: number;
}

export interface CompletionsResponse {
  completions: HabitCompletion[];
  streaks: Record<string, number>;
}

export interface BadgesResponse {
  badges: Badge[];
  availableBadges: BadgeType[];
}

@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;
  }
}

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<Omit<Habit, 'id' | 'createdAt'>>) => {
      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<Habit> }>) => {
      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<string>) => {
      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<string>) => {
      state.currentView = action.payload;
    },
    setSelectedDate: (state, action: PayloadAction<string>) => {
      state.selectedDate = action.payload;
    },
    updateSettings: (state, action: PayloadAction<Partial<AppSettings>>) => {
      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)
});

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-health text-health-foreground',
  [HabitCategory.FITNESS]: 'bg-fitness text-fitness-foreground',
  [HabitCategory.LEARNING]: 'bg-learning text-learning-foreground',
  [HabitCategory.PRODUCTIVITY]: 'bg-productivity text-productivity-foreground',
  [HabitCategory.PERSONAL]: 'bg-personal text-personal-foreground',
  [HabitCategory.OTHER]: 'bg-muted text-muted-foreground'
};

export const HabitCard: React.FC<HabitCardProps> = ({
  habit,
  isCompleted,
  onToggleComplete,
  onEdit,
  onDelete
}) => {
  const CategoryIcon = categoryIcons[habit.category];
  const streakPercentage = Math.min((habit.currentStreak / 30) * 100, 100);

  return (
    <Card className={`transition-all duration-200 hover:shadow-md ${isCompleted ? 'bg-success/10 border-success' : ''}`}>
      <CardContent className="p-4">
        <div className="flex items-start justify-between">
          <div className="flex items-start space-x-3 flex-1">
            <Checkbox
              checked={isCompleted}
              onCheckedChange={onToggleComplete}
              className="mt-1"
            />
            <div className="flex-1 min-w-0">
              <div className="flex items-center space-x-2 mb-2">
                <CategoryIcon className="h-4 w-4 text-muted-foreground" />
                <Badge variant="secondary" className={categoryColors[habit.category]}>
                  {formatCategory(habit.category)}
                </Badge>
              </div>
              <h3 className={`font-medium text-sm ${isCompleted ? 'line-through text-muted-foreground' : ''}`}>
                {habit.name}
              </h3>
              
              {habit.currentStreak > 0 && (
                <div className="mt-2 space-y-1">
                  <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                    <Flame className="h-3 w-3 text-warning" />
                    <span>{formatStreakDays(habit.currentStreak)}</span>
                    <span>•</span>
                    <span>Best: {formatStreakDays(habit.bestStreak)}</span>
                  </div>
                  <Progress value={streakPercentage} className="h-1" />
                </div>
              )}
            </div>
          </div>
          
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={onEdit}>
                Edit Habit
              </DropdownMenuItem>
              <DropdownMenuItem onClick={onDelete} className="text-destructive">
                Delete Habit
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardContent>
    </Card>
  );
};

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<AddHabitDialogProps> = ({ onAddHabit }) => {
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    category: HabitCategory.OTHER,
    frequency: HabitFrequency.DAILY,
    reminderTime: ReminderTime.NONE
  });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    
    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 (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="w-full">
          <Plus className="h-4 w-4 mr-2" />
          Add Habit
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add New Habit</DialogTitle>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Habit Name</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="e.g., Drink 8 glasses of water"
              className={errors.name ? 'border-destructive' : ''}
            />
            {errors.name && (
              <p className="text-sm text-destructive">{errors.name}</p>
            )}
          </div>
          
          <div className="space-y-2">
            <Label>Category</Label>
            <Select
              value={formData.category}
              onValueChange={(value: HabitCategory) => 
                setFormData({ ...formData, category: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.values(HabitCategory).map((category) => (
                  <SelectItem key={category} value={category}>
                    {formatCategory(category)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          
          <div className="space-y-2">
            <Label>Frequency</Label>
            <Select
              value={formData.frequency}
              onValueChange={(value: HabitFrequency) => 
                setFormData({ ...formData, frequency: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={HabitFrequency.DAILY}>Daily</SelectItem>
                <SelectItem value={HabitFrequency.WEEKLY}>Weekly</SelectItem>
                <SelectItem value={HabitFrequency.CUSTOM}>Custom</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="space-y-2">
            <Label>Reminder</Label>
            <Select
              value={formData.reminderTime}
              onValueChange={(value: ReminderTime) => 
                setFormData({ ...formData, reminderTime: value })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.values(ReminderTime).map((time) => (
                  <SelectItem key={time} value={time}>
                    {formatReminderTime(time)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          
          <div className="flex space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={handleClose} className="flex-1">
              Cancel
            </Button>
            <Button type="submit" className="flex-1">
              Save
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};

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 {
  habits: Habit[];
  completions: HabitCompletion[];
}

export const DailyView: React.FC<DailyViewProps> = ({ habits, completions }) => {
  const dispatch = useDispatch();
  const selectedDate = useSelector((state: any) => state.habits.selectedDate);
  const [selectedCategory, setSelectedCategory] = React.useState<HabitCategory | 'all'>('all');
  const [habitToDelete, setHabitToDelete] = React.useState<string | null>(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 (
    <div className="space-y-6">
      {/* Header Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Calendar className="h-5 w-5 text-primary" />
              <div>
                <p className="text-sm text-muted-foreground">Today</p>
                <p className="font-semibold">{formatDate(new Date())}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <CheckCircle className="h-5 w-5 text-success" />
              <div>
                <p className="text-sm text-muted-foreground">Completed</p>
                <p className="font-semibold">{completedToday} / {totalHabits}</p>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <TrendingUp className="h-5 w-5 text-warning" />
              <div>
                <p className="text-sm text-muted-foreground">Success Rate</p>
                <p className="font-semibold">{completionRate}%</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Category Filter */}
      <Tabs value={selectedCategory} onValueChange={(value) => setSelectedCategory(value as HabitCategory | 'all')}>
        <TabsList className="grid w-full grid-cols-7">
          <TabsTrigger value="all">All</TabsTrigger>
          {Object.values(HabitCategory).map((category) => (
            <TabsTrigger key={category} value={category}>
              {formatCategory(category)}
            </TabsTrigger>
          ))}
        </TabsList>
        
        <TabsContent value={selectedCategory} className="space-y-4">
          {/* Add Habit Button */}
          <AddHabitDialog onAddHabit={handleAddHabit} />
          
          {/* Habits List */}
          {filteredHabits.length === 0 ? (
            <Card>
              <CardContent className="p-8 text-center">
                <p className="text-muted-foreground">No habits yet</p>
                <p className="text-sm text-muted-foreground mt-1">Add your first habit to get started</p>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-3">
              {filteredHabits.map((habit) => (
                <HabitCard
                  key={habit.id}
                  habit={habit}
                  isCompleted={isHabitCompleted(habit.id)}
                  onToggleComplete={() => handleToggleCompletion(habit.id)}
                  onEdit={() => {/* TODO: Implement edit */}}
                  onDelete={() => setHabitToDelete(habit.id)}
                />
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={!!habitToDelete} onOpenChange={() => setHabitToDelete(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Habit</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete this habit? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction 
              onClick={() => habitToDelete && handleDeleteHabit(habitToDelete)}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

import React from 'react';
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 {
  habits: Habit[];
  completions: HabitCompletion[];
}

export const WeeklyView: React.FC<WeeklyViewProps> = ({ 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 (
    <div className="space-y-6">
      {/* Weekly Stats */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">This Week</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <p className="text-2xl font-bold text-success">{stats.completed}</p>
              <p className="text-sm text-muted-foreground">Completed</p>
            </div>
            <div>
              <p className="text-2xl font-bold">{stats.total}</p>
              <p className="text-sm text-muted-foreground">Total</p>
            </div>
            <div>
              <p className="text-2xl font-bold text-primary">{stats.percentage}%</p>
              <p className="text-sm text-muted-foreground">Success Rate</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Weekly Grid */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Weekly Progress</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {/* Day Headers */}
            <div className="grid grid-cols-8 gap-2">
              <div className="text-sm font-medium text-muted-foreground">Habit</div>
              {dayNames.map((day, index) => (
                <div key={day} className="text-center">
                  <p className="text-sm font-medium">{day}</p>
                  <p className="text-xs text-muted-foreground">
                    {new Date(weekDates[index]).getDate()}
                  </p>
                </div>
              ))}
            </div>

            {/* Habit Rows */}
            {habits.map((habit) => (
              <div key={habit.id} className="grid grid-cols-8 gap-2 items-center py-2 border-t">
                <div className="space-y-1">
                  <p className="text-sm font-medium truncate">{habit.name}</p>
                  <Badge variant="secondary" className="text-xs">
                    {formatCategory(habit.category)}
                  </Badge>
                </div>
                
                {weekDates.map((date, index) => {
                  const isCompleted = isHabitCompletedOnDate(habit.id, date);
                  const isToday = new Date(date).toDateString() === new Date().toDateString();
                  
                  return (
                    <div key={date} className={`flex justify-center ${isToday ? 'bg-primary/10 rounded-md p-1' : ''}`}>
                      {isCompleted ? (
                        <CheckCircle className="h-5 w-5 text-success" />
                      ) : (
                        <Circle className="h-5 w-5 text-muted-foreground" />
                      )}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>

          {habits.length === 0 && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">No habits to display</p>
              <p className="text-sm text-muted-foreground mt-1">Add some habits to see your weekly progress</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

import React from 'react';
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 {
  habits: Habit[];
  completions: HabitCompletion[];
}

export const MonthlyView: React.FC<MonthlyViewProps> = ({ habits, completions }) => {
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(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 (
    <div className="space-y-6">
      {/* Monthly Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-success">{stats.completed}</p>
            <p className="text-sm text-muted-foreground">Completed</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{stats.total}</p>
            <p className="text-sm text-muted-foreground">Total</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-primary">{stats.percentage}%</p>
            <p className="text-sm text-muted-foreground">Success Rate</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-warning">{stats.perfectDays}</p>
            <p className="text-sm text-muted-foreground">Perfect Days</p>
          </CardContent>
        </Card>
      </div>

      {/* Calendar and Legend */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Monthly Calendar</CardTitle>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={selectedDate}
              onSelect={setSelectedDate}
              className="rounded-md border"
              modifiersClassNames={{
                today: 'bg-accent text-accent-foreground'
              }}
              components={{
                Day: ({ date, ...props }) => (
                  <div className={`relative ${getDayClassName(date)}`} {...props}>
                    {date.getDate()}
                  </div>
                )
              }}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Legend</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-success rounded"></div>
              <span className="text-sm">100% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-warning rounded"></div>
              <span className="text-sm">50-99% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-primary/20 rounded"></div>
              <span className="text-sm">1-49% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-muted rounded"></div>
              <span className="text-sm">No Progress</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Selected Date Details */}
      {selectedDate && (
        <Card>
          <CardHeader>
            <CardTitle>
              {selectedDate.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {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 (
                  <div key={habit.id} className="flex items-center justify-between p-2 rounded-lg border">
                    <span className="text-sm">{habit.name}</span>
                    <Badge variant={isCompleted ? "default" : "secondary"}>
                      {isCompleted ? "Completed" : "Not Done"}
                    </Badge>
                  </div>
                );
              })}
              
              {habits.length === 0 && (
                <p className="text-muted-foreground text-center py-4">No habits to display</p>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
};

import React from 'react';
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 {
  habits: Habit[];
  completions: HabitCompletion[];
  badges: BadgeType[];
}

export const InsightsView: React.FC<InsightsViewProps> = ({ habits, completions, 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<string, any>);

    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 (
    <div className="space-y-6">
      {/* Overview Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Target className="h-5 w-5 text-primary" />
              <div>
                <p className="text-2xl font-bold">{stats.totalHabits}</p>
                <p className="text-sm text-muted-foreground">Total Habits</p>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <TrendingUp className="h-5 w-5 text-success" />
              <div>
                <p className="text-2xl font-bold">{stats.completionRate}%</p>
                <p className="text-sm text-muted-foreground">Success Rate</p>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Flame className="h-5 w-5 text-warning" />
              <div>
                <p className="text-2xl font-bold">{stats.bestStreak}</p>
                <p className="text-sm text-muted-foreground">Best Streak</p>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2">
              <Award className="h-5 w-5 text-primary" />
              <div>
                <p className="text-2xl font-bold">{badges.length}</p>
                <p className="text-sm text-muted-foreground">Badges Earned</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Weekly Progress Chart */}
        <Card>
          <CardHeader>
            <CardTitle>Weekly Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <ChartContainer config={chartConfig} className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={weeklyData}>
                  <XAxis dataKey="day" />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Bar dataKey="completed" fill="var(--color-completed)" radius={4} />
                </BarChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>

        {/* Success Rate Trend */}
        <Card>
          <CardHeader>
            <CardTitle>Success Rate Trend</CardTitle>
          </CardHeader>
          <CardContent>
            <ChartContainer config={chartConfig} className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={weeklyData}>
                  <XAxis dataKey="day" />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Line 
                    type="monotone" 
                    dataKey="rate" 
                    stroke="var(--color-rate)" 
                    strokeWidth={2}
                    dot={{ fill: "var(--color-rate)" }}
                  />
                </LineChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>

      {/* Habit Streaks and Badges */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Top Performing Habits */}
        <Card>
          <CardHeader>
            <CardTitle>Top Performing Habits</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {habits
                .sort((a, b) => b.currentStreak - a.currentStreak)
                .slice(0, 5)
                .map((habit) => (
                  <div key={habit.id} className="flex items-center justify-between p-3 rounded-lg border">
                    <div>
                      <p className="font-medium text-sm">{habit.name}</p>
                      <Badge variant="secondary" className="text-xs mt-1">
                        {formatCategory(habit.category)}
                      </Badge>
                    </div>
                    <div className="text-right">
                      <p className="font-semibold text-warning">{formatStreakDays(habit.currentStreak)}</p>
                      <p className="text-xs text-muted-foreground">
                        Best: {formatStreakDays(habit.bestStreak)}
                      </p>
                    </div>
                  </div>
                ))}
              
              {habits.length === 0 && (
                <p className="text-center text-muted-foreground py-4">No habits to display</p>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Achievement Badges */}
        <Card>
          <CardHeader>
            <CardTitle>Achievement Badges</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-3">
              {badges.map((badge, index) => (
                <div key={index} className="flex items-center space-x-2 p-3 rounded-lg border bg-primary/5">
                  <Award className="h-6 w-6 text-primary" />
                  <div>
                    <p className="font-medium text-sm">{formatBadgeName(badge.type)}</p>
                    <p className="text-xs text-muted-foreground">
                      {new Date(badge.earnedAt).toLocaleDateString()}
                    </p>
                  </div>
                </div>
              ))}
              
              {badges.length === 0 && (
                <div className="col-span-2 text-center py-4">
                  <p className="text-muted-foreground">No badges earned yet</p>
                  <p className="text-xs text-muted-foreground mt-1">Keep building habits to unlock achievements!</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

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 (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Bell className="h-5 w-5" />
            <span>Notifications</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="notifications">Enable Notifications</Label>
              <p className="text-sm text-muted-foreground">
                Receive reminders for your daily habits
              </p>
            </div>
            <Switch
              id="notifications"
              checked={settings.notifications}
              onCheckedChange={(checked) => handleSettingChange('notifications', checked)}
            />
          </div>
          
          <Separator />
          
          <div className="space-y-2">
            <Label>Default Reminder Time</Label>
            <Select
              value={settings.defaultReminderTime}
              onValueChange={(value: ReminderTime) => 
                handleSettingChange('defaultReminderTime', value)
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.values(ReminderTime).map((time) => (
                  <SelectItem key={time} value={time}>
                    {formatReminderTime(time)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-sm text-muted-foreground">
              Default reminder time for new habits
            </p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Moon className="h-5 w-5" />
            <span>Appearance</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="dark-mode">Dark Mode</Label>
              <p className="text-sm text-muted-foreground">
                Switch between light and dark themes
              </p>
            </div>
            <Switch
              id="dark-mode"
              checked={settings.darkMode}
              onCheckedChange={(checked) => handleSettingChange('darkMode', checked)}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Data Management</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Button 
              variant="outline" 
              onClick={handleExportData}
              className="w-full justify-start"
            >
              <Download className="h-4 w-4 mr-2" />
              Export Data
            </Button>
            <p className="text-sm text-muted-foreground">
              Download your habit data as a JSON file
            </p>
          </div>
          
          <Separator />
          
          <div className="space-y-2">
            <Button 
              variant="destructive" 
              onClick={handleClearData}
              className="w-full justify-start"
            >
              <Trash2 className="h-4 w-4 mr-2" />
              Clear All Data
            </Button>
            <p className="text-sm text-muted-foreground">
              Permanently delete all habits and progress data
            </p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>About</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <p className="font-medium">Version</p>
              <p className="text-muted-foreground">1.0.0</p>
            </div>
            <div>
              <p className="font-medium">Build</p>
              <p className="text-muted-foreground">2024.01.21</p>
            </div>
          </div>
          <Separator />
          <p className="text-sm text-muted-foreground">
            A simple and beautiful habit tracking app to help you build better habits and achieve your goals.
          </p>
        </CardContent>
      </Card>
    </div>
  );
};

import React from 'react';
import { Provider } 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 (
    <Provider store={store}>
      <div className="min-h-screen bg-background">
        <div className="container mx-auto max-w-4xl p-4">
          {/* Header */}
          <div className="mb-6">
            <h1 className="text-3xl font-bold text-foreground mb-2">Habit Tracker</h1>
            <p className="text-muted-foreground">Build better habits, one day at a time</p>
          </div>

          {/* Main Navigation */}
          <Tabs value={activeView} onValueChange={setActiveView} className="space-y-6">
            <TabsList className="grid w-full grid-cols-5">
              <TabsTrigger value="daily" className="flex items-center space-x-2">
                <Calendar className="h-4 w-4" />
                <span className="hidden sm:inline">Daily</span>
              </TabsTrigger>
              <TabsTrigger value="weekly" className="flex items-center space-x-2">
                <CalendarDays className="h-4 w-4" />
                <span className="hidden sm:inline">Weekly</span>
              </TabsTrigger>
              <TabsTrigger value="monthly" className="flex items-center space-x-2">
                <Calendar className="h-4 w-4" />
                <span className="hidden sm:inline">Monthly</span>
              </TabsTrigger>
              <TabsTrigger value="insights" className="flex items-center space-x-2">
                <BarChart3 className="h-4 w-4" />
                <span className="hidden sm:inline">Insights</span>
              </TabsTrigger>
              <TabsTrigger value="settings" className="flex items-center space-x-2">
                <Settings className="h-4 w-4" />
                <span className="hidden sm:inline">Settings</span>
              </TabsTrigger>
            </TabsList>

            <TabsContent value="daily" className="space-y-4">
              <DailyView 
                habits={mockStore.habits} 
                completions={mockStore.completions} 
              />
            </TabsContent>

            <TabsContent value="weekly" className="space-y-4">
              <WeeklyView 
                habits={mockStore.habits} 
                completions={mockStore.completions} 
              />
            </TabsContent>

            <TabsContent value="monthly" className="space-y-4">
              <MonthlyView 
                habits={mockStore.habits} 
                completions={mockStore.completions} 
              />
            </TabsContent>

            <TabsContent value="insights" className="space-y-4">
              <InsightsView 
                habits={mockStore.habits} 
                completions={mockStore.completions}
                badges={mockStore.badges}
              />
            </TabsContent>

            <TabsContent value="settings" className="space-y-4">
              <SettingsView />
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </Provider>
  );
};

export default HabitTrackerApp;

@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));
}

#root {
  margin: auto;
  width: 100%;
}

import React, { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Example from './HabitTrackerApp'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Example />
  </StrictMode>,
)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Habit Tracker App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

import { HabitCategory, HabitFrequency, ReminderTime, BadgeType } from './enums';

// Props types (data passed to components)
export interface HabitTrackerProps {
  initialView?: string;
}

export interface Habit {
  id: string;
  name: string;
  category: HabitCategory;
  frequency: HabitFrequency;
  reminderTime: ReminderTime;
  customReminderTime: string | null;
  currentStreak: number;
  bestStreak: number;
  totalCompleted: number;
  createdAt: string;
  isActive: boolean;
}

export interface HabitCompletion {
  habitId: string;
  date: string;
  completed: boolean;
}

export interface Badge {
  type: BadgeType;
  earnedAt: string;
}

// Store types (global state data)
export interface HabitStore {
  habits: Habit[];
  completions: HabitCompletion[];
  badges: Badge[];
  settings: AppSettings;
  currentView: string;
  selectedDate: string;
}

export interface AppSettings {
  darkMode: boolean;
  notifications: boolean;
  defaultReminderTime: ReminderTime;
}

// Query types (API response data)
export interface HabitsResponse {
  habits: Habit[];
  total: number;
}

export interface CompletionsResponse {
  completions: HabitCompletion[];
  streaks: Record<string, number>;
}

export interface BadgesResponse {
  badges: Badge[];
  availableBadges: BadgeType[];
}

import React from 'react';
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 {
  habits: Habit[];
  completions: HabitCompletion[];
}

export const MonthlyView: React.FC<MonthlyViewProps> = ({ habits, completions }) => {
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(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 (
    <div className="space-y-6">
      {/* Monthly Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-success">{stats.completed}</p>
            <p className="text-sm text-muted-foreground">Completed</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{stats.total}</p>
            <p className="text-sm text-muted-foreground">Total</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-primary">{stats.percentage}%</p>
            <p className="text-sm text-muted-foreground">Success Rate</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-warning">{stats.perfectDays}</p>
            <p className="text-sm text-muted-foreground">Perfect Days</p>
          </CardContent>
        </Card>
      </div>

      {/* Calendar and Legend */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Monthly Calendar</CardTitle>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={selectedDate}
              onSelect={setSelectedDate}
              className="rounded-md border"
              modifiersClassNames={{
                today: 'bg-accent text-accent-foreground'
              }}
              modifiersClassNames={{
                today: 'bg-accent text-accent-foreground'
              }}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Legend</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-success rounded"></div>
              <span className="text-sm">100% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-warning rounded"></div>
              <span className="text-sm">50-99% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-primary/20 rounded"></div>
              <span className="text-sm">1-49% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-muted rounded"></div>
              <span className="text-sm">No Progress</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Selected Date Details */}
      {selectedDate && (
        <Card>
          <CardHeader>
            <CardTitle>
              {selectedDate.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {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 (
                  <div key={habit.id} className="flex items-center justify-between p-2 rounded-lg border">
                    <span className="text-sm">{habit.name}</span>
                    <Badge variant={isCompleted ? "default" : "secondary"}>
                      {isCompleted ? "Completed" : "Not Done"}
                    </Badge>
                  </div>
                );
              })}
              
              {habits.length === 0 && (
                <p className="text-muted-foreground text-center py-4">No habits to display</p>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
};

import React from 'react';
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 {
  habits: Habit[];
  completions: HabitCompletion[];
}

export const MonthlyView: React.FC<MonthlyViewProps> = ({ habits, completions }) => {
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(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 (
    <div className="space-y-6">
      {/* Monthly Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-success">{stats.completed}</p>
            <p className="text-sm text-muted-foreground">Completed</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{stats.total}</p>
            <p className="text-sm text-muted-foreground">Total</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-primary">{stats.percentage}%</p>
            <p className="text-sm text-muted-foreground">Success Rate</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-warning">{stats.perfectDays}</p>
            <p className="text-sm text-muted-foreground">Perfect Days</p>
          </CardContent>
        </Card>
      </div>

      {/* Calendar and Legend */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Monthly Calendar</CardTitle>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={selectedDate}
              onSelect={setSelectedDate}
              className="rounded-md border"
              modifiersClassNames={{
                today: 'bg-accent text-accent-foreground'
              }}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Legend</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-success rounded"></div>
              <span className="text-sm">100% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-warning rounded"></div>
              <span className="text-sm">50-99% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-primary/20 rounded"></div>
              <span className="text-sm">1-49% Complete</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="w-4 h-4 bg-muted rounded"></div>
              <span className="text-sm">No Progress</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Selected Date Details */}
      {selectedDate && (
        <Card>
          <CardHeader>
            <CardTitle>
              {selectedDate.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
              })}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {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 (
                  <div key={habit.id} className="flex items-center justify-between p-2 rounded-lg border">
                    <span className="text-sm">{habit.name}</span>
                    <Badge variant={isCompleted ? "default" : "secondary"}>
                      {isCompleted ? "Completed" : "Not Done"}
                    </Badge>
                  </div>
                );
              })}
              
              {habits.length === 0 && (
                <p className="text-muted-foreground text-center py-4">No habits to display</p>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
};