\n {/* 12 mini-month grids */}\n

\n {Array.from({ length: 12 }, (_, monthIndex) => {\n const monthDates = getMonthDates(year, monthIndex);\n const daysInMonth = monthDates.length;\n \n return (\n

\n {/* Month header */}\n

\n {MONTH_NAMES[monthIndex]} {year}\n

\n \n {/* Mini grid for each section/goal */}\n

\n {sections.sort((a, b) => a.sortOrder - b.sortOrder).map((section) => {\n const sectionGoals = goalsBySection.get(section.id) || [];\n if (sectionGoals.length === 0) return null;\n\n return (\n

\n {/* Section label */}\n

\n {section.name}\n

\n \n {/* Goals */}\n {sectionGoals.map((goal) => (\n

\n {/* Goal label */}\n

\n {goal.name}\n

\n \n {/* Day cells - compact grid */}\n

\n {monthDates.map((dateStr) => {\n const color = getCellColor(goal.id, dateStr);\n const isToday = dateStr === new Date().toISOString().split('T')[0];\n \n return (\n \n );\n })}\n

\n ))}\n

\n );\n })}\n

\n \n {/* Year Summary */}\n

Year Summary

\n {sections.sort((a, b) => a.sortOrder - b.sortOrder).map((section) => {\n const sectionGoals = goalsBySection.get(section.id) || [];\n if (sectionGoals.length === 0) return null;\n\n return (\n

{section.name}

\n {sectionGoals.map((goal) => {\n // Count entries by color\n const counts = { green: 0, yellow: 0, red: 0 };\n entries\n .filter((e) => e.goalId === goal.id)\n .forEach((e) => counts[e.color]++);\n \n const total = counts.green + counts.yellow + counts.red;\n const yearDays = 365; // Simplified\n const completionRate = total > 0 ? Math.round((total / yearDays) * 100) : 0;\n\n return (\n

\n {goal.name}\n {total} days\n

\n {/* Color distribution bar */}\n {total > 0 && (\n

\n {counts.green > 0 && (\n \n )}\n {counts.yellow > 0 && (\n \n )}\n {counts.red > 0 && (\n \n )}\n

\n )}\n {/* Stats */}\n

\n {counts.green} ✓\n {counts.yellow} ~\n {counts.red} ✗\n

\n );\n })}\n

\n );\n}\n\n","deleted","label",[174,175,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/mosaic/code/frontend/components/YearView.tsx","extension","actionData","errors"]