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

@@ -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 getFyLabel = (yearIndex: number) => {
   const startYear = codYear || new Date().getFullYear();
+  const getFyLabel = (yearIndex: number) => {
     const fyStart = startYear + yearIndex;
     const fyEnd = fyStart + 1;
     return `FY ${String(fyStart).slice(-2)}-${String(fyEnd).slice(-2)}`;
   };
 
-  const getMonthLabel = (month: number, yearIndex: number) => {
+  // Month names - in reverse order (April first for Indian FY starting Apr)
-    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const monthNames = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
-    return monthNames[month - 1];
+  // 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">
+                                <div key={h} className="flex items-center gap-2 text-[9px] border-b border-border/30 px-1">
-                                  <span className="text-muted-foreground">{h}:00</span>
+                                  <span className="w-8 text-muted-foreground">{String(h).padStart(2, '0')}:00</span>
-                                  {hasSolar && <div className="text-orange-700">{Math.round(solarHr)}</div>}
+                                  {hasSolar && <span className="text-orange-700 w-16 text-right">{Math.round(solarHr)}</span>}
-                                  {hasWind && <div className="text-blue-700">{Math.round(windHr)}</div>}
+                                  {hasWind && <span className="text-blue-700 w-16 text-right">{Math.round(windHr)}</span>}
                                 </div>
                               );
                             })}