Skip to content

Commit a426cbd

Browse files
one-communityone-community
authored
Merge pull request #4640 from OneCommunityGlobal/Swathi_Fix_BM_Dashboard_Visibility_ReturnedLate_Chart
Swathi fix for bm dashboard visibility returned late chart
2 parents c1ca9cf + 0f5d7d6 commit a426cbd

3 files changed

Lines changed: 87 additions & 25 deletions

File tree

‎src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -247,17 +247,16 @@ export default function ReturnedLateChart() {
247247
<h1 className={darkMode ? 'text-white' : ''}>Percent of Tools Returned Late</h1>
248248
<div className={styles['returned-late-filters']}>
249249
<div className={styles['returned-late-filter-group']}>
250-
<label
251-
htmlFor="project-select"
252-
className={`${styles['returned-late-filter-label']} ${darkMode ? 'text-white' : ''}`}
253-
>
250+
<label htmlFor="project-select" className={`${styles['returned-late-filter-label']} `}>
254251
Project:
255252
</label>
256253
<select
257254
id="project-select"
258255
value={selectedProject}
259256
onChange={handleProjectChange}
260-
className={styles['returned-late-project-select']}
257+
className={`${styles['returned-late-project-select']} ${
258+
darkMode ? styles['background-dark'] : ''
259+
}`}
261260
>
262261
<option value="All">All Projects</option>
263262
{availableProjects.map(p => (
@@ -275,7 +274,6 @@ export default function ReturnedLateChart() {
275274
>
276275
Tools:
277276
</label>
278-
279277
<MultiSelect
280278
options={availableTools}
281279
value={selectedTools}
@@ -316,7 +314,9 @@ export default function ReturnedLateChart() {
316314
id="start-date-picker"
317315
selected={dateRange.startDate}
318316
onChange={handleStartDateChange}
319-
className={styles['returned-late-date-picker']}
317+
className={`${styles['returned-late-date-picker']} ${
318+
darkMode ? styles['background-dark'] : ''
319+
} `}
320320
/>
321321
</div>
322322
<div className={styles['returned-late-filter-group']}>
@@ -329,24 +329,40 @@ export default function ReturnedLateChart() {
329329
<DatePicker
330330
id="end-date-picker"
331331
selected={dateRange.endDate}
332+
minDate={dateRange.startDate}
332333
onChange={handleEndDateChange}
333-
className={styles['returned-late-date-picker']}
334+
className={`${styles['returned-late-date-picker']} ${
335+
darkMode ? styles['background-dark'] : ''
336+
}`}
334337
/>
335338
</div>
336339
</div>
337340
<div className={`${styles['returned-late-chart-container']} text-white`}>
338341
{loading && (
339-
<div className={`${styles['returned-late-loading']} ${darkMode ? 'text-white' : ''}`}>
342+
<div
343+
className={`${styles['returned-late-loading']} ${
344+
darkMode ? styles['background-dark'] : ''
345+
}`}
346+
>
340347
Loading...
341348
</div>
342349
)}
343350
{error && (
344-
<div className={`${styles['returned-late-error']} ${darkMode ? 'text-white' : ''}`}>
345-
{error}
351+
<div
352+
className={`${styles['returned-late-error']} ${
353+
darkMode ? styles['background-red'] : ''
354+
}`}
355+
>
356+
{/* {error} */}
357+
Unable to load the chart at this moment. Please try again later
346358
</div>
347359
)}
348360
{!loading && !error && chartData.labels.length === 0 && (
349-
<div className={`${styles['returned-late-no-data']} ${darkMode ? 'text-white' : ''}`}>
361+
<div
362+
className={`${styles['returned-late-no-data']} ${
363+
darkMode ? styles['background-dark'] : ''
364+
}`}
365+
>
350366
No data for selected filters
351367
</div>
352368
)}

‎src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css‎

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,50 @@
8080
font-style: italic;
8181
}
8282

83+
.background-dark {
84+
background-color: #2a3f5f;
85+
border: 1px solid #555;
86+
}
87+
.background-red {
88+
background-color: #ff4d4f;
89+
}
90+
91+
:global(.dark.rmsc ) {
92+
--rmsc-border: none;
93+
--rmsc-bg: none;
94+
border:transparent;
95+
}
96+
97+
:global(.dark.rmsc .dropdown-heading) {
98+
background-color: #2a3f5f;
99+
color: #fff;
100+
border: 1px solid #555;
101+
border-radius: 4px;
102+
overflow: hidden;
103+
}
104+
105+
:global(.dark.rmsc .select-item:hover) {
106+
background-color: #253246;
107+
}
108+
109+
:global(.dark.rmsc .select-item.selected) {
110+
background-color: #253246;
111+
}
112+
:global(.rmsc.dark .options) {
113+
background-color: #2a3f5f;
114+
color: #fff;
115+
}
116+
117+
/* Search box */
118+
:global(.rmsc.dark .search) {
119+
background-color: #2a3f5f;
120+
color: #fff;
121+
}
122+
:global(.rmsc.dark .search input:focus) {
123+
background-color: #223653;
124+
}
125+
126+
83127
.returned-late-detail-backdrop {
84128
position: fixed;
85129
inset: 0;
@@ -96,13 +140,13 @@
96140
padding: 20px;
97141
z-index: 2147483647;
98142
box-shadow: -4px 0 10px rgba(0, 0, 0, 0.4);
99-
background: #ffffff;
100-
color: #111111;
143+
background: #fff;
144+
color: #111;
101145
}
102146

103147
.dark-panel {
104148
background: #0b2545;
105-
color: #ffffff;
149+
color: #fff;
106150
}
107151

108152
.returned-late-detail-close {
@@ -115,63 +159,63 @@
115159
}
116160
:global(html.dark-mode) .returned-late-chart h1,
117161
:global(body.dark-mode) .returned-late-chart h1 {
118-
color: #ffffff;
162+
color: #fff;
119163
}
120164

121165
:global(html.dark-mode) .returned-late-filter-label,
122166
:global(body.dark-mode) .returned-late-filter-label {
123-
color: #ffffff;
167+
color: #fff;
124168
}
125169

126170
:global(html.dark-mode) .returned-late-project-select,
127171
:global(body.dark-mode) .returned-late-project-select {
128172
background-color: #1e293b;
129-
color: #ffffff;
173+
color: #fff;
130174
border: 1px solid #475569;
131175
}
132176

133177
:global(html.dark-mode) .returned-late-project-select option,
134178
:global(body.dark-mode) .returned-late-project-select option {
135179
background-color: #1e293b;
136-
color: #ffffff;
180+
color: #fff;
137181
}
138182

139183
:global(html.dark-mode) .returned-late-date-picker,
140184
:global(body.dark-mode) .returned-late-date-picker {
141185
background-color: #1e293b;
142-
color: #ffffff;
186+
color: #fff;
143187
border: 1px solid #475569;
144188
}
145189

146190
:global(html.dark-mode) .returned-late-tools-select :global(.dropdown-container),
147191
:global(body.dark-mode) .returned-late-tools-select :global(.dropdown-container) {
148192
background-color: #1e293b;
149-
color: #ffffff;
193+
color: #fff;
150194
border: 1px solid #475569;
151195
}
152196

153197
:global(html.dark-mode) .returned-late-tools-select :global(.dropdown-heading),
154198
:global(body.dark-mode) .returned-late-tools-select :global(.dropdown-heading) {
155-
color: #ffffff;
199+
color: #fff;
156200
}
157201

158202
:global(html.dark-mode) .returned-late-tools-select :global(.select-panel),
159203
:global(body.dark-mode) .returned-late-tools-select :global(.select-panel) {
160204
background-color: #1e293b;
161-
color: #ffffff;
205+
color: #fff;
162206
border: 1px solid #475569;
163207
}
164208

165209
:global(html.dark-mode) .returned-late-tools-select :global(.select-panel) :global(input),
166210
:global(body.dark-mode) .returned-late-tools-select :global(.select-panel) :global(input) {
167211
background-color: #0f172a;
168-
color: #ffffff;
212+
color: #fff;
169213
border: 1px solid #475569;
170214
}
171215

172216
:global(html.dark-mode) .returned-late-tools-select :global(.select-item),
173217
:global(body.dark-mode) .returned-late-tools-select :global(.select-item) {
174-
color: #ffffff;
218+
color: #fff;
175219
}
176220

177221
:global(html.dark-mode) .returned-late-tools-select :global(.select-item:hover),

‎src/utils/URL.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,8 @@ export const ENDPOINTS = {
379379
BM_INJURY_ISSUE: `${APIEndpoint}/bm/issues`,
380380
BM_INJURY_SEVERITY: `${APIEndpoint}/bm/injuries/severity-by-project`,
381381
BM_RENTAL_CHART: `${APIEndpoint}/bm/rentalChart`,
382+
BM_TOOLS_RETURNED_LATE: `${APIEndpoint}/bm/tools/returned-late`,
383+
BM_TOOLS_RETURNED_LATE_PROJECTS: `${APIEndpoint}/bm/tools/returned-late/projects`,
382384

383385
// Project cost tracking endpoints
384386
PROJECT_COST_IDS: `${APIEndpoint}/bm/projects-cost/ids`,

0 commit comments

Comments
 (0)