bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(reporting): enhance utilization tracking and filtering in time reports

Browse Source
This commit is contained in:
shancds
2025-05-29 15:38:25 +05:30
parent f1920c17b4
commit b94c56f50d
7 changed files with 233 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
worklenz-backend/src/controllers/reporting/reporting-allocation-controller.ts
View File

@@ -492,19 +492,43 @@ export default class ReportingAllocationController extends ReportingControllerBa
GROUP BY tmiv.email, tmiv.name, tmiv.team_member_id
ORDER BY logged_time DESC;`;
const result = await db.query(q, []);
const utilization = (req.body.utilization || []) as string[];
for (const member of result.rows) {
member.value = member.logged_time ? parseFloat(moment.duration(member.logged_time, "seconds").asHours().toFixed(2)) : 0;
// Precompute totalWorkingHours * 3600 for efficiency
const totalWorkingSeconds = totalWorkingHours * 3600;
const hasUtilizationFilter = utilization.length > 0;
// calculate utilization state
for (let i = 0, len = result.rows.length; i < len; i++) {
const member = result.rows[i];
const loggedSeconds = member.logged_time ? parseFloat(member.logged_time) : 0;
const utilizedHours = loggedSeconds / 3600;
const utilizationPercent = totalWorkingSeconds > 0 && loggedSeconds
? ((loggedSeconds / totalWorkingSeconds) * 100)
: 0;
const overUnder = utilizedHours - totalWorkingHours;
member.value = utilizedHours ? parseFloat(utilizedHours.toFixed(2)) : 0;
member.color_code = getColor(member.name);
member.total_working_hours = totalWorkingHours;
member.utilization_percent = (totalWorkingHours > 0 && member.logged_time) ? ((parseFloat(member.logged_time) / (totalWorkingHours * 3600)) * 100).toFixed(2) : '0.00';
member.utilized_hours = member.logged_time ? (parseFloat(member.logged_time) / 3600).toFixed(2) : '0.00';
// Over/under utilized hours: utilized_hours - total_working_hours
const overUnder = member.utilized_hours && member.total_working_hours ? (parseFloat(member.utilized_hours) - member.total_working_hours) : 0;
member.utilization_percent = utilizationPercent.toFixed(2);
member.utilized_hours = utilizedHours.toFixed(2);
member.over_under_utilized_hours = overUnder.toFixed(2);
if (utilizationPercent < 90) {
member.utilization_state = 'under';
} else if (utilizationPercent <= 110) {
member.utilization_state = 'optimal';
} else {
member.utilization_state = 'over';
}
}
return res.status(200).send(new ServerResponse(true, result.rows));
const filteredRows = hasUtilizationFilter
? result.rows.filter(member => utilization.includes(member.utilization_state))
: result.rows;
return res.status(200).send(new ServerResponse(true, filteredRows));
}
@HandleExceptions()

4
worklenz-frontend/public/locales/en/time-report.json
View File

@@ -42,5 +42,7 @@
"noTeams": "No teams found",
"noData": "No data found",
"members": "Members",
"searchByMember": "Search by member"
"searchByMember": "Search by member",
"utilization": "Utilization"
}

69
worklenz-frontend/src/features/reporting/time-reports/time-reports-overview.slice.ts
View File

@@ -26,6 +26,9 @@ interface ITimeReportsOverviewState {
members: any[];
loadingMembers: boolean;
utilization: any[];
loadingUtilization: boolean;
}
const initialState: ITimeReportsOverviewState = {
@@ -47,6 +50,9 @@ const initialState: ITimeReportsOverviewState = {
},
members: [],
loadingMembers: false,
utilization: [],
loadingUtilization: false,
};
const selectedMembers = (state: ITimeReportsOverviewState) => {
@@ -63,6 +69,36 @@ const selectedCategories = (state: ITimeReportsOverviewState) => {
.map(category => category.id) as string[];
};
const selectedUtilization = (state: ITimeReportsOverviewState) => {
return state.utilization
.filter(utilization => utilization.selected)
.map(utilization => utilization.id) as string[];
};
const allUtilization = (state: ITimeReportsOverviewState) => {
return state.utilization;
};
export const fetchReportingUtilization = createAsyncThunk(
'timeReportsOverview/fetchReportingUtilization',
async (_, { rejectWithValue }) => {
try {
const utilization = [
{ id: 'under', name: 'Under-utilized (Under 90%)', selected: true },
{ id: 'optimal', name: 'Optimal-utilized (90%-110%)', selected: true },
{ id: 'over', name: 'Over-utilized (Over 110%)', selected: true },
];
return utilization;
} catch (error) {
let errorMessage = 'An error occurred while fetching utilization';
if (error instanceof Error) {
errorMessage = error.message;
}
return rejectWithValue(errorMessage);
}
}
);
export const fetchReportingMembers = createAsyncThunk(
'timeReportsOverview/fetchReportingMembers',
async (_, { rejectWithValue, getState }) => {
@@ -78,7 +114,11 @@ export const fetchReportingMembers = createAsyncThunk(
return rejectWithValue(res.message || 'Failed to fetch members');
}
} catch (error) {
return rejectWithValue(error.message || 'An error occurred while fetching members');
let errorMessage = 'An error occurred while fetching members';
if (error instanceof Error) {
errorMessage = error.message;
}
return rejectWithValue(errorMessage);
}
}
);
@@ -181,6 +221,20 @@ const timeReportsOverviewSlice = createSlice({
member.selected = action.payload;
});
},
setSelectOrDeselectUtilization: (
state,
action: PayloadAction<{ id: string; selected: boolean }>
) => {
const utilization = state.utilization.find(u => u.id === action.payload.id);
if (utilization) {
utilization.selected = action.payload.selected;
}
},
setSelectOrDeselectAllUtilization: (state, action: PayloadAction<boolean>) => {
state.utilization.forEach(utilization => {
utilization.selected = action.payload;
});
},
},
extraReducers: builder => {
builder.addCase(fetchReportingTeams.fulfilled, (state, action) => {
@@ -245,6 +299,17 @@ const timeReportsOverviewSlice = createSlice({
state.loadingMembers = false;
console.error('Error fetching members:', action.payload);
});
builder.addCase(fetchReportingUtilization.fulfilled, (state, action) => {
state.utilization = action.payload;
state.loadingUtilization = false;
});
builder.addCase(fetchReportingUtilization.pending, state => {
state.loadingUtilization = true;
});
builder.addCase(fetchReportingUtilization.rejected, (state, action) => {
state.loadingUtilization = false;
console.error('Error fetching utilization:', action.payload);
});
},
});
@@ -259,6 +324,8 @@ export const {
setSelectOrDeselectBillable,
setSelectOrDeselectMember,
setSelectOrDeselectAllMembers,
setSelectOrDeselectUtilization,
setSelectOrDeselectAllUtilization,
setNoCategory,
setArchived,
} = timeReportsOverviewSlice.actions;

35
worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx
View File

@@ -37,6 +37,8 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
loadingProjects,
members,
loadingMembers,
utilization,
loadingUtilization,
billable,
archived,
} = useAppSelector(state => state.timeReportsOverviewReducer);
@@ -100,22 +102,24 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
const hours = member?.utilized_hours || '0.00';
const percent = parseFloat(member?.utilization_percent || '0.00');
const overUnder = member?.over_under_utilized_hours || '0.00';
let status = '';
let color = '';
if (percent < 90) {
status = 'Under';
color = '🟧';
} else if (percent <= 110) {
status = 'Optimal';
color = '🟩';
} else {
status = 'Over';
color = '🟥';
switch (member.utilization_state) {
case 'under':
color = '🟧';
break;
case 'optimal':
color = '🟩';
break;
case 'over':
color = '🟥';
break;
default:
color = '';
}
return [
`${context.dataset.label}: ${hours} h`,
`${color} Utilization: ${percent}%`,
`${status} Utilized: ${overUnder} h`
`${member.utilization_state} Utilized: ${overUnder} h`
];
},
}
@@ -163,13 +167,14 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
const selectedTeams = teams.filter(team => team.selected);
const selectedProjects = filterProjects.filter(project => project.selected);
const selectedCategories = categories.filter(category => category.selected);
const selectedMembers = members.filter(member => member.selected); // Use selected members
const selectedMembers = members.filter(member => member.selected);
const selectedUtilization = utilization.filter(item => item.selected);
const body = {
teams: selectedTeams.map(t => t.id),
projects: selectedProjects.map(project => project.id),
categories: selectedCategories.map(category => category.id),
members: selectedMembers.map(member => member.id), // Include members in the request
members: selectedMembers.map(member => member.id),
utilization: selectedUtilization.map(item => item.id),
duration,
date_range: dateRange,
billable,
@@ -189,7 +194,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
useEffect(() => {
fetchChartData();
}, [dispatch, duration, dateRange, billable, archived, teams, filterProjects, categories, members]);
}, [dispatch, duration, dateRange, billable, archived, teams, filterProjects, categories, members, utilization]);
const exportChart = () => {
if (chartRef.current) {

4
worklenz-frontend/src/pages/reporting/timeReports/page-header/time-report-page-header.tsx
View File

@@ -9,8 +9,10 @@ import {
fetchReportingProjects,
fetchReportingCategories,
fetchReportingMembers,
fetchReportingUtilization,
} from '@/features/reporting/time-reports/time-reports-overview.slice';
import Members from './members';
import Utilization from './utilization';
const TimeReportPageHeader: React.FC = () => {
const dispatch = useAppDispatch();
@@ -21,6 +23,7 @@ const TimeReportPageHeader: React.FC = () => {
await dispatch(fetchReportingCategories());
await dispatch(fetchReportingProjects());
await dispatch(fetchReportingMembers());
await dispatch(fetchReportingUtilization());
};
fetchData();
@@ -33,6 +36,7 @@ const TimeReportPageHeader: React.FC = () => {
<Projects />
<Billable />
<Members/>
<Utilization />
</div>
);
};

104
worklenz-frontend/src/pages/reporting/timeReports/page-header/utilization.tsx Normal file
View File

@@ -0,0 +1,104 @@
import React, { useState } from 'react';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { useAppSelector } from '@/hooks/useAppSelector';
import { setSelectOrDeselectAllMembers, setSelectOrDeselectAllUtilization, setSelectOrDeselectMember, setSelectOrDeselectUtilization } from '@/features/reporting/time-reports/time-reports-overview.slice';
import { Button, Checkbox, Divider, Dropdown, Input, Avatar, theme } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { CaretDownFilled } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { id } from 'date-fns/locale';
const Utilization: React.FC = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation('time-report');
const { utilization, loadingUtilization } = useAppSelector(state => state.timeReportsOverviewReducer);
const { token } = theme.useToken();
const [searchText, setSearchText] = useState('');
const [selectAll, setSelectAll] = useState(true);
// Filter members based on search text
const filteredItems = utilization.filter(item =>
item.name?.toLowerCase().includes(searchText.toLowerCase())
);
// Handle checkbox change for individual members
const handleCheckboxChange = (id: string, selected: boolean) => {
dispatch(setSelectOrDeselectUtilization({ id, selected }));
};
const handleSelectAll = (e: CheckboxChangeEvent) => {
const isChecked = e.target.checked;
setSelectAll(isChecked);
dispatch(setSelectOrDeselectAllUtilization(isChecked));
};
return (
<Dropdown
menu={undefined}
placement="bottomLeft"
trigger={['click']}
dropdownRender={() => (
<div
style={{
background: token.colorBgContainer,
borderRadius: token.borderRadius,
boxShadow: token.boxShadow,
padding: '4px 0',
maxHeight: '330px',
display: 'flex',
flexDirection: 'column',
}}
>
<div style={{ padding: '8px', flexShrink: 0 }}>
</div>
<div style={{ padding: '0 12px', flexShrink: 0 }}>
<Checkbox
onClick={e => e.stopPropagation()}
onChange={handleSelectAll}
checked={selectAll}
>
{t('selectAll')}
</Checkbox>
</div>
<Divider style={{ margin: '4px 0', flexShrink: 0 }} />
<div
style={{
overflowY: 'auto',
flex: 1,
}}
>
{filteredItems.map((ut, index) => (
<div
key={index}
style={{
padding: '8px 12px',
display: 'flex',
alignItems: 'center',
gap: '8px',
cursor: 'pointer',
'&:hover': {
backgroundColor: token.colorBgTextHover,
},
}}
>
<Checkbox
onClick={e => e.stopPropagation()}
checked={ut.selected}
onChange={e => handleCheckboxChange(ut.id, e.target.checked)}
>
{ut.name}
</Checkbox>
</div>
))}
</div>
</div>
)}
>
<Button loading={loadingUtilization}>
{t('utilization')} <CaretDownFilled />
</Button>
</Dropdown>
);
};
export default Utilization;

1
worklenz-frontend/src/types/reporting/reporting.types.ts
View File

@@ -409,6 +409,7 @@ export interface IRPTTimeMember {
utilized_hours?: string;
utilization_percent?: string;
over_under_utilized_hours?: string;
utilization_state?: string;
}
export interface IMemberTaskStatGroupResonse {