Merge pull request #146 from shancds/feature/reporting-time-members-filtter

Feature/reporting time members filtter
2025-05-30 08:41:21 +05:30
parent d1fe23b431 8d6c43c59c
commit 4bc1b4fa73
11 changed files with 517 additions and 50 deletions
--- a/worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx
+++ b/worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx
@@ -19,11 +19,14 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';

 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels);

+interface MembersTimeSheetProps {
+  onTotalsUpdate: (totals: { total_time_logs: string; total_estimated_hours: string; total_utilization: string }) => void;
+}
 export interface MembersTimeSheetRef {
  exportChart: () => void;
 }

-const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
+const MembersTimeSheet = forwardRef<MembersTimeSheetRef, MembersTimeSheetProps>(({ onTotalsUpdate }, ref) => {
  const { t } = useTranslation('time-report');
  const dispatch = useAppDispatch();
  const chartRef = React.useRef<ChartJS<'bar', string[], unknown>>(null);
@@ -35,6 +38,10 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
    loadingCategories,
    projects: filterProjects,
    loadingProjects,
+    members,
+    loadingMembers,
+    utilization,
+    loadingUtilization,
    billable,
    archived,
  } = useAppSelector(state => state.timeReportsOverviewReducer);
@@ -98,33 +105,26 @@ 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';
-            } else if (percent <= 110) {
-              status = 'Optimal';
-            } else {
-              status = 'Over';
+            switch (member.utilization_state) {
+              case 'under':
+              color = '🟧';
+              break;
+              case 'optimal':
+              color = '🟩';
+              break;
+              case 'over':
+              color = '🟥';
+              break;
+              default:
+              color = '';
            }
            return [
              `${context.dataset.label}: ${hours} h`,
-              `Utilization: ${percent}%`,
-              `${status} Utilized: ${overUnder} h`
+              `${color} Utilization: ${percent}%`,
+              `${member.utilization_state} Utilized: ${overUnder} h`
            ];
          },
-          labelTextColor: function (context: any) {
-            const idx = context.dataIndex;
-            const member = jsonData[idx];
-            const utilization = parseFloat(member?.utilization_percent || '0');
-            if (utilization < 90) {
-              return '#FFB546';
-            } else if (utilization >= 90 && utilization <= 110) {
-              return '#B2EF9A';
-            } else {
-              return '#FE7173';
-            }
-          }
        }
      }
    },
@@ -170,11 +170,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);
+      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),
+        utilization: selectedUtilization.map(item => item.id),
        duration,
        date_range: dateRange,
        billable,
