Code.gs

/**
 * ============================================================
 * Cashew Reports — Google Apps Script
 * ============================================================
 * Reads Cashew Outbox CSV from Google Drive, computes financial
 * metrics, and serves an HTML dashboard via HtmlService.
 *
 * Widget Renderer Pattern: each widget's HTML is generated server-side
 * by a function in WIDGET_RENDERERS. Dashboard.html is a thin shell
 * that injects pre-rendered HTML via a for-loop.
 *
 * FILE STRUCTURE:
 *   1. CONFIG             — CSV path, widget layout, category lists
 *   2. ENTRY POINTS       — doGet(), exportPdfToSnapshots()
 *   3. DATA PIPELINE      — CSV loading, parsing, filtering, rendering
 *   4. METRICS            — Per-widget computation functions
 *   5. HELPERS            — Shared sum/filter/format utilities
 *   6. RENDERING HELPERS  — HTML formatting (fmt_, deltaChip_, etc.)
 *   7. WIDGET RENDERERS   — Per-widget HTML generators
 * ============================================================
 */

// ============================================================
// 1. CONFIG
// ============================================================

var CONFIG = {

  // --- Data Source ---
  CSV_FOLDER_NAME: "Cashew",
  CSV_FILENAME: "outbox.csv",

  // --- Widget Layout (12-column grid) ---
  // Array order = render order. Section titles are widgets (id: "section_title").
  //
  // Shared fields:
  //   id:        matches key in WIDGET_RENDERERS
  //   visible:   show (true) or hide (false)
  //
  // Content widget fields:
  //   size:      "small" (3/12) | "third" (4/12) | "medium" (6/12) | "large" (12/12)
  //   col:       optional grid-column-start (1-based). Valid positions per size:
  //                small→1,4,7,10  third→1,5,9  medium→1,7  large→1
  //              Omit for auto-placement. Ignored on tablet/mobile.
  //
  // Section title fields (always full-width, no size needed):
  //   title:     displayed label; use {month} for current month
  //   (pageBreak removed — page breaks handled by section-block CSS)
  //
  // NOTE: Section titles auto-hide when all their widgets are hidden.
  // Walkthrough order (top-down narrative):
  //   1. Monthly Summary — 3 headline KPIs + lifestyle tax (how did this month go?)
  //   2. Where Did It Go — full category table, then disc split + utility bills
  //   3. Spending Patterns — burn trend chart + grocery trend chart
  //   4. Deep Dives — biggest increases (QoQ) + top subcats (12-month) side by side
  //   5. Income & Savings — investment, rewards, rent trend
  //   6. Structural — household baseline, vehicle costs, people payments, data quality
  WIDGETS: [
    // --- 1. Monthly Summary: the headline numbers ---
    { id: "section_title", visible: true, title: "Monthly Summary \u2014 {month}" },
    { id: "burn_rate",        visible: true, size: "small" },
    { id: "money_received",   visible: true, size: "small" },
    { id: "savings_rate",     visible: true, size: "small" },
    { id: "lifestyle_tax",    visible: true, size: "small" },

    // --- 2. Where Did It Go: full picture, then classification + bills ---
    { id: "section_title", visible: true, title: "Where Did It Go" },
    { id: "cat_breakdown",    visible: true, size: "large" },
    { id: "disc_split",       visible: true, size: "medium" },
    { id: "utility_bills",    visible: true, size: "medium" },

    // --- 3. Spending Patterns: trend charts ---
    { id: "section_title", visible: true, title: "Spending Patterns" },
    { id: "burn_trend",       visible: true, size: "medium" },
    { id: "grocery_trend",    visible: true, size: "medium" },

    // --- 4. Deep Dives: QoQ increases (left) + 12-month top subcats (right) ---
    { id: "section_title", visible: true, title: "Deep Dives" },
    { id: "biggest_increases",visible: true, size: "medium" },
    { id: "top_subcats",      visible: true, size: "medium" },

    // --- 5. Income & Savings: what came in ---
    { id: "section_title", visible: true, title: "Income & Savings" },
    { id: "investment",       visible: true, size: "third" },
    { id: "rewards_refunds",  visible: true, size: "third" },
    { id: "rent_trend",       visible: true, size: "third" },

    // --- 6. Structural: non-negotiable baselines + data quality ---
    { id: "section_title", visible: true, title: "Structural Costs" },
    { id: "household_cost",   visible: true, size: "medium" },
    { id: "vehicle_expenses", visible: true, size: "medium" },
    { id: "people_payments",  visible: true, size: "medium" },
    { id: "data_quality",     visible: true, size: "medium" }
  ],

  // ===================================================================
  // CATEGORY TAXONOMY — source of truth from privateUserConfig.js
  // Mirrors FinalCategories.md (16 expense) + FinalIncome.md (8 income).
  // Each category lists subcategories and which widget(s) cover it.
  //
  // Widget coverage key:
  //   burn_rate        — included in burn total (all expense cats except BURN_RATE_EXCLUDED)
  //   cat_breakdown    — full expense category table
  //   disc_split       — Disc / Semi-Disc / Non-Disc classification
  //   lifestyle_tax    — Food > Eating Out + Personal Purchases
  //   utility_bills    — checklist for EXPECTED_UTILITY_BILLS subcats
  //   grocery_trend    — Home Essentials > Groceries 6-month trend
  //   burn_trend       — 6-month burn total trend
  //   top_subcats      — 12-month rolling top subcategories
  //   biggest_increases — QoQ subcategory increases
  //   household_cost   — 12-month Utility Bills + Home Essentials + Household Staff
  //   vehicle_expenses — Transit > Vehicle Fuel + Services > Vehicle Expenses + Toll + Parking
  //   people_payments  — Household Staff + Family Transfer + Gifts + Donations
  //   data_quality     — Misc Expense > Uncategorized + Untraced
  //   investment       — Investment category breakdown
  //   money_received   — all income except Misc Income + Balance Correction
  //   rewards_refunds  — Rewards + Refunds
  //   rent_trend       — Passive Income > Rent (AJH/NJH)
  //   savings_rate     — (Core Income - Burn) / Core Income
  //   (none)           — category has no dedicated widget beyond cat_breakdown/disc_split
  // ===================================================================
  EXPENSE_CATEGORIES: {
    // cat:  [subcategories]                                     | widget coverage
    "Utility Bills":       ["Electricity (NJH)", "Electricity (AJH)", "Mobile Recharge",
                            "Cooking Gas", "Home Internet", "Society Maintenance",
                            "Digital Subscriptions"],             // utility_bills, household_cost, disc_split(non-disc)
    "Transit":             ["Metro", "Cab", "Public Transport",
                            "Vehicle Fuel", "Toll", "Parking"],   // vehicle_expenses(Fuel,Toll,Parking), disc_split(semi-disc). NOTE: Cab, Metro, Public Transport have no dedicated widget
    "Investment":          ["Mutual Funds", "Stocks (Domestic)", "Stocks (International)",
                            "Govt & Retirement Schemes", "Gold & Property",
                            "Deposits & Bonds", "Rent",
                            "Alternative Investments"],           // investment (excluded from burn)
    "Food":                ["Eating Out", "Dairy", "Fruits & Vegetables",
                            "Non-Veg", "Other Food"],             // lifestyle_tax(Eating Out), disc_split(semi-disc, Eating Out→disc)
    "Home Essentials":     ["Groceries", "Home Supplies",
                            "Other Household"],                   // grocery_trend(Groceries), household_cost, disc_split(non-disc)
    "Personal Purchases":  ["Clothing & Footwear", "Accessories",
                            "Entertainment", "Hobbies & Leisure"],// lifestyle_tax, disc_split(disc)
    "Home Durables":       ["Electronics", "Home Appliances", "Furniture",
                            "Furnishings & Decor", "Kitchenware",
                            "Hardware & Electricals",
                            "Other Durables"],                    // disc_split(disc). NOTE: no dedicated widget
    "Services":            ["Personal Care", "Vehicle Expenses", "Repairs",
                            "Household Staff", "Home Services",
                            "Family Transfer", "Other Services"], // vehicle_expenses(Vehicle Expenses), household_cost(Household Staff), people_payments(Household Staff, Family Transfer), disc_split(semi-disc, Household Staff→non-disc)
    "Financial Admin":     ["Insurance", "Tax & Compliance", "Bank Charges",
                            "Professional Fees", "Govt Fees",
                            "Loan EMI", "Penalty"],               // disc_split(non-disc). NOTE: no dedicated widget
    "Healthcare":          ["Doctor & Hospital", "Medicines", "Diagnostics",
                            "Therapy & Wellness",
                            "Medical Equipment"],                 // disc_split(non-disc). NOTE: no dedicated widget
    "Education":           ["School Charges", "Tuition", "Courses",
                            "Books & Stationery", "School Gear",
                            "School Bus"],                        // disc_split(non-disc). NOTE: no dedicated widget
    "Occasion":            ["Gifts", "Pooja", "Event Hosting",
                            "Celebration Shopping", "Donations",
                            "Other Occasion"],                    // people_payments(Gifts, Donations), disc_split(disc)
    "Vacation":            ["Travel", "Meals", "Trip Shopping",
                            "Stay", "Activities"],                // disc_split(disc). NOTE: no dedicated widget
    "Misc Expense":        ["Uncategorized Expense", "Untraced Expense",
                            "Rare Expense"],                      // data_quality(Uncategorized+Untraced), disc_split(semi-disc)
    "Payroll Deductions":  ["Income Tax", "EPF", "NPS",
                            "Other Deductions"],                  // excluded from burn, no widget
    "Balance Correction":  []                                     // excluded from everything
  },
  INCOME_CATEGORIES: {
    // cat:  [subcategories]                                     | widget coverage
    "Salary":              ["Monthly Salary", "Bonus",
                            "Reimbursement", "Exit & Adjustments"], // money_received, savings_rate(core income)
    "Passive Income":      ["Interest", "Rent", "Dividend",
                            "Agricultural Income"],               // money_received, rent_trend(Rent), savings_rate(core income)
    "Capital Gains":       ["Maturity & Withdrawal", "Market Sale",
                            "Asset Sale", "Personal Item Sale"],  // money_received, savings_rate(core income)
    "Rewards":             ["CC Rewards", "App Cashback",
                            "Fuel Reversal"],                     // rewards_refunds
    "Refunds":             ["Merchant Refund", "Overpayment & Reversal",
                            "Deposit Return"],                    // rewards_refunds
    "Ad Hoc Income":       ["Side Income", "Govt Credit",
                            "Insurance & Compensation",
                            "Gifts & Transfers"],                 // money_received, savings_rate(core income)
    "Misc Income":         ["Uncategorized Income", "Untraced Income",
                            "Rare Income"],                       // excluded from money_received
    "Balance Correction":  []                                     // excluded from everything
  },

  // --- Widget-specific category slices (derived from taxonomy above) ---
  EXPECTED_UTILITY_BILLS: [
    "Electricity (NJH)", "Electricity (AJH)", "Mobile Recharge",
    "Cooking Gas", "Home Internet", "Society Maintenance", "Digital Subscriptions"
  ],
  BURN_RATE_EXCLUDED: ["Investment", "Balance Correction", "Payroll Deductions"],
  DISC_CATEGORIES: ["Personal Purchases", "Occasion", "Vacation", "Home Durables"],
  NON_DISC_CATEGORIES: ["Utility Bills", "Financial Admin", "Home Essentials", "Healthcare", "Education"],
  SEMI_DISC_CATEGORIES: ["Food", "Transit", "Services", "Misc Expense"],
  HOUSEHOLD_RUNNING_CATEGORIES: ["Utility Bills", "Home Essentials"],
  CORE_INCOME_CATEGORIES: ["Salary", "Passive Income", "Capital Gains", "Ad Hoc Income"],
  INVESTMENT_SUBCATEGORIES: ["Mutual Funds", "Govt & Retirement Schemes", "Stocks (Domestic)",
                             "Stocks (International)", "Gold & Property", "Deposits & Bonds",
                             "Rent", "Alternative Investments"],
  REWARDS_SUBCATEGORIES: ["CC Rewards", "App Cashback", "Fuel Reversal"],
  VEHICLE_EXPENSE_FILTERS: [
    { category: "Transit", subcategory: "Vehicle Fuel" },
    { category: "Services", subcategory: "Vehicle Expenses" },
    { category: "Transit", subcategory: "Toll" },
    { category: "Transit", subcategory: "Parking" }
  ],
  PEOPLE_PAYMENT_FILTERS: [
    { category: "Services", subcategory: "Household Staff" },
    { category: "Services", subcategory: "Family Transfer" },
    { category: "Occasion", subcategory: "Gifts" },
    { category: "Occasion", subcategory: "Donations" }
  ]
};


