Skip to content

Commit cf35141

Browse files
aseemdeshmukhaseemdeshmukh
committed
Merge remote-tracking branch 'origin' into aseem-jobposting-analytics-custom-date-filter-state-handling
2 parents 246b9f0 + 33ef443 commit cf35141

28 files changed

Lines changed: 3812 additions & 923 deletions

‎git_log.txt‎

2.32 KB
Binary file not shown.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"leaflet": "^1.9.4",
7171
"leaflet.heat": "^0.2.0",
7272
"leaflet.markercluster": "^1.5.3",
73-
"lodash": "^4.17.21",
73+
"lodash": "^4.17.23",
7474
"lucide-react": "^0.484.0",
7575
"micromatch": "^4.0.8",
7676
"moment": "^2.30.1",

‎public/index.css‎

Lines changed: 94 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -194,24 +194,6 @@ body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
194194
color: #ffffff !important;
195195
}
196196

197-
body.dark-mode .modal-content,
198-
body.bm-dashboard-dark .modal-content {
199-
background-color: #2e5061;
200-
color: #ffffff !important;
201-
}
202-
203-
body.dark-mode .modal-header,
204-
body.bm-dashboard-dark .modal-header {
205-
background-color: #3a506b;
206-
border-color: #4a6072;
207-
color: #ffffff !important;
208-
}
209-
210-
body.dark-mode .modal-title,
211-
body.bm-dashboard-dark .modal-title {
212-
color: #ffffff !important;
213-
}
214-
215197
body.dark-mode .modal-body,
216198
body.bm-dashboard-dark .modal-body {
217199
color: #ffffff !important;
@@ -368,4 +350,97 @@ body.bm-dashboard-dark .page-item.active .page-link {
368350
.tab-content {
369351
background-color: transparent;
370352
border: none;
371-
}
353+
}
354+
355+
/* Update these sections in your index.css */
356+
357+
/* Explicit targeting for all input types and selects */
358+
body.dark-mode .form-control,
359+
body.bm-dashboard-dark .form-control,
360+
body.dark-mode select,
361+
body.bm-dashboard-dark select,
362+
body.dark-mode input[type="text"] {
363+
background-color: #1e293b !important; /* Darker navy for input fields */
364+
color: #ffffff !important;
365+
border: 1px solid #334155 !important;
366+
}
367+
368+
/* Fix for the Project and Tool dropdown arrows and internal padding */
369+
body.dark-mode select.form-control,
370+
body.bm-dashboard-dark select.form-control {
371+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
372+
background-repeat: no-repeat !important;
373+
background-position: right 0.75rem center !important;
374+
background-size: 16px 12px !important;
375+
}
376+
377+
/* Ensure placeholder text is visible but muted */
378+
body.dark-mode .form-control::placeholder {
379+
color: #94a3b8 !important;
380+
}
381+
382+
/* Styling for the options inside the dropdowns */
383+
body.dark-mode option,
384+
body.bm-dashboard-dark option {
385+
background-color: #1e293b !important;
386+
color: #ffffff !important;
387+
}
388+
389+
/* GLOBAL OVERRIDE: This will fix all modals in the project at once */
390+
body.dark-mode .modal-content,
391+
body.bm-dashboard-dark .modal-content {
392+
background-color: #1b2a41 !important;
393+
border: 1px solid #2e3d55 !important;
394+
color: #ffffff !important;
395+
}
396+
397+
body.dark-mode .modal-header,
398+
body.dark-mode .modal-body,
399+
body.dark-mode .modal-footer,
400+
body.bm-dashboard-dark .modal-header,
401+
body.bm-dashboard-dark .modal-body,
402+
body.bm-dashboard-dark .modal-footer {
403+
background-color: #1b2a41 !important;
404+
color: #ffffff !important;
405+
border-color: #2e3d55 !important;
406+
}
407+
408+
409+
/* Force Project and Tool dropdowns to stay dark */
410+
body.dark-mode .form-control,
411+
body.dark-mode select,
412+
body.dark-mode input {
413+
background-color: #1e293b !important;
414+
color: #ffffff !important;
415+
border: 1px solid #334155 !important;
416+
}
417+
418+
/* Fixes the white dropdown arrow issues */
419+
body.dark-mode select.form-control {
420+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
421+
}
422+
423+
/* index.css */
424+
425+
/* Applied to all modals globally to ensure differentiation */
426+
body.dark-mode .modal-header,
427+
body.bm-dashboard-dark .modal-header {
428+
background-color: #24344d !important; /* Slightly lighter than the body #1b2a41 */
429+
border-bottom: 1px solid #334155 !important; /* Prominent separator line */
430+
color: #ffffff !important;
431+
padding: 1rem 1.5rem;
432+
}
433+
434+
/* Ensure the title inside stands out */
435+
body.dark-mode .modal-title,
436+
body.bm-dashboard-dark .modal-title {
437+
font-weight: 600;
438+
letter-spacing: 0.5px;
439+
}
440+
body.dark-mode .modal-content .table thead th {
441+
background-color: #2d3d5a !important; /* Distinct table header color */
442+
color: #ffffff !important;
443+
border-bottom: 2px solid #334155 !important;
444+
font-size: 0.85rem;
445+
letter-spacing: 1px;
446+
}

‎src/components/BMDashboard/ItemList/ItemListView.module.css‎

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,12 @@ table td {
112112
color: #e8edf4;
113113
}
114114

115-
.darkMode .selectInput input,
116-
.darkMode .selectInput select {
117-
background-color: #2a3f5f;
118-
color: #e8edf4;
119-
border: 1px solid #3f5269;
115+
116+
/* RESET selects per theme — REQUIRED */
117+
.lightTheme .selectInput select {
118+
background-color: #ffffff;
119+
color: #111827;
120+
border-color: #d1d5db;
120121
}
121122

122123
.darkMode .selectInput input::placeholder {
@@ -372,3 +373,88 @@ table td {
372373
.lightDatePickerPopper .react-datepicker__triangle {
373374
display: none;
374375
}
376+
377+
.filterSelect {
378+
height: 40px;
379+
padding: 0 0.75rem;
380+
border-radius: 4px;
381+
font-size: 0.9rem;
382+
border: 1px solid transparent;
383+
appearance: none;
384+
}
385+
386+
.darkTheme .filterSelect {
387+
background-color: #1e293b;
388+
color: #e5e7eb;
389+
border-color: #334155;
390+
}
391+
.darkTheme .filterSelect option {
392+
background-color: #1e293b;
393+
color: #e5e7eb;
394+
}
395+
396+
.lightTheme .filterSelect option {
397+
background-color: #ffffff;
398+
color: #111827;
399+
}
400+
.lightTheme .filterSelect:focus {
401+
outline: none;
402+
border-color: #2563eb;
403+
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
404+
}
405+
406+
.darkTheme .filterSelect:focus {
407+
outline: none;
408+
border-color: #3b82f6;
409+
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
410+
}
411+
412+
.lightTheme .selectInput select option {
413+
background-color: #ffffff;
414+
color: #111827;
415+
}
416+
417+
.darkTheme .selectInput select option {
418+
background-color: #1e293b;
419+
color: #e5e7eb;
420+
}
421+
422+
423+
/* Dark theme selects */
424+
.itemsListContainer.darkTheme select {
425+
background-color: #1e293b;
426+
color: #e5e7eb;
427+
border-color: #334155;
428+
}
429+
430+
/* Light theme selects */
431+
.itemsListContainer.lightTheme select {
432+
background-color: #ffffff;
433+
color: #111827;
434+
border-color: #d1d5db;
435+
}
436+
/* ===========================
437+
SELECT FOCUS (AUTHORITATIVE)
438+
=========================== */
439+
440+
/* Base select reset */
441+
.selectInput select {
442+
outline: none;
443+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
444+
}
445+
446+
/* LIGHT MODE focus */
447+
.itemsListContainer.lightTheme .selectInput select:focus {
448+
border-color: #2563eb !important; /* blue-600 */
449+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
450+
background-color: #ffffff !important;
451+
color: #111827 !important;
452+
}
453+
454+
/* DARK MODE focus */
455+
.itemsListContainer.darkTheme .selectInput select:focus {
456+
border-color: #2563eb;
457+
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
458+
background-color: #1e293b !important;
459+
color: #e5e7eb !important;
460+
}

‎src/components/BMDashboard/ItemList/SelectForm.jsx‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,71 @@ export default function SelectForm({
55
items,
66
setSelectedProject,
77
setSelectedItem,
8-
setSelectedCondition,
9-
setSelectedToolStatus,
8+
selectedProject, // optional (controlled)
9+
selectedItem, // optional (controlled)
10+
darkStyle,
1011
}) {
1112
let projectsSet = [];
1213
if (items.length) {
1314
projectsSet = [...new Set(items.map(el => el.project?.name))];
1415
}
1516

1617
const handleChange = event => {
17-
setSelectedItem('all');
18-
setSelectedCondition('all');
19-
setSelectedToolStatus('all');
20-
setSelectedProject(event.target.value);
18+
const newProject = event.target.value;
19+
20+
const toolsForNewProject =
21+
newProject === 'all'
22+
? [...new Set(items.map(m => m.itemType?.name).filter(Boolean))]
23+
: [
24+
...new Set(
25+
items
26+
.filter(mat => mat.project?.name === newProject && mat.itemType?.name)
27+
.map(m => m.itemType.name),
28+
),
29+
];
30+
31+
if (typeof setSelectedItem === 'function') {
32+
// If controlled, only reset tool if invalid under new project
33+
if (typeof selectedItem !== 'undefined') {
34+
if (selectedItem !== 'all' && !toolsForNewProject.includes(selectedItem)) {
35+
setSelectedItem('all');
36+
}
37+
} else {
38+
// Backwards compatibility (uncontrolled)
39+
setSelectedItem('all');
40+
}
41+
}
42+
43+
setSelectedProject(newProject);
2144
};
2245

46+
const isControlled = typeof selectedProject !== 'undefined';
47+
2348
return (
2449
<Form>
25-
<FormGroup className={`${styles.selectInput}`}>
50+
<FormGroup className={styles.selectInput}>
2651
<Label htmlFor="select-project">Project:</Label>
27-
<Input
52+
<select
2853
id="select-project"
2954
name="select-project"
30-
type="select"
55+
className={styles.filterSelect}
3156
onChange={handleChange}
3257
disabled={!items.length}
58+
value={isControlled ? selectedProject : undefined}
3359
>
3460
{items.length ? (
3561
<>
3662
<option value="all">All</option>
37-
{projectsSet.map(name => {
38-
return (
39-
<option key={name} value={name}>
40-
{name}
41-
</option>
42-
);
43-
})}
63+
{projectsSet.map(name => (
64+
<option key={name} value={name}>
65+
{name}
66+
</option>
67+
))}
4468
</>
4569
) : (
4670
<option>No data</option>
4771
)}
48-
</Input>
72+
</select>
4973
</FormGroup>
5074
</Form>
5175
);

‎src/components/BMDashboard/ItemList/SelectItem.jsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function SelectItem({
1111
selectedCondition,
1212
setSelectedCondition,
1313
label,
14+
isDarkMode,
1415
}) {
1516
let itemSet = [];
1617
if (items?.length) {
@@ -43,15 +44,19 @@ export default function SelectItem({
4344
}
4445
}
4546

47+
const darkStyle = isDarkMode
48+
? { backgroundColor: '#1e293b', color: '#e5e7eb', borderColor: '#334155' }
49+
: undefined;
50+
4651
return (
4752
<Form>
4853
<FormGroup className={styles.selectInput}>
49-
<Label htmlFor="select-material">{label ? `${label}:` : 'Material:'}</Label>
54+
<Label htmlFor="select-item">{label}:</Label>
5055

51-
<Input
56+
<select
5257
id="select-item"
5358
name="select-item"
54-
type="select"
59+
className={styles.filterSelect}
5560
value={
5661
label === 'Condition'
5762
? selectedCondition
@@ -61,13 +66,9 @@ export default function SelectItem({
6166
}
6267
onChange={e => {
6368
const val = e.target.value;
64-
if (label === 'Tool Status') {
65-
setSelectedToolStatus(val);
66-
} else if (label === 'Condition') {
67-
setSelectedCondition(val);
68-
} else {
69-
setSelectedItem(val);
70-
}
69+
if (label === 'Tool Status') setSelectedToolStatus(val);
70+
else if (label === 'Condition') setSelectedCondition(val);
71+
else setSelectedItem(val);
7172
}}
7273
disabled={!itemSet.length}
7374
>
@@ -85,7 +86,7 @@ export default function SelectItem({
8586
) : (
8687
<option key="no-data">No data</option>
8788
)}
88-
</Input>
89+
</select>
8990
</FormGroup>
9091
</Form>
9192
);

0 commit comments

Comments
 (0)