\n \n Time Tracker\n

\n setCurrentWeek(addDays(currentWeek, -7))}\n className=\"px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Previous Week\n \n \n {format(weekStart, \"MMM d\")} - {format(addDays(weekStart, 6), \"MMM d, yyyy\")}\n \n setCurrentWeek(addDays(currentWeek, 7))}\n className=\"px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Next Week\n \n

\n\n

\n Duration\n

\n {[15, 30, 60].map(duration => (\n setSelectedDuration(duration as 15 | 30 | 60)}\n className={`px-4 py-2 rounded-lg font-medium transition-colors ${\n selectedDuration === duration\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n {duration} min\n \n ))}\n

\n\n

\n Category\n

\n setSelectedCategory(e.target.value)}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {categories.map(category => (\n \n ))}\n \n setShowCategoryModal(true)}\n className=\"px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n aria-label=\"Add Category\"\n >\n \n \n

\n\n

\n Stats\n

\n \n \n {timeBlocks.length} blocks, {timeBlocks.reduce((sum, block) => sum + block.duration, 0)} minutes\n \n

\n\n

Add New Category

\n setNewCategoryName(e.target.value)}\n placeholder=\"Category name\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4\"\n onKeyDown={(e) => e.key === \"Enter\" && addCategory()}\n autoFocus\n />\n

\n setShowCategoryModal(false)}\n className=\"px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Add\n \n

\n )}\n \n );\n}",[],[183,190,197],[183,190],{"_107":207,"_100":208,"_152":209,"_154":184,"_155":138,"_156":210,"_158":159,"_109":211,"_104":175,"_162":212,"_164":213,"_165":27,"_166":-5,"_167":214,"_103":215},"884de30c-6655-11f0-8159-0224a6c84d84","index.html","60348dc2-6654-11f0-a0b0-0224a6c84d84",27,["D",1753117799346],"file","\n\n \n Weekly Time Tracker\n \n \n \n \n \n \n

\n \n \n",[],[183,208],{"_107":217,"_100":218,"_152":219,"_154":184,"_155":138,"_156":220,"_158":159,"_109":221,"_104":222,"_162":201,"_164":223,"_165":27,"_166":-5,"_167":224,"_103":225},"7f4c823c-6654-11f0-8d9c-0224a6c84d84","index.tsx","66166f12-6654-11f0-9f5f-0224a6c84d84",21,["D",1753117354737],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// @deno-types=\"npm:@types/react@18.2.0\"\nimport React from \"https://esm.sh/react@18.2.0\";\n// @deno-types=\"npm:@types/react-dom@18.2.0\"\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!); // Use non-null assertion as we know the element exists\nroot.render(\n \n \n ,\n);",[],[183,218],[183],{"_107":228,"_100":229,"_152":230,"_154":-5,"_155":138,"_156":231,"_158":159,"_109":232,"_104":175,"_162":176,"_164":233,"_165":27,"_166":-5,"_167":234,"_103":235},"7a3bc73c-6652-11f0-9c73-0224a6c84d84","main.tsx","492bc8ce-6650-11f0-8e95-0224a6c84d84",5,["D",1753116487247],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { ChangeEvent, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Category {\n name: string;\n color: string;\n}\n\ninterface TimeSlot {\n day: number;\n slot: number;\n category: string | null;\n}\n\ninterface TrackerState {\n interval: number;\n slots: Record;\n}\n\nconst dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\nconst intervals = [15, 30, 60];\nconst categories: Category[] = [\n { name: \"Work\", color: \"bg-blue-500\" },\n { name: \"Study\", color: \"bg-green-500\" },\n { name: \"Exercise\", color: \"bg-red-500\" },\n { name: \"Leisure\", color: \"bg-yellow-500\" },\n { name: \"Sleep\", color: \"bg-purple-500\" },\n { name: \"Meals\", color: \"bg-orange-500\" },\n];\n\nfunction WeeklyTimeTracker() {\n const [interval, setInterval] = useState(15);\n const [slots, setSlots] = useState>({});\n const [selectedCategory, setSelectedCategory] = useState(null);\n\n const slotsPerDay = (24 * 60) / interval;\n\n // Load data from localStorage on component mount\n useEffect(() => {\n const savedData = localStorage.getItem(\"weeklyTimeTracker\");\n if (savedData) {\n const parsed: TrackerState = JSON.parse(savedData);\n setInterval(parsed.interval);\n setSlots(parsed.slots);\n }\n }, []);\n\n // Save data to localStorage whenever state changes\n useEffect(() => {\n const dataToSave: TrackerState = { interval, slots };\n localStorage.setItem(\"weeklyTimeTracker\", JSON.stringify(dataToSave));\n }, [interval, slots]);\n\n const handleIntervalChange = (event: ChangeEvent) => {\n const newInterval = Number(event.target.value);\n setInterval(newInterval);\n // Clear slots when interval changes as they may not align\n setSlots({});\n };\n\n const handleSlotClick = (day: number, idx: number) => {\n const key = `${day}-${idx}`;\n\n if (selectedCategory) {\n // If a category is selected, apply it to the slot\n setSlots((prev) => ({ ...prev, [key]: selectedCategory }));\n } else {\n // If no category is selected, cycle through categories\n const current = slots[key] ?? null;\n const catNames = categories.map((c) => c.name);\n const currentIndex = current ? catNames.indexOf(current) : -1;\n const nextIndex = (currentIndex + 1) % (catNames.length + 1);\n const nextCat = nextIndex >= 0 && nextIndex < catNames.length ? catNames[nextIndex] : null;\n setSlots((prev) => ({ ...prev, [key]: nextCat }));\n }\n };\n\n const clearAllSlots = () => {\n setSlots({});\n };\n\n const getTimeLabel = (slotIndex: number): string => {\n const totalMinutes = slotIndex * interval;\n const hours = Math.floor(totalMinutes / 60);\n const minutes = totalMinutes % 60;\n return `${hours.toString().padStart(2, \"0\")}:${minutes.toString().padStart(2, \"0\")}`;\n };\n\n const getCategoryStats = () => {\n const stats: Record = {};\n Object.values(slots).forEach(category => {\n if (category) {\n stats[category] = (stats[category] || 0) + 1;\n }\n });\n\n return Object.entries(stats).map(([category, count]) => ({\n category,\n hours: (count * interval) / 60,\n color: categories.find(c => c.name === category)?.color || \"bg-gray-500\",\n }));\n };\n\n return (\n

Weekly Time Tracker

\n\n {/* Controls */}\n

\n Time Interval:\n \n {intervals.map((i) => )}\n \n

\n\n \n Clear All\n \n

\n\n {/* Category Selection */}\n

Categories:

\n setSelectedCategory(null)}\n className={`px-3 py-1 rounded text-sm transition duration-150 ease-in-out ${\n selectedCategory === null\n ? \"bg-gray-600 text-white\"\n : \"bg-gray-700 text-gray-300 hover:bg-gray-600\"\n }`}\n >\n Cycle Mode\n \n {categories.map((cat) => (\n setSelectedCategory(cat.name)}\n className={`px-3 py-1 rounded text-sm flex items-center space-x-2 transition duration-150 ease-in-out ${\n selectedCategory === cat.name\n ? \"ring-2 ring-blue-400\"\n : \"hover:ring-1 hover:ring-gray-500\"\n }`}\n >\n

\n {cat.name}\n \n ))}\n

\n\n {/* Statistics */}\n

Weekly Summary:

\n {getCategoryStats().map(({ category, hours, color }) => (\n

\n {category}: {hours.toFixed(1)}h\n

\n ))}\n

\n\n {/* Time Grid */}\n

\n {/* Time Labels Column */}\n

\n Time\n

\n {Array.from({ length: slotsPerDay }).map((_, idx) => (\n \n {idx % (60 / interval) === 0 ? getTimeLabel(idx) : \"\"}\n

\n ))}\n

\n\n {/* Days Grid */}\n {dayNames.map((dayName, dayIdx) => (\n

\n {dayName.substring(0, 3)}\n

\n {Array.from({ length: slotsPerDay }).map((_, idx) => {\n const key = `${dayIdx}-${idx}`;\n const cat = slots[key];\n const catDef = categories.find((c) =>\n c.name === cat\n );\n const bgClass = catDef ? catDef.color : \"bg-gray-700 hover:bg-gray-600\";\n const isHourMark = idx % (60 / interval) === 0;\n\n return (\n handleSlotClick(dayIdx, idx)}\n className={`${bgClass} ${\n isHourMark ? \"border-t border-gray-500\" : \"border-t border-gray-700\"\n } h-4 w-20 cursor-pointer hover:opacity-80 transition-opacity duration-150`}\n title={`${dayName} ${getTimeLabel(idx)} - ${cat || \"Unassigned\"}`}\n />\n );\n })}\n

\n ))}\n

\n\n {/* Instructions */}\n

\n Click on time slots to assign activities. Use \"Cycle Mode\" to click through categories, or select a specific\n category to paint with.\n

\n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Weekly Time Tracker\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[229],"files",[149,169,181,188,195,206,216,227],"counts",{"_240":31,"_241":161,"_242":31,"_243":31},"pulls","branches","forks","envVars","contents",[246,249,252],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":247,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":248},["D",1753116767093],[151],{"_107":182,"_100":183,"_152":184,"_154":-5,"_155":138,"_156":185,"_158":159,"_109":250,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":251},["D",1753116778987],[183],{"_107":228,"_100":229,"_152":230,"_154":-5,"_155":138,"_156":231,"_158":159,"_109":253,"_104":175,"_162":176,"_164":233,"_165":27,"_166":-5,"_103":254},["D",1753116487247],[229],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_98":99,"_100":101,"_102":-7,"_104":-7,"_105":261,"_244":265,"_272":-7,"_273":-5,"_274":-5,"_236":275,"_300":301},{"_107":108,"_100":101,"_109":262,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_14":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_21":263,"_135":264,"_146":27},["D",1753115545937],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},[266,268,270],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":247,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":267},[151],{"_107":182,"_100":183,"_152":184,"_154":-5,"_155":138,"_156":185,"_158":159,"_109":250,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":269},[183],{"_107":228,"_100":229,"_152":230,"_154":-5,"_155":138,"_156":231,"_158":159,"_109":253,"_104":175,"_162":176,"_164":233,"_165":27,"_166":-5,"_103":271},[229],"readme","upstream","pull",[276,278,282,284,286,290,293,297],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":160,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":277,"_103":281},[278],{"_107":170,"_100":171,"_152":172,"_154":153,"_155":138,"_156":173,"_158":159,"_109":174,"_104":175,"_162":176,"_164":177,"_165":27,"_166":-5,"_167":279,"_103":280},[],[151,171],[151],{"_107":182,"_100":183,"_152":184,"_154":-5,"_155":138,"_156":185,"_158":159,"_109":186,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":283,"_103":296},[284,290,293],{"_107":189,"_100":190,"_152":191,"_154":184,"_155":138,"_156":192,"_158":159,"_109":193,"_104":161,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":285,"_103":289},[286],{"_107":196,"_100":197,"_152":198,"_154":191,"_155":138,"_156":137,"_158":159,"_109":199,"_104":200,"_162":201,"_164":202,"_165":27,"_166":-5,"_167":287,"_103":288},[],[183,190,197],[183,190],{"_107":207,"_100":208,"_152":209,"_154":184,"_155":138,"_156":210,"_158":159,"_109":211,"_104":175,"_162":212,"_164":213,"_165":27,"_166":-5,"_167":291,"_103":292},[],[183,208],{"_107":217,"_100":218,"_152":219,"_154":184,"_155":138,"_156":220,"_158":159,"_109":221,"_104":222,"_162":201,"_164":223,"_165":27,"_166":-5,"_167":294,"_103":295},[],[183,218],[183],{"_107":228,"_100":229,"_152":230,"_154":-5,"_155":138,"_156":231,"_158":159,"_109":232,"_104":175,"_162":176,"_164":233,"_165":27,"_166":-5,"_167":298,"_103":299},[],[229],"previews",[278,297],"routes/_app","actionData","errors"]