// ============================================================
// 2. ENTRY POINTS
// ============================================================

/**
 * Web app entry point. Serves the HTML dashboard for the requested month.
 * URL param: ?month=YYYY-MM (defaults to latest month in data).
 */
function doGet(e) {
  var requestedMonth = (e && e.parameter && e.parameter.month) ? e.parameter.month.trim() : "";
  var result = loadAndCompute_(requestedMonth, false);
  if (result.error) {
    return HtmlService.createHtmlOutput(
      '<div style="font-family:system-ui;color:#e1e4ed;background:#0f1117;padding:40px;">' +
      '<h2>' + result.error + '</h2></div>'
    ).setTitle("Cashew Reports \u2014 Error");
  }
  return HtmlService.createHtmlOutput(result.html)
    .setTitle("Cashew Reports \u2014 " + result.month)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * Server-side function called via google.script.run from the client.
 * Generates a PDF snapshot and saves it to /Cashew/Snapshots/ on Drive.
 */
function exportPdfToSnapshots(month) {
  var result = loadAndCompute_(month, true);
  if (result.error) return { error: result.error };

  var blob = Utilities.newBlob(result.html, "text/html", "report.html");
  var pdfBlob = blob.getAs("application/pdf");
  var today = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
  var filename = "Monthly Report - " + month + " " + today + ".pdf";
  pdfBlob.setName(filename);

  var folders = DriveApp.getFoldersByName(CONFIG.CSV_FOLDER_NAME);
  if (!folders.hasNext()) return { error: "Cashew folder not found" };
  var cashewFolder = folders.next();
  var snapFolders = cashewFolder.getFoldersByName("Snapshots");
  var snapFolder = snapFolders.hasNext() ? snapFolders.next() : cashewFolder.createFolder("Snapshots");

  var file = snapFolder.createFile(pdfBlob);
  return { success: true, filename: filename, url: file.getUrl() };
}


// ============================================================
// 3. DATA PIPELINE — Shared by doGet and exportPdfToSnapshots
// ============================================================

/**
 * Full pipeline: read CSV -> parse -> filter -> compute metrics -> render HTML.
 * @param {string} requestedMonth  YYYY-MM or "" for latest
 * @param {boolean} pdfMode        true = static PDF rendering (no JS charts, expanded sections)
 * @returns {{ html:string, month:string } | { error:string }}
 */
function loadAndCompute_(requestedMonth, pdfMode) {
  // --- Read CSV ---
  var csvResult = readCSVFromDrive_();
  if (!csvResult) return { error: "CSV file not found in /" + CONFIG.CSV_FOLDER_NAME + "/" };

  // --- Parse & filter ---
  var allRows = parseCSV_(csvResult.content);
  var transactions = filterActual_(allRows);
  var excludedRows = filterExcluded_(allRows);
  transactions.sort(function(a, b) { return a.date - b.date; });
  excludedRows.sort(function(a, b) { return a.date - b.date; });

  // --- Resolve target month ---
  var targetMonth;
  if (requestedMonth && /^\d{4}-\d{2}$/.test(requestedMonth)) {
    targetMonth = requestedMonth;
  } else {
    targetMonth = transactions.length > 0
      ? transactions[transactions.length - 1].month
      : Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM");
  }

  // --- Compute all metrics ---
  var metrics = computeMetrics_(transactions, excludedRows, targetMonth);

  // --- Render widgets server-side, grouped into sections ---
  // Output: renderedSections = [ { titleHtml, widgets: [{html},...] }, ... ]
  // Each section = one title + its widgets, rendered as a block for PDF page-break control.
  var COL_SPANS = { small: 3, third: 4, medium: 6, large: 12 };
  var visibleWidgets = CONFIG.WIDGETS.filter(function(w) { return w.visible; });
  var renderedSections = [];
  var currentSection = null;

  for (var i = 0; i < visibleWidgets.length; i++) {
    var w = visibleWidgets[i];

    if (w.id === "section_title") {
      // Skip empty sections (next is also a title or end)
      var next = visibleWidgets[i + 1];
      if (!next || next.id === "section_title") continue;
      // Start a new section
      var titleRenderer = WIDGET_RENDERERS.section_title;
      currentSection = { titleHtml: titleRenderer(metrics, w), widgets: [] };
      renderedSections.push(currentSection);
      continue;
    }

    var renderer = WIDGET_RENDERERS[w.id];
    var html = renderer ? renderer(metrics, w) : "";

    // Explicit column placement
    if (w.col && html) {
      var span = COL_SPANS[w.size] || 6;
      var colCss = 'grid-column:' + w.col + ' / span ' + span + ';';
      var styleIdx = html.indexOf('style="');
      if (styleIdx >= 0 && styleIdx < html.indexOf('>')) {
        html = html.substring(0, styleIdx + 7) + colCss + html.substring(styleIdx + 7);
      } else {
        var fi = html.indexOf('>');
        if (fi > 0) html = html.substring(0, fi) + ' style="' + colCss + '"' + html.substring(fi);
      }
    }

    if (currentSection) {
      currentSection.widgets.push({ html: html });
    }
  }

  // --- Pass lean meta + rendered widgets to shell template ---
  var template = HtmlService.createTemplateFromFile("Dashboard");
  template.renderedSections = renderedSections;
  template.pdfMode = pdfMode;
  template.m = {
    generatedAt:    metrics.generatedAt,
    txnCount:       metrics.txnCount,
    dateRange:      metrics.dateRange,
    csvFilename:    metrics.csvFilename,
    csvSource:      csvResult.source,
    webAppUrl:      ScriptApp.getService().getUrl(),
    currentMonth:   targetMonth,
    prevMonth:      metrics.prevMonth,
    nextMonth:      metrics.nextMonth,
    monthLabel:     fL_(targetMonth),
    prevMonthLabel: sL_(metrics.prevMonth),
    nextMonthLabel: sL_(metrics.nextMonth)
  };
  var html = template.evaluate().getContent();

  return { html: html, month: targetMonth };
}

// --- CSV Reader ---

function readCSVFromDrive_() {
  var folders = DriveApp.getFoldersByName(CONFIG.CSV_FOLDER_NAME);
  if (folders.hasNext()) {
    var folder = folders.next();
    var files = folder.getFilesByName(CONFIG.CSV_FILENAME);
    var latest = null;
    while (files.hasNext()) {
      var f = files.next();
      if (!latest || f.getLastUpdated() > latest.getLastUpdated()) latest = f;
    }
    if (latest) {
      return {
        content: latest.getBlob().getDataAsString(),
        source: "/" + CONFIG.CSV_FOLDER_NAME + "/" + latest.getName() +
          " (updated " + Utilities.formatDate(latest.getLastUpdated(), Session.getScriptTimeZone(), "d MMM yyyy") + ")"
      };
    }
  }
  // Fallback: check root Drive for legacy filename
  var rootFiles = DriveApp.getFilesByName("cashew_outbox.csv");
  if (rootFiles.hasNext()) {
    var rf = rootFiles.next();
    return { content: rf.getBlob().getDataAsString(), source: rf.getName() };
  }
  return null;
}

// --- CSV Parser (17-column Cashew Outbox format) ---

function parseCSV_(csvText) {
  var rows = Utilities.parseCsv(csvText);
  if (rows.length < 2) return [];

  var headers = rows[0].map(function(h) { return h.trim().toLowerCase(); });
  var idx = {};
  headers.forEach(function(h, i) { idx[h] = i; });

  var out = [];
  for (var i = 1; i < rows.length; i++) {
    var r = rows[i];
    var dateStr = val_(r, idx, "date");
    var dt = new Date(dateStr);
    if (isNaN(dt.getTime())) continue;

    // Color: "0xffRRGGBB" or "0XFFRRGGBB" -> "#RRGGBB"
    var rawColor = val_(r, idx, "color").toLowerCase();
    var cssColor = (rawColor && rawColor.indexOf("0xff") === 0) ? "#" + rawColor.substring(4) : "";

    // Cashew "include transaction" contract:
    //   amount filled   → included (actual, counts in all metrics)
    //   amount empty    → excluded (not included; amount unpaid is for display only)
    // Examples from outbox.csv:
    //   06cf0fe0 Salary 201618   amount filled   → included (net salary)
    //   71fff2af Salary (empty)  unpaid 448200    → excluded (gross salary, not included)
    //   64462fb4 Utility Bills   unpaid -656.1    → excluded (upcoming Digital Subscriptions)
    //   dbeb2465 Payroll Ded.    unpaid -1800     → excluded (EPF, not included)
    var amtStr = val_(r, idx, "amount");
    var amtUnpaidStr = val_(r, idx, "amount unpaid");
    var isIncluded = amtStr !== "";
    var amt = Math.abs(parseFloat(amtStr || amtUnpaidStr || "0"));

    out.push({
      amount:      amt,
      title:       val_(r, idx, "title"),
      isIncome:    val_(r, idx, "income").toLowerCase() === "true",
      date:        dt,
      month:       Utilities.formatDate(dt, Session.getScriptTimeZone(), "yyyy-MM"),
      category:    val_(r, idx, "category name"),
      subcategory: val_(r, idx, "subcategory name"),
      color:       cssColor,
      isIncluded:  isIncluded
    });
  }
  return out;
}

// --- Filters ---

function filterActual_(rows) {
  return rows.filter(function(t) { return t.isIncluded && t.category !== "Balance Correction"; });
}

function filterExcluded_(rows) {
  return rows.filter(function(t) { return !t.isIncluded; });
}


// ============================================================
// 4. METRICS — Per-widget computation
// ============================================================

/**
 * Master metric computation. Calls per-widget helpers and assembles
 * the full metrics object passed to the Dashboard template.
 */
function computeMetrics_(txns, excludedRows, targetMonth) {
  var parts = targetMonth.split("-");
  var yr = parseInt(parts[0], 10), mo = parseInt(parts[1], 10) - 1;
  var prevMonth = fmtMonth_(yr, mo - 1);
  var nextMonth = fmtMonth_(yr, mo + 1);

  var expenses = txns.filter(function(t) { return !t.isIncome; });
  var incomes  = txns.filter(function(t) { return t.isIncome; });
  var allTxns  = txns.concat(excludedRows);

  // Shared color maps (used by multiple widgets)
  var subcatColorMap = buildColorMap_(allTxns, "subcategory");
  var catColorMap    = buildColorMap_(allTxns, "category");

  // Shared base values (burn_rate used by many widgets as denominator)
  var burnCurr = sumBurn_(expenses, targetMonth);
  var burnPrev = sumBurn_(expenses, prevMonth);

  // --- Per-widget metrics ---
  var ctx = { expenses: expenses, incomes: incomes, excludedRows: excludedRows,
              yr: yr, mo: mo, currentMonth: targetMonth, prevMonth: prevMonth,
              burnCurr: burnCurr, burnPrev: burnPrev, subcatColorMap: subcatColorMap };

  // Pre-compute multi-value results to avoid calling functions twice
  var grocResult   = computeGroceryTrend_(ctx);
  var savResult    = computeSavingsRate_(ctx);
  var subcatResult = computeSubcatAnalysis_(ctx);

  return {
    // Navigation & meta
    currentMonth: targetMonth, prevMonth: prevMonth, nextMonth: nextMonth,
    csvFilename: "/" + CONFIG.CSV_FOLDER_NAME + "/" + CONFIG.CSV_FILENAME,
    txnCount: txns.length,
    dateRange: txns.length > 0
      ? Utilities.formatDate(txns[0].date, Session.getScriptTimeZone(), "MMM yyyy") + " \u2014 "
        + Utilities.formatDate(txns[txns.length - 1].date, Session.getScriptTimeZone(), "MMM yyyy")
      : "N/A",
    generatedAt: Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "d MMM yyyy, h:mm a"),

    // === WIDGET: burn_rate ===
    burnRate:      computeBurnRate_(ctx),
    // === WIDGET: lifestyle_tax ===
    lifestyleTax:  computeLifestyleTax_(ctx),
    // === WIDGET: disc_split ===
    discSplit:     computeDiscSplit_(ctx),
    // === WIDGET: utility_bills ===
    utilityBills:  findUtilityBills_(ctx),
    // === WIDGET: data_quality ===
    miscExpense:   computeDataQuality_(ctx),
    // === WIDGET: money_received ===
    income:        computeIncome_(ctx),
    // === WIDGET: investment ===
    investment:    computeInvestment_(ctx),
    // === WIDGET: rewards_refunds ===
    recovery:      computeRecovery_(ctx),
    // === WIDGET: people_payments ===
    peoplePay:     computePeoplePay_(ctx),
    // === WIDGET: vehicle_expenses ===
    vehicleExpenses: computeVehicleExpenses_(ctx),
    // === WIDGET: burn_trend ===
    burnTrend:     computeBurnTrend_(ctx),
    // === WIDGET: grocery_trend ===
    groceryTrend:  grocResult.trend,
    groceryAvg:    grocResult.avg,
    // === WIDGET: savings_rate ===
    savingsRate:   { rate: savResult.rate, ppDelta: savResult.ppDelta },
    // === WIDGET: top_subcats + biggest_increases (share computation) ===
    allSubcats:    subcatResult.subcats,
    allIncreases:  subcatResult.increases,
    // === WIDGET: cat_breakdown ===
    catBreakdown:  computeCatBreakdown_(ctx, catColorMap),
    // === WIDGET: household_cost ===
    household:     computeHousehold_(ctx),
    // === WIDGET: rent_trend ===
    rentTrend:     computeRentTrend_(ctx)
  };
}

