Secrets to a.i 2026

 import React, { useState, useEffect } from 'react';

import { Calendar, DollarSign, Target, TrendingUp, Heart, Brain, Activity, Coffee, Moon, Droplet, Award, ChevronRight, Plus, Check, X } from 'lucide-react';

export default function LifeOSDashboard() {

  const [lifeScore, setLifeScore] = useState(0);

  const [activeTab, setActiveTab] = useState('dashboard');

  

  const [habits, setHabits] = useState([

    { id: 1, name: 'Morning Workout', streak: 7, completed: true, category: 'health' },

    { id: 2, name: 'Read 30 min', streak: 12, completed: true, category: 'knowledge' },

    { id: 3, name: 'Meditate', streak: 5, completed: false, category: 'mindfulness' },

    { id: 4, name: 'Drink 8 glasses', streak: 3, completed: true, category: 'health' },

  ]);

  const [goals, setGoals] = useState([

    { id: 1, name: 'Launch Side Hustle', progress: 65, deadline: '2026-03-15', category: 'career' },

    { id: 2, name: 'Save $10,000', progress: 42, deadline: '2026-06-01', category: 'finance' },

    { id: 3, name: 'Run Marathon', progress: 28, deadline: '2026-09-01', category: 'health' },

  ]);

  const [finances, setFinances] = useState({

    income: 5200,

    expenses: 3800,

    savings: 1400,

    categories: [

      { name: 'Housing', amount: 1500, budget: 1500, percent: 39 },

      { name: 'Food', amount: 650, budget: 800, percent: 17 },

      { name: 'Transport', amount: 400, budget: 500, percent: 11 },

      { name: 'Entertainment', amount: 300, budget: 400, percent: 8 },

      { name: 'Other', amount: 950, budget: 600, percent: 25 },

    ]

  });

  const [mood, setMood] = useState([

    { day: 'Mon', score: 8 },

    { day: 'Tue', score: 7 },

    { day: 'Wed', score: 9 },

    { day: 'Thu', score: 6 },

    { day: 'Fri', score: 8 },

    { day: 'Sat', score: 9 },

    { day: 'Sun', score: 7 },

  ]);

  const motivationalQuotes = [

    "Small daily improvements lead to stunning results.",

    "Your future is created by what you do today.",

    "Progress, not perfection.",

    "The secret of getting ahead is getting started.",

    "You are 1% better than yesterday."

  ];

  const [currentQuote, setCurrentQuote] = useState(motivationalQuotes[0]);

  useEffect(() => {

    const habitScore = (habits.filter(h => h.completed).length / habits.length) * 25;

    const goalScore = goals.reduce((sum, g) => sum + g.progress, 0) / goals.length * 0.25;

    const financeScore = ((finances.savings / finances.income) * 100) * 0.25;

    const moodScore = (mood.reduce((sum, m) => sum + m.score, 0) / mood.length / 10) * 25;

    

    setLifeScore(Math.round(habitScore + goalScore + financeScore + moodScore));

    

    const quoteIndex = Math.floor(lifeScore / 20) % motivationalQuotes.length;

    setCurrentQuote(motivationalQuotes[quoteIndex]);

  }, [habits, goals, finances, mood]);

  const toggleHabit = (id) => {

    setHabits(habits.map(h => 

      h.id === id ? { ...h, completed: !h.completed, streak: !h.completed ? h.streak + 1 : h.streak } : h

    ));

  };

  const getScoreColor = (score) => {

    if (score >= 80) return 'from-green-500 to-emerald-600';

    if (score >= 60) return 'from-blue-500 to-cyan-600';

    if (score >= 40) return 'from-yellow-500 to-orange-600';

    return 'from-red-500 to-pink-600';

  };

  const StatCard = ({ icon: Icon, title, value, subtitle, color }) => (

    <div className={`bg-gradient-to-br ${color} p-6 rounded-2xl text-white shadow-lg transform hover:scale-105 transition-all`}>

      <div className="flex items-center justify-between mb-2">

        <Icon className="w-8 h-8 opacity-80" />

        <span className="text-3xl font-bold">{value}</span>

      </div>

      <div className="text-sm opacity-90 font-medium">{title}</div>

      {subtitle && <div className="text-xs opacity-75 mt-1">{subtitle}</div>}

    </div>

  );

  const ProgressBar = ({ progress, color = 'bg-blue-500' }) => (

    <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">

      <div 

        className={`h-full ${color} transition-all duration-500 rounded-full`}

        style={{ width: `${progress}%` }}

      />

    </div>

  );

  return (

    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-4 md:p-8">

      <div className="max-w-7xl mx-auto">

        {/* Header */}

        <div className="mb-8">

          <h1 className="text-4xl md:text-5xl font-black text-gray-900 mb-2">

            Life OS Dashboard

          </h1>

          <p className="text-gray-600 text-lg">Your complete life management system in one place</p>

        </div>

        {/* Life Score Hero */}

        <div className={`bg-gradient-to-br ${getScoreColor(lifeScore)} p-8 rounded-3xl shadow-2xl mb-8 text-white`}>

          <div className="flex flex-col md:flex-row items-center justify-between">

            <div className="mb-6 md:mb-0">

              <div className="text-sm font-semibold uppercase tracking-wide opacity-90 mb-2">Your Life Score</div>

              <div className="text-7xl font-black mb-4">{lifeScore}<span className="text-4xl">/100</span></div>

              <div className="text-lg opacity-90 italic">"{currentQuote}"</div>

            </div>

            <div className="flex gap-4">

              <div className="text-center">

                <div className="text-3xl font-bold">{habits.filter(h => h.completed).length}</div>

                <div className="text-sm opacity-80">Habits Today</div>

              </div>

              <div className="text-center">

                <div className="text-3xl font-bold">{goals.length}</div>

                <div className="text-sm opacity-80">Active Goals</div>

              </div>

              <div className="text-center">

                <div className="text-3xl font-bold">${(finances.savings).toLocaleString()}</div>

                <div className="text-sm opacity-80">Saved This Month</div>

              </div>

            </div>

          </div>

        </div>

        {/* Navigation Tabs */}

        <div className="flex gap-2 mb-6 overflow-x-auto pb-2">

          {['dashboard', 'habits', 'goals', 'finances', 'mood'].map(tab => (

            <button

              key={tab}

              onClick={() => setActiveTab(tab)}

              className={`px-6 py-3 rounded-xl font-semibold capitalize transition-all whitespace-nowrap ${

                activeTab === tab 

                  ? 'bg-gray-900 text-white shadow-lg' 

                  : 'bg-white text-gray-600 hover:bg-gray-50'

              }`}

            >

              {tab}

            </button>

          ))}

        </div>

        {/* Dashboard Tab */}

        {activeTab === 'dashboard' && (

          <div className="space-y-6">

            {/* Quick Stats Grid */}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

              <StatCard 

                icon={Activity} 

                title="Habit Streak" 

                value={`${Math.max(...habits.map(h => h.streak))} days`}

                subtitle="Longest streak"

                color="from-purple-500 to-purple-600"

              />

              <StatCard 

                icon={Target} 

                title="Goal Progress" 

                value={`${Math.round(goals.reduce((sum, g) => sum + g.progress, 0) / goals.length)}%`}

                subtitle="Average completion"

                color="from-blue-500 to-blue-600"

              />

              <StatCard 

                icon={DollarSign} 

                title="Savings Rate" 

                value={`${Math.round((finances.savings/finances.income)*100)}%`}

                subtitle={`$${finances.savings} saved`}

                color="from-green-500 to-green-600"

              />

              <StatCard 

                icon={Heart} 

                title="Weekly Mood" 

                value={`${(mood.reduce((sum, m) => sum + m.score, 0) / mood.length).toFixed(1)}/10`}

                subtitle="Average happiness"

                color="from-pink-500 to-pink-600"

              />

            </div>

            {/* Today's Focus */}

            <div className="bg-white rounded-2xl shadow-lg p-6">

              <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">

                <Coffee className="w-6 h-6 text-orange-500" />

                Today's Habits

              </h2>

              <div className="space-y-3">

                {habits.map(habit => (

                  <div key={habit.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-all">

                    <div className="flex items-center gap-4">

                      <button

                        onClick={() => toggleHabit(habit.id)}

                        className={`w-8 h-8 rounded-lg flex items-center justify-center transition-all ${

                          habit.completed 

                            ? 'bg-green-500 text-white' 

                            : 'bg-gray-200 text-gray-400 hover:bg-gray-300'

                        }`}

                      >

                        {habit.completed && <Check className="w-5 h-5" />}

                      </button>

                      <div>

                        <div className={`font-semibold ${habit.completed ? 'line-through text-gray-400' : 'text-gray-900'}`}>

                          {habit.name}

                        </div>

                        <div className="text-sm text-gray-500">🔥 {habit.streak} day streak</div>

                      </div>

                    </div>

                    <Award className={`w-6 h-6 ${habit.streak >= 7 ? 'text-yellow-500' : 'text-gray-300'}`} />

                  </div>

                ))}

              </div>

            </div>

            {/* Goals Overview */}

            <div className="bg-white rounded-2xl shadow-lg p-6">

              <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">

                <Target className="w-6 h-6 text-blue-500" />

                Active Goals

              </h2>

              <div className="space-y-4">

                {goals.map(goal => (

                  <div key={goal.id} className="p-4 bg-gray-50 rounded-xl">

                    <div className="flex justify-between items-start mb-2">

                      <div>

                        <div className="font-bold text-gray-900">{goal.name}</div>

                        <div className="text-sm text-gray-500">Due: {new Date(goal.deadline).toLocaleDateString()}</div>

                      </div>

                      <div className="text-2xl font-bold text-blue-600">{goal.progress}%</div>

                    </div>

                    <ProgressBar progress={goal.progress} color="bg-gradient-to-r from-blue-500 to-purple-600" />

                  </div>

                ))}

              </div>

            </div>

          </div>

        )}

        {/* Habits Tab */}

        {activeTab === 'habits' && (

          <div className="bg-white rounded-2xl shadow-lg p-6">

            <div className="flex justify-between items-center mb-6">

              <h2 className="text-3xl font-bold">Habit Tracker</h2>

              <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2">

                <Plus className="w-5 h-5" /> Add Habit

              </button>

            </div>

            <div className="grid gap-4">

              {habits.map(habit => (

                <div key={habit.id} className="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-400 transition-all">

                  <div className="flex items-center justify-between">

                    <div className="flex items-center gap-4 flex-1">

                      <button

                        onClick={() => toggleHabit(habit.id)}

                        className={`w-12 h-12 rounded-xl flex items-center justify-center transition-all ${

                          habit.completed 

                            ? 'bg-green-500 text-white shadow-lg' 

                            : 'bg-gray-100 text-gray-400 hover:bg-gray-200'

                        }`}

                      >

                        {habit.completed && <Check className="w-6 h-6" />}

                      </button>

                      <div className="flex-1">

                        <div className="font-bold text-xl text-gray-900">{habit.name}</div>

                        <div className="flex items-center gap-4 mt-2">

                          <span className="text-sm text-gray-600">🔥 {habit.streak} day streak</span>

                          <span className="text-sm text-gray-600 capitalize">{habit.category}</span>

                        </div>

                      </div>

                    </div>

                    <div className="text-right">

                      <div className="text-3xl font-bold text-blue-600">{habit.streak}</div>

                      <div className="text-sm text-gray-500">days</div>

                    </div>

                  </div>

                </div>

              ))}

            </div>

          </div>

        )}

        {/* Goals Tab */}

        {activeTab === 'goals' && (

          <div className="bg-white rounded-2xl shadow-lg p-6">

            <div className="flex justify-between items-center mb-6">

              <h2 className="text-3xl font-bold">Goal Tracker</h2>

              <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center gap-2">

                <Plus className="w-5 h-5" /> New Goal

              </button>

            </div>

            <div className="space-y-6">

              {goals.map(goal => (

                <div key={goal.id} className="border-2 border-gray-200 rounded-xl p-6 hover:border-purple-400 transition-all">

                  <div className="flex justify-between items-start mb-4">

                    <div>

                      <div className="text-2xl font-bold text-gray-900 mb-1">{goal.name}</div>

                      <div className="flex gap-4 text-sm text-gray-600">

                        <span>📅 {new Date(goal.deadline).toLocaleDateString()}</span>

                        <span className="capitalize">• {goal.category}</span>

                      </div>

                    </div>

                    <div className="text-right">

                      <div className="text-4xl font-black text-purple-600">{goal.progress}%</div>

                    </div>

                  </div>

                  <ProgressBar progress={goal.progress} color="bg-gradient-to-r from-purple-500 to-pink-600" />

                  <div className="mt-4 flex gap-2">

                    <button className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 text-sm font-semibold">

                      Update Progress

                    </button>

                    <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-semibold">

                      View Details

                    </button>

                  </div>

                </div>

              ))}

            </div>

          </div>

        )}

        {/* Finances Tab */}

        {activeTab === 'finances' && (

          <div className="space-y-6">

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">

              <div className="bg-gradient-to-br from-green-500 to-emerald-600 p-6 rounded-2xl text-white shadow-lg">

                <div className="text-sm font-semibold uppercase tracking-wide opacity-90 mb-2">Income</div>

                <div className="text-4xl font-black">${finances.income.toLocaleString()}</div>

              </div>

              <div className="bg-gradient-to-br from-red-500 to-pink-600 p-6 rounded-2xl text-white shadow-lg">

                <div className="text-sm font-semibold uppercase tracking-wide opacity-90 mb-2">Expenses</div>

                <div className="text-4xl font-black">${finances.expenses.toLocaleString()}</div>

              </div>

              <div className="bg-gradient-to-br from-blue-500 to-cyan-600 p-6 rounded-2xl text-white shadow-lg">

                <div className="text-sm font-semibold uppercase tracking-wide opacity-90 mb-2">Savings</div>

                <div className="text-4xl font-black">${finances.savings.toLocaleString()}</div>

              </div>

            </div>

            <div className="bg-white rounded-2xl shadow-lg p-6">

              <h2 className="text-2xl font-bold mb-6">Spending Breakdown</h2>

              <div className="space-y-4">

                {finances.categories.map((cat, idx) => (

                  <div key={idx}>

                    <div className="flex justify-between mb-2">

                      <span className="font-semibold text-gray-900">{cat.name}</span>

                      <span className="text-gray-600">${cat.amount} / ${cat.budget}</span>

                    </div>

                    <div className="relative">

                      <ProgressBar progress={(cat.amount/cat.budget)*100} color={cat.amount > cat.budget ? 'bg-red-500' : 'bg-green-500'} />

                    </div>

                  </div>

                ))}

              </div>

            </div>

          </div>

        )}

        {/* Mood Tab */}

        {activeTab === 'mood' && (

          <div className="bg-white rounded-2xl shadow-lg p-6">

            <h2 className="text-3xl font-bold mb-6">Mood Tracker</h2>

            <div className="flex items-end justify-between gap-2 h-64 mb-6">

              {mood.map((day, idx) => (

                <div key={idx} className="flex-1 flex flex-col items-center">

                  <div 

                    className="w-full bg-gradient-to-t from-pink-500 to-purple-600 rounded-t-lg transition-all hover:opacity-80 cursor-pointer"

                    style={{ height: `${day.score * 10}%` }}

                  />

                  <div className="mt-2 text-sm font-semibold text-gray-600">{day.day}</div>

                  <div className="text-xs text-gray-500">{day.score}/10</div>

                </div>

              ))}

            </div>

            <div className="text-center">

              <div className="text-5xl mb-2">

                {mood[mood.length - 1].score >= 8 ? '😊' : mood[mood.length - 1].score >= 6 ? '🙂' : '😐'}

              </div>

              <div className="text-xl font-semibold text-gray-700">

                Average Mood: {(mood.reduce((sum, m) => sum + m.score, 0) / mood.length).toFixed(1)}/10

              </div>

            </div>

          </div>

        )}

        {/* Footer */}

        <div className="mt-12 text-center text-gray-500 text-sm">https://claude.ai/public/artifacts/c9d4b813-8cd6-45e4-9e46-7942c416f269

          <p>Life OS Dashboard • Track Everything That Matters • Level Up Your Life</p>import React, { useState } from 'react';

import { Download, Plus, Trash2, Check } from 'lucide-react';

export default function LifeOSSpreadsheet() {

  const [activeSheet, setActiveSheet] = useState('Dashboard');

  

  const [habits, setHabits] = useState([

    { id: 1, habit: 'Morning Workout', category: 'Health', mon: true, tue: true, wed: false, thu: true, fri: true, sat: false, sun: true, streak: 12 },

    { id: 2, habit: 'Read 30min', category: 'Knowledge', mon: true, tue: true, wed: true, thu: false, fri: true, sat: true, sun: true, streak: 8 },

    { id: 3, habit: 'Meditate 10min', category: 'Mindfulness', mon: true, tue: false, wed: true, thu: true, fri: false, sat: true, sun: true, streak: 5 },

  ]);

  const [goals, setGoals] = useState([

    { id: 1, goal: 'Launch Side Hustle', category: 'Career', target: 100, current: 65, deadline: '2026-03-15' },

    { id: 2, goal: 'Save $10,000', category: 'Finance', target: 10000, current: 4200, deadline: '2026-06-01' },

    { id: 3, goal: 'Run Marathon', category: 'Health', target: 100, current: 28, deadline: '2026-09-01' },

  ]);

  const [finances] = useState({

    income: 5200,

    expenses: [

      { category: 'Housing', budgeted: 1500, actual: 1500 },

      { category: 'Food', budgeted: 800, actual: 650 },

      { category: 'Transport', budgeted: 500, actual: 400 },

      { category: 'Entertainment', budgeted: 400, actual: 300 },

      { category: 'Savings', budgeted: 1000, actual: 1400 },

    ]

  });

  const [moodData] = useState([

    { date: '2026-01-06', mood: 8, energy: 7, notes: 'Great workout' },

    { date: '2026-01-07', mood: 7, energy: 6, notes: 'Productive day' },

    { date: '2026-01-08', mood: 9, energy: 8, notes: 'Hit new PR' },

    { date: '2026-01-09', mood: 6, energy: 5, notes: 'Tired' },

    { date: '2026-01-10', mood: 8, energy: 7, notes: 'Good sleep' },

  ]);

  const calculateLifeScore = () => {

    const habitScore = habits.reduce((sum, h) => {

      const completed = [h.mon, h.tue, h.wed, h.thu, h.fri, h.sat, h.sun].filter(Boolean).length;

      return sum + (completed / 7);

    }, 0) / habits.length * 25;

    const goalScore = goals.reduce((sum, g) => sum + (g.current / g.target), 0) / goals.length * 25;

    const totalActual = finances.expenses.reduce((sum, e) => sum + e.actual, 0);

    const savingsRate = ((finances.income - totalActual) / finances.income) * 100;

    const financeScore = Math.min(savingsRate, 25);

    const avgMood = moodData.reduce((sum, m) => sum + m.mood, 0) / moodData.length;

    const moodScore = (avgMood / 10) * 25;

    return Math.round(habitScore + goalScore + financeScore + moodScore);

  };

  const lifeScore = calculateLifeScore();

  const toggleHabit = (id, day) => {

    setHabits(habits.map(h => h.id === id ? { ...h, [day]: !h[day] } : h));

  };

  const updateGoal = (id, field, value) => {

    setGoals(goals.map(g => g.id === id ? { ...g, [field]: value } : g));

  };

  const sheets = ['Dashboard', 'Habits', 'Goals', 'Finances', 'Mood'];

  return (

    <div className="min-h-screen bg-gray-100 p-4">

      <div className="max-w-7xl mx-auto bg-white shadow-2xl rounded-lg overflow-hidden">

        <div className="bg-gradient-to-r from-green-600 to-green-700 text-white p-4 flex items-center justify-between">

          <div>

            <h1 className="text-2xl font-bold">📊 Life OS Dashboard.xlsx</h1>

            <p className="text-sm opacity-90">Complete Life Management System</p>

          </div>

          <button className="flex items-center gap-2 bg-white text-green-700 px-4 py-2 rounded-lg font-semibold">

            <Download className="w-5 h-5" /> Export

          </button>

        </div>

        <div className="bg-gray-100 border-b border-gray-300 flex gap-1 px-2">

          {sheets.map(sheet => (

            <button

              key={sheet}

              onClick={() => setActiveSheet(sheet)}

              className={`px-4 py-2 rounded-t-lg font-medium ${

                activeSheet === sheet ? 'bg-white text-gray-900 border-t-2 border-green-600' : 'bg-gray-200 text-gray-600'

              }`}

            >

              {sheet}

            </button>

          ))}

        </div>

        <div className="p-4 overflow-x-auto" style={{ minHeight: '500px' }}>

          

          {activeSheet === 'Dashboard' && (

            <div className="space-y-4">

              <div className="bg-gradient-to-br from-green-500 to-emerald-600 text-white p-8 rounded-xl text-center">

                <div className="text-6xl font-black mb-2">{lifeScore}</div>

                <div className="text-xl">Your Life Score</div>

              </div>

              <div className="grid grid-cols-4 gap-4">

                <div className="bg-purple-50 border-2 border-purple-200 p-4 rounded-lg">

                  <div className="text-3xl font-bold text-purple-600">{Math.max(...habits.map(h => h.streak))}</div>

                  <div className="text-sm text-gray-600">Best Streak</div>

                </div>

                <div className="bg-blue-50 border-2 border-blue-200 p-4 rounded-lg">

                  <div className="text-3xl font-bold text-blue-600">{Math.round(goals.reduce((sum, g) => sum + (g.current/g.target*100), 0) / goals.length)}%</div>

                  <div className="text-sm text-gray-600">Goal Progress</div>

                </div>

                <div className="bg-green-50 border-2 border-green-200 p-4 rounded-lg">

                  <div className="text-3xl font-bold text-green-600">${finances.income - finances.expenses.reduce((sum, e) => sum + e.actual, 0)}</div>

                  <div className="text-sm text-gray-600">Savings</div>

                </div>

                <div className="bg-pink-50 border-2 border-pink-200 p-4 rounded-lg">

                  <div className="text-3xl font-bold text-pink-600">{(moodData.reduce((sum, m) => sum + m.mood, 0) / moodData.length).toFixed(1)}/10</div>

                  <div className="text-sm text-gray-600">Avg Mood</div>

                </div>

              </div>

            </div>

          )}

          {activeSheet === 'Habits' && (

            <div>

              <h2 className="text-2xl font-bold mb-4">📅 Habit Tracker</h2>

              <div className="border-2 border-gray-300 rounded-lg overflow-hidden">

                <table className="w-full">

                  <thead className="bg-green-600 text-white">

                    <tr>

                      <th className="border border-gray-300 p-2 text-left">Habit</th>

                      <th className="border border-gray-300 p-2">Mon</th>

                      <th className="border border-gray-300 p-2">Tue</th>

                      <th className="border border-gray-300 p-2">Wed</th>

                      <th className="border border-gray-300 p-2">Thu</th>

                      <th className="border border-gray-300 p-2">Fri</th>

                      <th className="border border-gray-300 p-2">Sat</th>

                      <th className="border border-gray-300 p-2">Sun</th>

                      <th className="border border-gray-300 p-2">Streak</th>

                    </tr>

                  </thead>

                  <tbody>

                    {habits.map(habit => (

                      <tr key={habit.id} className="hover:bg-gray-50">

                        <td className="border border-gray-300 p-2 font-medium">{habit.habit}</td>

                        {['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'].map(day => (

                          <td key={day} className="border border-gray-300 p-2 text-center">

                            <button onClick={() => toggleHabit(habit.id, day)} className={`w-6 h-6 rounded ${habit[day] ? 'bg-green-500 text-white' : 'bg-gray-200'}`}>

                              {habit[day] && <Check className="w-4 h-4" />}

                            </button>

                          </td>

                        ))}

                        <td className="border border-gray-300 p-2 text-center font-bold text-orange-600">🔥 {habit.streak}</td>

                      </tr>

                    ))}

                  </tbody>

                </table>

              </div>

            </div>

          )}

          {activeSheet === 'Goals' && (

            <div>

              <h2 className="text-2xl font-bold mb-4">🎯 Goal Tracker</h2>

              <div className="border-2 border-gray-300 rounded-lg overflow-hidden">

                <table className="w-full">

                  <thead className="bg-blue-600 text-white">

                    <tr>

                      <th className="border border-gray-300 p-2 text-left">Goal</th>

                      <th className="border border-gray-300 p-2">Current</th>

                      <th className="border border-gray-300 p-2">Target</th>

                      <th className="border border-gray-300 p-2">Progress</th>

                      <th className="border border-gray-300 p-2">Deadline</th>

                    </tr>

                  </thead>

                  <tbody>

                    {goals.map(goal => (

                      <tr key={goal.id} className="hover:bg-gray-50">

                        <td className="border border-gray-300 p-2 font-medium">{goal.goal}</td>

                        <td className="border border-gray-300 p-2 text-center">

                          <input type="number" value={goal.current} onChange={(e) => updateGoal(goal.id, 'current', Number(e.target.value))} className="w-20 text-center border rounded px-1" />

                        </td>

                        <td className="border border-gray-300 p-2 text-center">{goal.target}</td>

                        <td className="border border-gray-300 p-2">

                          <div className="flex items-center gap-2">

                            <div className="flex-1 bg-gray-200 rounded-full h-2">

                              <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${(goal.current/goal.target)*100}%` }} />

                            </div>

                            <span className="text-sm font-bold">{Math.round((goal.current/goal.target)*100)}%</span>

                          </div>

                        </td>

                        <td className="border border-gray-300 p-2 text-center text-sm">{goal.deadline}</td>

                      </tr>

                    ))}

                  </tbody>

                </table>

              </div>

            </div>

          )}

          {activeSheet === 'Finances' && (

            <div className="space-y-4">

              <h2 className="text-2xl font-bold">💰 Financial Tracker</h2>

              <div className="grid grid-cols-3 gap-4">

                <div className="bg-green-100 border-2 border-green-300 p-4 rounded-lg">

                  <div className="text-sm text-gray-600">Income</div>

                  <div className="text-3xl font-bold text-green-700">${finances.income}</div>

                </div>

                <div className="bg-red-100 border-2 border-red-300 p-4 rounded-lg">

                  <div className="text-sm text-gray-600">Expenses</div>

                  <div className="text-3xl font-bold text-red-700">${finances.expenses.reduce((sum, e) => sum + e.actual, 0)}</div>

                </div>

                <div className="bg-blue-100 border-2 border-blue-300 p-4 rounded-lg">

                  <div className="text-sm text-gray-600">Savings</div>

                  <div className="text-3xl font-bold text-blue-700">${finances.income - finances.expenses.reduce((sum, e) => sum + e.actual, 0)}</div>

                </div>

              </div>

              <div className="border-2 border-gray-300 rounded-lg overflow-hidden">

                <table className="w-full">

                  <thead className="bg-green-600 text-white">

                    <tr>

                      <th className="border border-gray-300 p-3 text-left">Category</th>

                      <th className="border border-gray-300 p-3">Budgeted</th>

                      <th className="border border-gray-300 p-3">Actual</th>

                      <th className="border border-gray-300 p-3">Difference</th>

                    </tr>

                  </thead>

                  <tbody>

                    {finances.expenses.map((expense, idx) => (

                      <tr key={idx} className="hover:bg-gray-50">

                        <td className="border border-gray-300 p-3 font-medium">{expense.category}</td>

                        <td className="border border-gray-300 p-3 text-center">${expense.budgeted}</td>

                        <td className="border border-gray-300 p-3 text-center font-bold">${expense.actual}</td>

                        <td className={`border border-gray-300 p-3 text-center font-bold ${expense.budgeted - expense.actual >= 0 ? 'text-green-600' : 'text-red-600'}`}>

                          {expense.budgeted - expense.actual >= 0 ? '+' : ''}{expense.budgeted - expense.actual}

                        </td>

                      </tr>

                    ))}

                  </tbody>

                </table>

              </div>

            </div>

          )}

          {activeSheet === 'Mood' && (

            <div>

              <h2 className="text-2xl font-bold mb-4">😊 Mood & Energy Tracker</h2>

              <div className="border-2 border-gray-300 rounded-lg overflow-hidden">

                <table className="w-full">

                  <thead className="bg-purple-600 text-white">

                    <tr>

                      <th className="border border-gray-300 p-3 text-left">Date</th>

                      <th className="border border-gray-300 p-3">Mood</th>

                      <th className="border border-gray-300 p-3">Energy</th>

                      <th className="border border-gray-300 p-3 text-left">Notes</th>

                      <th className="border border-gray-300 p-3">Emoji</th>

                    </tr>

                  </thead>

                  <tbody>

                    {moodData.map((entry, idx) => (

                      <tr key={idx} className="hover:bg-gray-50">

                        <td className="border border-gray-300 p-3 font-medium">{entry.date}</td>

                        <td className="border border-gray-300 p-3 text-center text-2xl font-bold text-purple-600">{entry.mood}</td>

                        <td className="border border-gray-300 p-3 text-center text-2xl font-bold text-blue-600">{entry.energy}</td>

                        <td className="border border-gray-300 p-3 text-sm">{entry.notes}</td>

                        <td className="border border-gray-300 p-3 text-center text-2xl">{entry.mood >= 8 ? '😊' : entry.mood >= 6 ? '🙂' : '😐'}</td>

                      </tr>

                    ))}

                  </tbody>https://claude.ai/public/artifacts/b5347003-00c6-4ac9-8906-ff3d1f22b442

                </table>

              </div>

            </div>

          )}

        </div>https://claude.ai/public/artifacts/b5347003-00c6-4ac9-8906-ff3d1f22b442

      </div>

    </div>

  );

}

          <p className="mt-2">💡 Tip: Consistency beats perfection. Just show up every day.</p>

        </div>

      </div>https://claude.ai/public/artifacts/c9d4b813-8cd6-45e4-9e46-7942c416f269

    </div>

  );

}