@@ -182,9 +185,18 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {

      const res = await reportingTimesheetApiService.getMemberTimeSheets(body, archived);
      if (res.done) {
-        setJsonData(res.body || []);
+        setJsonData(res.body.filteredRows || []);
+
+      const totalsRaw = res.body.totals || {};
+      const totals = {
+        total_time_logs: totalsRaw.total_time_logs ?? "0",
+        total_estimated_hours: totalsRaw.total_estimated_hours ?? "0",
+        total_utilization: totalsRaw.total_utilization ?? "0",
+      };
+      onTotalsUpdate(totals);
      }
    } catch (error) {
+      console.error('Error fetching chart data:', error);
      logger.error('Error fetching chart data:', error);
    } finally {
      setLoading(false);
@@ -193,7 +205,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {

  useEffect(() => {
    fetchChartData();
-  }, [dispatch, duration, dateRange, billable, archived, teams, filterProjects, categories]);
+  }, [dispatch, duration, dateRange, billable, archived, teams, filterProjects, categories, members, utilization]);

  const exportChart = () => {
    if (chartRef.current) {
--- a/worklenz-frontend/src/pages/reporting/timeReports/members-time-reports.tsx
+++ b/worklenz-frontend/src/pages/reporting/timeReports/members-time-reports.tsx
@@ -4,12 +4,18 @@ import MembersTimeSheet, { MembersTimeSheetRef } from '@/pages/reporting/time-re
 import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
 import { useTranslation } from 'react-i18next';
 import { useDocumentTitle } from '@/hooks/useDoumentTItle';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import TotalTimeUtilization from './total-time-utilization/total-time-utilization';
+import { IRPTTimeTotals } from '@/types/reporting/reporting.types';

 const MembersTimeReports = () => {
  const { t } = useTranslation('time-report');
  const chartRef = useRef<MembersTimeSheetRef>(null);
-
+  const [totals, setTotals] = useState<IRPTTimeTotals>({
+    total_time_logs: "0",
+    total_estimated_hours: "0",
+    total_utilization: "0",
+  });
  useDocumentTitle('Reporting - Allocation');

  const handleExport = (type: string) => {
@@ -18,6 +24,10 @@ const MembersTimeReports = () => {
    }
  };

+  const handleTotalsUpdate = (newTotals: IRPTTimeTotals) => {
+    setTotals(newTotals);
+  };
+
  return (
    <Flex vertical>
      <TimeReportingRightHeader
@@ -25,7 +35,7 @@ const MembersTimeReports = () => {
        exportType={[{ key: 'png', label: 'PNG' }]}
        export={handleExport}
      />
-
+      <TotalTimeUtilization totals={totals} />
      <Card
        style={{ borderRadius: '4px' }}
        title={
@@ -41,7 +51,7 @@ const MembersTimeReports = () => {
          },
        }}
      >
-        <MembersTimeSheet ref={chartRef} />
+        <MembersTimeSheet onTotalsUpdate={handleTotalsUpdate} ref={chartRef} />
      </Card>
    </Flex>
  );
--- a/worklenz-frontend/src/pages/reporting/timeReports/page-header/members.tsx
+++ b/worklenz-frontend/src/pages/reporting/timeReports/page-header/members.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { setSelectOrDeselectAllMembers, setSelectOrDeselectMember } 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';
+
+const Members: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation('time-report');
+  const { members, loadingMembers } = useAppSelector(state => state.timeReportsOverviewReducer);
+  const { token } = theme.useToken();
+
+  const [searchText, setSearchText] = useState('');
+  const [selectAll, setSelectAll] = useState(true);
+
+  // Filter members based on search text
+  const filteredMembers = members.filter(member =>
+    member.name?.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  // Handle checkbox change for individual members
+  const handleCheckboxChange = (id: string, checked: boolean) => {
+    dispatch(setSelectOrDeselectMember({ id, selected: checked }));
+  };
+
+  // Handle "Select All" checkbox change
+  const handleSelectAllChange = (e: CheckboxChangeEvent) => {
+    const isChecked = e.target.checked;
+    setSelectAll(isChecked);
+    dispatch(setSelectOrDeselectAllMembers(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 }}>
+            <Input
+              onClick={e => e.stopPropagation()}
+              placeholder={t('searchByMember')}
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+            />
+          </div>
+          <div style={{ padding: '0 12px', flexShrink: 0 }}>
+            <Checkbox
+              onClick={e => e.stopPropagation()}
+              onChange={handleSelectAllChange}
+              checked={selectAll}
+            >
+              {t('selectAll')}
+            </Checkbox>
+          </div>
+          <Divider style={{ margin: '4px 0', flexShrink: 0 }} />
+          <div
+            style={{
+              overflowY: 'auto',
+              flex: 1,
+            }}
+          >
+            {filteredMembers.map(member => (
+              <div
+                key={member.id}
+                style={{
+                  padding: '8px 12px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    backgroundColor: token.colorBgTextHover,
+                  },
+                }}
+              >
+                <Avatar src={member.avatar_url} alt={member.name} />
+                <Checkbox
+                  onClick={e => e.stopPropagation()}
+                  checked={member.selected}
+                  onChange={e => handleCheckboxChange(member.id, e.target.checked)}
+                >
+                  {member.name}
+                </Checkbox>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    >
+      <Button loading={loadingMembers}>
+        {t('members')} <CaretDownFilled />
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default Members;
--- a/worklenz-frontend/src/pages/reporting/timeReports/page-header/time-report-page-header.tsx
+++ b/worklenz-frontend/src/pages/reporting/timeReports/page-header/time-report-page-header.tsx
@@ -8,7 +8,11 @@ import {
  fetchReportingTeams,
  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();
@@ -18,6 +22,8 @@ const TimeReportPageHeader: React.FC = () => {
      await dispatch(fetchReportingTeams());
      await dispatch(fetchReportingCategories());
      await dispatch(fetchReportingProjects());
+      await dispatch(fetchReportingMembers());
+      await dispatch(fetchReportingUtilization());
    };

    fetchData();
@@ -29,6 +35,8 @@ const TimeReportPageHeader: React.FC = () => {
      <Categories />
      <Projects />
      <Billable />
+      <Members/>
+      <Utilization />
    </div>
  );
 };
--- a/worklenz-frontend/src/pages/reporting/timeReports/page-header/utilization.tsx
+++ b/worklenz-frontend/src/pages/reporting/timeReports/page-header/utilization.tsx
@@ -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;
--- a/worklenz-frontend/src/pages/reporting/timeReports/total-time-utilization/total-time-utilization.tsx
+++ b/worklenz-frontend/src/pages/reporting/timeReports/total-time-utilization/total-time-utilization.tsx
@@ -0,0 +1,34 @@
+import { Card, Flex } from 'antd';
+import React, { useEffect } from 'react';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { IRPTTimeTotals } from '@/types/reporting/reporting.types';
+
+interface TotalTimeUtilizationProps {
+  totals: IRPTTimeTotals;
+}
+const TotalTimeUtilization: React.FC<TotalTimeUtilizationProps> = ({ totals }) => {
+  return (
+    <Flex gap={16} style={{ marginBottom: '16px' }}>
+      <Card style={{ borderRadius: '4px', flex: 1 }}>
+        <div>
+          <div style={{ fontSize: 14, color: '#888' }}>Total Time Logs</div>
+          <div style={{ fontSize: 24, fontWeight: 600 }}>{totals.total_time_logs}h</div>
+        </div>
+      </Card>
+      <Card style={{ borderRadius: '4px', flex: 1 }}>
+        <div>
+          <div style={{ fontSize: 14, color: '#888' }}>Estimated Hours</div>
+          <div style={{ fontSize: 24, fontWeight: 600 }}>{totals.total_estimated_hours}h</div>
+        </div>
+      </Card>
+      <Card style={{ borderRadius: '4px', flex: 1 }}>
+        <div>
+          <div style={{ fontSize: 14, color: '#888' }}>Utilization (%)</div>
+          <div style={{ fontSize: 24, fontWeight: 600 }}>{totals.total_utilization}%</div>
+        </div>
+      </Card>
+    </Flex>
+  );
+};
+
+export default TotalTimeUtilization;