From 1a298422f124ad4000cd363beba24de5568eef78 Mon Sep 17 00:00:00 2001
From: vedhapprakashni <vedhamuthukumar@gmail.com>
Date: Fri, 6 Feb 2026 21:33:49 +0530
Subject: [PATCH 1/5] feat(habits): add core habit tracking components

---
 frontend/src/components/CheckInModal.tsx      | 167 ++++++++++++++++++
 frontend/src/components/CreateHabitModal.tsx  | 130 ++++++++++++++
 .../src/components/DeleteConfirmModal.tsx     |  64 +++++++
 frontend/src/components/EditHabitModal.tsx    | 139 +++++++++++++++
 frontend/src/components/HabitCard.tsx         |  85 +++++++++
 frontend/src/index.css                        | 109 ++++++++++++
 6 files changed, 694 insertions(+)
 create mode 100644 frontend/src/components/CheckInModal.tsx
 create mode 100644 frontend/src/components/CreateHabitModal.tsx
 create mode 100644 frontend/src/components/DeleteConfirmModal.tsx
 create mode 100644 frontend/src/components/EditHabitModal.tsx
 create mode 100644 frontend/src/components/HabitCard.tsx

diff --git a/frontend/src/components/CheckInModal.tsx b/frontend/src/components/CheckInModal.tsx
new file mode 100644
index 0000000..9ffb3f6
--- /dev/null
+++ b/frontend/src/components/CheckInModal.tsx
@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+
+interface CheckInModalProps {
+    isOpen: boolean;
+    habit: {
+        id: string;
+        name: string;
+    } | null;
+    currentStreak: number;
+    onClose: () => void;
+    onCheckIn: (habitId: string, notes?: string) => Promise<void>;
+}
+
+const MILESTONES = [7, 30, 100];
+
+export default function CheckInModal({
+    isOpen,
+    habit,
+    currentStreak,
+    onClose,
+    onCheckIn
+}: CheckInModalProps) {
+    const [notes, setNotes] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [showConfetti, setShowConfetti] = useState(false);
+    const [milestone, setMilestone] = useState<number | null>(null);
+
+    useEffect(() => {
+        if (!isOpen) {
+            // Reset state when modal closes
+            setNotes('');
+            setSuccess(false);
+            setShowConfetti(false);
+            setMilestone(null);
+        }
+    }, [isOpen]);
+
+    if (!isOpen || !habit) return null;
+
+    async function handleCheckIn() {
+        setLoading(true);
+
+        try {
+            await onCheckIn(habit.id, notes.trim() || undefined);
+            setSuccess(true);
+
+            // Check for milestone
+            const newStreak = currentStreak + 1;
+            if (MILESTONES.includes(newStreak)) {
+                setMilestone(newStreak);
+                setShowConfetti(true);
+            }
+
+            // Auto-close after delay
+            setTimeout(() => {
+                onClose();
+            }, showConfetti ? 3000 : 1500);
+        } catch (err) {
+            console.error('Check-in failed:', err);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                {success ? (
+                    <div className="text-center py-6">
+                        {showConfetti && (
+                            <div className="confetti-container">
+                                {[...Array(50)].map((_, i) => (
+                                    <div
+                                        key={i}
+                                        className="confetti-piece"
+                                        style={{
+                                            left: `${Math.random() * 100}%`,
+                                            animationDelay: `${Math.random() * 0.5}s`,
+                                            backgroundColor: ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#9b59b6'][Math.floor(Math.random() * 5)],
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        )}
+
+                        <div className="text-6xl mb-4 animate-bounce">🎉</div>
+
+                        {milestone ? (
+                            <>
+                                <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                                    🏆 {milestone} Day Streak!
+                                </h2>
+                                <p className="text-gray-600">
+                                    Amazing! You've completed {habit.name} for {milestone} days in a row!
+                                </p>
+                            </>
+                        ) : (
+                            <>
+                                <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                                    Great job!
+                                </h2>
+                                <p className="text-gray-600">
+                                    You completed {habit.name} today!
+                                </p>
+                                <div className="mt-4 streak-badge inline-flex">
+                                    <span className="text-2xl">🔥</span>
+                                    <span className="streak-count">{currentStreak + 1}</span>
+                                    <span className="streak-label">day streak</span>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                ) : (
+                    <>
+                        <div className="flex items-center justify-between mb-6">
+                            <h2 className="text-xl font-bold text-gray-900">Check In</h2>
+                            <button
+                                onClick={onClose}
+                                className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+                            >
+                                ×
+                            </button>
+                        </div>
+
+                        <div className="text-center mb-6">
+                            <div className="text-4xl mb-2">✓</div>
+                            <p className="text-lg font-medium text-gray-900">{habit.name}</p>
+                            <p className="text-sm text-gray-500">Current streak: {currentStreak} days</p>
+                        </div>
+
+                        <div className="mb-6">
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Add a note (optional)
+                            </label>
+                            <textarea
+                                value={notes}
+                                onChange={(e) => setNotes(e.target.value)}
+                                placeholder="How did it go? Any reflections?"
+                                className="input-field resize-none"
+                                rows={3}
+                            />
+                        </div>
+
+                        <div className="flex gap-3">
+                            <button
+                                type="button"
+                                onClick={onClose}
+                                className="btn-secondary flex-1"
+                                disabled={loading}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={handleCheckIn}
+                                className="btn-primary flex-1"
+                                disabled={loading}
+                            >
+                                {loading ? 'Saving...' : 'Complete ✓'}
+                            </button>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/CreateHabitModal.tsx b/frontend/src/components/CreateHabitModal.tsx
new file mode 100644
index 0000000..c8112f7
--- /dev/null
+++ b/frontend/src/components/CreateHabitModal.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+
+interface CreateHabitModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onCreate: (habit: { name: string; description?: string; frequency: 'daily' | 'weekly' }) => Promise<void>;
+}
+
+export default function CreateHabitModal({ isOpen, onClose, onCreate }: CreateHabitModalProps) {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [frequency, setFrequency] = useState<'daily' | 'weekly'>('daily');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    if (!isOpen) return null;
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        if (!name.trim()) {
+            setError('Please enter a habit name');
+            return;
+        }
+
+        setLoading(true);
+        setError('');
+
+        try {
+            await onCreate({
+                name: name.trim(),
+                description: description.trim() || undefined,
+                frequency,
+            });
+
+            // Reset form
+            setName('');
+            setDescription('');
+            setFrequency('daily');
+            onClose();
+        } catch (err: any) {
+            setError(err.message || 'Failed to create habit');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                <div className="flex items-center justify-between mb-6">
+                    <h2 className="text-xl font-bold text-gray-900">Create New Habit</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit}>
+                    {error && (
+                        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="mb-4">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Habit Name *
+                        </label>
+                        <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="e.g., Morning Meditation"
+                            className="input-field"
+                            autoFocus
+                        />
+                    </div>
+
+                    <div className="mb-4">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Description (optional)
+                        </label>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="e.g., 10 minutes of mindfulness"
+                            className="input-field resize-none"
+                            rows={3}
+                        />
+                    </div>
+
+                    <div className="mb-6">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Frequency
+                        </label>
+                        <select
+                            value={frequency}
+                            onChange={(e) => setFrequency(e.target.value as 'daily' | 'weekly')}
+                            className="input-field"
+                        >
+                            <option value="daily">Daily</option>
+                            <option value="weekly">Weekly</option>
+                        </select>
+                    </div>
+
+                    <div className="flex gap-3">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="btn-secondary flex-1"
+                            disabled={loading}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="btn-primary flex-1"
+                            disabled={loading}
+                        >
+                            {loading ? 'Creating...' : 'Create Habit'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/DeleteConfirmModal.tsx b/frontend/src/components/DeleteConfirmModal.tsx
new file mode 100644
index 0000000..bf44eec
--- /dev/null
+++ b/frontend/src/components/DeleteConfirmModal.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+interface DeleteConfirmModalProps {
+    isOpen: boolean;
+    habitName: string;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+}
+
+export default function DeleteConfirmModal({
+    isOpen,
+    habitName,
+    onClose,
+    onConfirm
+}: DeleteConfirmModalProps) {
+    const [loading, setLoading] = useState(false);
+
+    if (!isOpen) return null;
+
+    async function handleConfirm() {
+        setLoading(true);
+        try {
+            await onConfirm();
+            onClose();
+        } catch (err) {
+            console.error('Delete failed:', err);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                <div className="text-center">
+                    <div className="text-5xl mb-4">⚠️</div>
+                    <h2 className="text-xl font-bold text-gray-900 mb-2">Delete Habit?</h2>
+                    <p className="text-gray-600 mb-6">
+                        Are you sure you want to delete <strong>"{habitName}"</strong>?
+                        This will also delete all your streak history. This action cannot be undone.
+                    </p>
+
+                    <div className="flex gap-3">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="btn-secondary flex-1"
+                            disabled={loading}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            onClick={handleConfirm}
+                            className="flex-1 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                            disabled={loading}
+                        >
+                            {loading ? 'Deleting...' : 'Delete'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/EditHabitModal.tsx b/frontend/src/components/EditHabitModal.tsx
new file mode 100644
index 0000000..b1c8b29
--- /dev/null
+++ b/frontend/src/components/EditHabitModal.tsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+
+interface EditHabitModalProps {
+    isOpen: boolean;
+    habit: {
+        id: string;
+        name: string;
+        description?: string;
+        frequency: 'daily' | 'weekly';
+    } | null;
+    onClose: () => void;
+    onUpdate: (id: string, habit: { name: string; description?: string; frequency: 'daily' | 'weekly' }) => Promise<void>;
+}
+
+export default function EditHabitModal({ isOpen, habit, onClose, onUpdate }: EditHabitModalProps) {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [frequency, setFrequency] = useState<'daily' | 'weekly'>('daily');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        if (habit) {
+            setName(habit.name);
+            setDescription(habit.description || '');
+            setFrequency(habit.frequency);
+        }
+    }, [habit]);
+
+    if (!isOpen || !habit) return null;
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        if (!name.trim()) {
+            setError('Please enter a habit name');
+            return;
+        }
+
+        setLoading(true);
+        setError('');
+
+        try {
+            await onUpdate(habit.id, {
+                name: name.trim(),
+                description: description.trim() || undefined,
+                frequency,
+            });
+            onClose();
+        } catch (err: any) {
+            setError(err.message || 'Failed to update habit');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                <div className="flex items-center justify-between mb-6">
+                    <h2 className="text-xl font-bold text-gray-900">Edit Habit</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit}>
+                    {error && (
+                        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="mb-4">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Habit Name *
+                        </label>
+                        <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="e.g., Morning Meditation"
+                            className="input-field"
+                            autoFocus
+                        />
+                    </div>
+
+                    <div className="mb-4">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Description (optional)
+                        </label>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="e.g., 10 minutes of mindfulness"
+                            className="input-field resize-none"
+                            rows={3}
+                        />
+                    </div>
+
+                    <div className="mb-6">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Frequency
+                        </label>
+                        <select
+                            value={frequency}
+                            onChange={(e) => setFrequency(e.target.value as 'daily' | 'weekly')}
+                            className="input-field"
+                        >
+                            <option value="daily">Daily</option>
+                            <option value="weekly">Weekly</option>
+                        </select>
+                    </div>
+
+                    <div className="flex gap-3">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="btn-secondary flex-1"
+                            disabled={loading}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="btn-primary flex-1"
+                            disabled={loading}
+                        >
+                            {loading ? 'Saving...' : 'Save Changes'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/HabitCard.tsx b/frontend/src/components/HabitCard.tsx
new file mode 100644
index 0000000..a2948df
--- /dev/null
+++ b/frontend/src/components/HabitCard.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+interface HabitCardProps {
+  habit: {
+    id: string;
+    name: string;
+    description?: string;
+    frequency: 'daily' | 'weekly';
+    created_at: string;
+  };
+  streak: number;
+  isCheckedInToday: boolean;
+  onCheckIn: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export default function HabitCard({
+  habit,
+  streak,
+  isCheckedInToday,
+  onCheckIn,
+  onEdit,
+  onDelete,
+}: HabitCardProps) {
+  return (
+    <div className="habit-card card hover:shadow-lg transition-all duration-300">
+      {/* Header with name and actions */}
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900">{habit.name}</h3>
+          {habit.description && (
+            <p className="text-sm text-gray-500 mt-1">{habit.description}</p>
+          )}
+        </div>
+        <div className="flex gap-1">
+          <button
+            onClick={onEdit}
+            className="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
+            title="Edit habit"
+          >
+            ✏️
+          </button>
+          <button
+            onClick={onDelete}
+            className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+            title="Delete habit"
+          >
+            🗑️
+          </button>
+        </div>
+      </div>
+
+      {/* Streak Display */}
+      <div className="streak-badge mb-4">
+        <span className="text-2xl">🔥</span>
+        <span className="streak-count">{streak}</span>
+        <span className="streak-label">day streak</span>
+      </div>
+
+      {/* Frequency Badge */}
+      <div className="flex items-center gap-2 mb-4">
+        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full capitalize">
+          {habit.frequency}
+        </span>
+      </div>
+
+      {/* Check-in Button */}
+      {isCheckedInToday ? (
+        <div className="w-full py-3 px-4 bg-green-100 text-green-700 rounded-lg text-center font-medium flex items-center justify-center gap-2">
+          <span className="text-lg">✓</span>
+          Done today!
+        </div>
+      ) : (
+        <button
+          onClick={onCheckIn}
+          className="btn-primary w-full flex items-center justify-center gap-2"
+        >
+          <span>✓</span>
+          Check In
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6ecc327..7e014e6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -47,3 +47,112 @@
 
 .border-primary-400 { border-color: var(--color-primary-400); }
 .border-primary-600 { border-color: var(--color-primary-600); }
+
+/* Modal styles */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 1rem;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  animation: slideUp 0.3s ease-out;
+}
+
+/* Streak badge */
+.streak-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  font-weight: 600;
+}
+
+.streak-count {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.streak-label {
+  font-size: 0.875rem;
+  opacity: 0.9;
+}
+
+/* Habit card */
+.habit-card {
+  border: 1px solid #e5e7eb;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.habit-card:hover {
+  transform: translateY(-2px);
+}
+
+/* Confetti animation */
+.confetti-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.confetti-piece {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: -10px;
+  animation: confettiFall 3s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes confettiFall {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(400px) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+/* Ring focus utility */
+.focus\:ring-primary-500:focus {
+  --tw-ring-color: var(--color-primary-500);
+}
+

From c731e02aa4cea81f3d90da3e3a18b3180c1aca71 Mon Sep 17 00:00:00 2001
From: vedhapprakashni <vedhamuthukumar@gmail.com>
Date: Fri, 6 Feb 2026 21:36:02 +0530
Subject: [PATCH 2/5] feat(habits): implement full habits dashboard with streak
 tracking

---
 backend/src/routes/habits.ts     | 115 +++++++++++++++++++++--
 frontend/src/lib/api.ts          |  24 ++---
 frontend/src/pages/Dashboard.tsx | 154 ++++++++++++++++++++++++++++---
 3 files changed, 261 insertions(+), 32 deletions(-)

diff --git a/backend/src/routes/habits.ts b/backend/src/routes/habits.ts
index f434c34..13153da 100644
--- a/backend/src/routes/habits.ts
+++ b/backend/src/routes/habits.ts
@@ -4,12 +4,56 @@ import { authenticate, AuthRequest } from '../middleware/auth';
 
 const router = Router();
 
-// Get all habits for authenticated user
+// Helper function to calculate streak for a habit
+async function calculateStreak(habitId: string, userId: string): Promise<number> {
+  const { data: logs, error } = await supabase
+    .from('habit_logs')
+    .select('completed_at')
+    .eq('habit_id', habitId)
+    .eq('user_id', userId)
+    .order('completed_at', { ascending: false });
+
+  if (error || !logs || logs.length === 0) {
+    return 0;
+  }
+
+  // Get unique dates (in user's local date format)
+  const uniqueDates = [...new Set(
+    logs.map(log => new Date(log.completed_at).toISOString().split('T')[0])
+  )].sort().reverse();
+
+  if (uniqueDates.length === 0) return 0;
+
+  const today = new Date().toISOString().split('T')[0];
+  const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+
+  // Streak must include today or yesterday
+  if (uniqueDates[0] !== today && uniqueDates[0] !== yesterday) {
+    return 0;
+  }
+
+  let streak = 1;
+  for (let i = 1; i < uniqueDates.length; i++) {
+    const currentDate = new Date(uniqueDates[i - 1]);
+    const prevDate = new Date(uniqueDates[i]);
+    const diffDays = (currentDate.getTime() - prevDate.getTime()) / 86400000;
+
+    if (diffDays === 1) {
+      streak++;
+    } else {
+      break;
+    }
+  }
+
+  return streak;
+}
+
+// Get all habits for authenticated user with streaks
 router.get('/', authenticate, async (req: AuthRequest, res) => {
   try {
     const userId = req.user!.id;
 
-    const { data, error } = await supabase
+    const { data: habits, error } = await supabase
       .from('habits')
       .select('*')
       .eq('user_id', userId)
@@ -20,7 +64,46 @@ router.get('/', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to fetch habits' });
     }
 
-    res.json(data || []);
+    // Calculate streaks for each habit
+    const habitsWithStreaks = await Promise.all(
+      (habits || []).map(async (habit) => {
+        const streak = await calculateStreak(habit.id, userId);
+        return { ...habit, current_streak: streak };
+      })
+    );
+
+    res.json(habitsWithStreaks);
+  } catch (error) {
+    console.error('Error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Get today's logs for all habits (for checked-in status)
+router.get('/today', authenticate, async (req: AuthRequest, res) => {
+  try {
+    const userId = req.user!.id;
+    const today = new Date().toISOString().split('T')[0];
+
+    const { data, error } = await supabase
+      .from('habit_logs')
+      .select('habit_id, completed_at, notes')
+      .eq('user_id', userId)
+      .gte('completed_at', `${today}T00:00:00.000Z`)
+      .lt('completed_at', `${today}T23:59:59.999Z`);
+
+    if (error) {
+      console.error('Error fetching today logs:', error);
+      return res.status(500).json({ error: 'Failed to fetch today logs' });
+    }
+
+    // Return as a map of habit_id -> log
+    const todayLogs: Record<string, any> = {};
+    (data || []).forEach(log => {
+      todayLogs[log.habit_id] = log;
+    });
+
+    res.json(todayLogs);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -53,7 +136,8 @@ router.post('/', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to create habit' });
     }
 
-    res.status(201).json(data);
+    // Return with streak = 0 for new habit
+    res.status(201).json({ ...data, current_streak: 0 });
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -67,6 +151,21 @@ router.post('/:id/log', authenticate, async (req: AuthRequest, res) => {
     const { id } = req.params;
     const { notes } = req.body;
 
+    // Check if already logged today
+    const today = new Date().toISOString().split('T')[0];
+    const { data: existingLog } = await supabase
+      .from('habit_logs')
+      .select('id')
+      .eq('habit_id', id)
+      .eq('user_id', userId)
+      .gte('completed_at', `${today}T00:00:00.000Z`)
+      .lt('completed_at', `${today}T23:59:59.999Z`)
+      .single();
+
+    if (existingLog) {
+      return res.status(400).json({ error: 'Already logged today' });
+    }
+
     const { data, error } = await supabase
       .from('habit_logs')
       .insert({
@@ -83,7 +182,9 @@ router.post('/:id/log', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to log habit' });
     }
 
-    res.status(201).json(data);
+    // Calculate and return new streak
+    const newStreak = await calculateStreak(id, userId);
+    res.status(201).json({ ...data, new_streak: newStreak });
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -143,7 +244,9 @@ router.put('/:id', authenticate, async (req: AuthRequest, res) => {
       return res.status(404).json({ error: 'Habit not found' });
     }
 
-    res.json(data);
+    // Return with current streak
+    const streak = await calculateStreak(id, userId);
+    res.json({ ...data, current_streak: streak });
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index fe2cf57..1d9ef72 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -29,19 +29,19 @@ async function apiFetch(endpoint: string, options: RequestInit = {}) {
 // Journal API
 export const journalApi = {
   getAll: () => apiFetch('/api/journal'),
-  
+
   create: (entry: { title: string; content: string; mood?: number; tags?: string[] }) =>
     apiFetch('/api/journal', {
       method: 'POST',
       body: JSON.stringify(entry),
     }),
-  
+
   update: (id: string, entry: { title: string; content: string; mood?: number; tags?: string[] }) =>
     apiFetch(`/api/journal/${id}`, {
       method: 'PUT',
       body: JSON.stringify(entry),
     }),
-  
+
   delete: (id: string) =>
     apiFetch(`/api/journal/${id}`, {
       method: 'DELETE',
@@ -51,27 +51,29 @@ export const journalApi = {
 // Habits API
 export const habitsApi = {
   getAll: () => apiFetch('/api/habits'),
-  
+
+  getTodayLogs: () => apiFetch('/api/habits/today'),
+
   create: (habit: { name: string; description?: string; frequency?: 'daily' | 'weekly' }) =>
     apiFetch('/api/habits', {
       method: 'POST',
       body: JSON.stringify(habit),
     }),
-  
+
   log: (habitId: string, notes?: string) =>
     apiFetch(`/api/habits/${habitId}/log`, {
       method: 'POST',
       body: JSON.stringify({ notes }),
     }),
-  
+
   getLogs: (habitId: string) => apiFetch(`/api/habits/${habitId}/logs`),
-  
+
   update: (id: string, habit: { name: string; description?: string; frequency?: 'daily' | 'weekly' }) =>
     apiFetch(`/api/habits/${id}`, {
       method: 'PUT',
       body: JSON.stringify(habit),
     }),
-  
+
   delete: (id: string) =>
     apiFetch(`/api/habits/${id}`, {
       method: 'DELETE',
@@ -89,7 +91,7 @@ export const resourcesApi = {
 // Rooms API
 export const roomsApi = {
   getAll: () => apiFetch('/api/rooms'),
-  
+
   getMessages: (roomId: string, limit?: number) => {
     const query = limit ? `?limit=${limit}` : '';
     return apiFetch(`/api/rooms/${roomId}/messages${query}`);
@@ -99,12 +101,12 @@ export const roomsApi = {
 // Moderation API
 export const moderationApi = {
   getFlagged: () => apiFetch('/api/moderation/flagged'),
-  
+
   createReport: (messageId: string, reason: string) =>
     apiFetch('/api/moderation/reports', {
       method: 'POST',
       body: JSON.stringify({ messageId, reason }),
     }),
-  
+
   getReports: () => apiFetch('/api/moderation/reports'),
 };
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index a66c192..69dd203 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getSession, getCurrentUser, getProfile, signOut } from '../lib/supabase';
-import { roomsApi, resourcesApi } from '../lib/api';
+import { roomsApi, resourcesApi, habitsApi } from '../lib/api';
 import ChatRoom from '../components/ChatRoom';
+import HabitCard from '../components/HabitCard';
+import CreateHabitModal from '../components/CreateHabitModal';
+import EditHabitModal from '../components/EditHabitModal';
+import CheckInModal from '../components/CheckInModal';
+import DeleteConfirmModal from '../components/DeleteConfirmModal';
 
 type Tab = 'rooms' | 'journal' | 'habits' | 'resources';
 
@@ -106,11 +111,10 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
   return (
     <button
       onClick={onClick}
-      className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
-        active
-          ? 'border-primary-600 text-primary-600'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-      }`}
+      className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${active
+        ? 'border-primary-600 text-primary-600'
+        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+        }`}
     >
       {children}
     </button>
@@ -227,21 +231,141 @@ function JournalTab() {
 }
 
 function HabitsTab() {
+  const [habits, setHabits] = useState<any[]>([]);
+  const [todayLogs, setTodayLogs] = useState<Record<string, any>>({});
+  const [loading, setLoading] = useState(true);
+
+  // Modal states
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingHabit, setEditingHabit] = useState<any | null>(null);
+  const [checkingInHabit, setCheckingInHabit] = useState<any | null>(null);
+  const [deletingHabit, setDeletingHabit] = useState<any | null>(null);
+
+  useEffect(() => {
+    loadHabits();
+  }, []);
+
+  async function loadHabits() {
+    try {
+      const [habitsData, logsData] = await Promise.all([
+        habitsApi.getAll(),
+        habitsApi.getTodayLogs(),
+      ]);
+      setHabits(habitsData);
+      setTodayLogs(logsData);
+    } catch (error) {
+      console.error('Error loading habits:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCreateHabit(habit: { name: string; description?: string; frequency: 'daily' | 'weekly' }) {
+    const newHabit = await habitsApi.create(habit);
+    setHabits([newHabit, ...habits]);
+  }
+
+  async function handleUpdateHabit(id: string, habit: { name: string; description?: string; frequency: 'daily' | 'weekly' }) {
+    const updatedHabit = await habitsApi.update(id, habit);
+    setHabits(habits.map(h => h.id === id ? updatedHabit : h));
+  }
+
+  async function handleCheckIn(habitId: string, notes?: string) {
+    const result = await habitsApi.log(habitId, notes);
+    // Update today's logs
+    setTodayLogs({ ...todayLogs, [habitId]: result });
+    // Update streak in habits list
+    setHabits(habits.map(h =>
+      h.id === habitId ? { ...h, current_streak: result.new_streak } : h
+    ));
+  }
+
+  async function handleDeleteHabit() {
+    if (!deletingHabit) return;
+    await habitsApi.delete(deletingHabit.id);
+    setHabits(habits.filter(h => h.id !== deletingHabit.id));
+    setDeletingHabit(null);
+  }
+
+  if (loading) {
+    return <div className="text-center py-8">Loading habits...</div>;
+  }
+
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-2xl font-bold text-gray-900">My Habits</h2>
-        <button className="btn-primary">+ New Habit</button>
+        <button
+          className="btn-primary"
+          onClick={() => setShowCreateModal(true)}
+        >
+          + New Habit
+        </button>
       </div>
 
-      <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
-        <p className="text-green-900">
-          ✅ <strong>Habit tracking coming soon!</strong> Build positive daily routines.
-        </p>
-        <p className="text-sm text-green-800 mt-2">
-          Track streaks, log completions, and celebrate your progress.
-        </p>
-      </div>
+      {habits.length === 0 ? (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
+          <div className="text-4xl mb-4">✨</div>
+          <h3 className="text-lg font-semibold text-green-900 mb-2">
+            Start Building Positive Habits
+          </h3>
+          <p className="text-green-700 mb-4">
+            Track daily routines, build streaks, and celebrate your progress.
+          </p>
+          <button
+            className="btn-primary"
+            onClick={() => setShowCreateModal(true)}
+          >
+            Create Your First Habit
+          </button>
+        </div>
+      ) : (
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {habits.map((habit) => (
+            <HabitCard
+              key={habit.id}
+              habit={habit}
+              streak={habit.current_streak || 0}
+              isCheckedInToday={!!todayLogs[habit.id]}
+              onCheckIn={() => setCheckingInHabit(habit)}
+              onEdit={() => setEditingHabit(habit)}
+              onDelete={() => setDeletingHabit(habit)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Create Habit Modal */}
+      <CreateHabitModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onCreate={handleCreateHabit}
+      />
+
+      {/* Edit Habit Modal */}
+      <EditHabitModal
+        isOpen={!!editingHabit}
+        habit={editingHabit}
+        onClose={() => setEditingHabit(null)}
+        onUpdate={handleUpdateHabit}
+      />
+
+      {/* Check-in Modal */}
+      <CheckInModal
+        isOpen={!!checkingInHabit}
+        habit={checkingInHabit}
+        currentStreak={checkingInHabit?.current_streak || 0}
+        onClose={() => setCheckingInHabit(null)}
+        onCheckIn={handleCheckIn}
+      />
+
+      {/* Delete Confirmation Modal */}
+      <DeleteConfirmModal
+        isOpen={!!deletingHabit}
+        habitName={deletingHabit?.name || ''}
+        onClose={() => setDeletingHabit(null)}
+        onConfirm={handleDeleteHabit}
+      />
     </div>
   );
 }

From 574ccafe5690970507ea2ba1e61f28bccc61a4e4 Mon Sep 17 00:00:00 2001
From: vedhapprakashni <vedhamuthukumar@gmail.com>
Date: Fri, 6 Feb 2026 21:42:04 +0530
Subject: [PATCH 3/5] fix(habits): remove unused React imports and add null
 guards

---
 frontend/src/components/CheckInModal.tsx       | 3 ++-
 frontend/src/components/DeleteConfirmModal.tsx | 2 +-
 frontend/src/components/EditHabitModal.tsx     | 2 ++
 frontend/src/components/HabitCard.tsx          | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CheckInModal.tsx b/frontend/src/components/CheckInModal.tsx
index 9ffb3f6..827854f 100644
--- a/frontend/src/components/CheckInModal.tsx
+++ b/frontend/src/components/CheckInModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 interface CheckInModalProps {
     isOpen: boolean;
@@ -39,6 +39,7 @@ export default function CheckInModal({
     if (!isOpen || !habit) return null;
 
     async function handleCheckIn() {
+        if (!habit) return;  // TypeScript null guard
         setLoading(true);
 
         try {
diff --git a/frontend/src/components/DeleteConfirmModal.tsx b/frontend/src/components/DeleteConfirmModal.tsx
index bf44eec..a577c7d 100644
--- a/frontend/src/components/DeleteConfirmModal.tsx
+++ b/frontend/src/components/DeleteConfirmModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 interface DeleteConfirmModalProps {
     isOpen: boolean;
diff --git a/frontend/src/components/EditHabitModal.tsx b/frontend/src/components/EditHabitModal.tsx
index b1c8b29..3f77744 100644
--- a/frontend/src/components/EditHabitModal.tsx
+++ b/frontend/src/components/EditHabitModal.tsx
@@ -37,6 +37,8 @@ export default function EditHabitModal({ isOpen, habit, onClose, onUpdate }: Edi
             return;
         }
 
+        if (!habit) return;  // TypeScript null guard
+
         setLoading(true);
         setError('');
 
diff --git a/frontend/src/components/HabitCard.tsx b/frontend/src/components/HabitCard.tsx
index a2948df..56dc6e6 100644
--- a/frontend/src/components/HabitCard.tsx
+++ b/frontend/src/components/HabitCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+
 
 interface HabitCardProps {
   habit: {

From 7c809f0d8901d35051fde8a09a67416f76f136ed Mon Sep 17 00:00:00 2001
From: vedhapprakashni <vedhamuthukumar@gmail.com>
Date: Fri, 6 Feb 2026 22:24:56 +0530
Subject: [PATCH 4/5] completed

---
 .env.example                                 |   6 +-
 backend/.env.example                         |   8 +-
 backend/src/routes/habits.ts                 | 115 +-------------
 frontend/.env.example                        |   4 +-
 frontend/src/components/CreateHabitModal.tsx |   2 +-
 frontend/src/components/EditHabitModal.tsx   |   2 +-
 frontend/src/components/HabitCard.tsx        | 148 +++++++++----------
 frontend/src/index.css                       | 127 +++++++++-------
 8 files changed, 164 insertions(+), 248 deletions(-)

diff --git a/.env.example b/.env.example
index 2e4a6b7..ba01b67 100644
--- a/.env.example
+++ b/.env.example
@@ -2,9 +2,9 @@
 # See OPENMINDWELL_PROJECT_GUIDE.md for instructions on obtaining these
 
 # Supabase (get from https://app.supabase.com)
-SUPABASE_URL=https://your-project.supabase.co
-SUPABASE_ANON_KEY=your-anon-key-here
-SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
+SUPABASE_URL=your-supabase-url-here
+SUPABASE_ANON_KEY=your-supabase-anon-key-here
+SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key-here
 
 # HuggingFace (optional - get from https://huggingface.co/settings/tokens)
 HUGGINGFACE_API_TOKEN=your-token-here
diff --git a/backend/.env.example b/backend/.env.example
index 8fa3f1d..24a7f3f 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -2,13 +2,13 @@
 # Copy this to .env and fill in your actual values
 
 # Supabase Configuration (get from https://app.supabase.com → Project Settings → API)
-SUPABASE_URL=https://your-project-id.supabase.co
-SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
-SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+SUPABASE_URL=your-supabase-url-here
+SUPABASE_ANON_KEY=your-supabase-anon-key-here
+SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key-here
 
 # HuggingFace API Token (optional - get from https://huggingface.co/settings/tokens)
 # If not provided, crisis detection will use keyword-based fallback
-HUGGINGFACE_API_TOKEN=hf_YourTokenHere
+HUGGINGFACE_API_TOKEN=your-huggingface-token-here
 
 # Frontend URL (for CORS whitelist)
 FRONTEND_URL=http://localhost:3000
diff --git a/backend/src/routes/habits.ts b/backend/src/routes/habits.ts
index 13153da..f434c34 100644
--- a/backend/src/routes/habits.ts
+++ b/backend/src/routes/habits.ts
@@ -4,56 +4,12 @@ import { authenticate, AuthRequest } from '../middleware/auth';
 
 const router = Router();
 
-// Helper function to calculate streak for a habit
-async function calculateStreak(habitId: string, userId: string): Promise<number> {
-  const { data: logs, error } = await supabase
-    .from('habit_logs')
-    .select('completed_at')
-    .eq('habit_id', habitId)
-    .eq('user_id', userId)
-    .order('completed_at', { ascending: false });
-
-  if (error || !logs || logs.length === 0) {
-    return 0;
-  }
-
-  // Get unique dates (in user's local date format)
-  const uniqueDates = [...new Set(
-    logs.map(log => new Date(log.completed_at).toISOString().split('T')[0])
-  )].sort().reverse();
-
-  if (uniqueDates.length === 0) return 0;
-
-  const today = new Date().toISOString().split('T')[0];
-  const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
-
-  // Streak must include today or yesterday
-  if (uniqueDates[0] !== today && uniqueDates[0] !== yesterday) {
-    return 0;
-  }
-
-  let streak = 1;
-  for (let i = 1; i < uniqueDates.length; i++) {
-    const currentDate = new Date(uniqueDates[i - 1]);
-    const prevDate = new Date(uniqueDates[i]);
-    const diffDays = (currentDate.getTime() - prevDate.getTime()) / 86400000;
-
-    if (diffDays === 1) {
-      streak++;
-    } else {
-      break;
-    }
-  }
-
-  return streak;
-}
-
-// Get all habits for authenticated user with streaks
+// Get all habits for authenticated user
 router.get('/', authenticate, async (req: AuthRequest, res) => {
   try {
     const userId = req.user!.id;
 
-    const { data: habits, error } = await supabase
+    const { data, error } = await supabase
       .from('habits')
       .select('*')
       .eq('user_id', userId)
@@ -64,46 +20,7 @@ router.get('/', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to fetch habits' });
     }
 
-    // Calculate streaks for each habit
-    const habitsWithStreaks = await Promise.all(
-      (habits || []).map(async (habit) => {
-        const streak = await calculateStreak(habit.id, userId);
-        return { ...habit, current_streak: streak };
-      })
-    );
-
-    res.json(habitsWithStreaks);
-  } catch (error) {
-    console.error('Error:', error);
-    res.status(500).json({ error: 'Internal server error' });
-  }
-});
-
-// Get today's logs for all habits (for checked-in status)
-router.get('/today', authenticate, async (req: AuthRequest, res) => {
-  try {
-    const userId = req.user!.id;
-    const today = new Date().toISOString().split('T')[0];
-
-    const { data, error } = await supabase
-      .from('habit_logs')
-      .select('habit_id, completed_at, notes')
-      .eq('user_id', userId)
-      .gte('completed_at', `${today}T00:00:00.000Z`)
-      .lt('completed_at', `${today}T23:59:59.999Z`);
-
-    if (error) {
-      console.error('Error fetching today logs:', error);
-      return res.status(500).json({ error: 'Failed to fetch today logs' });
-    }
-
-    // Return as a map of habit_id -> log
-    const todayLogs: Record<string, any> = {};
-    (data || []).forEach(log => {
-      todayLogs[log.habit_id] = log;
-    });
-
-    res.json(todayLogs);
+    res.json(data || []);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -136,8 +53,7 @@ router.post('/', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to create habit' });
     }
 
-    // Return with streak = 0 for new habit
-    res.status(201).json({ ...data, current_streak: 0 });
+    res.status(201).json(data);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -151,21 +67,6 @@ router.post('/:id/log', authenticate, async (req: AuthRequest, res) => {
     const { id } = req.params;
     const { notes } = req.body;
 
-    // Check if already logged today
-    const today = new Date().toISOString().split('T')[0];
-    const { data: existingLog } = await supabase
-      .from('habit_logs')
-      .select('id')
-      .eq('habit_id', id)
-      .eq('user_id', userId)
-      .gte('completed_at', `${today}T00:00:00.000Z`)
-      .lt('completed_at', `${today}T23:59:59.999Z`)
-      .single();
-
-    if (existingLog) {
-      return res.status(400).json({ error: 'Already logged today' });
-    }
-
     const { data, error } = await supabase
       .from('habit_logs')
       .insert({
@@ -182,9 +83,7 @@ router.post('/:id/log', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to log habit' });
     }
 
-    // Calculate and return new streak
-    const newStreak = await calculateStreak(id, userId);
-    res.status(201).json({ ...data, new_streak: newStreak });
+    res.status(201).json(data);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -244,9 +143,7 @@ router.put('/:id', authenticate, async (req: AuthRequest, res) => {
       return res.status(404).json({ error: 'Habit not found' });
     }
 
-    // Return with current streak
-    const streak = await calculateStreak(id, userId);
-    res.json({ ...data, current_streak: streak });
+    res.json(data);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
diff --git a/frontend/.env.example b/frontend/.env.example
index eedc8d4..c5d12d0 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -8,8 +8,8 @@ VITE_API_BASE_URL=http://localhost:3001
 VITE_WS_URL=ws://localhost:3001
 
 # Supabase Configuration (same as backend)
-VITE_SUPABASE_URL=https://your-project-id.supabase.co
-VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+VITE_SUPABASE_URL=your-supabase-url-here
+VITE_SUPABASE_ANON_KEY=your-supabase-anon-key-here
 
 # Production values:
 # VITE_API_BASE_URL=https://your-domain.com
diff --git a/frontend/src/components/CreateHabitModal.tsx b/frontend/src/components/CreateHabitModal.tsx
index c8112f7..77abce0 100644
--- a/frontend/src/components/CreateHabitModal.tsx
+++ b/frontend/src/components/CreateHabitModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 interface CreateHabitModalProps {
     isOpen: boolean;
diff --git a/frontend/src/components/EditHabitModal.tsx b/frontend/src/components/EditHabitModal.tsx
index 3f77744..26c811f 100644
--- a/frontend/src/components/EditHabitModal.tsx
+++ b/frontend/src/components/EditHabitModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 interface EditHabitModalProps {
     isOpen: boolean;
diff --git a/frontend/src/components/HabitCard.tsx b/frontend/src/components/HabitCard.tsx
index 56dc6e6..010d1b1 100644
--- a/frontend/src/components/HabitCard.tsx
+++ b/frontend/src/components/HabitCard.tsx
@@ -1,85 +1,83 @@
-
-
 interface HabitCardProps {
-  habit: {
-    id: string;
-    name: string;
-    description?: string;
-    frequency: 'daily' | 'weekly';
-    created_at: string;
-  };
-  streak: number;
-  isCheckedInToday: boolean;
-  onCheckIn: () => void;
-  onEdit: () => void;
-  onDelete: () => void;
+    habit: {
+        id: string;
+        name: string;
+        description?: string;
+        frequency: 'daily' | 'weekly';
+        created_at: string;
+    };
+    streak: number;
+    isCheckedInToday: boolean;
+    onCheckIn: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
 }
 
 export default function HabitCard({
-  habit,
-  streak,
-  isCheckedInToday,
-  onCheckIn,
-  onEdit,
-  onDelete,
+    habit,
+    streak,
+    isCheckedInToday,
+    onCheckIn,
+    onEdit,
+    onDelete,
 }: HabitCardProps) {
-  return (
-    <div className="habit-card card hover:shadow-lg transition-all duration-300">
-      {/* Header with name and actions */}
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex-1">
-          <h3 className="text-lg font-semibold text-gray-900">{habit.name}</h3>
-          {habit.description && (
-            <p className="text-sm text-gray-500 mt-1">{habit.description}</p>
-          )}
-        </div>
-        <div className="flex gap-1">
-          <button
-            onClick={onEdit}
-            className="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
-            title="Edit habit"
-          >
-            ✏️
-          </button>
-          <button
-            onClick={onDelete}
-            className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-            title="Delete habit"
-          >
-            🗑️
-          </button>
-        </div>
-      </div>
+    return (
+        <div className="habit-card card hover:shadow-lg transition-all duration-300">
+            {/* Header with name and actions */}
+            <div className="flex items-start justify-between mb-3">
+                <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900">{habit.name}</h3>
+                    {habit.description && (
+                        <p className="text-sm text-gray-500 mt-1">{habit.description}</p>
+                    )}
+                </div>
+                <div className="flex gap-1">
+                    <button
+                        onClick={onEdit}
+                        className="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
+                        title="Edit habit"
+                    >
+                        ✏️
+                    </button>
+                    <button
+                        onClick={onDelete}
+                        className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        title="Delete habit"
+                    >
+                        🗑️
+                    </button>
+                </div>
+            </div>
 
-      {/* Streak Display */}
-      <div className="streak-badge mb-4">
-        <span className="text-2xl">🔥</span>
-        <span className="streak-count">{streak}</span>
-        <span className="streak-label">day streak</span>
-      </div>
+            {/* Streak Display */}
+            <div className="streak-badge mb-4">
+                <span className="text-2xl">🔥</span>
+                <span className="streak-count">{streak}</span>
+                <span className="streak-label">day streak</span>
+            </div>
 
-      {/* Frequency Badge */}
-      <div className="flex items-center gap-2 mb-4">
-        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full capitalize">
-          {habit.frequency}
-        </span>
-      </div>
+            {/* Frequency Badge */}
+            <div className="flex items-center gap-2 mb-4">
+                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full capitalize">
+                    {habit.frequency}
+                </span>
+            </div>
 
-      {/* Check-in Button */}
-      {isCheckedInToday ? (
-        <div className="w-full py-3 px-4 bg-green-100 text-green-700 rounded-lg text-center font-medium flex items-center justify-center gap-2">
-          <span className="text-lg">✓</span>
-          Done today!
+            {/* Check-in Button */}
+            {isCheckedInToday ? (
+                <div className="w-full py-3 px-4 bg-green-100 text-green-700 rounded-lg text-center font-medium flex items-center justify-center gap-2">
+                    <span className="text-lg">✓</span>
+                    Done today!
+                </div>
+            ) : (
+                <button
+                    onClick={onCheckIn}
+                    className="btn-primary w-full flex items-center justify-center gap-2"
+                >
+                    <span>✓</span>
+                    Check In
+                </button>
+            )}
         </div>
-      ) : (
-        <button
-          onClick={onCheckIn}
-          className="btn-primary w-full flex items-center justify-center gap-2"
-        >
-          <span>✓</span>
-          Check In
-        </button>
-      )}
-    </div>
-  );
+    );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7e014e6..10cb007 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -35,74 +35,97 @@
   --color-primary-900: #1e3a8a;
 }
 
-.text-primary-400 { color: var(--color-primary-400); }
-.text-primary-500 { color: var(--color-primary-500); }
-.text-primary-600 { color: var(--color-primary-600); }
-.text-primary-700 { color: var(--color-primary-700); }
+.text-primary-400 {
+  color: var(--color-primary-400);
+}
+
+.text-primary-500 {
+  color: var(--color-primary-500);
+}
+
+.text-primary-600 {
+  color: var(--color-primary-600);
+}
+
+.text-primary-700 {
+  color: var(--color-primary-700);
+}
+
+.bg-primary-50 {
+  background-color: var(--color-primary-50);
+}
+
+.bg-primary-100 {
+  background-color: var(--color-primary-100);
+}
+
+.bg-primary-600 {
+  background-color: var(--color-primary-600);
+}
+
+.bg-primary-700 {
+  background-color: var(--color-primary-700);
+}
 
-.bg-primary-50 { background-color: var(--color-primary-50); }
-.bg-primary-100 { background-color: var(--color-primary-100); }
-.bg-primary-600 { background-color: var(--color-primary-600); }
-.bg-primary-700 { background-color: var(--color-primary-700); }
+.border-primary-400 {
+  border-color: var(--color-primary-400);
+}
 
-.border-primary-400 { border-color: var(--color-primary-400); }
-.border-primary-600 { border-color: var(--color-primary-600); }
+.border-primary-600 {
+  border-color: var(--color-primary-600);
+}
 
 /* Modal styles */
 .modal-overlay {
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 50;
   padding: 1rem;
-  animation: fadeIn 0.2s ease-out;
 }
 
 .modal-content {
   background: white;
-  border-radius: 1rem;
+  border-radius: 0.75rem;
   padding: 1.5rem;
-  width: 100%;
   max-width: 28rem;
+  width: 100%;
   max-height: 90vh;
   overflow-y: auto;
-  position: relative;
-  animation: slideUp 0.3s ease-out;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 
-/* Streak badge */
+/* Streak badge styles */
 .streak-badge {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+  background: linear-gradient(135deg, #ff6b6b, #feca57);
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
   color: white;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
   font-weight: 600;
 }
 
-.streak-count {
-  font-size: 1.5rem;
+.streak-badge .streak-count {
+  font-size: 1.25rem;
   font-weight: 700;
 }
 
-.streak-label {
+.streak-badge .streak-label {
   font-size: 0.875rem;
   opacity: 0.9;
 }
 
-/* Habit card */
+/* Habit card styles */
 .habit-card {
   border: 1px solid #e5e7eb;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.habit-card:hover {
-  transform: translateY(-2px);
 }
 
 /* Confetti animation */
@@ -111,9 +134,9 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 100%;
-  overflow: hidden;
   pointer-events: none;
+  overflow: hidden;
+  height: 100%;
 }
 
 .confetti-piece {
@@ -121,38 +144,36 @@
   width: 10px;
   height: 10px;
   top: -10px;
-  animation: confettiFall 3s ease-out forwards;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  animation: confetti-fall 3s ease-in-out forwards;
 }
 
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes confettiFall {
+@keyframes confetti-fall {
   0% {
     transform: translateY(0) rotate(0deg);
     opacity: 1;
   }
+
   100% {
     transform: translateY(400px) rotate(720deg);
     opacity: 0;
   }
 }
 
-/* Ring focus utility */
-.focus\:ring-primary-500:focus {
-  --tw-ring-color: var(--color-primary-500);
+/* Bounce animation */
+.animate-bounce {
+  animation: bounce 1s infinite;
 }
 
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
\ No newline at end of file

From 9d6a1ca0594cb9f427f8fb35f07d5258538e846c Mon Sep 17 00:00:00 2001
From: vedhapprakashni <vedhamuthukumar@gmail.com>
Date: Sat, 7 Mar 2026 22:56:38 +0530
Subject: [PATCH 5/5] fix(habits): add missing /today route and implement
 streak calculation

---
 backend/src/routes/habits.ts | 121 ++++++++++++++++++++++++++++++++++-
 1 file changed, 118 insertions(+), 3 deletions(-)

diff --git a/backend/src/routes/habits.ts b/backend/src/routes/habits.ts
index f434c34..a513410 100644
--- a/backend/src/routes/habits.ts
+++ b/backend/src/routes/habits.ts
@@ -9,7 +9,7 @@ router.get('/', authenticate, async (req: AuthRequest, res) => {
   try {
     const userId = req.user!.id;
 
-    const { data, error } = await supabase
+    const { data: habits, error } = await supabase
       .from('habits')
       .select('*')
       .eq('user_id', userId)
@@ -20,7 +20,68 @@ router.get('/', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to fetch habits' });
     }
 
-    res.json(data || []);
+    if (!habits) return res.json([]);
+
+    // Fetch all logs for the user to calculate streaks efficiently
+    const { data: allLogs, error: logsError } = await supabase
+      .from('habit_logs')
+      .select('habit_id, completed_at')
+      .eq('user_id', userId)
+      .order('completed_at', { ascending: false });
+
+    if (logsError) {
+      console.error('Error fetching logs for streaks:', logsError);
+      return res.json(habits.map(h => ({ ...h, current_streak: 0 })));
+    }
+
+    const logsByHabit: Record<string, string[]> = {};
+    (allLogs || []).forEach(log => {
+      if (!logsByHabit[log.habit_id]) logsByHabit[log.habit_id] = [];
+      logsByHabit[log.habit_id].push(log.completed_at);
+    });
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    const habitsWithStreaks = habits.map(habit => {
+      const logs = logsByHabit[habit.id] || [];
+      const streak = calculateStreakFromLogs(logs);
+      return { ...habit, current_streak: streak };
+    });
+
+    res.json(habitsWithStreaks);
+  } catch (error) {
+    console.error('Error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Get today's logs for all habits
+router.get('/today', authenticate, async (req: AuthRequest, res) => {
+  try {
+    const userId = req.user!.id;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const { data, error } = await supabase
+      .from('habit_logs')
+      .select('*')
+      .eq('user_id', userId)
+      .gte('completed_at', today.toISOString());
+
+    if (error) {
+      console.error('Error fetching today\'s logs:', error);
+      return res.status(500).json({ error: 'Failed to fetch logs' });
+    }
+
+    const logsByHabit = (data || []).reduce((acc: any, log: any) => {
+      acc[log.habit_id] = log;
+      return acc;
+    }, {});
+
+    res.json(logsByHabit);
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -83,7 +144,10 @@ router.post('/:id/log', authenticate, async (req: AuthRequest, res) => {
       return res.status(500).json({ error: 'Failed to log habit' });
     }
 
-    res.status(201).json(data);
+    // Calculate new streak
+    const newStreak = await calculateHabitStreak(id, userId);
+
+    res.status(201).json({ ...data, new_streak: newStreak });
   } catch (error) {
     console.error('Error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -175,3 +239,54 @@ router.delete('/:id', authenticate, async (req: AuthRequest, res) => {
 });
 
 export default router;
+
+// Helper to calculate streak from a list of completion timestamps (ISO strings)
+function calculateStreakFromLogs(logs: string[]): number {
+  if (!logs || logs.length === 0) return 0;
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  const lastLogDate = new Date(logs[0]);
+  lastLogDate.setHours(0, 0, 0, 0);
+
+  if (lastLogDate.getTime() < yesterday.getTime()) return 0;
+
+  let streak = 0;
+  let expectedDate = new Date(today);
+  if (lastLogDate.getTime() === yesterday.getTime()) {
+    expectedDate = new Date(yesterday);
+  }
+
+  let lastDayProcessed = -1;
+  for (const logAt of logs) {
+    const logDate = new Date(logAt);
+    logDate.setHours(0, 0, 0, 0);
+
+    if (logDate.getTime() === lastDayProcessed) continue;
+
+    if (logDate.getTime() === expectedDate.getTime()) {
+      streak++;
+      expectedDate.setDate(expectedDate.getDate() - 1);
+      lastDayProcessed = logDate.getTime();
+    } else if (logDate.getTime() < expectedDate.getTime()) {
+      break;
+    }
+  }
+  return streak;
+}
+
+// Helper to calculate streak for a single habit from DB
+async function calculateHabitStreak(habitId: string, userId: string): Promise<number> {
+  const { data: logs, error } = await supabase
+    .from('habit_logs')
+    .select('completed_at')
+    .eq('habit_id', habitId)
+    .eq('user_id', userId)
+    .order('completed_at', { ascending: false });
+
+  if (error || !logs) return 0;
+  return calculateStreakFromLogs(logs.map(l => l.completed_at));
+}