\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}",[],[182,189,196],[182,189],{"_102":206,"_95":207,"_151":208,"_153":183,"_154":136,"_155":209,"_157":158,"_104":210,"_99":174,"_161":211,"_163":212,"_164":22,"_165":-5,"_166":213,"_98":214},"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",[],[182,207],{"_102":216,"_95":217,"_151":218,"_153":183,"_154":136,"_155":219,"_157":158,"_104":220,"_99":221,"_161":200,"_163":222,"_164":22,"_165":-5,"_166":223,"_98":224},"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);",[],[182,217],[182],{"_102":227,"_95":228,"_151":229,"_153":-5,"_154":136,"_155":230,"_157":158,"_104":231,"_99":174,"_161":175,"_163":232,"_164":22,"_165":-5,"_166":233,"_98":234},"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}",[],[228],"files",[148,168,180,187,194,205,215,226],"counts",{"_239":32,"_240":160,"_241":32,"_242":243},"pulls","branches","forks","envVars",{"_244":32,"_245":32},"count","emptyCount","contents",[248,251,254],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":249,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":250},["D",1753116767093],[150],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":184,"_157":158,"_104":252,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":253},["D",1753116778987],[182],{"_102":227,"_95":228,"_151":229,"_153":-5,"_154":136,"_155":230,"_157":158,"_104":255,"_99":174,"_161":175,"_163":232,"_164":22,"_165":-5,"_98":256},["D",1753116487247],[228],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":265,"_246":270,"_277":-7,"_278":-5,"_279":-5,"_235":280,"_305":306,"_307":-5,"_308":-5},{"_102":103,"_95":96,"_104":266,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":267,"_130":268,"_133":269,"_145":22},["D",1753115545937],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[271,273,275],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":249,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":272},[150],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":184,"_157":158,"_104":252,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":274},[182],{"_102":227,"_95":228,"_151":229,"_153":-5,"_154":136,"_155":230,"_157":158,"_104":255,"_99":174,"_161":175,"_163":232,"_164":22,"_165":-5,"_98":276},[228],"readme","upstream","pull",[281,283,287,289,291,295,298,302],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":156,"_157":158,"_104":159,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":282,"_98":286},[283],{"_102":169,"_95":170,"_151":171,"_153":152,"_154":136,"_155":172,"_157":158,"_104":173,"_99":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_166":284,"_98":285},[],[150,170],[150],{"_102":181,"_95":182,"_151":183,"_153":-5,"_154":136,"_155":184,"_157":158,"_104":185,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":288,"_98":301},[289,295,298],{"_102":188,"_95":189,"_151":190,"_153":183,"_154":136,"_155":191,"_157":158,"_104":192,"_99":160,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":290,"_98":294},[291],{"_102":195,"_95":196,"_151":197,"_153":190,"_154":136,"_155":135,"_157":158,"_104":198,"_99":199,"_161":200,"_163":201,"_164":22,"_165":-5,"_166":292,"_98":293},[],[182,189,196],[182,189],{"_102":206,"_95":207,"_151":208,"_153":183,"_154":136,"_155":209,"_157":158,"_104":210,"_99":174,"_161":211,"_163":212,"_164":22,"_165":-5,"_166":296,"_98":297},[],[182,207],{"_102":216,"_95":217,"_151":218,"_153":183,"_154":136,"_155":219,"_157":158,"_104":220,"_99":221,"_161":200,"_163":222,"_164":22,"_165":-5,"_166":299,"_98":300},[],[182,217],[182],{"_102":227,"_95":228,"_151":229,"_153":-5,"_154":136,"_155":230,"_157":158,"_104":231,"_99":174,"_161":175,"_163":232,"_164":22,"_165":-5,"_166":303,"_98":304},[],[228],"previews",[283,302],"ahead","behind","actionData","errors"]

hfm

untitled-7290