From 96ddb2fa60a881a890d6fd966e63abab5ba7b9ec Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 16 May 2026 12:00:59 +0530
Subject: [PATCH] feat: fix month labels and reverse order, vertical hourly
 display

- Show Apr 27 instead of Apr - include FY suffix
- Reverse month order: Apr first, then May... Mar
- Change hourly from horizontal wrap to vertical stack
---
 packages/web/components/WorkbookView.tsx | 36 +++++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/web/components/WorkbookView.tsx b/packages/web/components/WorkbookView.tsx
index dcc578e..9e02575 100644
--- a/packages/web/components/WorkbookView.tsx
+++ b/packages/web/components/WorkbookView.tsx
@@ -540,16 +540,23 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
   const hasData = hasSolar || hasWind;
 
   // FY labels: if COD is April 2026, FY 2026-27 = Year 1
+  const startYear = codYear || new Date().getFullYear();
   const getFyLabel = (yearIndex: number) => {
-    const startYear = codYear || new Date().getFullYear();
     const fyStart = startYear + yearIndex;
     const fyEnd = fyStart + 1;
     return `FY ${String(fyStart).slice(-2)}-${String(fyEnd).slice(-2)}`;
   };
 
-  const getMonthLabel = (month: number, yearIndex: number) => {
-    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return monthNames[month - 1];
+  // Month names - in reverse order (April first for Indian FY starting Apr)
+  const monthNames = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
+  // Mapping from position 0-11 to actual month 4-12, 1-3
+  const monthPositions = [4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3];
+  const getMonthLabel = (pos: number, yearIndex: number) => {
+    const month = monthPositions[pos];
+    const fyStart = startYear + yearIndex;
+    const fyEnd = fyStart + 1;
+    const fySuffix = month <= 3 ? String(fyEnd).slice(-2) : String(fyStart).slice(-2);
+    return `${monthNames[pos]} ${fySuffix}`;
   };
 
   // Expand state: which years/months/days are expanded
@@ -650,15 +657,16 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
               {hasWind && <span className="text-blue-700 w-24">{Math.round(windYr).toLocaleString()} MWh</span>}
             </button>
 
-            {/* Month rows (expandable) */}
+            {/* Month rows - reverse order (Apr first for Indian FY) */}
             {isYearExpanded && [...Array(12)].map((_, mi) => {
-              const month = mi + 1;
+              const pos = 11 - mi;  // Reverse: 11->0 gives Apr first
+              const month = monthPositions[pos];
               const monthKey = `${year}-${month}`;
               const isMonthExpanded = expandedMonths.has(monthKey);
               const solarMo = hasSolar ? computeMonthTotal(year, month, true) : 0;
               const windMo = hasWind ? computeMonthTotal(year, month, false) : 0;
               const daysInMonth = MONTH_DAYS[month - 1];
-              const monthLabel = getMonthLabel(month, i);
+              const monthLabel = getMonthLabel(pos, i);
 
               return (
                 <div key={monthKey} className="ml-4">
@@ -667,7 +675,7 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
                     className="w-full flex items-center gap-2 py-1 hover:bg-accent/30 rounded px-2 text-left"
                   >
                     <span className="text-[10px] w-4">{isMonthExpanded ? "▼" : "▶"}</span>
-                    <span className="w-12 text-muted-foreground">{monthLabel}</span>
+                    <span className="w-20 text-muted-foreground">{monthLabel}</span>
                     {hasSolar && <span className="text-orange-700/80 w-24">{Math.round(solarMo).toLocaleString()} MWh</span>}
                     {hasWind && <span className="text-blue-700/80 w-24">{Math.round(windMo).toLocaleString()} MWh</span>}
                   </button>
@@ -692,19 +700,19 @@ function HourlyGenerationSheet({ hourly, codYear }: { hourly: HourlyData; codYea
                           {hasWind && <span className="text-blue-600/70 w-20">{Math.round(windDy).toLocaleString()}</span>}
                         </button>
 
-                        {/* Hour values */}
+                        {/* Hour values - vertical stack */}
                         {isDayExpanded && (
-                          <div className="ml-8 flex flex-wrap gap-0.5 py-1">
+                          <div className="ml-8 flex flex-col gap-px py-1">
                             {[...Array(24)].map((_, h) => {
                               const hour = h;
                               const hourIdx = (day - 1) * 24 + hour;
                               const solarHr = hasSolar ? getDayData(year, month, day, true)[hourIdx % 24] : 0;
                               const windHr = hasWind ? getDayData(year, month, day, false)[hourIdx % 24] : 0;
                               return (
-                                <div key={h} className="w-10 text-center text-[9px] border rounded px-0.5">
-                                  <span className="text-muted-foreground">{h}:00</span>
-                                  {hasSolar && <div className="text-orange-700">{Math.round(solarHr)}</div>}
-                                  {hasWind && <div className="text-blue-700">{Math.round(windHr)}</div>}
+                                <div key={h} className="flex items-center gap-2 text-[9px] border-b border-border/30 px-1">
+                                  <span className="w-8 text-muted-foreground">{String(h).padStart(2, '0')}:00</span>
+                                  {hasSolar && <span className="text-orange-700 w-16 text-right">{Math.round(solarHr)}</span>}
+                                  {hasWind && <span className="text-blue-700 w-16 text-right">{Math.round(windHr)}</span>}
                                 </div>
                               );
                             })}