// --- Widget: burn_rate ---
// Total monthly expenses excl. Investment, Balance Correction, Payroll Deductions
// Includes top 3 subcategories by amount
function computeBurnRate_(ctx) {
  var delta = ctx.burnPrev > 0 ? ((ctx.burnCurr - ctx.burnPrev) / ctx.burnPrev * 100) : 0;
  var subcats = {};
  ctx.expenses.forEach(function(t) {
    if (t.month === ctx.currentMonth && CONFIG.BURN_RATE_EXCLUDED.indexOf(t.category) === -1 && t.subcategory) {
      subcats[t.subcategory] = (subcats[t.subcategory] || 0) + t.amount;
    }
  });
  var sorted = [];
  for (var k in subcats) sorted.push({ name: k, amount: subcats[k] });
  sorted.sort(function(a, b) { return b.amount - a.amount; });
  var top3 = {};
  for (var i = 0; i < Math.min(3, sorted.length); i++) top3[sorted[i].name] = sorted[i].amount;
  return { current: ctx.burnCurr, previous: ctx.burnPrev, delta: delta, top3: top3 };
}

// --- Widget: lifestyle_tax ---
// Eating Out + Personal Purchases as % of burn, with pp delta
function computeLifestyleTax_(ctx) {
  var eo  = sumFilter_(ctx.expenses, ctx.currentMonth, "Food", "Eating Out");
  var pp  = sumCat_(ctx.expenses, ctx.currentMonth, "Personal Purchases");
  var tot = eo + pp;
  var pct = ctx.burnCurr > 0 ? (tot / ctx.burnCurr * 100) : 0;
  var eoPrev = sumFilter_(ctx.expenses, ctx.prevMonth, "Food", "Eating Out");
  var ppPrev = sumCat_(ctx.expenses, ctx.prevMonth, "Personal Purchases");
  var prevPct = ctx.burnPrev > 0 ? ((eoPrev + ppPrev) / ctx.burnPrev * 100) : 0;
  return { total: tot, pct: pct, ppDelta: pct - prevPct, items: { "Eating Out": eo, "Personal Purchases": pp } };
}

