diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.jsx index 1ff6ef8a97..bd8b2c5b7a 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.jsx @@ -1,4 +1,3 @@ -// LossTrackingLineChart.jsx import { useEffect, useMemo, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { @@ -140,16 +139,13 @@ export default function LossTrackingLineChart() { const darkMode = useSelector(state => state.theme.darkMode); const hostRef = useRef(null); - // --- Promote parent wrapper (no parent code changes needed) --- useEffect(() => { const host = hostRef.current; if (!host) return; - // Find the wrapper the page uses around our component const wrapper = host.closest('.weekly-project-summary-card.financial-big'); if (!wrapper) return; - // Save previous inline styles to restore on unmount const prev = { gridColumn: wrapper.style.gridColumn, flex: wrapper.style.flex, @@ -158,7 +154,6 @@ export default function LossTrackingLineChart() { minWidth: wrapper.style.minWidth, }; - // Make the wrapper span the full grid row & fill flex rows wrapper.style.gridColumn = '1 / -1'; wrapper.style.flex = '1 1 100%'; wrapper.style.width = '100%'; @@ -201,9 +196,15 @@ export default function LossTrackingLineChart() { const chartData = useMemo(() => { const merged = {}; + + const filterStart = startDate ? startDate.substring(0, 7) : ''; + const filterEnd = endDate ? endDate.substring(0, 7) : ''; + filteredLines.forEach(line => { line.data.forEach(({ date, month, value }) => { - const withinRange = (!startDate || date >= startDate) && (!endDate || date <= endDate); + const withinRange = + (!filterStart || date >= filterStart) && (!filterEnd || date <= filterEnd); + if (withinRange) { if (!merged[month]) merged[month] = { month }; merged[month][`${line.year}-${line.material}`] = value; @@ -272,7 +273,7 @@ export default function LossTrackingLineChart() {
setStartDate(e.target.value)} /> @@ -289,7 +290,7 @@ export default function LossTrackingLineChart() {
setEndDate(e.target.value)} /> diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.module.css b/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.module.css index f66d850d0a..f4009169df 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.module.css @@ -77,11 +77,9 @@ /* ---------- Filters (grid: one lane when space allows) ---------- */ .lossTrackingChartFilters { display: grid; - - /* Each item gets at least 220px; if space allows, they all sit on one row */ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem var(--space); - align-items: end; /* align baselines for inputs and button */ + align-items: end; background-color: var(--surface-muted); border: 1px solid var(--border-color); border-radius: var(--radius-sm); @@ -95,12 +93,11 @@ font-size: 0.95rem; color: var(--text-color); gap: 0.35rem; - min-width: 0; /* allow shrinking to column width */ + min-width: 0; } -/* Inputs */ .lossTrackingChartFilters select, -.lossTrackingChartFilters input[type="month"] { +.lossTrackingChartFilters [type="date"] { padding: 0.55rem 0.7rem; border: 1px solid var(--border-color); border-radius: 8px; @@ -122,16 +119,21 @@ padding-right: 2.45rem !important; } -.lossTrackingChartFilters input[type="month"] { +.lossTrackingChartFilters [type="date"] { color-scheme: light; } -.darkMode .lossTrackingChartFilters input[type="month"] { +.darkMode .lossTrackingChartFilters [type="date"] { color-scheme: dark; } -.lossTrackingChartFilters input[type="month"]::-webkit-calendar-picker-indicator { +.lossTrackingChartFilters input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; cursor: pointer; } @@ -156,13 +158,12 @@ } .lossTrackingChartFilters select:focus-visible, -.lossTrackingChartFilters input[type="month"]:focus-visible { +.lossTrackingChartFilters [type="date"]:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--ring-offset); } -/* Reset button — behaves like any grid item so it aligns in the same lane */ .resetBtn { padding: 0.6rem 1rem; font-size: 0.95rem; @@ -176,13 +177,16 @@ letter-spacing: 0.2px; transition: background-color 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease, color 0.15s ease; box-shadow: 0 1px 0 rgb(0 0 0 / 4%), 0 2px 8px rgb(0 0 0 / 8%); + place-self: end start; +} - /* IMPORTANT: no margin-left/auto and no order hacks */ - place-self: end start; /* align start like labels */ /* baseline alignment with inputs */ +.resetBtn:hover { + background-color: var(--reset-btn-hover); } -.resetBtn:hover { background-color: var(--reset-btn-hover); } -.resetBtn:active { transform: translateY(1px); } +.resetBtn:active { + transform: translateY(1px); +} .resetBtn:focus-visible { outline: none; @@ -195,7 +199,6 @@ box-shadow: none; } -/* Date range validation error — spans full grid width */ .dateRangeError { grid-column: 1 / -1; color: #e53935; @@ -204,9 +207,10 @@ padding: 0.15rem 0.1rem; } -/* Optional: on very narrow screens, make the button full width to match stacked inputs */ -@media (width <= 768px) { - .resetBtn { justify-self: stretch; } +@media (width <=768px) { + .resetBtn { + justify-self: stretch; + } .customLegend { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -217,7 +221,6 @@ .chartWrapper { width: 100%; - /* Responsive, predictable height for ResponsiveContainer (height="100%") */ --chart-height: clamp(320px, 42vh, 680px); height: var(--chart-height); @@ -225,15 +228,18 @@ border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem; - min-width: 0; /* let SVG measure correctly in flex/grid */ + min-width: 0; } -@media screen and (width >= 1440px) { - .chartWrapper { --chart-height: clamp(340px, 40vh, 720px); } +@media screen and (width >=1440px) { + .chartWrapper { + --chart-height: clamp(340px, 40vh, 720px); + } } -/* Recharts tweaks */ -.recharts-cartesian-grid line { stroke: var(--grid-color); } +.recharts-cartesian-grid line { + stroke: var(--grid-color); +} .customLegend { display: grid; @@ -260,11 +266,10 @@ flex: 0 0 auto; } -.legendItem > span:last-child { +.legendItem>span:last-child { white-space: nowrap; } -/* ---------- No data state ---------- */ .noDataMessage { display: flex; justify-content: center; @@ -281,30 +286,29 @@ transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } -/* --- Ultra-narrow phones: <= 400px --- */ -@media (width <= 400px) { +@media (width <=400px) { .lossTrackingChartFilters { - grid-template-columns: 1fr; /* force single column */ - gap: 0.6rem; /* slightly tighter spacing */ - padding: 0.75rem; /* reduce inner padding */ + grid-template-columns: 1fr; + gap: 0.6rem; + padding: 0.75rem; } .lossTrackingChartFilters label { - min-width: 0; /* allow shrink */ + min-width: 0; } .lossTrackingChartFilters select, - .lossTrackingChartFilters input[type="month"], + .lossTrackingChartFilters [type="date"], .resetBtn { - width: 100%; /* full width controls */ - box-sizing: border-box; /* respect padding/border */ + width: 100%; + box-sizing: border-box; } .resetBtn { - justify-self: stretch; /* no overflow due to intrinsic width */ + justify-self: stretch; } .customLegend { grid-template-columns: 1fr; } -} +} \ No newline at end of file