Julia - Integrate the Frontend with Backend for Material Graph

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,
@@ -165,14 +167,12 @@ function TotalMaterialCostPerProject() {
       }),
       option: (base, state) => ({
         ...base,
-        backgroundColor: state.isSelected
-          ? '#0d55b3'
-          : state.isFocused
-          ? '#0d55b3'
-          : darkMode
-          ? '#22272e'
-          : '#fff',
+        backgroundColor: state.isSelected ? '#0d55b3' : darkMode ? '#22272e' : '#fff',
         color: state.isSelected ? '#fff' : darkMode ? '#fff' : '#232323',
+        ':hover': {
+          color: '#fff',
+          backgroundColor: '#0d55b3',
+        },
         fontSize: 13,
         padding: '10px 16px',
         cursor: 'pointer',
@@ -183,6 +183,8 @@ function TotalMaterialCostPerProject() {
         borderRadius: 6,
         fontSize: 12,
         marginRight: 4,
+        maxWidth: 'none',
+        flexShrink: 0,
       }),
       multiValueLabel: base => ({
         ...base,
@@ -200,6 +202,18 @@ 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: 'none',
+      }),
     }),
     [darkMode],
   );
@@ -219,7 +233,6 @@ function TotalMaterialCostPerProject() {
               value={selectedProjects}
               onChange={setSelectedProjects}
               classNamePrefix="select"
-              className={styles.selectValueContainer}
               styles={selectStyles}
               menuPortalTarget={document.body}
               menuPosition="fixed"

src/components/BMDashboard/WeeklyProjectSummary/TotalMaterialCostPerProject/TotalMaterialCostPerProject.module.css

@@ -9,17 +9,6 @@
   color: var(--text-color, #ffffff);
 }
 
-.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);

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')) {

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx

@@ -249,7 +249,7 @@ function WeeklyProjectSummary() {
       {
         title: 'Material Consumption',
         key: 'Material Consumption',
-        className: 'large',
+        className: 'full',
         content: [1, 2, 3].map((_, index) => {
           let content;
           if (index === 1) {

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css

@@ -219,7 +219,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;
@@ -406,6 +406,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 {

src/utils/URL.js

@@ -284,7 +284,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`,