// --- Widget: data_quality ---
// Uncategorized + Untraced as % of burn
function computeDataQuality_(ctx) {
  var miscTxns = ctx.expenses.filter(function(t) {
    return t.month === ctx.currentMonth && t.category === "Misc Expense" &&
      (t.subcategory === "Uncategorized Expense" || t.subcategory === "Untraced Expense");
  });
  var total = sum_(miscTxns);
  return { count: miscTxns.length, total: total, pct: ctx.burnCurr > 0 ? (total / ctx.burnCurr * 100) : 0 };
}

// --- Widget: money_received ---
// All income excl. Balance Correction and Misc Income, with category breakdown
function computeIncome_(ctx) {
  var curr = sum_(ctx.incomes.filter(function(t) { return t.month === ctx.currentMonth && t.category !== "Misc Income"; }));
  var prev = sum_(ctx.incomes.filter(function(t) { return t.month === ctx.prevMonth && t.category !== "Misc Income"; }));
  var cats = {};
  ctx.incomes.forEach(function(t) {
    if (t.month === ctx.currentMonth && t.category !== "Misc Income") {
      cats[t.category] = (cats[t.category] || 0) + t.amount;
    }
  });
  return { current: curr, previous: prev, delta: prev > 0 ? ((curr - prev) / prev * 100) : 0, cats: cats };
}

// --- Widget: investment ---
// Monthly investment with subcategory breakdown (seeded with known subcats)
function computeInvestment_(ctx) {
  var subcats = {};
  CONFIG.INVESTMENT_SUBCATEGORIES.forEach(function(s) { subcats[s] = 0; });
  var actual = subcatBreakdown_(ctx.expenses, ctx.currentMonth, "Investment");
  for (var k in actual) subcats[k] = actual[k];
  return {
    current: sumCat_(ctx.expenses, ctx.currentMonth, "Investment"),
    previous: sumCat_(ctx.expenses, ctx.prevMonth, "Investment"),
    subcats: subcats
  };
}

// --- Widget: rewards_refunds ---
// Cashback + refunds recovered as % of expenses (seeded with known subcats)
function computeRecovery_(ctx) {
  var rewards = sum_(ctx.incomes.filter(function(t) { return t.month === ctx.currentMonth && t.category === "Rewards"; }));
  var refunds = sum_(ctx.incomes.filter(function(t) { return t.month === ctx.currentMonth && t.category === "Refunds"; }));
  var total = rewards + refunds;
  var subcats = {};
  CONFIG.REWARDS_SUBCATEGORIES.forEach(function(s) { subcats[s] = 0; });
  var actual = subcatBreakdown_(ctx.incomes, ctx.currentMonth, "Rewards");
  for (var k in actual) subcats[k] = actual[k];
  subcats["Refunds"] = refunds;
  return {
    total: total, refunds: refunds,
    pct: ctx.burnCurr > 0 ? (total / ctx.burnCurr * 100) : 0,
    rewardsSubcats: subcats
  };
}

// --- Widget: people_payments ---
// Household Staff + Family Transfer + Gifts + Donations
function computePeoplePay_(ctx) {
  var items = {}, total = 0;
  CONFIG.PEOPLE_PAYMENT_FILTERS.forEach(function(f) {
    var amt = sumFilter_(ctx.expenses, ctx.currentMonth, f.category, f.subcategory);
    items[f.subcategory] = amt;
    total += amt;
  });
  return { total: total, items: items, pct: ctx.burnCurr > 0 ? (total / ctx.burnCurr * 100) : 0 };
}

// --- Widget: vehicle_expenses ---
// True cost of vehicle ownership: Fuel + Repairs/Service + Toll + Parking
function computeVehicleExpenses_(ctx) {
  var fuel = sumFilter_(ctx.expenses, ctx.currentMonth, "Transit", "Vehicle Fuel");
  var repairs = sumFilter_(ctx.expenses, ctx.currentMonth, "Services", "Vehicle Expenses");
  var toll = sumFilter_(ctx.expenses, ctx.currentMonth, "Transit", "Toll");
  var parking = sumFilter_(ctx.expenses, ctx.currentMonth, "Transit", "Parking");
  var total = fuel + repairs + toll + parking;
  var prevFuel = sumFilter_(ctx.expenses, ctx.prevMonth, "Transit", "Vehicle Fuel");
  var prevRepairs = sumFilter_(ctx.expenses, ctx.prevMonth, "Services", "Vehicle Expenses");
  var prevToll = sumFilter_(ctx.expenses, ctx.prevMonth, "Transit", "Toll");
  var prevParking = sumFilter_(ctx.expenses, ctx.prevMonth, "Transit", "Parking");
  var prevTotal = prevFuel + prevRepairs + prevToll + prevParking;
  var delta = prevTotal > 0 ? ((total - prevTotal) / prevTotal * 100) : 0;
  return {
    fuel: fuel, repairs: repairs, toll: toll, parking: parking,
    total: total, prevTotal: prevTotal, delta: delta,
    fuelPct: total > 0 ? (fuel / total * 100) : 0
  };
}

// --- Widget: burn_trend ---
// 6-month burn rate trend for area/line chart
function computeBurnTrend_(ctx) {
  var trend = [];
  for (var i = 5; i >= 0; i--) {
    var m = fmtMonth_(ctx.yr, ctx.mo - i);
    trend.push({ month: m, amount: sumBurn_(ctx.expenses, m) });
  }
  return trend;
}

// --- Widget: grocery_trend ---
// 6-month grocery spend trend with average
function computeGroceryTrend_(ctx) {
  var trend = [], total = 0;
  for (var i = 5; i >= 0; i--) {
    var m = fmtMonth_(ctx.yr, ctx.mo - i);
    var amt = sumFilter_(ctx.expenses, m, "Home Essentials", "Groceries");
    trend.push({ month: m, amount: amt });
    total += amt;
  }
  return { trend: trend, avg: total / 6 };
}

// --- Widget: savings_rate ---
// (Core Income - Burn) / Core Income, trailing 3 months with pp delta vs prev quarter
function computeSavingsRate_(ctx) {
  var inc = 0, exp = 0, incPrev = 0, expPrev = 0;
  for (var q = 0; q < 6; q++) {
    var qm = fmtMonth_(ctx.yr, ctx.mo - q);
    CONFIG.CORE_INCOME_CATEGORIES.forEach(function(cat) {
      var amt = sum_(ctx.incomes.filter(function(t) { return t.month === qm && t.category === cat; }));
      if (q < 3) inc += amt; else incPrev += amt;
    });
    if (q < 3) exp += sumBurn_(ctx.expenses, qm);
    else expPrev += sumBurn_(ctx.expenses, qm);
  }
  var rate = inc > 0 ? ((inc - exp) / inc * 100) : 0;
  var prevRate = incPrev > 0 ? ((incPrev - expPrev) / incPrev * 100) : 0;
  return { rate: rate, ppDelta: rate - prevRate };
}

