Skip to content

Commit 7822cdc

Browse files
one-communityone-community
authored
Merge pull request #3646 from OneCommunityGlobal/julia_total_material_cost_per_project_bar_chart
Julia - Create Total Material Cost Per Project Bar Chart
2 parents 907e602 + ee7d64d commit 7822cdc

8 files changed

Lines changed: 526 additions & 114 deletions

File tree

‎src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
.paid-labor-cost-container {
33
font-family: inherit;
44
padding: 10px;
5-
background-color: #fff;
65
border-radius: 8px;
76
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
87
}

‎src/components/BMDashboard/WeeklyProjectSummary/PaidLaborCost/PaidLaborCost.jsx‎

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -313,109 +313,106 @@ export default function PaidLaborCost() {
313313
};
314314

315315
return (
316-
<div>
317-
<div className={`paid-labor-cost-container ${darkMode ? 'dark-mode' : ''}`}>
318-
<h4 className="paid-labor-cost-title">Paid Labor Cost</h4>
319-
320-
{/* Loading indicator */}
321-
{loading ? (
322-
<div className="paid-labor-cost-loading">Loading data...</div>
323-
) : (
324-
<>
325-
{/* Filter Row */}
326-
<div className="paid-labor-cost-filters">
327-
{/* Task Filter */}
328-
<div className="paid-labor-cost-filter-group">
329-
<label className="paid-labor-cost-filter-label" htmlFor="task-filter">
330-
Tasks
331-
</label>
332-
<select
333-
id="task-filter"
334-
value={taskFilter}
335-
onChange={e => setTaskFilter(e.target.value)}
336-
className="paid-labor-cost-filter-select"
337-
>
338-
<option value="ALL">ALL</option>
339-
{taskOptions.map(option => (
340-
<option key={option.id} value={option.value}>
341-
{option.value}
342-
</option>
343-
))}
344-
</select>
345-
</div>
346-
347-
{/* Project Filter */}
348-
<div className="paid-labor-cost-filter-group">
349-
<label className="paid-labor-cost-filter-label" htmlFor="project-filter">
350-
Project
351-
</label>
352-
<select
353-
id="project-filter"
354-
value={projectFilter}
355-
onChange={e => setProjectFilter(e.target.value)}
356-
className="paid-labor-cost-filter-select"
357-
>
358-
<option value="All Projects">ALL</option>
359-
{projectOptions.map(option => (
360-
<option key={option.id} value={option.value}>
361-
{option.value}
362-
</option>
363-
))}
364-
</select>
365-
</div>
366-
367-
{/* Date Filter */}
368-
<div className="paid-labor-cost-filter-group">
369-
<label className="paid-labor-cost-filter-label" htmlFor="date-filter">
370-
Dates
371-
</label>
372-
<select
373-
id="date-filter"
374-
value={dateMode}
375-
onChange={e => {
376-
setDateMode(e.target.value);
377-
// Reset date range when the date filter changes
378-
setDateRange({ startDate: null, endDate: null });
379-
}}
380-
className="paid-labor-cost-filter-select"
381-
>
382-
{dateOptions.map(option => (
383-
<option key={option.id} value={option.value}>
384-
{option.label}
385-
</option>
386-
))}
387-
</select>
388-
</div>
316+
<div className={`paid-labor-cost-container ${darkMode ? 'dark-mode' : ''}`}>
317+
<h4 className="paid-labor-cost-title">Paid Labor Cost</h4>
318+
319+
{/* Loading indicator */}
320+
{loading ? (
321+
<div className="paid-labor-cost-loading">Loading data...</div>
322+
) : (
323+
<>
324+
{/* Filter Row */}
325+
<div className="paid-labor-cost-filters">
326+
{/* Task Filter */}
327+
<div className="paid-labor-cost-filter-group">
328+
<label className="paid-labor-cost-filter-label" htmlFor="task-filter">
329+
Tasks
330+
</label>
331+
<select
332+
id="task-filter"
333+
value={taskFilter}
334+
onChange={e => setTaskFilter(e.target.value)}
335+
className="paid-labor-cost-filter-select"
336+
>
337+
<option value="ALL">ALL</option>
338+
{taskOptions.map(option => (
339+
<option key={option.id} value={option.value}>
340+
{option.value}
341+
</option>
342+
))}
343+
</select>
344+
</div>
345+
346+
{/* Project Filter */}
347+
<div className="paid-labor-cost-filter-group">
348+
<label className="paid-labor-cost-filter-label" htmlFor="project-filter">
349+
Project
350+
</label>
351+
<select
352+
id="project-filter"
353+
value={projectFilter}
354+
onChange={e => setProjectFilter(e.target.value)}
355+
className="paid-labor-cost-filter-select"
356+
>
357+
<option value="All Projects">ALL</option>
358+
{projectOptions.map(option => (
359+
<option key={option.id} value={option.value}>
360+
{option.value}
361+
</option>
362+
))}
363+
</select>
389364
</div>
390365

391-
{/* Our Custom DateRangePicker shown in CUSTOM mode - replacing Airbnb DateRangePicker */}
392-
{dateMode === 'CUSTOM' && (
393-
<div className="paid-labor-cost-daterange-row">
394-
<PaidLaborCostDatePicker
395-
startDate={dateRange.startDate}
396-
endDate={dateRange.endDate}
397-
onDatesChange={handleDateRangeChange}
398-
minDate={new Date(1980, 0, 1)}
399-
placeholder="Select date range"
400-
/>
401-
</div>
402-
)}
403-
404-
{/* Chart Container */}
405-
<div className="paid-labor-cost-chart-scroll-wrapper">
406-
<div
407-
style={{
408-
width:
409-
tasksToInclude.length > 3 ? `${(tasksToInclude.length + 1) * 50}px` : '100%',
410-
height: '300px',
366+
{/* Date Filter */}
367+
<div className="paid-labor-cost-filter-group">
368+
<label className="paid-labor-cost-filter-label" htmlFor="date-filter">
369+
Dates
370+
</label>
371+
<select
372+
id="date-filter"
373+
value={dateMode}
374+
onChange={e => {
375+
setDateMode(e.target.value);
376+
// Reset date range when the date filter changes
377+
setDateRange({ startDate: null, endDate: null });
411378
}}
379+
className="paid-labor-cost-filter-select"
412380
>
413-
<Bar data={chartData} options={options} />
414-
</div>
381+
{dateOptions.map(option => (
382+
<option key={option.id} value={option.value}>
383+
{option.label}
384+
</option>
385+
))}
386+
</select>
387+
</div>
388+
</div>
389+
390+
{/* Our Custom DateRangePicker shown in CUSTOM mode - replacing Airbnb DateRangePicker */}
391+
{dateMode === 'CUSTOM' && (
392+
<div className="paid-labor-cost-daterange-row">
393+
<PaidLaborCostDatePicker
394+
startDate={dateRange.startDate}
395+
endDate={dateRange.endDate}
396+
onDatesChange={handleDateRangeChange}
397+
minDate={new Date(1980, 0, 1)}
398+
placeholder="Select date range"
399+
/>
400+
</div>
401+
)}
402+
403+
{/* Chart Container */}
404+
<div className="paid-labor-cost-chart-scroll-wrapper">
405+
<div
406+
style={{
407+
width: tasksToInclude.length > 3 ? `${(tasksToInclude.length + 1) * 50}px` : '100%',
408+
height: '300px',
409+
}}
410+
>
411+
<Bar data={chartData} options={options} />
415412
</div>
416-
</>
417-
)}
418-
</div>
413+
</div>
414+
</>
415+
)}
419416
</div>
420417
);
421418
}

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.total-material-cost-per-project-chart-title {
2+
font-size: medium;
3+
font-weight: bold;
4+
color: var(--text-color);
5+
margin-bottom: 10px;
6+
}
7+
8+
.total-material-cost-per-project .select__value-container {
9+
display: flex;
10+
align-items: center;
11+
justify-content: flex-start;
12+
overflow-x: auto;
13+
white-space: nowrap;
14+
flex-wrap: nowrap;
15+
max-width: 100%;
16+
scrollbar-width: none;
17+
-ms-overflow-style: none;
18+
position: relative;
19+
}
20+
21+
.total-material-cost-per-project .select__multi-value {
22+
max-width: none;
23+
flex-shrink: 0;
24+
}
25+
26+
.total-material-cost-per-project .select__multi-value__label {
27+
font-size: 12px;
28+
}
29+
30+
.total-material-cost-per-project .select__menu {
31+
font-size: 12px;
32+
}
33+
34+
/* Dark mode for the Select Dropdown */
35+
.dark-mode .material-cost-per-project-dropdown .select__control {
36+
background-color: var(--section-bg) !important;
37+
border-color: var(--section-title-bg) !important;
38+
color: var(--text-color) !important;
39+
}
40+
41+
.dark-mode .material-cost-per-project-dropdown .select__menu {
42+
background-color: var(--section-bg) !important;
43+
}
44+
45+
.dark-mode .material-cost-per-project-dropdown .select__option:hover {
46+
background-color: #0d55b3;
47+
}
48+
49+
.dark-mode .material-cost-per-project-dropdown .select__option--is-focused{
50+
background-color: #0d55b3;
51+
}
52+
53+
.dark-mode .material-cost-per-project-dropdown .select__multi-value {
54+
background-color: #375071;
55+
}
56+
57+
.dark-mode .material-cost-per-project-dropdown .select__multi-value__label {
58+
color: white;
59+
}
60+
61+
.dark-mode .material-cost-per-project-dropdown .css-tj5bde-Svg:hover {
62+
fill: white;
63+
}

0 commit comments

Comments
 (0)