/** * ESGAtGlance — ESG At a Glance Dashboard * * Architecture: * GlobalFilters → active modules → flat summary grid + flat charts grid * ComparisonView → same grids with Group 1 vs Group 2 * * graphConfigs is a flat map: chartKey → chartConfig. * Module is derived from chartConfig.dataConfigs[0].widgetConfig.module[0] * or chartConfig.widgetConfig.module[0]. * Each dataConfig is fetched separately; results are combined before rendering. */ import React, { useState, useEffect, useCallback, useMemo, useRef, } from "react"; import { useModuleSummary, useModuleGraphs, useComparisonModuleGraphs } from "./usageData"; import { ChartFactory } from "../../../../../ChartUtility/charts"; import { getFrequency, generateTimePeriodOptions, getStartingMonth } from "../../../../../../utils/PeriodCalculationUtils"; import { useFinancialYears, useSources } from "../../../../../../hooks/useApiData"; import { useCurrentUser } from "../../../../../../hooks/useCurrentUser"; import hrsrConfig from "./config/hrsr.config"; import brsrConfig from "./config/brsr.config"; import hrsrEmploymentConfig from "./config/hrsr-employment.config"; import hrsrDiversityConfig from "./config/hrsr-diversity.config"; import { compileAsync } from "sass"; // ───────────────────────────────────────────────────────────────────────────── // THEME // ───────────────────────────────────────────────────────────────────────────── const THEME = { primary: "#3f88a7", primaryDark: "#2f6e8a", primaryLight: "#6aaec7", primaryFaint: "#e8f4f8", accent: "#f0a500", success: "#2ecc8b", danger: "#e05c5c", neutral: "#64748b", bg: "#f0f2f5", surface: "#ffffff", border: "#e2e8f0", text: "#1a2535", textMuted: "#94a3b8", textSub: "#64748b", }; const MODULE_ICONS = { Energy: "⚡", Water: "💧", Waste: "♻️", Emission: "🌫️", Diversity: "👥", Employment: "🏢", Training: "📚", "Health & Safety":"🦺", Occupancy: "🏨", }; export const ESG_FRAMEWORK_CONFIGS = { BRSR: brsrConfig, HRSR: hrsrConfig, "HRSR-Employment": hrsrEmploymentConfig, "HRSR-Diversity": hrsrDiversityConfig, }; // ───────────────────────────────────────────────────────────────────────────── // UTILITY COMPONENTS // ───────────────────────────────────────────────────────────────────────────── /** Compact multi-select dropdown with search + select-all */ const MultiSelect = ({ label, options = [], value = [], onChange, placeholder = "Select...", showCount = false, single = false, }) => { const [open, setOpen] = useState(false); const [search, setSearch] = useState(""); const ref = useRef(null); useEffect(() => { const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); const filtered = options.filter((o) => (o.label || o).toLowerCase().includes(search.toLowerCase()) ); const toggle = (v) => { if (single) { onChange([v]); setOpen(false); return; } const next = value.includes(v) ? value.filter((x) => x !== v) : [...value, v]; onChange(next); }; const allSelected = value.length === options.length; const toggleAll = () => onChange(allSelected ? [] : options.map((o) => o.value || o)); const displayText = () => { if (!value.length) return placeholder; if (single) { const found = options.find((o) => (o.value || o) === value[0]); return found ? (found.label || found) : value[0]; } if (value.length === options.length) return `All ${label || ""}`; if (showCount && value.length > 2) return `${value.length} selected`; return value .slice(0, 2) .map((v) => { const o = options.find((x) => (x.value || x) === v); return o ? (o.label || o) : v; }) .join(", ") + (value.length > 2 ? ` +${value.length - 2}` : ""); }; return (
{open && (
setSearch(e.target.value)} placeholder="Search..." style={{ width: "100%", border: `1px solid ${THEME.border}`, borderRadius: 5, padding: "5px 8px", fontSize: 12, outline: "none", boxSizing: "border-box", }} />
{!single && ( )}
{filtered.length === 0 && (
No results
)} {filtered.map((o) => { const v = o.value || o; const l = o.label || o; const checked = value.includes(v); return ( ); })}
)}
); }; /** Loading skeleton shimmer */ const Shimmer = ({ width = "100%", height = 20, radius = 6 }) => (
); // ───────────────────────────────────────────────────────────────────────────── // SECTION HEADING — labels the all-summaries and all-graphs bands // ───────────────────────────────────────────────────────────────────────────── const SectionHeading = ({ title }) => (
{title}
); // ───────────────────────────────────────────────────────────────────────────── // SUMMARY CARD — with YoY comparison + hover details // ───────────────────────────────────────────────────────────────────────────── const SummaryCard = ({ card, value, loading, moduleIcon, accentColor }) => { const currentUser = useCurrentUser(); const companyId = currentUser?.companyId; const fmt = (v) => { if (v === undefined || v === null) return "—"; if (typeof v !== "number") return v; const rounded = Number(v.toFixed(2)); const isInteger = Number.isInteger(rounded); // if (rounded >= 1_000_000) { // const kValue = rounded / 1_000; // const kRounded = Number(kValue.toFixed(2)); // const isKInt = Number.isInteger(kRounded); // return ( // new Intl.NumberFormat("en-IN", { // minimumFractionDigits: isKInt ? 0 : 2, // maximumFractionDigits: 2, // }).format(kRounded) + "K" // ); // } return new Intl.NumberFormat("en-IN", { minimumFractionDigits: isInteger ? 0 : 2, maximumFractionDigits: 2, }).format(rounded); }; const current = value?.current ?? null; const previous = value?.previous ?? null; const unit = value?.unit ?? ''; const hasComparison = previous !== null && previous !== undefined; const comparisonType = card?.comparison?.comparisonType || "percentage_delta"; const isShare = comparisonType === "percentage_share"; const pctRaw = hasComparison ? isShare ? (current + previous === 0 ? null : (current / (current + previous)) * 100) : ((current - previous) / previous) * 100 : null; const pct = pctRaw !== null ? Math.abs(pctRaw).toFixed(1) : null; const absDiff = hasComparison ? current - previous : null; const numericPct = pctRaw !== null ? parseFloat(pctRaw) : null; const isIncrease = numericPct !== null && numericPct > 0; const isDecrease = numericPct !== null && numericPct < 0; let improved = null; if (!isShare && numericPct !== null) { if (card.trendDirection === "up") improved = isIncrease; else if (card.trendDirection === "down") improved = isDecrease; } const accent = accentColor || THEME.primary; const deltaColor = numericPct === null ? THEME.textMuted : card.trendDirection === "neutral" ? THEME.textMuted : improved ? THEME.success : THEME.danger; const deltaPrefix = isIncrease ? "▲" : isDecrease ? "▼" : ""; const iconBg = accent + "18"; // Shared text styles const T = { // Row 1-2: title title: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 13, fontWeight: 600, color: "#374151", letterSpacing: "-0.01em", lineHeight: 1.4, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", }, // Primary hero value heroValue: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 28, fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.05, color: "#0f172a", }, // Unit beside hero heroUnit: { fontFamily: "'DM Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: accent, paddingBottom: 2, }, // Row label (e.g. "FY 2025-26", "Previous Year") rowLabel: { fontFamily: "'DM Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "#94a3b8", }, // Secondary value (share bars, vs value) secondaryValue: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: "-0.02em", color: "#374151", }, // Delta badge text deltaBadge: { fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, letterSpacing: "0.02em", }, // Muted supporting text muted: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 12, color: "#94a3b8", }, }; return (
{/* ── Top accent stripe ── */}
{/* ── Body ── */}
{/* ── ROW 1-2 : Title (max 2 lines) ── */}
{card.title}
{moduleIcon && (
{moduleIcon}
)}
{/* ── Divider ── */}
{/* ── DATA ROWS ── */} {loading ? ( ) : isShare && hasComparison ? ( /* ════════════════════════════════ percentage_share layout ROW 3 : current share ROW 4 : other share ════════════════════════════════ */
{/* ROW 3 — current share */}
{value.labels?.current ?? "Current"}
◐ {pct}%
{companyId !== 351 && ( <>
{fmt(current)} {unit}
{/* ROW 4 — other share */}
{value.labels?.previous ?? "Previous"}
{fmt(previous)} {unit && ( {unit} )}
)}
) : hasComparison ? ( /* ════════════════════════════════ percentage_delta layout ROW 3 : current value (hero) ROW 4 : % change ROW 5 : vs previous ════════════════════════════════ */
{/* ROW 3 — current value */}
{value.labels?.current ?? "Current"}
{fmt(current)} {unit && {unit}}
{companyId !== 351 && ( <> {/* ROW 4 — % change badge + abs diff */}
{pct !== null && ( <> {deltaPrefix} {pct}% {absDiff >= 0 ? "+" : ""}{fmt(absDiff)} {unit} )}
{/* ROW 5 — vs previous */}
{value.labels?.previous ?? "Previous"}
{fmt(previous)} {unit && ( {unit} )}
)}
) : ( /* ════════════════════════════════ No comparison — plain value ROW 3 : value + unit only ════════════════════════════════ */ <> {value && (
{value.labels?.current ?? "Current"}
{fmt(current)} {unit && {unit}}
)} )}
); }; // ───────────────────────────────────────────────────────────────────────────── // PER-MODULE DATA COMPONENTS // These call hooks and emit flat JSX — no surrounding box. // They are composed inside the flat all-modules grids below. // ───────────────────────────────────────────────────────────────────────────── // Accent colors per module for icon bubbles const MODULE_ACCENT = { Energy: "#f0a500", Water: "#3b82f6", Waste: "#ef4444", Emissions: "#8b5cf6", }; /** Renders summary cards for ONE module inside the flat summary grid. */ const ModuleSummaryCards = ({ moduleName, summaryConfig, filters, displayPeriodOrderMap }) => { const { values, loading } = useModuleSummary(summaryConfig, filters, displayPeriodOrderMap, false, true); if (!summaryConfig?.cards?.length) return null; const icon = MODULE_ICONS[moduleName] || "📊"; const accent = MODULE_ACCENT[moduleName] || THEME.primary; return ( <> {summaryConfig.cards.filter((card) => !card.skipFinancialView).map((card) => ( ))} ); }; // ───────────────────────────────────────────────────────────────────────────── // CHART WRAPPER // ───────────────────────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────────────────────── // GRAPH CARD — wraps ChartFactory; handles both pre-transformed and raw data // ───────────────────────────────────────────────────────────────────────────── const GraphCard = ({ title, description, chartResult, loading }) => { return (
{title}
{description && (
{description}
)}
{loading ? (
) : !chartResult ? (
No data available
) : ( )}
); }; /** Renders all graph cards for ONE module in the flat FY-view grid. */ const ModuleGraphCards = ({ moduleName, flatGraphConfigs, filters, displayPeriodOrderMap }) => { const { chartDataMap, loading } = useModuleGraphs(flatGraphConfigs, moduleName, filters, displayPeriodOrderMap); const myCharts = useMemo( () => Object.entries(flatGraphConfigs || {}).filter( ([, cfg]) => { const mod = cfg.dataConfigs?.length ? cfg.dataConfigs[0].widgetConfig.module[0] : cfg.widgetConfig?.module?.[0]; return mod === moduleName; } ), [flatGraphConfigs, moduleName] ); if (!myCharts.length) return null; return ( <> {myCharts.map(([key, cfg]) => ( ))} ); }; /** Renders all comparison graph cards for ONE module. */ const ComparisonModuleGraphCards = ({ moduleName, flatGraphConfigs, comparisonType, group1Filters, group2Filters, displayPeriodOrderMap }) => { const { chartDataMap, loading } = useComparisonModuleGraphs( flatGraphConfigs, moduleName, comparisonType, group1Filters, group2Filters, displayPeriodOrderMap ); const myCharts = useMemo( () => Object.entries(flatGraphConfigs || {}).filter( ([, cfg]) => { const mod = cfg.dataConfigs?.length ? cfg.dataConfigs[0].widgetConfig.module[0] : cfg.widgetConfig?.module?.[0]; return mod === moduleName; } ), [flatGraphConfigs, moduleName] ); if (!myCharts.length) return null; return ( <> {myCharts.map(([key, cfg]) => ( ))} ); }; // ───────────────────────────────────────────────────────────────────────────── // COMPARISON SUMMARY CARD // Same shell as SummaryCard — large number shows % change + absolute diff. // Hover overlay reveals Group 1 and Group 2 raw values. // ───────────────────────────────────────────────────────────────────────────── const ComparisonSummaryCard = ({ card, group1, group2, loading, moduleIcon, accentColor, group1Label = "Group 1", group2Label = "Group 2", }) => { const fmt = (v) => { if (v === undefined || v === null) return "—"; if (typeof v !== "number") return v; const rounded = Number(v.toFixed(2)); const isInteger = Number.isInteger(rounded); // if (rounded >= 1_000_000) { // const kValue = rounded / 1_000; // const kRounded = Number(kValue.toFixed(2)); // const isKInt = Number.isInteger(kRounded); // return ( // new Intl.NumberFormat("en-IN", { // minimumFractionDigits: isKInt ? 0 : 2, // maximumFractionDigits: 2, // }).format(kRounded) + "K" // ); // } return new Intl.NumberFormat("en-IN", { minimumFractionDigits: isInteger ? 0 : 2, maximumFractionDigits: 2, }).format(rounded); }; const group1Value = group1?.value ?? null; const group1Unit = group1?.unit ?? ''; const group2Value = group2?.value ?? null; const group2Unit = group2?.unit ?? ''; const hasData = group1Value != null && group2Value != null && group1Value !== 0; const pctRaw = hasData ? ((group2Value - group1Value) / group1Value) * 100 : null; const pct = pctRaw !== null ? Math.abs(pctRaw).toFixed(1) : null; const absDiff = hasData ? group2Value - group1Value : null; const numericPct = pctRaw !== null ? parseFloat(pctRaw) : null; const isIncrease = numericPct !== null && numericPct > 0; const isDecrease = numericPct !== null && numericPct < 0; const improved = numericPct !== null && numericPct < 0; // lower = better (default) const deltaColor = numericPct === null ? "#94a3b8" : improved ? THEME.success : THEME.danger; const deltaPrefix = isIncrease ? "▲" : isDecrease ? "▼" : ""; const accent = accentColor || THEME.primary; const iconBg = accent + "18"; const T = { title: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 13, fontWeight: 600, color: "#374151", letterSpacing: "-0.01em", lineHeight: 1.4, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", }, heroValue: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 28, fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.05, color: "#0f172a", }, heroUnit: { fontFamily: "'DM Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: accent, paddingBottom: 2, }, rowLabel: { fontFamily: "'DM Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "#94a3b8", }, secondaryValue: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: "-0.02em", color: "#374151", }, deltaBadge: { fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700, letterSpacing: "0.02em", }, muted: { fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: 12, color: "#94a3b8", }, }; return (
{/* ── Top accent stripe ── */}
{/* ── Body ── */}
{/* ── ROW 1-2 : Title ── */}
{card.title}
{moduleIcon && (
{moduleIcon}
)}
{/* ── Divider ── */}
{/* ── DATA ROWS ── */} {loading ? ( ) : (
{/* ROW 3 — group2 value (hero, "current" equivalent) */}
{group2Label}
{fmt(group2Value ?? null)} {group2Unit && {group2Unit}}
{/* ROW 4 — % change badge + abs diff */}
{pct !== null && ( <> {deltaPrefix} {pct}% {absDiff >= 0 ? "+" : ""}{fmt(absDiff)} {group2Unit} )}
{/* ── Divider before group1 ── */}
{/* ROW 5 — group1 value ("previous" equivalent) */}
{group1Label}
{fmt(group1Value ?? null)} {group2Unit && ( {group2Unit} )}
)}
); }; /** Renders comparison summary cards for ONE module inside the flat grid. */ const ComparisonModuleSummaryCards = ({ moduleName, summaryConfig, group1Filters, group2Filters, displayPeriodOrderMap }) => { const { values: g1, loading: l1 } = useModuleSummary(summaryConfig, group1Filters, displayPeriodOrderMap, true); const { values: g2, loading: l2 } = useModuleSummary(summaryConfig, group2Filters, displayPeriodOrderMap, true); if (!summaryConfig?.cards?.length) return null; const icon = MODULE_ICONS[moduleName] || "📊"; const accent = MODULE_ACCENT[moduleName] || THEME.primary; return ( <> {summaryConfig.cards.filter((card) => !card.skipComparisonView).map((card) => ( ))} ); }; // ───────────────────────────────────────────────────────────────────────────── // FINANCIAL YEAR VIEW // All summary cards (2-col grid) → then all graphs below // ───────────────────────────────────────────────────────────────────────────── const FinancialYearView = ({ activeModules, frameworkConfig, filters, displayPeriodOrderMap }) => { if (!activeModules.length) { return (
Select at least one module to view data.
); } return (
{/* ── All summary cards — 2-col grid ───────────────────────────────── */}
{activeModules.map((mod) => ( ))}
{/* ── All graphs — flat graphConfigs filtered per module ─────────── */}
{activeModules.map((mod) => ( ))}
); }; // ───────────────────────────────────────────────────────────────────────────── // COMPARISON VIEW // All comparison summary cards → then all comparison graphs // ───────────────────────────────────────────────────────────────────────────── const ComparisonView = ({ activeModules, frameworkConfig, comparisonType, group1Values, group2Values, commonFilters, displayPeriodOrderMap }) => { const canCompare = group1Values.length > 0 && group2Values.length > 0; const buildFilters = (groupVals) => { const base = { ...commonFilters }; if (comparisonType === "financial_year") return { ...base, financialYear: groupVals[0] || null }; if (comparisonType === "displayPeriods") return { ...base, periods: groupVals }; if (comparisonType === "location_id") return { ...base, locationIds: groupVals }; return base; }; if (!canCompare) { const dimLabel = { financial_year: "Financial Year", displayPeriods: "Period", location_id: "Location" }[comparisonType]; return (
Select a {dimLabel} for both Group 1 and Group 2 in the filter bar above to start comparing.
); } const group1Filters = buildFilters(group1Values); const group2Filters = buildFilters(group2Values); if (!activeModules.length) { return (
Select at least one module to view comparisons.
); } return (
{/* ── All comparison summary cards — same 2-col grid as FY view ──────── */}
{activeModules.map((mod) => ( ))}
{/* ── All comparison graphs — flat graphConfigs filtered per module ─ */}
{activeModules.map((mod) => ( ))}
); }; // ───────────────────────────────────────────────────────────────────────────── // HEADER — white bar with logo + title left, Modules dropdown + view tabs right // ───────────────────────────────────────────────────────────────────────────── const AppHeader = ({ activeModules, setActiveModules, availableModules, activeView, setActiveView, }) => (
{/* Logo icon */}
📊
{/* Modules dropdown — left side */}
Modules
{/* Spacer pushes view toggle to the right */}
{/* View toggle */}
{[ { key: "financial", label: "Financial Year View" }, { key: "comparison", label: "Comparison View" }, ].map(({ key, label }) => ( ))}
); // ───────────────────────────────────────────────────────────────────────────── // CHIP // ───────────────────────────────────────────────────────────────────────────── const Chip = ({ label, onRemove }) => ( {label} ); // ───────────────────────────────────────────────────────────────────────────── // SELECTED TAGS MODAL — lists all selected values when overflow > 2 // ───────────────────────────────────────────────────────────────────────────── const SelectedTagsModal = ({ title, items, onClose }) => (
e.stopPropagation()} style={{ background: THEME.surface, borderRadius: 14, padding: "24px 28px", minWidth: 320, maxWidth: 480, boxShadow: "0 16px 48px rgba(0,0,0,0.18)", display: "flex", flexDirection: "column", gap: 16, }} >
{title}
{items.map((item, i) => ( {item} ))}
); // ───────────────────────────────────────────────────────────────────────────── // SELECTED TAGS DISPLAY — 0-2 chips visible; +N link opens modal // ───────────────────────────────────────────────────────────────────────────── const SelectedTagsDisplay = ({ values, options, onRemove, modalTitle, labelPrefix = "" }) => { const [modalOpen, setModalOpen] = useState(false); if (!values.length) return null; const getLabel = (v) => { const opt = options.find((o) => (o.value || o) === v); return labelPrefix + (opt ? (opt.label || opt) : v); }; const visible = values.slice(0, 2); const overflow = values.length - 2; return ( <>
{visible.map((v) => ( onRemove(v)} /> ))} {overflow > 0 && ( )}
{modalOpen && ( setModalOpen(false)} /> )} ); }; // ───────────────────────────────────────────────────────────────────────────── // FILTER SLOT // Row structure: [label (+ COMMON badge)] ← same height as GroupDimensionPicker label row // [dropdown] // [chips] // ───────────────────────────────────────────────────────────────────────────── const FilterSlot = ({ label, note, options, value, onChange, single }) => { const removeChip = (v) => onChange(value.filter((x) => x !== v)); return (
{/* Label row — always 22px tall */}
{label} {note && ( {note} )}
{/* Dropdown */} {/* Chips */} {!single && ( )}
); }; // ───────────────────────────────────────────────────────────────────────────── // GROUP DIMENSION PICKER // Row structure: [{label} Group 1 ············ Group 2] ← same label-row height // [G1 dropdown] vs [G2 dropdown] // [chips] // G1/G2 labels sit INLINE in the label row (right side), so the dropdown row // is always row-2, exactly matching FilterSlot. // ───────────────────────────────────────────────────────────────────────────── const GroupDimensionPicker = ({ label, options, group1, setGroup1, group2, setGroup2, singleSelect }) => { const removeG1 = (v) => setGroup1(group1.filter((x) => x !== v)); const removeG2 = (v) => setGroup2(group2.filter((x) => x !== v)); return (
{/* Label row — same 22px height as FilterSlot label row */}
{label}
{/* G1 label aligned over first dropdown */} Group 1 {/* spacer for the "vs" */} {/* G2 label aligned over second dropdown */} Group 2
{/* Dropdown row — row 2, same as FilterSlot */}
vs
{/* Chips with modal links — G1 and G2 use SelectedTagsDisplay */}
); }; // ───────────────────────────────────────────────────────────────────────────── // FILTERS BAR — white card with "Filters" heading, spacious dropdowns + chips // ───────────────────────────────────────────────────────────────────────────── const FiltersBar = ({ activeView, financialYear, setFinancialYear, locationIds, setLocationIds, periodValues, setPeriodValues, comparisonType, setComparisonType, group1Values, setGroup1Values, group2Values, setGroup2Values, financialYears, sources, periodOptions, }) => { const fyOptions = financialYears.map((fy) => ({ label: fy.financial_year_value, value: fy.financial_year_value, })); const sourceOptions = sources.map((src) => ({ label: src.unitCode || src.location.area + ", " + src.location.city, value: String(src.id), })); const isComparison = activeView === "comparison"; const COMP_TYPES = [ { value: "financial_year", label: "Financial Year" }, { value: "displayPeriods", label: "Period" }, { value: "location_id", label: "Location" }, ]; return (
{/* Heading row */}
Filters {/* Comparison type pills — only in comparison view */} {isComparison && (
Compare by:
{COMP_TYPES.map(({ value, label }) => ( ))}
)}
{/* Filter slots row — all columns share the same 2-row structure so dropdowns always align */}
{/* Financial Year */} {isComparison && comparisonType === "financial_year" ? ( ) : ( setFinancialYear(v[0] || null)} single={true} note={isComparison ? "common" : null} /> )} {/* Location */} {isComparison && comparisonType === "location_id" ? ( ) : ( )} {/* Period */} {isComparison && comparisonType === "displayPeriods" ? ( ) : ( )}
); }; // ───────────────────────────────────────────────────────────────────────────── // ROOT // ───────────────────────────────────────────────────────────────────────────── const ESGDashboard = ({ frameworkName }) => { // Framework — resolved from first API record, never user-selectable const [frameworkConfig, setFrameworkConfig] = useState(null); const [activeModules, setActiveModules] = useState([]); useEffect(() => { if (!frameworkName || !ESG_FRAMEWORK_CONFIGS[frameworkName]) return; const resolved = ESG_FRAMEWORK_CONFIGS[frameworkName]; setFrameworkConfig(resolved); setActiveModules([...resolved.modules]); }, [frameworkName]); const availableModules = frameworkConfig?.modules || []; // View const [activeView, setActiveView] = useState("financial"); // Shared filter state const [financialYear, setFinancialYear] = useState(null); const [financialYearId, setFinancialYearId] = useState(null); const [locationIds, setLocationIds] = useState([]); const [periodValues, setPeriodValues] = useState([]); const [periodOptions, setPeriodOptions] = useState([]); const [displayPeriodOrderMap, setDisplayPeriodOrderMap] = useState([]); // Comparison state — lifted here so FiltersBar and ComparisonView share it const [comparisonType, setComparisonType] = useState("financial_year"); const [group1Values, setGroup1Values] = useState([]); const [group2Values, setGroup2Values] = useState([]); const handleSetComparisonType = useCallback((type) => { setComparisonType(type); setGroup1Values([]); setGroup2Values([]); }, []); // Data const financialYears = useFinancialYears(); const sources = useSources(); // Auto-select latest FY (index 0, list assumed sorted desc from API) useEffect(() => { if (financialYears.length && !financialYear) { setFinancialYear(financialYears[0].financial_year_value); } }, [financialYears, financialYear]); useEffect(() => { if (financialYears && financialYear) { const financialYearId = financialYears.find(fy => fy.financial_year_value === financialYear)?.id; setFinancialYearId(financialYearId); } }, [financialYear, financialYears]); // Regenerate period options when FY changes useEffect(() => { if (!financialYearId) return; getFrequency(financialYearId).then((freq) => { if (freq) { const timePeriodOptions = generateTimePeriodOptions(freq, getStartingMonth()).map(option => { return { ...option, label: option.label.replaceAll(' ', '') } }); setPeriodOptions(timePeriodOptions.map(option => ({value: option.label, label: option.label}))); setPeriodValues([]); setDisplayPeriodOrderMap(timePeriodOptions.reduce((acc, option) => { acc[option.label] = Number(option.value); return acc; }, {})); } }); }, [financialYearId]); // Filters for Financial Year view const filters = useMemo(() => ({ financialYear: financialYear, locationIds, periods: periodValues, }), [financialYear, locationIds, periodValues]); // Common filters for Comparison view — excludes the compared dimension const commonFilters = useMemo(() => { if (comparisonType === "financial_year") return { locationIds, periods: periodValues }; if (comparisonType === "displayPeriods") return { financialYear: financialYear, locationIds }; /* location */ return { financialYear: financialYear, periods: periodValues }; }, [comparisonType, financialYear, locationIds, periodValues]); return (
{/* Header — logo, title, modules, view toggle */} {/* Filters card */} {/* Content */}
{activeView === "financial" ? ( ) : ( )}
); }; export default ESGDashboard;