// --- Widget: top_subcats + biggest_increases ---
// Rolling 12-month subcategory analysis with QoQ trend
function computeSubcatAnalysis_(ctx) {
  var rolling = {}, thisQ = {}, prevQ = {};
  for (var r = 0; r < 12; r++) {
    var rm = fmtMonth_(ctx.yr, ctx.mo - r);
    ctx.expenses.forEach(function(t) {
      if (t.month === rm && CONFIG.BURN_RATE_EXCLUDED.indexOf(t.category) === -1 && t.subcategory) {
        rolling[t.subcategory] = (rolling[t.subcategory] || 0) + t.amount;
        if (r < 3) thisQ[t.subcategory] = (thisQ[t.subcategory] || 0) + t.amount;
        if (r >= 3 && r < 6) prevQ[t.subcategory] = (prevQ[t.subcategory] || 0) + t.amount;
      }
    });
  }

  var rollingTotal = 0;
  for (var k in rolling) rollingTotal += rolling[k];

  // Subcategories sorted by 12-month total
  var subcats = [];
  for (var sk in rolling) {
    var tq = thisQ[sk] || 0, pq = prevQ[sk] || 0;
    subcats.push({
      name: sk, amount: rolling[sk],
      pct: rollingTotal > 0 ? (rolling[sk] / rollingTotal * 100) : 0,
      color: ctx.subcatColorMap[sk] || "",
      trendPct: pq > 0 ? ((tq - pq) / pq * 100) : (tq > 0 ? 100 : 0)
    });
  }
  subcats.sort(function(a, b) { return b.amount - a.amount; });

  // Increases: subcategories where thisQ > prevQ
  var increases = [];
  for (var ik in thisQ) {
    var diff = thisQ[ik] - (prevQ[ik] || 0);
    if (diff > 0) {
      increases.push({ name: ik, thisQ: thisQ[ik], prevQ: prevQ[ik] || 0, diff: diff });
    }
  }
  increases.sort(function(a, b) { return b.diff - a.diff; });

  return { subcats: subcats, increases: increases };
}

// --- Widget: cat_breakdown ---
// Category-level expense breakdown as sorted array with colors
function computeCatBreakdown_(ctx, catColorMap) {
  var map = {};
  ctx.expenses.forEach(function(t) {
    if (t.month === ctx.currentMonth && CONFIG.BURN_RATE_EXCLUDED.indexOf(t.category) === -1) {
      map[t.category] = (map[t.category] || 0) + t.amount;
    }
  });
  var arr = [];
  for (var k in map) arr.push({ name: k, amount: map[k], color: catColorMap[k] || "var(--accent)" });
  arr.sort(function(a, b) { return b.amount - a.amount; });
  return arr;
}

// --- Widget: household_cost ---
// 12-month running cost: Utility Bills + Home Essentials + Household Staff
function computeHousehold_(ctx) {
  var total = 0, breakdown = {};
  CONFIG.HOUSEHOLD_RUNNING_CATEGORIES.forEach(function(cat) { breakdown[cat] = 0; });
  breakdown["Household Staff"] = 0;
  for (var h = 0; h < 12; h++) {
    var hm = fmtMonth_(ctx.yr, ctx.mo - h);
    CONFIG.HOUSEHOLD_RUNNING_CATEGORIES.forEach(function(cat) {
      var amt = sumCat_(ctx.expenses, hm, cat);
      breakdown[cat] += amt; total += amt;
    });
    var hs = sumFilter_(ctx.expenses, hm, "Services", "Household Staff");
    breakdown["Household Staff"] += hs; total += hs;
  }
  return { total: total, breakdown: breakdown, monthlyAvg: total / 12 };
}

// --- Widget: rent_trend ---
// 6-month trend of AJH and NJH rent income (matched by title)
function computeRentTrend_(ctx) {
  var rentTxns = ctx.incomes.filter(function(t) {
    return t.category === "Passive Income" && t.subcategory === "Rent";
  });
  var trend = [];
  for (var i = 5; i >= 0; i--) {
    var m = fmtMonth_(ctx.yr, ctx.mo - i);
    var ajh = 0, njh = 0;
    rentTxns.forEach(function(t) {
      if (t.month !== m) return;
      if (t.title && t.title.toUpperCase().indexOf("AJH") !== -1) ajh += t.amount;
      else if (t.title && t.title.toUpperCase().indexOf("NJH") !== -1) njh += t.amount;
      else ajh += t.amount;
    });
    trend.push({ month: m, ajh: ajh, njh: njh });
  }
  return trend;
}

// --- Widget: disc_split ---
// Non-Discretionary / Semi-Discretionary / Discretionary classification
// Returns totals + per-category breakdown for drill-down panels
function computeDiscSplit_(ctx) {
  var disc = 0, nonDisc = 0, semiDisc = 0;
  // Seed with known categories so drill-down always shows labels
  var discItems = { "Eating Out": 0 };
  CONFIG.DISC_CATEGORIES.forEach(function(c) { discItems[c] = 0; });
  var nonDiscItems = { "Household Staff": 0 };
  CONFIG.NON_DISC_CATEGORIES.forEach(function(c) { nonDiscItems[c] = 0; });
  var semiDiscItems = {};
  CONFIG.SEMI_DISC_CATEGORIES.forEach(function(c) { semiDiscItems[c] = 0; });

  ctx.expenses.forEach(function(t) {
    if (t.month !== ctx.currentMonth || CONFIG.BURN_RATE_EXCLUDED.indexOf(t.category) !== -1) return;
    if (CONFIG.DISC_CATEGORIES.indexOf(t.category) !== -1 || (t.category === "Food" && t.subcategory === "Eating Out")) {
      disc += t.amount;
      var dk = (t.category === "Food") ? "Eating Out" : t.category;
      discItems[dk] = (discItems[dk] || 0) + t.amount;
    } else if (CONFIG.NON_DISC_CATEGORIES.indexOf(t.category) !== -1 || (t.category === "Services" && t.subcategory === "Household Staff")) {
      nonDisc += t.amount;
      var nk = (t.subcategory === "Household Staff") ? "Household Staff" : t.category;
      nonDiscItems[nk] = (nonDiscItems[nk] || 0) + t.amount;
    } else {
      semiDisc += t.amount;
      semiDiscItems[t.category] = (semiDiscItems[t.category] || 0) + t.amount;
    }
  });
  var total = disc + nonDisc + semiDisc;
  return {
    discretionary: disc, nonDiscretionary: nonDisc, semiDiscretionary: semiDisc, total: total,
    discPct: total > 0 ? (disc / total * 100) : 0,
    nonDiscPct: total > 0 ? (nonDisc / total * 100) : 0,
    semiDiscPct: total > 0 ? (semiDisc / total * 100) : 0,
    discItems: discItems, nonDiscItems: nonDiscItems, semiDiscItems: semiDiscItems
  };
}

// --- Widget: utility_bills ---
// Paid/upcoming/missing status + total amount for each expected monthly bill
function findUtilityBills_(ctx) {
  var tz = Session.getScriptTimeZone();
  var paidMap = {}, upcomingMap = {};
  ctx.expenses.forEach(function(t) {
    if (t.month === ctx.currentMonth && t.category === "Utility Bills") {
      if (!paidMap[t.subcategory]) paidMap[t.subcategory] = { date: "", amount: 0 };
      paidMap[t.subcategory].amount += t.amount;
      paidMap[t.subcategory].date = Utilities.formatDate(t.date, tz, "d MMM");
    }
  });
  // Upcoming: excluded rows for the current month only
  ctx.excludedRows.forEach(function(t) {
    if (t.month === ctx.currentMonth && t.category === "Utility Bills" && !paidMap[t.subcategory]) {
      upcomingMap[t.subcategory] = { date: Utilities.formatDate(t.date, tz, "d MMM"), amount: t.amount };
    }
  });
  return CONFIG.EXPECTED_UTILITY_BILLS.map(function(sub) {
    if (paidMap[sub]) return { name: sub, status: "paid", date: paidMap[sub].date, amount: paidMap[sub].amount };
    if (upcomingMap[sub]) return { name: sub, status: "upcoming", date: upcomingMap[sub].date, amount: upcomingMap[sub].amount };
    return { name: sub, status: "missing", date: "", amount: 0 };
  });
}


// ============================================================
// 5. HELPERS
// ============================================================

/** Format YYYY-MM from year and 0-based month (handles overflow/underflow) */
function fmtMonth_(yr, mo) {
  return Utilities.formatDate(new Date(yr, mo, 1), Session.getScriptTimeZone(), "yyyy-MM");
}

/** Sum .amount across an array of transaction objects */
function sum_(arr) {
  return arr.reduce(function(s, t) { return s + t.amount; }, 0);
}

/** Sum expenses for a month, excluding BURN_RATE_EXCLUDED categories */
function sumBurn_(expenses, month) {
  return sum_(expenses.filter(function(t) {
    return t.month === month && CONFIG.BURN_RATE_EXCLUDED.indexOf(t.category) === -1;
  }));
}

