From cd4cef955a2e767ab3dd4614c7166419e07d2585 Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Thu, 6 Nov 2025 14:02:50 -0600 Subject: [PATCH 1/4] Make the select scrollable, set a max width for the graph --- .../TotalMaterialCostPerProject.jsx | 27 ++++++++++++++----- .../TotalMaterialCostPerProject.module.css | 11 -------- src/utils/URL.js | 2 +- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx index fef0c8496a..b3bccadf93 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx @@ -83,15 +83,15 @@ function TotalMaterialCostPerProject() { const fetchData = async () => { setDataLoaded(false); try { - const projectsResponse = await axios.get(ENDPOINTS.BM_PROJECTS_LIST_FOR_MATERIALS_COST); + const projectsResponse = await axios.get(ENDPOINTS.BM_PROJECTS); if (projectsResponse.status < 200 || projectsResponse.status >= 300) { throw new Error( `API request to get projects list failed with status ${projectsResponse.status}`, ); } const projectsFilteredData = projectsResponse.data.map(project => ({ - value: project.projectId, - label: project.projectName, + value: project._id, + label: project.name, })); setSelectedProjects(projectsFilteredData); setAllProjects(projectsFilteredData); @@ -103,7 +103,7 @@ function TotalMaterialCostPerProject() { ); } const projectCostsData = costResponse.data.reduce((acc, item) => { - acc[item.projectId] = item.totalCostK; + acc[item.project] = item.totalCostK; return acc; }, {}); setProjectCosts(projectCostsData); @@ -145,6 +145,8 @@ function TotalMaterialCostPerProject() { minHeight: 38, boxShadow: 'none', borderRadius: 8, + overflowX: 'auto', + whiteSpace: 'nowrap', }), menu: base => ({ ...base, @@ -183,6 +185,8 @@ function TotalMaterialCostPerProject() { borderRadius: 6, fontSize: 12, marginRight: 4, + maxWidth: 'none', + flexShrink: 0, }), multiValueLabel: base => ({ ...base, @@ -200,12 +204,24 @@ function TotalMaterialCostPerProject() { borderRadius: 4, padding: 2, }), + valueContainer: provided => ({ + ...provided, + overflowX: 'auto', + flexWrap: 'nowrap', + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + whiteSpace: 'nowrap', + maxWidth: '100%', + position: 'relative', + scrollbarWidth: 'thin', + }), }), [darkMode], ); return ( -
+
Total Material Cost Per Project
@@ -219,7 +235,6 @@ function TotalMaterialCostPerProject() { value={selectedProjects} onChange={setSelectedProjects} classNamePrefix="select" - className={styles.selectValueContainer} styles={selectStyles} menuPortalTarget={document.body} menuPosition="fixed" diff --git a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.module.css b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.module.css index 7e92ca8bc9..fdf23bbfa2 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.module.css @@ -9,17 +9,6 @@ color: #ffffff; /* White for dark mode */ } -.selectValueContainer { - display: flex; - align-items: center; - justify-content: flex-start; - overflow-x: auto; - white-space: nowrap; - flex-wrap: nowrap; - max-width: 100%; - position: relative; -} - .selectValueContainerDark { background-color: var(--section-bg); diff --git a/src/utils/URL.js b/src/utils/URL.js index 7e9b348169..7f2b72d173 100644 --- a/src/utils/URL.js +++ b/src/utils/URL.js @@ -268,7 +268,7 @@ POPULARITY_ROLES: `${APIEndpoint}/popularity/roles`, BM_PROJECTS_WITH_LOCATION: `${APIEndpoint}/bm/projects/location`, BM_PROJECT_EXPENSE_BY_ID: projectId => `${APIEndpoint}/bm/project/${projectId}/expenses`, BM_PROJECT_BY_ID: projectId => `${APIEndpoint}/bm/project/${projectId}`, - BM_PROJECTS_LIST_FOR_MATERIALS_COST: `${APIEndpoint}/totalProjects `, + BM_PROJECT_MATERIALS_COST: `${APIEndpoint}/material-costs`, BM_UPDATE_MATERIAL: `${APIEndpoint}/bm/updateMaterialRecord`, BM_UPDATE_MATERIAL_BULK: `${APIEndpoint}/bm/updateMaterialRecordBulk`, From 3ad6386c15f48cee4fa3f53f43925ae4f28f8293 Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Thu, 6 Nov 2025 14:15:32 -0600 Subject: [PATCH 2/4] Make the select scrollable, set a max width for the graph, update the test to fit with the api --- .../__tests__/TotalMaterialCostPerProject.test.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/__tests__/TotalMaterialCostPerProject.test.jsx b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/__tests__/TotalMaterialCostPerProject.test.jsx index 18ac95ea19..526f45f2dd 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/__tests__/TotalMaterialCostPerProject.test.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/__tests__/TotalMaterialCostPerProject.test.jsx @@ -32,8 +32,8 @@ const store = mockStore({ }); const mockProjects = [ - { projectId: 1, projectName: 'Project A' }, - { projectId: 2, projectName: 'Project B' }, + { _id: 1, name: 'Project A' }, + { _id: 2, name: 'Project B' }, ]; const mockCosts = [ @@ -44,7 +44,7 @@ const mockCosts = [ describe('TotalMaterialCostPerProject', () => { beforeEach(() => { axios.get.mockImplementation(url => { - if (url.includes('/totalProjects')) { + if (url.includes('/bm/projects')) { return Promise.resolve({ data: mockProjects }); } if (url.includes('/material-costs')) { @@ -129,7 +129,7 @@ describe('TotalMaterialCostPerProject', () => { it('shows error toast when failed to load projects from api', async () => { axios.get.mockImplementation(url => { - if (url.includes('/totalProjects')) { + if (url.includes('/bm/projects')) { return Promise.reject(new Error('API error')); } if (url.includes('/material-costs')) { @@ -147,7 +147,7 @@ describe('TotalMaterialCostPerProject', () => { it('shows error toast when failed to load projects cost from api', async () => { axios.get.mockImplementation(url => { - if (url.includes('/totalProjects')) { + if (url.includes('/bm/projects')) { return Promise.resolve({ data: mockProjects }); } if (url.includes('/material-costs')) { From 3021f4bebe2764705942011c5204451696851019 Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Thu, 6 Nov 2025 14:32:04 -0600 Subject: [PATCH 3/4] Make the select scrollable, set a max width for the graph, update the test to fit with the api --- src/components/TeamMemberTasks/TeamMemberTask.jsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx index 495ab4351b..460986be04 100644 --- a/src/components/TeamMemberTasks/TeamMemberTask.jsx +++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx @@ -185,17 +185,6 @@ const TeamMemberTask = React.memo( setSelectedTaskForChangeLog(null); }; - /** - const handleReportClick = (event, to) => { - if (event.metaKey || event.ctrlKey || event.button === 1) { - return; - } - - event.preventDefault(); // prevent full reload - history.push(`/peoplereport/${to}`); - }; - */ - const openDetailModal = request => { dispatch(showTimeOffRequestModal(request)); }; From 1092fee1116ee99a983ac49ccb5a1fe28c1bd03d Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Thu, 6 Nov 2025 17:09:35 -0600 Subject: [PATCH 4/4] fixed dark mode and mobile responsiveness for weekly project summary --- .../TotalMaterialCostPerProject.jsx | 4 +-- .../WeeklyProjectSummary.jsx | 4 +-- .../WeeklyProjectSummary.module.css | 31 ++++++++----------- 3 files changed, 17 insertions(+), 22 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx index b3bccadf93..e65af7f52f 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.jsx @@ -214,14 +214,14 @@ function TotalMaterialCostPerProject() { whiteSpace: 'nowrap', maxWidth: '100%', position: 'relative', - scrollbarWidth: 'thin', + scrollbarWidth: 'none', }), }), [darkMode], ); return ( -
+
Total Material Cost Per Project
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx index b5558bee82..39c7c15113 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx @@ -247,7 +247,7 @@ function WeeklyProjectSummary() { { title: 'Material Consumption', key: 'Material Consumption', - className: 'large', + className: 'full', content: [1, 2, 3].map((_, index) => { let content; if (index === 1) { @@ -474,7 +474,7 @@ function WeeklyProjectSummary() { }; return ( -
+
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css index 9bc341b671..3b0f05d18b 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css +++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css @@ -12,10 +12,6 @@ padding: 0; } -.weeklyProjectSummaryDashboardContainer { - width: 100%; - background: var(--bg-color); -} .weeklyProjectSummaryHeaderWrapper { background-color: var(--bg-color) !important; @@ -120,12 +116,6 @@ } /* ---------------- CARDS ---------------- */ -.projectStatusGrid { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(2, auto); - gap: 10px; -} .weeklyProjectSummaryCard { background: var(--card-bg); @@ -223,7 +213,7 @@ .weeklyProjectSummaryDashboardCategoryContent { padding: 15px; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; border-top: 1px solid var(--card-shadow); animation: fadeIn 0.3s ease-in-out; @@ -284,19 +274,22 @@ color: var(--text-color); } -.weeklySummaryShareBtn { +/* .weeklySummaryShareBtn { background-color: var(--button-bg) !important; } .weeklySummaryShareBtn:hover { background-color: var(--button-hover) !important; -} +} */ /* First, set a max-height and make it scrollable */ .quantityOfMaterialsUsedChartTooltip { max-height: 80vh !important; /* Limit to 80% of viewport height */ overflow-y: auto !important; /* Enable vertical scrolling */ padding-right: 15px !important; /* Add some padding for the scrollbar */ + /* Support for Firefox */ + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); } /* Style the scrollbar for better visibility */ @@ -314,11 +307,7 @@ border-radius: 4px; } -/* Support for Firefox */ -.quantityOfMaterialsUsedChartTooltip { - scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); -} + /* Additional adjustments for dark mode if needed */ .darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track { @@ -419,6 +408,12 @@ max-width: 1600px; margin: auto; } +/* .projectStatusGrid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(2, auto); + gap: 10px; +} */ /* ---------------- OVAL STATUS BUTTON ---------------- */ .weeklyStatusButton {