function MainComponent() { const [habits, setHabits] = React.useState([]); const [selectedDate, setSelectedDate] = React.useState(new Date()); const [showAddHabit, setShowAddHabit] = React.useState(false); const addHabit = (habitName)=>{ setHabits([ ...habits, { name: habitName, completed: {} } ]); setShowAddHabit(false); }; const toggleHabit = (habitIndex, date)=>{ const newHabits = [ ...habits ]; const dateString = date.toISOString().split('T')[0]; newHabits[habitIndex].completed[dateString] = !newHabits[habitIndex].completed[dateString]; setHabits(newHabits); }; const getProgress = (period)=>{ const today = new Date(selectedDate); let startDate = new Date(today); let totalDays = 0; if (period === 'week') { startDate.setDate(today.getDate() - today.getDay()); totalDays = 7; } else if (period === 'month') { startDate = new Date(today.getFullYear(), today.getMonth(), 1); totalDays = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate(); } let completed = 0; let total = 0; for(let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)){ const dateString = d.toISOString().split('T')[0]; habits.forEach((habit)=>{ total++; if (habit.completed[dateString]) completed++; }); } return total > 0 ? completed / total * 100 : 0; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-blue-600 mb-8", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Habit Tracker"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: selectedDate.toISOString().split('T')[0], onChange: (e)=>setSelectedDate(new Date(e.target.value)), className: "w-full p-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Daily Progress"), /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 36 36", className: "circular-chart", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { className: "circle-bg", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "circle", strokeDasharray: `${getProgress('day')}, 100`, d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "18", y: "20.35", className: "percentage", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, Math.round(getProgress('day')), "%")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Weekly Progress"), /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 36 36", className: "circular-chart", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { className: "circle-bg", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "circle", strokeDasharray: `${getProgress('week')}, 100`, d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "18", y: "20.35", className: "percentage", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, Math.round(getProgress('week')), "%")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Monthly Progress"), /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 36 36", className: "circular-chart", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { className: "circle-bg", d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "circle", strokeDasharray: `${getProgress('month')}, 100`, d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "18", y: "20.35", className: "percentage", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, Math.round(getProgress('month')), "%"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Habits"), habits.map((habit, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: habit.completed[selectedDate.toISOString().split('T')[0]] || false, onChange: ()=>toggleHabit(index, selectedDate), className: "mr-2 h-5 w-5 text-blue-600", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, habit.name))), showAddHabit ? /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); addHabit(e.target.habitName.value); }, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "habitName", placeholder: "New habit name", className: "w-full p-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "Add Habit")) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddHabit(true), className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }), "Add New Habit")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save mr-2", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }), "Save Progress")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, ` .circular-chart { display: block; margin: 10px auto; max-width: 100%; max-height: 250px; } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; } .circle { fill: none; stroke: #3b82f6; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } .percentage { fill: #666; font-family: sans-serif; font-size: 0.5em; text-anchor: middle; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } `)); }