/** Sum by month + category + subcategory */
function sumFilter_(arr, month, cat, subcat) {
  return sum_(arr.filter(function(t) {
    return t.month === month && t.category === cat && t.subcategory === subcat;
  }));
}

/** Sum by month + category */
function sumCat_(arr, month, cat) {
  return sum_(arr.filter(function(t) { return t.month === month && t.category === cat; }));
}

/** Subcategory breakdown { name: amount } for a given month + category */
function subcatBreakdown_(arr, month, cat) {
  var out = {};
  arr.forEach(function(t) {
    if (t.month === month && t.category === cat && t.subcategory)
      out[t.subcategory] = (out[t.subcategory] || 0) + t.amount;
  });
  return out;
}

/** Build a color map: { field_value: "#RRGGBB" } from first occurrence */
function buildColorMap_(txns, field) {
  var map = {};
  txns.forEach(function(t) {
    if (t[field] && t.color && !map[t[field]]) map[t[field]] = t.color;
  });
  return map;
}

/** Safe column value extraction from parsed CSV row */
function val_(row, idx, col) {
  return idx[col] !== undefined ? (row[idx[col]] || "").trim() : "";
}


// ============================================================
// 6. RENDERING HELPERS (used by widget renderers)
// ============================================================

var SN_ = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

function fmt_(n) {
  n = Math.round(n || 0);
  var neg = n < 0; if (neg) n = -n;
  var s = n.toString();
  var l = s.substring(s.length - 3);
  var r = s.substring(0, s.length - 3);
  if (r !== "") l = "," + l;
  return (neg ? "-" : "") + "\u20b9" + r.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + l;
}

function fK_(n) { n = Math.round(n || 0); return n >= 1000 ? (n / 1000).toFixed(1) + "k" : n.toString(); }
function pct_(n) { return (n || 0).toFixed(1) + "%"; }
function sL_(ym) { var p = ym.split("-"); return SN_[parseInt(p[1], 10) - 1] + " '" + p[0].substring(2); }
function fL_(ym) { var p = ym.split("-"); return SN_[parseInt(p[1], 10) - 1] + " " + p[0]; }
function esc_(s) { return String(s).replace(/</g, "&lt;").replace(/>/g, "&gt;"); }

function deltaChip_(val, invert) {
  if (Math.abs(val) < 0.5) return '<span class="d d-n">' + (val > 0 ? "+" : "") + val.toFixed(1) + "%</span>";
  var cls = val > 0 ? (invert ? "d-down" : "d-up") : (invert ? "d-up" : "d-down");
  return '<span class="d ' + cls + '">' + (val > 0 ? "+" : "") + val.toFixed(1) + "%</span>";
}

function ppChip_(val, invert) {
  if (Math.abs(val) < 0.5) return '<span class="d d-n">' + (val > 0 ? "+" : "") + val.toFixed(1) + "pp</span>";
  var cls = val > 0 ? (invert ? "d-down" : "d-up") : (invert ? "d-up" : "d-down");
  return '<span class="d ' + cls + '">' + (val > 0 ? "+" : "") + val.toFixed(1) + "pp</span>";
}

function itemRows_(items) {
  var html = "";
  for (var k in items) {
    html += '<div class="im"><span class="im-l">' + esc_(k) + '</span><span class="im-v">' + fmt_(items[k]) + '</span></div>';
  }
  return html;
}

function trendArrow_(pct) {
  if (Math.abs(pct) < 3) return '<span style="color:#8b8fa3;">&#8594; flat</span>';
  if (pct > 10) return '<span style="color:#f87171;">&#8599; +' + Math.round(pct) + '%</span>';
  if (pct > 0) return '<span style="color:#fbbf24;">&#8599; +' + Math.round(pct) + '%</span>';
  if (pct < -10) return '<span style="color:#34d399;">&#8601; ' + Math.round(pct) + '%</span>';
  return '<span style="color:#2dd4bf;">&#8601; ' + Math.round(pct) + '%</span>';
}


// ============================================================
// 7. WIDGET RENDERERS
// ============================================================

