Skip to content

Radia Rental Tracking and Percent of Tools Returned Late UI FIx and merger with Dev #5354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Radia731 wants to merge 4 commits into
base: development
Choose a base branch
from
Open

Radia Rental Tracking and Percent of Tools Returned Late UI FIx and merger with Dev #5354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
622a2e4
Add Rental Tracking dropdown section to Total Construction Dashboard
Dec 16, 2025
6a15e6d
Fix dark mode dropdown and input text visibility in Returned Late chart
Dec 17, 2025
0012fb2
fixed some UI issues
Radia731 Jun 21, 2026
9239176
fix: resolve merge conflicts with development
Radia731 Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23,415 changes: 23,415 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

57 changes: 33 additions & 24 deletions src/components/BMDashboard/RentalChart/RentalChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@
}, [chartType, selectedProject, selectedTool, dateRange, groupBy, rawData]);

const options = useMemo(
() => ({

Check failure on line 242 in src/components/BMDashboard/RentalChart/RentalChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 16 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ7o9me7upWwgW3Yp4eO&open=AZ7o9me7upWwgW3Yp4eO&pullRequest=5354
responsive: true,
maintainAspectRatio: false,
backgroundColor: darkMode ? '#1b2a41' : '#ffffff',
Expand All @@ -248,6 +248,7 @@
position: 'top',
labels: {
color: darkMode ? '#e0e0e0' : '#333333',
color: darkMode ? '#e0e0e0' : '#333333',

Check warning on line 251 in src/components/BMDashboard/RentalChart/RentalChart.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Duplicate name 'color'. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZ7o9me7upWwgW3Yp4eP&open=AZ7o9me7upWwgW3Yp4eP&pullRequest=5354
},
},
title: {
Expand Down Expand Up @@ -393,19 +394,21 @@
const renderChartContent = () => {
if (loading) {
return (
<div className={`${styles.loading} ${darkMode ? styles.textLight : ''}`}>
<div className={`${styles.loading} ${darkMode ? styles['text-light'] : ''}`}>
Loading Chart Data....
</div>
);
}

if (error) {
return <div className={`${styles.error} ${darkMode ? styles.textLight : ''}`}>{error}</div>;
return (
<div className={`${styles.error} ${darkMode ? styles['text-light'] : ''}`}>{error}</div>
);
}

if (chartData.datasets.length === 0) {
return (
<div className={`${styles.noData} ${darkMode ? styles.textLight : ''}`}>
<div className={`${styles['no-data']} ${darkMode ? styles['text-light'] : ''}`}>
No data available for the selected filters
</div>
);
Expand All @@ -415,35 +418,39 @@
};

return (
<div className={`${styles.rentalContainer} ${darkMode ? styles.darkMode : ''}`}>
<h1 className={darkMode ? styles.textLight : ''}>Rental Cost Over Time</h1>
<div className={`${styles['rental-container']} ${darkMode ? styles['dark-mode'] : ''}`}>
<h1 className={darkMode ? styles['text-light'] : ''}>Rental Cost Over Time</h1>

<div className={styles.chartFilters}>
<div className={`${styles.filterRow} ${styles.topFilters}`}>
<div className={styles.filterGroup}>
<label htmlFor="chart-type" className={darkMode ? styles.textLight : ''}>
<div className={styles['chart-filters']}>
<div className={`${styles['filter-row']} ${styles['top-filters']}`}>
<div className={styles['filter-group']}>
<label htmlFor="chart-type" className={darkMode ? styles['text-light'] : ''}>
Display:{' '}
</label>
<select
id="chart-type"
value={chartType}
onChange={handleTypeChange}
className={`${styles.rentalChartSelect} ${darkMode ? styles.darkSelect : ''}`}
className={`${styles['rental-chart-select']} ${
darkMode ? styles['dark-select'] : ''
}`}
>
<option value="cost">Total Rental Cost</option>
<option value="percentage">% of Materials Cost</option>
</select>
</div>

<div className={styles.filterGroup}>
<label htmlFor="project-filter" className={darkMode ? styles.textLight : ''}>
<div className={styles['filter-group']}>
<label htmlFor="project-filter" className={darkMode ? styles['text-light'] : ''}>
Project:{' '}
</label>
<select
id="project-filter"
value={selectedProject}
onChange={handleProjectChange}
className={`${styles.rentalChartSelect} ${darkMode ? styles.darkSelect : ''}`}
className={`${styles['rental-chart-select']} ${
darkMode ? styles['dark-select'] : ''
}`}
>
<option value="All">All Projects</option>
{availableProjects.map(projectId => (
Expand All @@ -454,16 +461,18 @@
</select>
</div>

<div className={styles.filterGroup}>
<label htmlFor="tool-filter" className={darkMode ? styles.textLight : ''}>
<div className={styles['filter-group']}>
<label htmlFor="tool-filter" className={darkMode ? styles['text-light'] : ''}>
Tool:{' '}
</label>
<select
id="tool-filter"
value={selectedTool}
onChange={handleToolChange}
disabled={groupBy === 'project' && selectedProject !== 'All'}
className={`${styles.rentalChartSelect} ${darkMode ? styles.darkSelect : ''}`}
className={`${styles['rental-chart-select']} ${
darkMode ? styles['dark-select'] : ''
}`}
>
<option value="All">All Tools</option>
{availableTools.map(tool => (
Expand All @@ -475,9 +484,9 @@
</div>
</div>

<div className={`${styles.filterRow} ${styles.dateFilters}`}>
<div className={styles.filterGroup}>
<label style={{ marginRight: '8px' }} className={darkMode ? styles.textLight : ''}>
<div className={`${styles['filter-row']} ${styles['date-filters']}`}>
<div className={styles['filter-group']}>
<label className={`${darkMode ? styles['text-light'] : ''} ${styles['date-label']}`}>
From:{' '}
</label>
<DatePicker
Expand All @@ -490,12 +499,12 @@
showYearDropdown
showMonthDropdown
dropdownMode="select"
className={`${styles.datePicker} ${darkMode ? styles.darkDatePicker : ''}`}
className={`${styles['date-picker']} ${darkMode ? styles['dark-date-picker'] : ''}`}
/>
</div>

<div className={styles.filterGroup}>
<label style={{ marginRight: '10px' }} className={darkMode ? styles.textLight : ''}>
<div className={`${styles['filter-group']} ${styles['date-to-group']}`}>
<label className={`${darkMode ? styles['text-light'] : ''} ${styles['date-label']}`}>
To:{' '}
</label>
<DatePicker
Expand All @@ -509,13 +518,13 @@
showYearDropdown
showMonthDropdown
dropdownMode="select"
className={`${styles.datePicker} ${darkMode ? styles.darkDatePicker : ''}`}
className={`${styles['date-picker']} ${darkMode ? styles['dark-date-picker'] : ''}`}
/>
</div>
</div>
</div>

<div className={`${styles.chartWrapper} ${darkMode ? styles.darkChart : styles.lightChart}`}>
<div className={`${styles['chart-wrapper']} ${darkMode ? styles['dark-chart'] : ''}`}>
{renderChartContent()}
</div>
</div>
Expand Down
Loading
Loading