var WIDGET_RENDERERS = {

  // --- Section Title (always full-width) ---
  section_title: function(m, w) {
    var title = (w.title || "").replace("{month}", fL_(m.currentMonth));
    return `<div class="section-title">${title}</div>`;
  },

  // --- KPI: Burn Rate ---
  burn_rate: function(m, w) {
    var d = m.burnRate;
    return `<div class="card ws-${w.size}" data-widget="burn_rate">
      <div class="label" data-tip="All expenses excl. Investment, Balance Correction, Payroll Deductions">Burn Rate</div>
      <div class="value">${fmt_(d.current)}</div>
      <div class="sub">vs ${m.prevMonth} ${fmt_(d.previous)} ${deltaChip_(d.delta)}</div>
      ${itemRows_(d.top3)}
    </div>`;
  },

  // --- KPI: Lifestyle Tax ---
  lifestyle_tax: function(m, w) {
    var d = m.lifestyleTax;
    return `<div class="card ws-${w.size}" data-widget="lifestyle_tax">
      <div class="label" data-tip="Food > Eating Out + Personal Purchases (all subcats)">Lifestyle Tax</div>
      <div class="value" style="color:var(--orange);">${fmt_(d.total)}</div>
      <div class="sub">${pct_(d.pct)} of burn ${ppChip_(d.ppDelta)}</div>
      ${itemRows_(d.items)}
    </div>`;
  },

  // --- KPI: Money Received ---
  money_received: function(m, w) {
    var d = m.income;
    return `<div class="card ws-${w.size}" data-widget="money_received">
      <div class="label" data-tip="All income excl. Balance Correction, Misc Income">Money Received</div>
      <div class="value" style="color:var(--green);">${fmt_(d.current)}</div>
      <div class="sub">vs ${m.prevMonth} ${fmt_(d.previous)} ${deltaChip_(d.delta, true)}</div>
      ${itemRows_(d.cats)}
    </div>`;
  },

  // --- KPI: Savings Rate ---
  savings_rate: function(m, w) {
    var d = m.savingsRate;
    return `<div class="card ws-${w.size}" data-widget="savings_rate">
      <div class="label" data-tip="(Core Income - Burn) / Core Income, trailing 3 months">Savings Rate (Q)</div>
      <div class="value" style="color:var(--teal);">${pct_(d.rate)}</div>
      <div class="sub">Trailing 3mo ${ppChip_(d.ppDelta, true)} vs prev Q</div>
    </div>`;
  },

  // --- Disc Split (doughnut + drill-down) ---
  disc_split: function(m, w) {
    var d = m.discSplit;
    var nP = Math.round(d.nonDiscPct), sP = Math.round(d.semiDiscPct), dP = Math.round(d.discPct);
    var hasData = d.total > 0;

    // Chart section: doughnut + stacked bar fallback (only when there's data)
    var chartSection = "";
    if (hasData) {
      chartSection = `<div class="donut-row">
        <div class="donut-wrap donut-md"><canvas id="discChart"></canvas></div>
        <div class="lg flex-col">
          <div class="li" onclick="td('nd')"><div class="ld" style="background:var(--blue);"></div>Non-Disc <span class="lv">${fmt_(d.nonDiscretionary)}</span> <span style="color:var(--dim);font-size:10px;">(${nP}%)</span></div>
          <div class="li" onclick="td('sm')"><div class="ld" style="background:var(--purple);"></div>Semi <span class="lv">${fmt_(d.semiDiscretionary)}</span> <span style="color:var(--dim);font-size:10px;">(${sP}%)</span></div>
          <div class="li" onclick="td('dc')"><div class="ld" style="background:var(--orange);"></div>Disc <span class="lv">${fmt_(d.discretionary)}</span> <span style="color:var(--dim);font-size:10px;">(${dP}%)</span></div>
        </div>
      </div>
      <div class="chart-fallback"><div class="sb">
        <div class="sg" style="width:${nP}%;background:#60a5fa;">${nP}%</div>
        <div class="sg" style="width:${sP}%;background:#a78bfa;">${sP}%</div>
        <div class="sg" style="width:${dP}%;background:#fb923c;">${dP}%</div>
      </div></div>
      <div class="dh" onclick="tdToggle()"><span class="da" id="da">&#9654;</span> Click a segment to see breakdown</div>`;
    } else {
      chartSection = `<div style="color:var(--dim);font-size:11px;margin-bottom:10px;">No spending data yet</div>`;
    }

    // Drill-down panels: shown on click when hasData, always visible when empty
    var vis = hasData ? "" : " v";
    var drillDown = `<div class="dp${vis}" id="dp-nd"><div style="font-size:11px;font-weight:600;color:var(--blue);margin-bottom:8px;">NON-DISCRETIONARY</div>${itemRows_(d.nonDiscItems)}</div>
      <div class="dp${vis}" id="dp-sm"><div style="font-size:11px;font-weight:600;color:var(--purple);margin-bottom:8px;">SEMI-DISCRETIONARY</div>${itemRows_(d.semiDiscItems)}</div>
      <div class="dp${vis}" id="dp-dc"><div style="font-size:11px;font-weight:600;color:var(--orange);margin-bottom:8px;">DISCRETIONARY</div>${itemRows_(d.discItems)}</div>`;

    var chartJson = hasData ? `<script type="text/json" id="discData">${JSON.stringify([d.nonDiscretionary, d.semiDiscretionary, d.discretionary])}<\/script>` : "";

    return `<div class="panel ws-${w.size}" data-widget="disc_split">
      <div class="panel-title"><span data-tip="Non-disc: bills, admin, essentials. Semi: food, transit, services. Disc: shopping, occasions, eating out">Discretionary Split</span></div>
      ${chartSection}
      ${drillDown}
      ${chartJson}
    </div>`;
  },

  // --- Utility Bills Checklist ---
  utility_bills: function(m, w) {
    var bills = m.utilityBills;
    var paid = 0, upcoming = 0, total = bills.length;
    var rows = "";
    for (var i = 0; i < bills.length; i++) {
      var b = bills[i];
      if (b.status === "paid") paid++;
      if (b.status === "upcoming") upcoming++;
      var icon, sym, amtHtml;
      if (b.status === "paid")         { icon = "ci-ok"; sym = "&#x2713;"; amtHtml = '<span class="st-p">' + fmt_(b.amount) + '</span>'; }
      else if (b.status === "upcoming") { icon = "ci-up"; sym = "&#x25CB;"; amtHtml = '<span class="st-u">' + fmt_(b.amount) + '</span>'; }
      else                              { icon = "ci-miss"; sym = "&#x2717;"; amtHtml = '<span class="st-m">Missing</span>'; }
      var dateChip = b.date ? (' <span class="date-chip ' + (b.status === "paid" ? "date-chip-ok" : "date-chip-up") + '">' + esc_(b.date) + '</span>') : "";
      rows += `<li><div class="ci ${icon}">${sym}</div><span style="flex:1;">${esc_(b.name)}${dateChip}</span>${amtHtml}</li>`;
    }
    var missing = total - paid - upcoming;
    var badge = missing === 0 ? "b-ok" : (missing <= 2 ? "b-w" : "b-a");
    var upcomingLabel = upcoming > 0 ? " &middot; " + upcoming + " Upcoming" : "";
    return `<div class="panel ws-${w.size}" data-widget="utility_bills">
      <div class="panel-title">Utility Bills <span class="b ${badge}">${paid}/${total} Paid${upcomingLabel}</span></div>
      <ul class="cl">${rows}</ul>
    </div>`;
  },

  // --- Data Quality ---
  data_quality: function(m, w) {
    var d = m.miscExpense;
    var ok = d.pct < 2;
    var badge = ok ? "b-ok" : "b-a";
    var statusIcon = ok
      ? '<span style="color:var(--green);font-weight:600;"> &#x2713; Under 2%</span>'
      : '<span style="color:var(--red);font-weight:600;"> &#x2717; Over 2%</span>';
    return `<div class="panel ws-${w.size}" data-widget="data_quality">
      <div class="panel-title" data-tip="Uncategorized + Untraced. Target: under 2%.">Data Quality <span class="b ${badge}">${pct_(d.pct)}</span></div>
      <div class="im"><span class="im-l">Uncategorized + Untraced</span>
        <span class="im-v">${d.count} txn${d.count !== 1 ? "s" : ""} &middot; ${fmt_(d.total)}</span></div>
      <div class="kpi-sub" style="margin-top:6px;">
        ${fmt_(d.total)} of ${fmt_(m.burnRate.current)} = ${pct_(d.pct)}${statusIcon}</div>
    </div>`;
  },

  // --- Burn Trend (line/area chart) ---
  burn_trend: function(m, w) {
    var data = m.burnTrend;
    var mx = 1;
    for (var i = 0; i < data.length; i++) { if (data[i].amount > mx) mx = data[i].amount; }
    var fbBars = "";
    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      var hPx = mx > 0 ? Math.round(d.amount / mx * 80) : 0;
      if (hPx < 5 && d.amount > 0) hPx = 5;
      var barColor = (d.month === m.currentMonth && d.amount >= mx * 0.9) ? "#f87171" : "#6c8cff";
      var opacity = d.amount === 0 ? "opacity:0.2;" : "";
      fbBars += `<div class="fb-group"><div class="fb-val">${d.amount > 0 ? fK_(d.amount) : ""}</div>
        <div class="fb-bar" style="height:${d.amount > 0 ? hPx : 2}px;background:${d.amount > 0 ? barColor : "#2e3348"};${opacity}"></div>
        <div class="fb-lbl">${sL_(d.month)}</div></div>`;
    }
    return `<div class="panel ws-${w.size}" data-widget="burn_trend">
      <div class="panel-title"><span data-tip="Excludes Investment, Balance Correction, Payroll Deductions">Monthly Burn Rate</span> <span class="panel-subtitle">6 months</span></div>
      <div class="chart-box"><canvas id="burnChart"></canvas></div>
      <div class="chart-fallback"><div class="fb-chart">${fbBars}</div></div>
      <script type="text/json" id="burnData">${JSON.stringify(data)}<\/script>
    </div>`;
  },

  // --- Grocery Trend (bar chart) ---
  grocery_trend: function(m, w) {
    var data = m.groceryTrend;
    var avg = m.groceryAvg;
    var mx = 1;
    for (var i = 0; i < data.length; i++) { if (data[i].amount > mx) mx = data[i].amount; }
    var fbBars = "";
    for (var i = 0; i < data.length; i++) {
      var g = data[i];
      var hPx = mx > 0 ? Math.round(g.amount / mx * 80) : 0;
      if (hPx < 5 && g.amount > 0) hPx = 5;
      var gbarColor = (avg > 0 && g.amount > avg * 1.1) ? "#fbbf24" : "#34d399";
      var opacity = g.amount === 0 ? "opacity:0.2;" : "";
      fbBars += `<div class="fb-group"><div class="fb-val">${g.amount > 0 ? fK_(g.amount) : ""}</div>
        <div class="fb-bar" style="height:${g.amount > 0 ? hPx : 2}px;background:${g.amount > 0 ? gbarColor : "#2e3348"};${opacity}"></div>
        <div class="fb-lbl">${sL_(g.month)}</div></div>`;
    }
    var lastGroc = data[data.length - 1].amount;
    var grocDev = avg > 0 ? ((lastGroc - avg) / avg * 100) : 0;
    var devNote = "";
    if (Math.abs(grocDev) > 1) {
      var devColor = grocDev > 0 ? "var(--amber)" : "var(--green)";
      devNote = ' &middot; ' + sL_(m.currentMonth) + ' is <span style="color:' + devColor + ';font-weight:600;">' + (grocDev > 0 ? "+" : "") + grocDev.toFixed(1) + '%</span> vs avg';
    }
    var chartJson = JSON.stringify({ data: data, avg: avg });
    return `<div class="panel ws-${w.size}" data-widget="grocery_trend">
      <div class="panel-title"><span data-tip="Home Essentials > Groceries">Grocery Trend</span> <span class="panel-subtitle">6 months</span></div>
      <div class="chart-box"><canvas id="groceryChart"></canvas></div>
      <div class="chart-fallback"><div class="fb-chart">${fbBars}</div></div>
      <div class="kpi-sub" style="margin-top:8px;">6-month avg: ${fmt_(avg)}${devNote}</div>
      <script type="text/json" id="groceryData">${chartJson}<\/script>
    </div>`;
  },

  // --- Top Subcategories (expandable table) ---
  top_subcats: function(m, w) {
    var subs = m.allSubcats;
    if (subs.length === 0) {
      return `<div class="panel ws-${w.size}" data-widget="top_subcats">
        <div class="panel-title">Top Subcategories</div>
        <div style="color:var(--dim);font-size:12px;">Not enough data</div></div>`;
    }
    var maxAmt = subs[0].amount;
    var rows = "", top5pct = 0;
    for (var i = 0; i < subs.length; i++) {
      var s = subs[i];
      var bw = Math.round(s.amount / maxAmt * 60);
      var xClass = i >= 5 ? ' class="x-rows"' : "";
      if (i < 5) top5pct += s.pct;
      rows += `<tr${xClass}><td><span class="pb" style="width:${Math.min(bw, 60)}px;background:${s.color || "var(--accent)"};"></span>${esc_(s.name)}</td>
        <td>${fmt_(s.amount)}</td><td class="pct-col">${pct_(s.pct)}</td>
        <td>${trendArrow_(s.trendPct)}</td></tr>`;
    }
    var expandBtn = subs.length > 5
      ? `<button class="expand-btn" id="t5-btn" onclick="toggleExpand('t5')">&#x25BC; Show all ${subs.length} subcategories</button>`
      : "";
    return `<div class="panel ws-${w.size}" data-widget="top_subcats">
      <div class="panel-title" id="t5-title">Top 5 Subcategories <span class="panel-subtitle">Rolling 12mo</span></div>
      <table class="ct" id="t5-table">
        <thead><tr><th>Subcategory</th><th>12mo Total</th><th>%</th><th>Trend</th></tr></thead>
        <tbody>${rows}</tbody>
      </table>
      ${expandBtn}
      <div class="kpi-sub" style="margin-top:8px;">Top 5 = ${pct_(top5pct)} of total spend</div>
    </div>`;
  },

  // --- Biggest Increases (expandable table) ---
  biggest_increases: function(m, w) {
    var inc = m.allIncreases;
    if (inc.length === 0) {
      return `<div class="panel ws-${w.size}" data-widget="biggest_increases">
        <div class="panel-title">Biggest Increases</div>
        <div style="color:var(--dim);font-size:12px;">Not enough data for QoQ comparison</div></div>`;
    }
    var rows = "";
    for (var i = 0; i < inc.length; i++) {
      var item = inc[i];
      var xClass = i >= 5 ? ' class="x-rows"' : "";
      rows += `<tr${xClass}><td>${esc_(item.name)}</td><td>${fmt_(item.thisQ)}</td><td>${fmt_(item.prevQ)}</td>
        <td style="color:var(--red);">+${fmt_(item.diff)}</td></tr>`;
    }
    var expandBtn = inc.length > 5
      ? `<button class="expand-btn" id="inc-btn" onclick="toggleExpand('inc')">&#x25BC; Show all ${inc.length} increases</button>`
      : "";
    return `<div class="panel ws-${w.size}" data-widget="biggest_increases">
      <div class="panel-title" id="inc-title">Biggest Increases <span class="panel-subtitle">vs prev quarter</span></div>
      <table class="ct" id="inc-table">
        <thead><tr><th>Subcategory</th><th>This Q</th><th>Prev Q</th><th>Change</th></tr></thead>
        <tbody>${rows}</tbody>
      </table>
      ${expandBtn}
    </div>`;
  },

  // --- Investment ---
  investment: function(m, w) {
    var d = m.investment;
    return `<div class="panel ws-${w.size}" data-widget="investment">
      <div class="panel-title"><span data-tip="Mutual Funds, PPF, NPS, etc. Excluded from burn rate.">Investment</span></div>
      <div class="kpi-value">${fmt_(d.current)}</div>
      <div class="kpi-sub">vs ${m.prevMonth} ${fmt_(d.previous)}</div>
      ${itemRows_(d.subcats)}
    </div>`;
  },

  // --- Rewards & Refunds ---
  rewards_refunds: function(m, w) {
    var d = m.recovery;
    return `<div class="panel ws-${w.size}" data-widget="rewards_refunds">
      <div class="panel-title" data-tip="Recovery from spending, not core income.">Rewards &amp; Refunds</div>
      <div class="kpi-value" style="color:var(--green);">${fmt_(d.total)}</div>
      <div class="kpi-sub">${pct_(d.pct)} of expenses</div>
      ${itemRows_(d.rewardsSubcats)}
    </div>`;
  },

  // --- People Payments ---
  people_payments: function(m, w) {
    var d = m.peoplePay;
    return `<div class="panel ws-${w.size}" data-widget="people_payments">
      <div class="panel-title" data-tip="Household Staff + Family Transfer + Gifts + Donations">People Payments</div>
      <div class="kpi-value">${fmt_(d.total)}</div>
      <div class="kpi-sub">${pct_(d.pct)} of burn</div>
      ${itemRows_(d.items)}
    </div>`;
  },

  // --- Household Running Cost ---
  household_cost: function(m, w) {
    var d = m.household;
    return `<div class="panel ws-${w.size}" data-widget="household_cost">
      <div class="panel-title">Household Running Cost <span class="panel-subtitle">12 months</span></div>
      <div style="font-size:28px;font-weight:700;">${fmt_(d.total)}</div>
      <div class="kpi-sub">${fmt_(d.monthlyAvg)}/month avg &middot; Non-negotiable baseline</div>
      <div style="margin-top:14px;">${itemRows_(d.breakdown)}</div>
    </div>`;
  },

  // --- Vehicle Expenses (fuel, repairs, toll, parking) ---
  vehicle_expenses: function(m, w) {
    var d = m.vehicleExpenses;
    var items = { "Fuel (CNG/Petrol)": d.fuel, "Repairs & Service": d.repairs, "Toll": d.toll, "Parking": d.parking };
    return `<div class="panel ws-${w.size}" data-widget="vehicle_expenses">
      <div class="panel-title"><span data-tip="Transit > Vehicle Fuel + Services > Vehicle Expenses + Toll + Parking">Vehicle Expenses</span> <span class="panel-subtitle">&mdash; ${fL_(m.currentMonth)}</span></div>
      <div class="value">${fmt_(d.total)}</div>
      <div class="sub">vs ${sL_(m.prevMonth)} ${fmt_(d.prevTotal)} ${deltaChip_(d.delta)}</div>
      ${d.total > 0 ? '<div class="kpi-sub" style="margin-top:6px;">Fuel is ' + pct_(d.fuelPct) + ' of total vehicle cost</div>' : ''}
      ${itemRows_(items)}
    </div>`;
  },

  // --- Rent Received Trend (dual-line chart: AJH + NJH) ---
  rent_trend: function(m, w) {
    var data = m.rentTrend;
    var mx = 1;
    for (var i = 0; i < data.length; i++) {
      if (data[i].ajh > mx) mx = data[i].ajh;
      if (data[i].njh > mx) mx = data[i].njh;
    }
    var fbBars = "";
    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      var ajhH = mx > 0 ? Math.round(d.ajh / mx * 70) : 0;
      var njhH = mx > 0 ? Math.round(d.njh / mx * 70) : 0;
      if (ajhH < 3 && d.ajh > 0) ajhH = 3;
      if (njhH < 3 && d.njh > 0) njhH = 3;
      fbBars += `<div class="fb-group">
        <div class="fb-val" style="font-size:9px;">${d.ajh > 0 ? fK_(d.ajh) : ""}</div>
        <div style="display:flex;gap:2px;align-items:flex-end;">
          <div class="fb-bar" style="height:${d.ajh > 0 ? ajhH : 2}px;background:#60a5fa;max-width:18px;"></div>
          <div class="fb-bar" style="height:${d.njh > 0 ? njhH : 2}px;background:#34d399;max-width:18px;"></div>
        </div>
        <div class="fb-lbl">${sL_(d.month)}</div></div>`;
    }
    return `<div class="panel ws-${w.size}" data-widget="rent_trend">
      <div class="panel-title"><span data-tip="Passive Income > Rent, split by property">Rent Received</span> <span class="panel-subtitle">6 months</span></div>
      <div class="lg" style="margin-bottom:10px;">
        <div class="li"><div class="ld" style="background:#60a5fa;"></div>AJH</div>
        <div class="li"><div class="ld" style="background:#34d399;"></div>NJH</div>
      </div>
      <div class="chart-box"><canvas id="rentChart"></canvas></div>
      <div class="chart-fallback"><div class="fb-chart">${fbBars}</div></div>
      <script type="text/json" id="rentData">${JSON.stringify(data)}<\/script>
    </div>`;
  },

  // --- Full Category Breakdown (table) ---
  cat_breakdown: function(m, w) {
    var cats = m.catBreakdown;
    if (cats.length === 0) {
      return `<div class="panel ws-${w.size}" data-widget="cat_breakdown">
        <div style="color:var(--dim);font-size:12px;">No data</div></div>`;
    }
    var maxAmt = cats[0].amount;
    var total = 0;
    var rows = "";
    for (var i = 0; i < cats.length; i++) {
      var c = cats[i];
      total += c.amount;
      var barW = Math.round(c.amount / maxAmt * 100);
      var cp = m.burnRate.current > 0 ? (c.amount / m.burnRate.current * 100).toFixed(1) : "0.0";
      rows += `<tr><td>${esc_(c.name)}</td><td><div class="cat-bar" style="width:${barW}%;background:${c.color};"></div></td>
        <td>${fmt_(c.amount)}</td><td class="pct-col">${cp}%</td></tr>`;
    }
    var totalPct = m.burnRate.current > 0 ? (total / m.burnRate.current * 100).toFixed(1) : "0.0";
    return `<div class="panel ws-${w.size}" data-widget="cat_breakdown">
      <table class="ct cat-tbl"><thead><tr><th>Category</th><th></th><th>Amount</th><th>% of Burn</th></tr></thead>
      <tbody>${rows}
        <tr class="total-row"><td>Total</td><td></td><td>${fmt_(total)}</td><td class="pct-col">${totalPct}%</td></tr>
      </tbody></table>
    </div>`;
  }
};