feat(reporting): enhance time reports page with new filters and components
- Added new components for filtering by billable status, categories, projects, members, and teams in the time reports overview. - Implemented a new header component to manage the layout and functionality of the time reports page. - Refactored existing components to improve organization and maintainability, including the removal of deprecated files. - Updated localization files to support new UI elements and ensure consistency across languages. - Adjusted the language selector to reflect the correct language codes for Chinese.
This commit is contained in:
chamikaJ
@@ -4,7 +4,9 @@
|
||||
"Bash(find:*)",
|
||||
"Bash(npm run build:*)",
|
||||
"Bash(npm run type-check:*)",
|
||||
"Bash(npm run:*)"
|
||||
"Bash(npm run:*)",
|
||||
"Bash(mkdir:*)",
|
||||
"Bash(cp:*)"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,5 +15,15 @@
|
||||
"assignToMe": "分配给我",
|
||||
"archive": "归档",
|
||||
"newTaskNamePlaceholder": "写一个任务名称",
|
||||
"newSubtaskNamePlaceholder": "写一个子任务名称"
|
||||
"newSubtaskNamePlaceholder": "写一个子任务名称",
|
||||
"untitledSection": "无标题部分",
|
||||
"unmapped": "未映射",
|
||||
"clickToChangeDate": "点击更改日期",
|
||||
"noDueDate": "无截止日期",
|
||||
"save": "保存",
|
||||
"clear": "清除",
|
||||
"nextWeek": "下周",
|
||||
"noSubtasks": "无子任务",
|
||||
"showSubtasks": "显示子任务",
|
||||
"hideSubtasks": "隐藏子任务"
|
||||
}
|
||||
@@ -18,6 +18,10 @@
|
||||
"changeCategory": "更改类别",
|
||||
"clickToEditGroupName": "点击编辑组名称",
|
||||
"enterGroupName": "输入组名称",
|
||||
"todo": "待办",
|
||||
"inProgress": "进行中",
|
||||
"done": "已完成",
|
||||
"defaultTaskName": "无标题任务",
|
||||
|
||||
"indicators": {
|
||||
"tooltips": {
|
||||
|
||||
@@ -29,5 +29,22 @@
|
||||
"noCategory": "无类别",
|
||||
"noProjects": "未找到项目",
|
||||
"noTeams": "未找到团队",
|
||||
"noData": "未找到数据"
|
||||
"noData": "未找到数据",
|
||||
"groupBy": "分组方式",
|
||||
"groupByCategory": "类别",
|
||||
"groupByTeam": "团队",
|
||||
"groupByStatus": "状态",
|
||||
"groupByNone": "无",
|
||||
"clearSearch": "清除搜索",
|
||||
"selectedProjects": "已选项目",
|
||||
"projectsSelected": "个项目已选择",
|
||||
"showSelected": "仅显示已选择",
|
||||
"expandAll": "全部展开",
|
||||
"collapseAll": "全部折叠",
|
||||
"ungrouped": "未分组",
|
||||
"clearAll": "清除全部",
|
||||
"filterByBillableStatus": "按计费状态筛选",
|
||||
"searchByMember": "按成员搜索",
|
||||
"members": "成员",
|
||||
"utilization": "利用率"
|
||||
}
|
||||
@@ -26,5 +26,8 @@
|
||||
"noDueDate": "Pa datë përfundimi",
|
||||
"save": "Ruaj",
|
||||
"clear": "Pastro",
|
||||
"nextWeek": "Javën e ardhshme"
|
||||
"nextWeek": "Javën e ardhshme",
|
||||
"noSubtasks": "Pa nëndetyra",
|
||||
"showSubtasks": "Shfaq nëndetyrat",
|
||||
"hideSubtasks": "Fshih nëndetyrat"
|
||||
}
|
||||
|
||||
@@ -38,5 +38,13 @@
|
||||
"createClient": "Krijo klient",
|
||||
"searchInputPlaceholder": "Kërko sipas emrit ose emailit",
|
||||
"hoursPerDayValidationMessage": "Orët në ditë duhet të jenë një numër midis 1 dhe 24",
|
||||
"noPermission": "Nuk ka leje"
|
||||
"workingDaysValidationMessage": "Ditët e punës duhet të jenë një numër pozitiv",
|
||||
"manDaysValidationMessage": "Ditët e punëtorëve duhet të jenë një numër pozitiv",
|
||||
"noPermission": "Nuk ka leje",
|
||||
"progressSettings": "Cilësimet e Progresit",
|
||||
"manualProgress": "Progresi Manual",
|
||||
"manualProgressTooltip": "Lejo përditësimet manuale të progresit për detyrat pa nëndetyra",
|
||||
"weightedProgress": "Progresi i Ponderuar",
|
||||
"weightedProgressTooltip": "Llogarit progresin bazuar në peshat e nëndetyrave",
|
||||
"timeProgress": "Progresi i Bazuar në Kohë"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"recurring": "Përsëritës",
|
||||
"recurringTaskConfiguration": "Konfigurimi i detyrës përsëritëse",
|
||||
"repeats": "Përsëritet",
|
||||
"daily": "Ditore",
|
||||
"weekly": "Javore",
|
||||
"everyXDays": "Çdo X ditë",
|
||||
"everyXWeeks": "Çdo X javë",
|
||||
"everyXMonths": "Çdo X muaj",
|
||||
"monthly": "Mujore",
|
||||
"selectDaysOfWeek": "Zgjidh ditët e javës",
|
||||
"mon": "Hën",
|
||||
"tue": "Mar",
|
||||
"wed": "Mër",
|
||||
"thu": "Enj",
|
||||
"fri": "Pre",
|
||||
"sat": "Sht",
|
||||
"sun": "Die",
|
||||
"monthlyRepeatType": "Lloji i përsëritjes mujore",
|
||||
"onSpecificDate": "Në një datë specifike",
|
||||
"onSpecificDay": "Në një ditë specifike",
|
||||
"dateOfMonth": "Data e muajit",
|
||||
"weekOfMonth": "Java e muajit",
|
||||
"dayOfWeek": "Dita e javës",
|
||||
"first": "E para",
|
||||
"second": "E dyta",
|
||||
"third": "E treta",
|
||||
"fourth": "E katërta",
|
||||
"last": "E fundit",
|
||||
"intervalDays": "Intervali (ditë)",
|
||||
"intervalWeeks": "Intervali (javë)",
|
||||
"intervalMonths": "Intervali (muaj)",
|
||||
"saveChanges": "Ruaj ndryshimet"
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
"searchByName": "Kërko sipas emrit",
|
||||
"selectAll": "Zgjidh të Gjitha",
|
||||
"clearAll": "Pastro të Gjitha",
|
||||
"teams": "Ekipet",
|
||||
|
||||
"searchByProject": "Kërko sipas emrit të projektit",
|
||||
@@ -15,6 +16,8 @@
|
||||
|
||||
"billable": "Fakturueshme",
|
||||
"nonBillable": "Jo Fakturueshme",
|
||||
"allBillableTypes": "Të Gjitha Llojet e Fakturueshme",
|
||||
"filterByBillableStatus": "Filtro sipas statusit të fakturueshmërisë",
|
||||
|
||||
"total": "Total",
|
||||
|
||||
@@ -28,6 +31,9 @@
|
||||
|
||||
"membersTimeSheet": "Fletë Kohore e Anëtarëve",
|
||||
"member": "Anëtar",
|
||||
"members": "Anëtarët",
|
||||
"searchByMember": "Kërko sipas anëtarit",
|
||||
"utilization": "Përdorimi",
|
||||
|
||||
"estimatedVsActual": "Vlerësuar vs Aktual",
|
||||
"workingDays": "Ditë Pune",
|
||||
@@ -40,5 +46,17 @@
|
||||
"noCategory": "Pa Kategori",
|
||||
"noProjects": "Nuk u gjetën projekte",
|
||||
"noTeams": "Nuk u gjetën ekipe",
|
||||
"noData": "Nuk u gjetën të dhëna"
|
||||
"noData": "Nuk u gjetën të dhëna",
|
||||
"groupBy": "Gruppo sipas",
|
||||
"groupByCategory": "Kategori",
|
||||
"groupByTeam": "Ekip",
|
||||
"groupByStatus": "Status",
|
||||
"groupByNone": "Asnjë",
|
||||
"clearSearch": "Pastro kërkimin",
|
||||
"selectedProjects": "Projektet e Zgjedhura",
|
||||
"projectsSelected": "projekte të zgjedhura",
|
||||
"showSelected": "Shfaq Vetëm të Zgjedhurat",
|
||||
"expandAll": "Zgjero të Gjitha",
|
||||
"collapseAll": "Mbyll të Gjitha",
|
||||
"ungrouped": "Pa Grupuar"
|
||||
}
|
||||
|
||||
@@ -38,5 +38,13 @@
|
||||
"createClient": "Kunde erstellen",
|
||||
"searchInputPlaceholder": "Nach Name oder E-Mail suchen",
|
||||
"hoursPerDayValidationMessage": "Stunden pro Tag müssen zwischen 1 und 24",
|
||||
"noPermission": "Keine Berechtigung"
|
||||
"workingDaysValidationMessage": "Arbeitstage müssen eine positive Zahl sein",
|
||||
"manDaysValidationMessage": "Personentage müssen eine positive Zahl sein",
|
||||
"noPermission": "Keine Berechtigung",
|
||||
"progressSettings": "Fortschrittseinstellungen",
|
||||
"manualProgress": "Manueller Fortschritt",
|
||||
"manualProgressTooltip": "Manuelle Fortschrittsaktualisierungen für Aufgaben ohne Unteraufgaben erlauben",
|
||||
"weightedProgress": "Gewichteter Fortschritt",
|
||||
"weightedProgressTooltip": "Fortschritt basierend auf Unteraufgaben-Gewichten berechnen",
|
||||
"timeProgress": "Zeitbasierter Fortschritt"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"recurring": "Wiederkehrend",
|
||||
"recurringTaskConfiguration": "Wiederkehrende Aufgabenkonfiguration",
|
||||
"repeats": "Wiederholt sich",
|
||||
"daily": "Täglich",
|
||||
"weekly": "Wöchentlich",
|
||||
"everyXDays": "Alle X Tage",
|
||||
"everyXWeeks": "Alle X Wochen",
|
||||
"everyXMonths": "Alle X Monate",
|
||||
"monthly": "Monatlich",
|
||||
"selectDaysOfWeek": "Wochentage auswählen",
|
||||
"mon": "Mo",
|
||||
"tue": "Di",
|
||||
"wed": "Mi",
|
||||
"thu": "Do",
|
||||
"fri": "Fr",
|
||||
"sat": "Sa",
|
||||
"sun": "So",
|
||||
"monthlyRepeatType": "Monatlicher Wiederholungstyp",
|
||||
"onSpecificDate": "An einem bestimmten Datum",
|
||||
"onSpecificDay": "An einem bestimmten Tag",
|
||||
"dateOfMonth": "Datum des Monats",
|
||||
"weekOfMonth": "Woche des Monats",
|
||||
"dayOfWeek": "Wochentag",
|
||||
"first": "Erste",
|
||||
"second": "Zweite",
|
||||
"third": "Dritte",
|
||||
"fourth": "Vierte",
|
||||
"last": "Letzte",
|
||||
"intervalDays": "Intervall (Tage)",
|
||||
"intervalWeeks": "Intervall (Wochen)",
|
||||
"intervalMonths": "Intervall (Monate)",
|
||||
"saveChanges": "Änderungen speichern"
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
"searchByName": "Nach Namen suchen",
|
||||
"selectAll": "Alle auswählen",
|
||||
"clearAll": "Alle löschen",
|
||||
"teams": "Teams",
|
||||
|
||||
"searchByProject": "Nach Projektnamen suchen",
|
||||
@@ -15,6 +16,8 @@
|
||||
|
||||
"billable": "Abrechenbar",
|
||||
"nonBillable": "Nicht abrechenbar",
|
||||
"allBillableTypes": "Alle Abrechnungsarten",
|
||||
"filterByBillableStatus": "Nach abrechenbarem Status filtern",
|
||||
|
||||
"total": "Gesamt",
|
||||
|
||||
@@ -28,6 +31,9 @@
|
||||
|
||||
"membersTimeSheet": "Mitglieder-Zeiterfassung",
|
||||
"member": "Mitglied",
|
||||
"members": "Mitglieder",
|
||||
"searchByMember": "Nach Mitglied suchen",
|
||||
"utilization": "Auslastung",
|
||||
|
||||
"estimatedVsActual": "Geschätzt vs. Tatsächlich",
|
||||
"workingDays": "Arbeitstage",
|
||||
@@ -40,5 +46,17 @@
|
||||
"noCategory": "Keine Kategorie",
|
||||
"noProjects": "Keine Projekte gefunden",
|
||||
"noTeams": "Keine Teams gefunden",
|
||||
"noData": "Keine Daten gefunden"
|
||||
"noData": "Keine Daten gefunden",
|
||||
"groupBy": "Gruppieren nach",
|
||||
"groupByCategory": "Kategorie",
|
||||
"groupByTeam": "Team",
|
||||
"groupByStatus": "Status",
|
||||
"groupByNone": "Keine",
|
||||
"clearSearch": "Suche löschen",
|
||||
"selectedProjects": "Ausgewählte Projekte",
|
||||
"projectsSelected": "Projekte ausgewählt",
|
||||
"showSelected": "Nur Ausgewählte anzeigen",
|
||||
"expandAll": "Alle erweitern",
|
||||
"collapseAll": "Alle einklappen",
|
||||
"ungrouped": "Nicht gruppiert"
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
"searchByName": "Search by name",
|
||||
"selectAll": "Select All",
|
||||
"clearAll": "Clear All",
|
||||
"teams": "Teams",
|
||||
|
||||
"searchByProject": "Search by project name",
|
||||
@@ -15,6 +16,8 @@
|
||||
|
||||
"billable": "Billable",
|
||||
"nonBillable": "Non Billable",
|
||||
"allBillableTypes": "All Billable Types",
|
||||
"filterByBillableStatus": "Filter by billable status",
|
||||
|
||||
"total": "Total",
|
||||
|
||||
@@ -28,6 +31,9 @@
|
||||
|
||||
"membersTimeSheet": "Members Time Sheet",
|
||||
"member": "Member",
|
||||
"members": "Members",
|
||||
"searchByMember": "Search by member",
|
||||
"utilization": "Utilization",
|
||||
|
||||
"estimatedVsActual": "Estimated vs Actual",
|
||||
"workingDays": "Working Days",
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
"searchByName": "Buscar por nombre",
|
||||
"selectAll": "Seleccionar Todo",
|
||||
"clearAll": "Limpiar Todo",
|
||||
"teams": "Equipos",
|
||||
|
||||
"searchByProject": "Buscar por nombre del proyecto",
|
||||
@@ -15,6 +16,8 @@
|
||||
|
||||
"billable": "Facturable",
|
||||
"nonBillable": "No Facturable",
|
||||
"allBillableTypes": "Todos los Tipos Facturables",
|
||||
"filterByBillableStatus": "Filtrar por estado facturable",
|
||||
|
||||
"total": "Total",
|
||||
|
||||
@@ -28,6 +31,9 @@
|
||||
|
||||
"membersTimeSheet": "Hoja de Tiempo de Miembros",
|
||||
"member": "Miembro",
|
||||
"members": "Miembros",
|
||||
"searchByMember": "Buscar por miembro",
|
||||
"utilization": "Utilización",
|
||||
|
||||
"estimatedVsActual": "Estimado vs Real",
|
||||
"workingDays": "Días Laborables",
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
"searchByName": "Pesquisar por nome",
|
||||
"selectAll": "Selecionar Tudo",
|
||||
"clearAll": "Limpar Tudo",
|
||||
"teams": "Equipes",
|
||||
|
||||
"searchByProject": "Pesquisar por nome do projeto",
|
||||
@@ -15,6 +16,8 @@
|
||||
|
||||
"billable": "Faturável",
|
||||
"nonBillable": "Não Faturável",
|
||||
"allBillableTypes": "Todos os Tipos Faturáveis",
|
||||
"filterByBillableStatus": "Filtrar por status faturável",
|
||||
|
||||
"total": "Total",
|
||||
|
||||
@@ -28,6 +31,9 @@
|
||||
|
||||
"membersTimeSheet": "Folha de Tempo de Membros",
|
||||
"member": "Membro",
|
||||
"members": "Membros",
|
||||
"searchByMember": "Pesquisar por membro",
|
||||
"utilization": "Utilização",
|
||||
|
||||
"estimatedVsActual": "Estimado vs Real",
|
||||
"workingDays": "Dias Úteis",
|
||||
|
||||
@@ -15,5 +15,15 @@
|
||||
"assignToMe": "分配给我",
|
||||
"archive": "归档",
|
||||
"newTaskNamePlaceholder": "写一个任务名称",
|
||||
"newSubtaskNamePlaceholder": "写一个子任务名称"
|
||||
"newSubtaskNamePlaceholder": "写一个子任务名称",
|
||||
"untitledSection": "无标题部分",
|
||||
"unmapped": "未映射",
|
||||
"clickToChangeDate": "点击更改日期",
|
||||
"noDueDate": "无截止日期",
|
||||
"save": "保存",
|
||||
"clear": "清除",
|
||||
"nextWeek": "下周",
|
||||
"noSubtasks": "无子任务",
|
||||
"showSubtasks": "显示子任务",
|
||||
"hideSubtasks": "隐藏子任务"
|
||||
}
|
||||
@@ -38,5 +38,13 @@
|
||||
"createClient": "创建客户",
|
||||
"searchInputPlaceholder": "按名称或电子邮件搜索",
|
||||
"hoursPerDayValidationMessage": "每天小时数必须是1到24之间的数字",
|
||||
"noPermission": "无权限"
|
||||
"workingDaysValidationMessage": "工作日必须是正数",
|
||||
"manDaysValidationMessage": "人天必须是正数",
|
||||
"noPermission": "无权限",
|
||||
"progressSettings": "进度设置",
|
||||
"manualProgress": "手动进度",
|
||||
"manualProgressTooltip": "允许对没有子任务的任务进行手动进度更新",
|
||||
"weightedProgress": "加权进度",
|
||||
"weightedProgressTooltip": "基于子任务权重计算进度",
|
||||
"timeProgress": "基于时间的进度"
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"recurring": "重复",
|
||||
"recurringTaskConfiguration": "重复任务配置",
|
||||
"repeats": "重复",
|
||||
"daily": "每日",
|
||||
"weekly": "每周",
|
||||
"everyXDays": "每X天",
|
||||
"everyXWeeks": "每X周",
|
||||
"everyXMonths": "每X月",
|
||||
"monthly": "每月",
|
||||
"selectDaysOfWeek": "选择星期几",
|
||||
"mon": "周一",
|
||||
"tue": "周二",
|
||||
"wed": "周三",
|
||||
"thu": "周四",
|
||||
"fri": "周五",
|
||||
"sat": "周六",
|
||||
"sun": "周日",
|
||||
"monthlyRepeatType": "每月重复类型",
|
||||
"onSpecificDate": "在特定日期",
|
||||
"onSpecificDay": "在特定星期几",
|
||||
"dateOfMonth": "月份日期",
|
||||
"weekOfMonth": "月份周数",
|
||||
"dayOfWeek": "星期几",
|
||||
"first": "第一",
|
||||
"second": "第二",
|
||||
"third": "第三",
|
||||
"fourth": "第四",
|
||||
"last": "最后",
|
||||
"intervalDays": "间隔（天）",
|
||||
"intervalWeeks": "间隔（周）",
|
||||
"intervalMonths": "间隔（月）",
|
||||
"saveChanges": "保存更改"
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
"timeSheet": "时间表",
|
||||
"searchByName": "按名称搜索",
|
||||
"selectAll": "全选",
|
||||
"clearAll": "清除全部",
|
||||
"teams": "团队",
|
||||
"searchByProject": "按项目名称搜索",
|
||||
"projects": "项目",
|
||||
@@ -11,6 +12,8 @@
|
||||
"categories": "类别",
|
||||
"billable": "可计费",
|
||||
"nonBillable": "不可计费",
|
||||
"allBillableTypes": "所有计费类型",
|
||||
"filterByBillableStatus": "按计费状态筛选",
|
||||
"total": "总计",
|
||||
"projectsTimeSheet": "项目时间表",
|
||||
"loggedTime": "已记录时间（小时）",
|
||||
@@ -19,6 +22,9 @@
|
||||
"for": "为",
|
||||
"membersTimeSheet": "成员时间表",
|
||||
"member": "成员",
|
||||
"members": "成员",
|
||||
"searchByMember": "按成员搜索",
|
||||
"utilization": "利用率",
|
||||
"estimatedVsActual": "预计用时 vs 实际用时",
|
||||
"workingDays": "工作日",
|
||||
"manDays": "人天",
|
||||
@@ -29,5 +35,17 @@
|
||||
"noCategory": "无类别",
|
||||
"noProjects": "未找到项目",
|
||||
"noTeams": "未找到团队",
|
||||
"noData": "未找到数据"
|
||||
"noData": "未找到数据",
|
||||
"groupBy": "分组方式",
|
||||
"groupByCategory": "类别",
|
||||
"groupByTeam": "团队",
|
||||
"groupByStatus": "状态",
|
||||
"groupByNone": "无",
|
||||
"clearSearch": "清除搜索",
|
||||
"selectedProjects": "已选项目",
|
||||
"projectsSelected": "个项目已选择",
|
||||
"showSelected": "仅显示已选择",
|
||||
"expandAll": "全部展开",
|
||||
"collapseAll": "全部折叠",
|
||||
"ungrouped": "未分组"
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
import { setSelectOrDeselectBillable } from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Dropdown,
|
||||
MenuProps,
|
||||
Space,
|
||||
Divider,
|
||||
theme,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
} from '@/shared/antd-imports';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Billable: React.FC = () => {
|
||||
const { t } = useTranslation('time-report');
|
||||
const dispatch = useAppDispatch();
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const { billable } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
let count = 0;
|
||||
if (billable.billable) count++;
|
||||
if (billable.nonBillable) count++;
|
||||
return count;
|
||||
}, [billable.billable, billable.nonBillable]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected = billable.billable && billable.nonBillable;
|
||||
const isNoneSelected = !billable.billable && !billable.nonBillable;
|
||||
|
||||
// Handle select all
|
||||
const handleSelectAll = () => {
|
||||
dispatch(
|
||||
setSelectOrDeselectBillable({
|
||||
billable: true,
|
||||
nonBillable: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = () => {
|
||||
dispatch(
|
||||
setSelectOrDeselectBillable({
|
||||
billable: false,
|
||||
nonBillable: false,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
// Dropdown items for the menu
|
||||
const menuItems: MenuProps['items'] = [
|
||||
{
|
||||
key: 'header',
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('filterByBillableStatus')}
|
||||
</div>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: (
|
||||
<div style={{ padding: '2px 4px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAll}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'billable',
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={billable.billable} style={{ fontSize: '14px' }}>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{t('billable')}</span>
|
||||
</Checkbox>
|
||||
{billable.billable && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
onClick: () => {
|
||||
dispatch(setSelectOrDeselectBillable({ ...billable, billable: !billable.billable }));
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'nonBillable',
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={billable.nonBillable} style={{ fontSize: '14px' }}>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{t('nonBillable')}</span>
|
||||
</Checkbox>
|
||||
{billable.nonBillable && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
onClick: () => {
|
||||
dispatch(setSelectOrDeselectBillable({ ...billable, nonBillable: !billable.nonBillable }));
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// Button text based on selection state
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('billable');
|
||||
if (isAllSelected) return t('allBillableTypes');
|
||||
if (billable.billable && !billable.nonBillable) return t('billable');
|
||||
if (!billable.billable && billable.nonBillable) return t('nonBillable');
|
||||
return t('billable');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={{ items: menuItems }}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
overlayStyle={{
|
||||
maxHeight: '330px',
|
||||
overflowY: 'auto',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
borderRadius: '8px',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
backgroundColor: colors.dropdownBg,
|
||||
}}
|
||||
overlayClassName="billable-filter-dropdown"
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Billable;
|
||||
@@ -0,0 +1,317 @@
|
||||
import {
|
||||
fetchReportingProjects,
|
||||
setNoCategory,
|
||||
setSelectOrDeselectAllCategories,
|
||||
setSelectOrDeselectCategory,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
theme,
|
||||
Space,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
CheckboxChangeEvent
|
||||
} from '@/shared/antd-imports';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Categories: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectAll, setSelectAll] = useState(true);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { categories, loadingCategories, noCategory } = useAppSelector(
|
||||
state => state.timeReportsOverviewReducer
|
||||
);
|
||||
const { token } = theme.useToken();
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
const selectedCategories = categories.filter(category => category.selected).length;
|
||||
return selectedCategories + (noCategory ? 1 : 0);
|
||||
}, [categories, noCategory]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected =
|
||||
categories.length > 0 && categories.every(category => category.selected) && noCategory;
|
||||
const isNoneSelected =
|
||||
categories.length > 0 && !categories.some(category => category.selected) && !noCategory;
|
||||
|
||||
const filteredItems = categories.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
// Handle checkbox change for individual items
|
||||
const handleCheckboxChange = async (key: string, checked: boolean) => {
|
||||
await dispatch(setSelectOrDeselectCategory({ id: key, selected: checked }));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle "Select All" checkbox change
|
||||
const handleSelectAllChange = async (e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
setSelectAll(isChecked);
|
||||
await dispatch(setNoCategory(isChecked));
|
||||
await dispatch(setSelectOrDeselectAllCategories(isChecked));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle select all button click
|
||||
const handleSelectAllClick = async () => {
|
||||
const newValue = !isAllSelected;
|
||||
setSelectAll(newValue);
|
||||
await dispatch(setNoCategory(newValue));
|
||||
await dispatch(setSelectOrDeselectAllCategories(newValue));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = async () => {
|
||||
setSelectAll(false);
|
||||
await dispatch(setNoCategory(false));
|
||||
await dispatch(setSelectOrDeselectAllCategories(false));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const handleNoCategoryChange = async (checked: boolean) => {
|
||||
await dispatch(setNoCategory(checked));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('categories');
|
||||
if (isAllSelected) return `All ${t('categories')}`;
|
||||
return `${t('categories')} (${activeFiltersCount})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
background: colors.dropdownBg,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
padding: '4px 0',
|
||||
maxHeight: '330px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('searchByCategory')}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ padding: '4px 8px', flexShrink: 0 }}>
|
||||
<Input
|
||||
onClick={e => e.stopPropagation()}
|
||||
placeholder={t('searchByCategory')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{categories.length > 0 && (
|
||||
<div style={{ padding: '2px 8px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAllClick}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Category Option */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={noCategory}
|
||||
onChange={e => handleNoCategoryChange(e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{t('noCategory')}</span>
|
||||
</Checkbox>
|
||||
{noCategory && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '2px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredItems.length > 0 ? (
|
||||
filteredItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={item.selected}
|
||||
onChange={e => handleCheckboxChange(item.id || '', e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{item.name}</span>
|
||||
</Checkbox>
|
||||
{item.selected && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div style={{ padding: '4px 8px', fontSize: '14px', color: colors.headerText }}>
|
||||
{t('noCategories')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
loading={loadingCategories}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categories;
|
||||
@@ -0,0 +1,263 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
Avatar,
|
||||
theme,
|
||||
Space,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
CheckboxChangeEvent,
|
||||
} from '@/shared/antd-imports';
|
||||
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import {
|
||||
setSelectOrDeselectAllMembers,
|
||||
setSelectOrDeselectMember,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
|
||||
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);
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
return members.filter(member => member.selected).length;
|
||||
}, [members]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected = members.length > 0 && members.every(member => member.selected);
|
||||
const isNoneSelected = members.length > 0 && !members.some(member => member.selected);
|
||||
|
||||
// Filter members based on search text
|
||||
const filteredMembers = members.filter(member =>
|
||||
member.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
// 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));
|
||||
};
|
||||
|
||||
// Handle select all button click
|
||||
const handleSelectAllClick = () => {
|
||||
const newValue = !isAllSelected;
|
||||
setSelectAll(newValue);
|
||||
dispatch(setSelectOrDeselectAllMembers(newValue));
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = () => {
|
||||
setSelectAll(false);
|
||||
dispatch(setSelectOrDeselectAllMembers(false));
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('members');
|
||||
if (isAllSelected) return `All ${t('members')}`;
|
||||
return `${t('members')} (${activeFiltersCount})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
background: colors.dropdownBg,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
padding: '4px 0',
|
||||
maxHeight: '330px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('searchByMember')}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ padding: '4px 8px', flexShrink: 0 }}>
|
||||
<Input
|
||||
onClick={e => e.stopPropagation()}
|
||||
placeholder={t('searchByMember')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ padding: '2px 8px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAllClick}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '2px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredMembers.map(member => (
|
||||
<div
|
||||
key={member.id}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
cursor: 'pointer',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Avatar src={member.avatar_url} alt={member.name} size="small" />
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={member.selected}
|
||||
onChange={e => handleCheckboxChange(member.id, e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{member.name}</span>
|
||||
</Checkbox>
|
||||
{member.selected && (
|
||||
<CheckCircleFilled
|
||||
style={{ color: colors.successColor, fontSize: '10px', marginLeft: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
loading={loadingMembers}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default Members;
|
||||
@@ -0,0 +1,267 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
theme,
|
||||
Space,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
CheckboxChangeEvent,
|
||||
} from '@/shared/antd-imports';
|
||||
import {
|
||||
setSelectOrDeselectAllProjects,
|
||||
setSelectOrDeselectProject,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
|
||||
const Projects: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [checkedList, setCheckedList] = useState<string[]>([]);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectAll, setSelectAll] = useState(true);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { projects, loadingProjects } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
const { token } = theme.useToken();
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
return projects.filter(project => project.selected).length;
|
||||
}, [projects]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected = projects.length > 0 && projects.every(project => project.selected);
|
||||
const isNoneSelected = projects.length > 0 && !projects.some(project => project.selected);
|
||||
|
||||
// Filter items based on search text
|
||||
const filteredItems = projects.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
// Handle checkbox change for individual items
|
||||
const handleCheckboxChange = (key: string, checked: boolean) => {
|
||||
dispatch(setSelectOrDeselectProject({ id: key, selected: checked }));
|
||||
};
|
||||
|
||||
// Handle "Select All" checkbox change
|
||||
const handleSelectAllChange = (e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
setSelectAll(isChecked);
|
||||
dispatch(setSelectOrDeselectAllProjects(isChecked));
|
||||
};
|
||||
|
||||
// Handle select all button click
|
||||
const handleSelectAllClick = () => {
|
||||
const newValue = !isAllSelected;
|
||||
setSelectAll(newValue);
|
||||
dispatch(setSelectOrDeselectAllProjects(newValue));
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = () => {
|
||||
setSelectAll(false);
|
||||
dispatch(setSelectOrDeselectAllProjects(false));
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('projects');
|
||||
if (isAllSelected) return `All ${t('projects')}`;
|
||||
return `${t('projects')} (${activeFiltersCount})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
background: colors.dropdownBg,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
padding: '4px 0',
|
||||
maxHeight: '330px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('searchByProject')}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ padding: '4px 8px', flexShrink: 0 }}>
|
||||
<Input
|
||||
onClick={e => e.stopPropagation()}
|
||||
placeholder={t('searchByProject')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ padding: '2px 8px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAllClick}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '2px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={item.selected}
|
||||
onChange={e => handleCheckboxChange(item.id || '', e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{item.name}</span>
|
||||
</Checkbox>
|
||||
{item.selected && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
loading={loadingProjects}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
@@ -0,0 +1,274 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
theme,
|
||||
Space,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
CheckboxChangeEvent,
|
||||
} from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import {
|
||||
fetchReportingCategories,
|
||||
fetchReportingProjects,
|
||||
setSelectOrDeselectAllTeams,
|
||||
setSelectOrDeselectTeam,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
|
||||
const Team: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectAll, setSelectAll] = useState(true);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const { teams, loadingTeams } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
return teams.filter(team => team.selected).length;
|
||||
}, [teams]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected = teams.length > 0 && teams.every(team => team.selected);
|
||||
const isNoneSelected = teams.length > 0 && !teams.some(team => team.selected);
|
||||
|
||||
const filteredItems = teams.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
const handleCheckboxChange = async (key: string, checked: boolean) => {
|
||||
dispatch(setSelectOrDeselectTeam({ id: key, selected: checked }));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const handleSelectAllChange = async (e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
setSelectAll(isChecked);
|
||||
dispatch(setSelectOrDeselectAllTeams(isChecked));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = async () => {
|
||||
setSelectAll(false);
|
||||
dispatch(setSelectOrDeselectAllTeams(false));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle select all button click
|
||||
const handleSelectAllClick = async () => {
|
||||
const newValue = !isAllSelected;
|
||||
setSelectAll(newValue);
|
||||
dispatch(setSelectOrDeselectAllTeams(newValue));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('teams');
|
||||
if (isAllSelected) return `All ${t('teams')}`;
|
||||
return `${t('teams')} (${activeFiltersCount})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
background: colors.dropdownBg,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
padding: '4px 0',
|
||||
maxHeight: '330px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('searchByName')}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ padding: '4px 8px', flexShrink: 0 }}>
|
||||
<Input
|
||||
placeholder={t('searchByName')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ padding: '2px 8px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAllClick}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '2px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={item.selected}
|
||||
onChange={e => handleCheckboxChange(item.id || '', e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{item.name}</span>
|
||||
</Checkbox>
|
||||
{item.selected && (
|
||||
<CheckCircleFilled style={{ color: colors.successColor, fontSize: '10px' }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
loading={loadingTeams}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,54 @@
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import Team from './Team';
|
||||
import Categories from './Categories';
|
||||
import Projects from './Projects';
|
||||
import Billable from './Billable';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
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();
|
||||
const location = useLocation();
|
||||
|
||||
// Check if current route is members time sheet
|
||||
const isMembersTimeSheet = location.pathname.includes('time-sheet-members');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
await dispatch(fetchReportingTeams());
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
|
||||
// Only fetch members and utilization data for members time sheet
|
||||
if (isMembersTimeSheet) {
|
||||
await dispatch(fetchReportingMembers());
|
||||
await dispatch(fetchReportingUtilization());
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [dispatch, isMembersTimeSheet]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<Team />
|
||||
<Categories />
|
||||
<Projects />
|
||||
<Billable />
|
||||
{isMembersTimeSheet && <Members/>}
|
||||
{isMembersTimeSheet && <Utilization />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeReportPageHeader;
|
||||
@@ -0,0 +1,251 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import {
|
||||
setSelectOrDeselectAllUtilization,
|
||||
setSelectOrDeselectUtilization,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
Avatar,
|
||||
theme,
|
||||
Space,
|
||||
CaretDownFilled,
|
||||
FilterOutlined,
|
||||
CheckCircleFilled,
|
||||
CheckboxChangeEvent,
|
||||
} from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
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);
|
||||
|
||||
// Calculate active filters count
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
return utilization.filter(item => item.selected).length;
|
||||
}, [utilization]);
|
||||
|
||||
// Check if all options are selected
|
||||
const isAllSelected = utilization.length > 0 && utilization.every(item => item.selected);
|
||||
const isNoneSelected = utilization.length > 0 && !utilization.some(item => item.selected);
|
||||
|
||||
// Filter members based on search text
|
||||
const filteredItems = utilization.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Theme-aware colors matching improved task filters
|
||||
const isDark = token.colorBgContainer !== '#ffffff';
|
||||
const colors = {
|
||||
headerText: isDark ? '#8c8c8c' : '#595959',
|
||||
borderColor: isDark ? '#404040' : '#f0f0f0',
|
||||
linkActive: isDark ? '#d9d9d9' : '#1890ff',
|
||||
linkDisabled: isDark ? '#8c8c8c' : '#d9d9d9',
|
||||
successColor: isDark ? '#52c41a' : '#52c41a',
|
||||
errorColor: isDark ? '#ff4d4f' : '#ff4d4f',
|
||||
buttonBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
buttonText: activeFiltersCount > 0
|
||||
? (isDark ? 'white' : '#262626')
|
||||
: (isDark ? '#d9d9d9' : '#595959'),
|
||||
buttonBg: activeFiltersCount > 0
|
||||
? (isDark ? '#434343' : '#f5f5f5')
|
||||
: (isDark ? '#141414' : 'white'),
|
||||
dropdownBg: isDark ? '#1f1f1f' : 'white',
|
||||
dropdownBorder: isDark ? '#303030' : '#d9d9d9',
|
||||
};
|
||||
|
||||
// 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));
|
||||
};
|
||||
|
||||
// Handle select all button click
|
||||
const handleSelectAllClick = () => {
|
||||
const newValue = !isAllSelected;
|
||||
setSelectAll(newValue);
|
||||
dispatch(setSelectOrDeselectAllUtilization(newValue));
|
||||
};
|
||||
|
||||
// Handle clear all
|
||||
const handleClearAll = () => {
|
||||
setSelectAll(false);
|
||||
dispatch(setSelectOrDeselectAllUtilization(false));
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (isNoneSelected) return t('utilization');
|
||||
if (isAllSelected) return `All ${t('utilization')}`;
|
||||
return `${t('utilization')} (${activeFiltersCount})`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
background: colors.dropdownBg,
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDark
|
||||
? '0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.20)'
|
||||
: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
||||
border: `1px solid ${colors.dropdownBorder}`,
|
||||
padding: '4px 0',
|
||||
maxHeight: '330px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 4px 2px',
|
||||
fontWeight: 600,
|
||||
fontSize: '12px',
|
||||
color: colors.headerText,
|
||||
borderBottom: `1px solid ${colors.borderColor}`,
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
>
|
||||
{t('utilization')}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ padding: '2px 8px', marginBottom: '2px' }}>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleSelectAllClick}
|
||||
disabled={isAllSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isAllSelected ? colors.linkDisabled : colors.linkActive,
|
||||
}}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Button>
|
||||
<Divider type="vertical" style={{ margin: '0 2px' }} />
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={handleClearAll}
|
||||
disabled={isNoneSelected}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
height: 'auto',
|
||||
fontSize: '11px',
|
||||
color: isNoneSelected ? colors.linkDisabled : colors.errorColor,
|
||||
}}
|
||||
>
|
||||
{t('clearAll')}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '2px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredItems.map((ut, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
cursor: 'pointer',
|
||||
borderRadius: '4px',
|
||||
transition: 'background-color 0.2s',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={ut.selected}
|
||||
onChange={e => handleCheckboxChange(ut.id, e.target.checked)}
|
||||
style={{ fontSize: '14px' }}
|
||||
>
|
||||
<span style={{ marginLeft: '2px', fontSize: '14px' }}>{ut.name}</span>
|
||||
</Checkbox>
|
||||
{ut.selected && (
|
||||
<CheckCircleFilled
|
||||
style={{ color: colors.successColor, fontSize: '10px', marginLeft: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
loading={loadingUtilization}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
height: '30px',
|
||||
fontSize: '12px',
|
||||
borderColor: colors.buttonBorder,
|
||||
color: colors.buttonText,
|
||||
fontWeight: activeFiltersCount > 0 ? 600 : 400,
|
||||
transition: 'all 0.2s ease-in-out',
|
||||
backgroundColor: colors.buttonBg,
|
||||
borderRadius: '6px',
|
||||
padding: '4px 10px',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = isDark ? '#262626' : '#f0f0f0';
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = colors.buttonBg;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
<span>{getButtonText()}</span>
|
||||
<CaretDownFilled
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
marginLeft: '2px',
|
||||
color: colors.buttonText,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default Utilization;
|
||||
@@ -2,11 +2,11 @@ import React from 'react';
|
||||
import { Button, Checkbox, Dropdown, Space, Typography } from '@/shared/antd-imports';
|
||||
import { DownOutlined } from '@/shared/antd-imports';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CustomPageHeader from '../../page-header/custom-page-header';
|
||||
import TimeWiseFilter from '../../../../components/reporting/time-wise-filter';
|
||||
import TimeWiseFilter from '@/components/reporting/time-wise-filter';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { setArchived } from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import CustomPageHeader from '@/pages/reporting/page-header/custom-page-header';
|
||||
|
||||
interface headerState {
|
||||
title: string;
|
||||
@@ -17,7 +17,7 @@ const LanguageSelector = () => {
|
||||
{ key: 'pt', label: 'Português' },
|
||||
{ key: 'alb', label: 'Shqip' },
|
||||
{ key: 'de', label: 'Deutsch' },
|
||||
{ key: 'zh_cn', label: '简体中文' },
|
||||
{ key: 'zh', label: '简体中文' },
|
||||
];
|
||||
|
||||
const languageLabels = {
|
||||
@@ -26,7 +26,7 @@ const LanguageSelector = () => {
|
||||
pt: 'Pt',
|
||||
alb: 'Sq',
|
||||
de: 'de',
|
||||
zh_cn: 'zh_cn',
|
||||
zh: 'zh',
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -7,7 +7,7 @@ export enum Language {
|
||||
PT = 'pt',
|
||||
ALB = 'alb',
|
||||
DE = 'de',
|
||||
ZH_CN = 'zh_cn',
|
||||
ZH = 'zh',
|
||||
}
|
||||
|
||||
export type ILanguageType = `${Language}`;
|
||||
|
||||
@@ -23,6 +23,12 @@ interface ITimeReportsOverviewState {
|
||||
billable: boolean;
|
||||
nonBillable: boolean;
|
||||
};
|
||||
|
||||
members: any[];
|
||||
loadingMembers: boolean;
|
||||
|
||||
utilization: any[];
|
||||
loadingUtilization: boolean;
|
||||
}
|
||||
|
||||
const initialState: ITimeReportsOverviewState = {
|
||||
@@ -42,6 +48,15 @@ const initialState: ITimeReportsOverviewState = {
|
||||
billable: true,
|
||||
nonBillable: true,
|
||||
},
|
||||
members: [],
|
||||
loadingMembers: false,
|
||||
|
||||
utilization: [],
|
||||
loadingUtilization: false,
|
||||
};
|
||||
|
||||
const selectedMembers = (state: ITimeReportsOverviewState) => {
|
||||
return state.members.filter(member => member.selected).map(member => member.id) as string[];
|
||||
};
|
||||
|
||||
const selectedTeams = (state: ITimeReportsOverviewState) => {
|
||||
@@ -54,6 +69,76 @@ 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 }) => {
|
||||
const state = getState() as { timeReportsOverviewReducer: ITimeReportsOverviewState };
|
||||
const { timeReportsOverviewReducer } = state;
|
||||
|
||||
try {
|
||||
// If members array is empty (initial load), fetch all members without pagination
|
||||
// Otherwise, use the selected members filter
|
||||
let queryParams;
|
||||
if (timeReportsOverviewReducer.members.length === 0) {
|
||||
// Initial load - fetch all members with a large page size to avoid pagination
|
||||
queryParams = {
|
||||
size: 1000, // Large number to get all members
|
||||
index: 1,
|
||||
search: '',
|
||||
field: 'name',
|
||||
order: 'asc',
|
||||
};
|
||||
} else {
|
||||
// Subsequent calls - use selected members
|
||||
queryParams = selectedMembers(timeReportsOverviewReducer);
|
||||
}
|
||||
|
||||
const res = await reportingApiService.getMembers(queryParams);
|
||||
if (res.done) {
|
||||
return res.body;
|
||||
} else {
|
||||
return rejectWithValue(res.message || 'Failed to fetch members');
|
||||
}
|
||||
} catch (error) {
|
||||
let errorMessage = 'An error occurred while fetching members';
|
||||
if (error instanceof Error) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
return rejectWithValue(errorMessage);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const fetchReportingTeams = createAsyncThunk(
|
||||
'timeReportsOverview/fetchReportingTeams',
|
||||
async () => {
|
||||
@@ -141,6 +226,34 @@ const timeReportsOverviewSlice = createSlice({
|
||||
setArchived: (state, action: PayloadAction<boolean>) => {
|
||||
state.archived = action.payload;
|
||||
},
|
||||
setSelectOrDeselectMember: (
|
||||
state,
|
||||
action: PayloadAction<{ id: string; selected: boolean }>
|
||||
) => {
|
||||
const member = state.members.find(member => member.id === action.payload.id);
|
||||
if (member) {
|
||||
member.selected = action.payload.selected;
|
||||
}
|
||||
},
|
||||
setSelectOrDeselectAllMembers: (state, action: PayloadAction<boolean>) => {
|
||||
state.members.forEach(member => {
|
||||
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) => {
|
||||
@@ -185,6 +298,37 @@ const timeReportsOverviewSlice = createSlice({
|
||||
builder.addCase(fetchReportingProjects.rejected, state => {
|
||||
state.loadingProjects = false;
|
||||
});
|
||||
builder.addCase(fetchReportingMembers.fulfilled, (state, action) => {
|
||||
const members = action.payload.members.map((member: any) => ({
|
||||
id: member.id,
|
||||
name: member.name,
|
||||
selected: true,
|
||||
avatar_url: member.avatar_url,
|
||||
email: member.email,
|
||||
}));
|
||||
state.members = members;
|
||||
state.loadingMembers = false;
|
||||
});
|
||||
|
||||
builder.addCase(fetchReportingMembers.pending, state => {
|
||||
state.loadingMembers = true;
|
||||
});
|
||||
|
||||
builder.addCase(fetchReportingMembers.rejected, (state, action) => {
|
||||
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);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -197,6 +341,10 @@ export const {
|
||||
setSelectOrDeselectProject,
|
||||
setSelectOrDeselectAllProjects,
|
||||
setSelectOrDeselectBillable,
|
||||
setSelectOrDeselectMember,
|
||||
setSelectOrDeselectAllMembers,
|
||||
setSelectOrDeselectUtilization,
|
||||
setSelectOrDeselectAllUtilization,
|
||||
setNoCategory,
|
||||
setArchived,
|
||||
} = timeReportsOverviewSlice.actions;
|
||||
|
||||
@@ -15,17 +15,19 @@ import { useTranslation } from 'react-i18next';
|
||||
import { reportingTimesheetApiService } from '@/api/reporting/reporting.timesheet.api.service';
|
||||
import { IRPTTimeMember } from '@/types/reporting/reporting.types';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
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);
|
||||
|
||||
const {
|
||||
@@ -35,8 +37,13 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
|
||||
loadingCategories,
|
||||
projects: filterProjects,
|
||||
loadingProjects,
|
||||
members,
|
||||
loadingMembers,
|
||||
utilization,
|
||||
loadingUtilization,
|
||||
billable,
|
||||
archived,
|
||||
noCategory,
|
||||
} = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
const { duration, dateRange } = useAppSelector(state => state.reportingReducer);
|
||||
|
||||
@@ -44,16 +51,40 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
|
||||
const [jsonData, setJsonData] = useState<IRPTTimeMember[]>([]);
|
||||
|
||||
const labels = Array.isArray(jsonData) ? jsonData.map(item => item.name) : [];
|
||||
const dataValues = Array.isArray(jsonData)
|
||||
? jsonData.map(item => {
|
||||
const loggedTimeInHours = parseFloat(item.logged_time || '0') / 3600;
|
||||
return loggedTimeInHours.toFixed(2);
|
||||
})
|
||||
: [];
|
||||
const colors = Array.isArray(jsonData) ? jsonData.map(item => item.color_code) : [];
|
||||
const dataValues = Array.isArray(jsonData) ? jsonData.map(item => {
|
||||
const loggedTimeInHours = parseFloat(item.logged_time || '0') / 3600;
|
||||
return loggedTimeInHours.toFixed(2);
|
||||
}) : [];
|
||||
const colors = Array.isArray(jsonData) ? jsonData.map(item => {
|
||||
const utilizationPercent = parseFloat(item.utilization_percent || '0');
|
||||
|
||||
if (utilizationPercent < 90) {
|
||||
return '#faad14'; // Orange for under-utilized (< 90%)
|
||||
} else if (utilizationPercent <= 110) {
|
||||
return '#52c41a'; // Green for optimal utilization (90-110%)
|
||||
} else {
|
||||
return '#ef4444'; // Red for over-utilized (> 110%)
|
||||
}
|
||||
}) : [];
|
||||
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Helper function to format hours to "X hours Y mins"
|
||||
const formatHours = (decimalHours: number) => {
|
||||
const wholeHours = Math.floor(decimalHours);
|
||||
const minutes = Math.round((decimalHours - wholeHours) * 60);
|
||||
|
||||
if (wholeHours === 0 && minutes === 0) {
|
||||
return '0 mins';
|
||||
} else if (wholeHours === 0) {
|
||||
return `${minutes} mins`;
|
||||
} else if (minutes === 0) {
|
||||
return `${wholeHours} ${wholeHours === 1 ? 'hour' : 'hours'}`;
|
||||
} else {
|
||||
return `${wholeHours} ${wholeHours === 1 ? 'hour' : 'hours'} ${minutes} mins`;
|
||||
}
|
||||
};
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels,
|
||||
@@ -78,27 +109,96 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
|
||||
offset: 20,
|
||||
textStrokeColor: 'black',
|
||||
textStrokeWidth: 4,
|
||||
formatter: function(value: string) {
|
||||
const hours = parseFloat(value);
|
||||
const wholeHours = Math.floor(hours);
|
||||
const minutes = Math.round((hours - wholeHours) * 60);
|
||||
|
||||
if (wholeHours === 0 && minutes === 0) {
|
||||
return '0 mins';
|
||||
} else if (wholeHours === 0) {
|
||||
return `${minutes} mins`;
|
||||
} else if (minutes === 0) {
|
||||
return `${wholeHours} ${wholeHours === 1 ? 'hour' : 'hours'}`;
|
||||
} else {
|
||||
return `${wholeHours} ${wholeHours === 1 ? 'hour' : 'hours'} ${minutes} mins`;
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'top' as const,
|
||||
},
|
||||
tooltip: {
|
||||
// Basic styling
|
||||
backgroundColor: themeMode === 'dark' ? 'rgba(0, 0, 0, 0.9)' : 'rgba(255, 255, 255, 0.9)',
|
||||
titleColor: themeMode === 'dark' ? '#ffffff' : '#000000',
|
||||
bodyColor: themeMode === 'dark' ? '#ffffff' : '#000000',
|
||||
borderColor: themeMode === 'dark' ? '#4a5568' : '#e2e8f0',
|
||||
cornerRadius: 8,
|
||||
padding: 12,
|
||||
|
||||
// Remove colored squares
|
||||
displayColors: false,
|
||||
|
||||
// Positioning - better alignment for horizontal bar chart
|
||||
xAlign: 'left' as const,
|
||||
yAlign: 'center' as const,
|
||||
|
||||
callbacks: {
|
||||
// Customize the title (member name)
|
||||
title: function (context: any) {
|
||||
const idx = context[0].dataIndex;
|
||||
const member = jsonData[idx];
|
||||
return `👤 ${member?.name || 'Unknown Member'}`;
|
||||
},
|
||||
|
||||
// Customize the label content
|
||||
label: function (context: any) {
|
||||
const idx = context.dataIndex;
|
||||
const member = jsonData[idx];
|
||||
const hours = member?.utilized_hours || '0.00';
|
||||
const percent = member?.utilization_percent || '0.00';
|
||||
const overUnder = member?.over_under_utilized_hours || '0.00';
|
||||
const hours = parseFloat(member?.utilized_hours || '0');
|
||||
const percent = parseFloat(member?.utilization_percent || '0.00');
|
||||
const overUnder = parseFloat(member?.over_under_utilized_hours || '0');
|
||||
|
||||
// Color indicators based on utilization state
|
||||
let statusText = '';
|
||||
let criteriaText = '';
|
||||
switch (member.utilization_state) {
|
||||
case 'under':
|
||||
statusText = '🟠 Under-Utilized';
|
||||
criteriaText = '(< 90%)';
|
||||
break;
|
||||
case 'optimal':
|
||||
statusText = '🟢 Optimally Utilized';
|
||||
criteriaText = '(90% - 110%)';
|
||||
break;
|
||||
case 'over':
|
||||
statusText = '🔴 Over-Utilized';
|
||||
criteriaText = '(> 110%)';
|
||||
break;
|
||||
default:
|
||||
statusText = '⚪ Unknown';
|
||||
criteriaText = '';
|
||||
}
|
||||
|
||||
return [
|
||||
`${context.dataset.label}: ${hours} h`,
|
||||
`Utilization: ${percent}%`,
|
||||
`Over/Under Utilized: ${overUnder} h`,
|
||||
`⏱️ ${context.dataset.label}: ${formatHours(hours)}`,
|
||||
`📊 Utilization: ${percent.toFixed(1)}%`,
|
||||
`${statusText} ${criteriaText}`,
|
||||
`📈 Variance: ${formatHours(Math.abs(overUnder))}${overUnder < 0 ? ' (under)' : overUnder > 0 ? ' (over)' : ''}`
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Add a footer with additional info
|
||||
footer: function (context: any) {
|
||||
const idx = context[0].dataIndex;
|
||||
const member = jsonData[idx];
|
||||
const loggedTime = parseFloat(member?.logged_time || '0') / 3600;
|
||||
return `📊 Total Logged: ${formatHours(loggedTime)}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
backgroundColor: 'black',
|
||||
indexAxis: 'y' as const,
|
||||
@@ -142,30 +242,93 @@ 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);
|
||||
|
||||
// Format dates using date-fns
|
||||
const formattedDateRange = dateRange ? [
|
||||
format(new Date(dateRange[0]), 'yyyy-MM-dd'),
|
||||
format(new Date(dateRange[1]), 'yyyy-MM-dd')
|
||||
] : undefined;
|
||||
|
||||
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,
|
||||
date_range: formattedDateRange,
|
||||
billable,
|
||||
noCategory,
|
||||
};
|
||||
|
||||
const res = await reportingTimesheetApiService.getMemberTimeSheets(body, archived);
|
||||
|
||||
if (res.done) {
|
||||
setJsonData(res.body || []);
|
||||
// Ensure filteredRows is always an array, even if API returns null/undefined
|
||||
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);
|
||||
} else {
|
||||
// Handle API error case
|
||||
setJsonData([]);
|
||||
onTotalsUpdate({
|
||||
total_time_logs: "0",
|
||||
total_estimated_hours: "0",
|
||||
total_utilization: "0"
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching chart data:', error);
|
||||
logger.error('Error fetching chart data:', error);
|
||||
// Reset data on error
|
||||
setJsonData([]);
|
||||
onTotalsUpdate({
|
||||
total_time_logs: "0",
|
||||
total_estimated_hours: "0",
|
||||
total_utilization: "0"
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Create stable references for selected items to prevent unnecessary re-renders
|
||||
const selectedTeamIds = React.useMemo(() =>
|
||||
teams.filter(team => team.selected).map(t => t.id).join(','),
|
||||
[teams]
|
||||
);
|
||||
|
||||
const selectedProjectIds = React.useMemo(() =>
|
||||
filterProjects.filter(project => project.selected).map(p => p.id).join(','),
|
||||
[filterProjects]
|
||||
);
|
||||
|
||||
const selectedCategoryIds = React.useMemo(() =>
|
||||
categories.filter(category => category.selected).map(c => c.id).join(','),
|
||||
[categories]
|
||||
);
|
||||
|
||||
const selectedMemberIds = React.useMemo(() =>
|
||||
members.filter(member => member.selected).map(m => m.id).join(','),
|
||||
[members]
|
||||
);
|
||||
|
||||
const selectedUtilizationIds = React.useMemo(() =>
|
||||
utilization.filter(item => item.selected).map(u => u.id).join(','),
|
||||
[utilization]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchChartData();
|
||||
}, [dispatch, duration, dateRange, billable, archived, teams, filterProjects, categories]);
|
||||
}, [duration, dateRange, billable, archived, noCategory, selectedTeamIds, selectedProjectIds, selectedCategoryIds, selectedMemberIds, selectedUtilizationIds]);
|
||||
|
||||
const exportChart = () => {
|
||||
if (chartRef.current) {
|
||||
@@ -197,7 +360,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
exportChart,
|
||||
exportChart
|
||||
}));
|
||||
|
||||
return (
|
||||
@@ -218,4 +381,4 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
|
||||
|
||||
MembersTimeSheet.displayName = 'MembersTimeSheet';
|
||||
|
||||
export default MembersTimeSheet;
|
||||
export default MembersTimeSheet;
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Card, Flex, Segmented } from '@/shared/antd-imports';
|
||||
import TimeReportPageHeader from '@/pages/reporting/timeReports/page-header/time-report-page-header';
|
||||
import TimeReportPageHeader from '@/components/reporting/time-reports/page-header/TimeReportPageHeader';
|
||||
import EstimatedVsActualTimeSheet, {
|
||||
EstimatedVsActualTimeSheetRef,
|
||||
} from '@/pages/reporting/time-reports/estimated-vs-actual-time-sheet/estimated-vs-actual-time-sheet';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
||||
import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
|
||||
import TimeReportingRightHeader from '@/components/reporting/time-reports/right-header/TimeReportingRightHeader';
|
||||
import { useState, useRef } from 'react';
|
||||
|
||||
const EstimatedVsActualTimeReports = () => {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Card, Flex } from '@/shared/antd-imports';
|
||||
import TimeReportPageHeader from '@/pages/reporting/timeReports/page-header/time-report-page-header';
|
||||
import TimeReportPageHeader from '@/components/reporting/time-reports/page-header/TimeReportPageHeader';
|
||||
import MembersTimeSheet, {
|
||||
MembersTimeSheetRef,
|
||||
} from '@/pages/reporting/time-reports/members-time-sheet/members-time-sheet';
|
||||
import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
|
||||
import TimeReportingRightHeader from '@/components/reporting/time-reports/right-header/TimeReportingRightHeader';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
||||
import { useRef } from 'react';
|
||||
@@ -20,10 +20,20 @@ const MembersTimeReports = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleTotalsUpdate = (totals: {
|
||||
total_time_logs: string;
|
||||
total_estimated_hours: string;
|
||||
total_utilization: string;
|
||||
}) => {
|
||||
// Handle totals update if needed
|
||||
// This could be used to display totals in the UI or pass to parent components
|
||||
console.log('Totals updated:', totals);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex vertical>
|
||||
<TimeReportingRightHeader
|
||||
title={t('Members Time Sheet')}
|
||||
title={t('membersTimeSheet')}
|
||||
exportType={[{ key: 'png', label: 'PNG' }]}
|
||||
export={handleExport}
|
||||
/>
|
||||
@@ -43,7 +53,7 @@ const MembersTimeReports = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MembersTimeSheet ref={chartRef} />
|
||||
<MembersTimeSheet ref={chartRef} onTotalsUpdate={handleTotalsUpdate} />
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import TimeReportPageHeader from '@/pages/reporting/timeReports/page-header/time-report-page-header';
|
||||
import TimeReportPageHeader from '@/components/reporting/time-reports/page-header/TimeReportPageHeader';
|
||||
import { Flex } from '@/shared/antd-imports';
|
||||
import TimeSheetTable from '@/pages/reporting/time-reports/time-sheet-table/time-sheet-table';
|
||||
import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
|
||||
import TimeReportingRightHeader from '@/components/reporting/time-reports/right-header/TimeReportingRightHeader';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import { setSelectOrDeselectBillable } from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { CaretDownFilled } from '@/shared/antd-imports';
|
||||
import { Button, Checkbox, Dropdown, MenuProps } from '@/shared/antd-imports';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Billable: React.FC = () => {
|
||||
const { t } = useTranslation('time-report');
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { billable } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
|
||||
// Dropdown items for the menu
|
||||
const menuItems: MenuProps['items'] = [
|
||||
{
|
||||
key: 'search',
|
||||
label: <Checkbox checked={billable.billable}>{t('billable')}</Checkbox>,
|
||||
onClick: () => {
|
||||
dispatch(setSelectOrDeselectBillable({ ...billable, billable: !billable.billable }));
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'selectAll',
|
||||
label: <Checkbox checked={billable.nonBillable}>{t('nonBillable')}</Checkbox>,
|
||||
onClick: () => {
|
||||
dispatch(setSelectOrDeselectBillable({ ...billable, nonBillable: !billable.nonBillable }));
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={{ items: menuItems }}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
overlayStyle={{ maxHeight: '330px', overflowY: 'auto' }}
|
||||
>
|
||||
<Button>
|
||||
{t('billable')} <CaretDownFilled />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Billable;
|
||||
@@ -1,143 +0,0 @@
|
||||
import {
|
||||
fetchReportingProjects,
|
||||
setNoCategory,
|
||||
setSelectOrDeselectAllCategories,
|
||||
setSelectOrDeselectCategory,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { CaretDownFilled } from '@/shared/antd-imports';
|
||||
import { Button, Card, Checkbox, Divider, Dropdown, Input, theme } from '@/shared/antd-imports';
|
||||
import { CheckboxChangeEvent } from 'antd/es/checkbox';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Categories: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectAll, setSelectAll] = useState(true);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { categories, loadingCategories, noCategory } = useAppSelector(
|
||||
state => state.timeReportsOverviewReducer
|
||||
);
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const filteredItems = categories.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
// Handle checkbox change for individual items
|
||||
const handleCheckboxChange = async (key: string, checked: boolean) => {
|
||||
await dispatch(setSelectOrDeselectCategory({ id: key, selected: checked }));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
// Handle "Select All" checkbox change
|
||||
const handleSelectAllChange = async (e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
setSelectAll(isChecked);
|
||||
await dispatch(setNoCategory(isChecked));
|
||||
await dispatch(setSelectOrDeselectAllCategories(isChecked));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const handleNoCategoryChange = async (checked: boolean) => {
|
||||
await dispatch(setNoCategory(checked));
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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('searchByCategory')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{categories.length > 0 && (
|
||||
<div style={{ padding: '0 12px', flexShrink: 0 }}>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
onChange={handleSelectAllChange}
|
||||
checked={selectAll}
|
||||
>
|
||||
{t('selectAll')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ padding: '8px 12px 4px 12px', flexShrink: 0 }}>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={noCategory}
|
||||
onChange={e => handleNoCategoryChange(e.target.checked)}
|
||||
>
|
||||
{t('noCategory')}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<Divider style={{ margin: '4px 0', flexShrink: 0 }} />
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{filteredItems.length > 0 ? (
|
||||
filteredItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={item.selected}
|
||||
onChange={e => handleCheckboxChange(item.id || '', e.target.checked)}
|
||||
>
|
||||
{item.name}
|
||||
</Checkbox>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div style={{ padding: '8px 12px' }}>{t('noCategories')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button loading={loadingCategories}>
|
||||
{t('categories')} <CaretDownFilled />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categories;
|
||||
@@ -1,680 +0,0 @@
|
||||
import {
|
||||
setSelectOrDeselectAllProjects,
|
||||
setSelectOrDeselectProject,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import {
|
||||
CaretDownFilled,
|
||||
SearchOutlined,
|
||||
ClearOutlined,
|
||||
DownOutlined,
|
||||
RightOutlined,
|
||||
FilterOutlined,
|
||||
} from '@/shared/antd-imports';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
theme,
|
||||
Typography,
|
||||
Badge,
|
||||
Collapse,
|
||||
Select,
|
||||
Space,
|
||||
Tooltip,
|
||||
Empty,
|
||||
} from '@/shared/antd-imports';
|
||||
import { CheckboxChangeEvent } from 'antd/es/checkbox';
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ISelectableProject } from '@/types/reporting/reporting-filters.types';
|
||||
import { themeWiseColor } from '@/utils/themeWiseColor';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const { Text } = Typography;
|
||||
|
||||
type GroupByOption = 'none' | 'category' | 'team' | 'status';
|
||||
|
||||
interface ProjectGroup {
|
||||
key: string;
|
||||
name: string;
|
||||
color?: string;
|
||||
projects: ISelectableProject[];
|
||||
}
|
||||
|
||||
const Projects: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [groupBy, setGroupBy] = useState<GroupByOption>('none');
|
||||
const [showSelectedOnly, setShowSelectedOnly] = useState(false);
|
||||
const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { projects, loadingProjects } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
const { token } = theme.useToken();
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Theme-aware color utilities
|
||||
const getThemeAwareColor = useCallback(
|
||||
(lightColor: string, darkColor: string) => {
|
||||
return themeWiseColor(lightColor, darkColor, themeMode);
|
||||
},
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
// Enhanced color processing for project/group colors
|
||||
const processColor = useCallback(
|
||||
(color: string | undefined, fallback?: string) => {
|
||||
if (!color) return fallback || token.colorPrimary;
|
||||
|
||||
// If it's a hex color, ensure it has good contrast in both themes
|
||||
if (color.startsWith('#')) {
|
||||
// For dark mode, lighten dark colors and darken light colors for better visibility
|
||||
if (themeMode === 'dark') {
|
||||
// Simple brightness adjustment for dark mode
|
||||
const hex = color.replace('#', '');
|
||||
const r = parseInt(hex.substr(0, 2), 16);
|
||||
const g = parseInt(hex.substr(2, 2), 16);
|
||||
const b = parseInt(hex.substr(4, 2), 16);
|
||||
|
||||
// Calculate brightness (0-255)
|
||||
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
||||
|
||||
// If color is too dark in dark mode, lighten it
|
||||
if (brightness < 100) {
|
||||
const factor = 1.5;
|
||||
const newR = Math.min(255, Math.floor(r * factor));
|
||||
const newG = Math.min(255, Math.floor(g * factor));
|
||||
const newB = Math.min(255, Math.floor(b * factor));
|
||||
return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
|
||||
}
|
||||
} else {
|
||||
// For light mode, ensure colors aren't too light
|
||||
const hex = color.replace('#', '');
|
||||
const r = parseInt(hex.substr(0, 2), 16);
|
||||
const g = parseInt(hex.substr(2, 2), 16);
|
||||
const b = parseInt(hex.substr(4, 2), 16);
|
||||
|
||||
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
||||
|
||||
// If color is too light in light mode, darken it
|
||||
if (brightness > 200) {
|
||||
const factor = 0.7;
|
||||
const newR = Math.floor(r * factor);
|
||||
const newG = Math.floor(g * factor);
|
||||
const newB = Math.floor(b * factor);
|
||||
return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return color;
|
||||
},
|
||||
[themeMode, token.colorPrimary]
|
||||
);
|
||||
|
||||
// Memoized filtered projects
|
||||
const filteredProjects = useMemo(() => {
|
||||
let filtered = projects.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
if (showSelectedOnly) {
|
||||
filtered = filtered.filter(item => item.selected);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [projects, searchText, showSelectedOnly]);
|
||||
|
||||
// Memoized grouped projects
|
||||
const groupedProjects = useMemo(() => {
|
||||
if (groupBy === 'none') {
|
||||
return [
|
||||
{
|
||||
key: 'all',
|
||||
name: t('projects'),
|
||||
projects: filteredProjects,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const groups: { [key: string]: ProjectGroup } = {};
|
||||
|
||||
filteredProjects.forEach(project => {
|
||||
let groupKey: string;
|
||||
let groupName: string;
|
||||
let groupColor: string | undefined;
|
||||
|
||||
switch (groupBy) {
|
||||
case 'category':
|
||||
groupKey = (project as any).category_id || 'uncategorized';
|
||||
groupName = (project as any).category_name || t('noCategory');
|
||||
groupColor = (project as any).category_color;
|
||||
break;
|
||||
case 'team':
|
||||
groupKey = (project as any).team_id || 'no-team';
|
||||
groupName = (project as any).team_name || t('ungrouped');
|
||||
groupColor = (project as any).team_color;
|
||||
break;
|
||||
case 'status':
|
||||
groupKey = (project as any).status_id || 'no-status';
|
||||
groupName = (project as any).status_name || t('ungrouped');
|
||||
groupColor = (project as any).status_color;
|
||||
break;
|
||||
default:
|
||||
groupKey = 'all';
|
||||
groupName = t('projects');
|
||||
}
|
||||
|
||||
if (!groups[groupKey]) {
|
||||
groups[groupKey] = {
|
||||
key: groupKey,
|
||||
name: groupName,
|
||||
color: processColor(groupColor),
|
||||
projects: [],
|
||||
};
|
||||
}
|
||||
|
||||
groups[groupKey].projects.push(project);
|
||||
});
|
||||
|
||||
return Object.values(groups).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [filteredProjects, groupBy, t, processColor]);
|
||||
|
||||
// Selected projects count
|
||||
const selectedCount = useMemo(() => projects.filter(p => p.selected).length, [projects]);
|
||||
|
||||
const allSelected = useMemo(
|
||||
() => filteredProjects.length > 0 && filteredProjects.every(p => p.selected),
|
||||
[filteredProjects]
|
||||
);
|
||||
|
||||
const indeterminate = useMemo(
|
||||
() => filteredProjects.some(p => p.selected) && !allSelected,
|
||||
[filteredProjects, allSelected]
|
||||
);
|
||||
|
||||
// Memoize group by options
|
||||
const groupByOptions = useMemo(
|
||||
() => [
|
||||
{ value: 'none', label: t('groupByNone') },
|
||||
{ value: 'category', label: t('groupByCategory') },
|
||||
{ value: 'team', label: t('groupByTeam') },
|
||||
{ value: 'status', label: t('groupByStatus') },
|
||||
],
|
||||
[t]
|
||||
);
|
||||
|
||||
// Memoize dropdown styles to prevent recalculation on every render
|
||||
const dropdownStyles = useMemo(
|
||||
() => ({
|
||||
dropdown: {
|
||||
background: token.colorBgContainer,
|
||||
borderRadius: token.borderRadius,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
border: `1px solid ${token.colorBorder}`,
|
||||
},
|
||||
groupHeader: {
|
||||
backgroundColor: getThemeAwareColor(token.colorFillTertiary, token.colorFillQuaternary),
|
||||
borderRadius: token.borderRadiusSM,
|
||||
padding: '8px 12px',
|
||||
marginBottom: '4px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
border: `1px solid ${getThemeAwareColor(token.colorBorderSecondary, token.colorBorder)}`,
|
||||
},
|
||||
projectItem: {
|
||||
padding: '8px 12px',
|
||||
borderRadius: token.borderRadiusSM,
|
||||
transition: 'all 0.2s ease',
|
||||
cursor: 'pointer',
|
||||
border: `1px solid transparent`,
|
||||
},
|
||||
toggleIcon: {
|
||||
color: getThemeAwareColor(token.colorTextSecondary, token.colorTextTertiary),
|
||||
fontSize: '12px',
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
expandedToggleIcon: {
|
||||
color: getThemeAwareColor(token.colorPrimary, token.colorPrimaryActive),
|
||||
fontSize: '12px',
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
}),
|
||||
[token, getThemeAwareColor]
|
||||
);
|
||||
|
||||
// Memoize search placeholder and clear tooltip
|
||||
const searchPlaceholder = useMemo(() => t('searchByProject'), [t]);
|
||||
const clearTooltip = useMemo(() => t('clearSearch'), [t]);
|
||||
const showSelectedTooltip = useMemo(() => t('showSelected'), [t]);
|
||||
const selectAllText = useMemo(() => t('selectAll'), [t]);
|
||||
const projectsSelectedText = useMemo(() => t('projectsSelected'), [t]);
|
||||
const noProjectsText = useMemo(() => t('noProjects'), [t]);
|
||||
const noDataText = useMemo(() => t('noData'), [t]);
|
||||
const expandAllText = useMemo(() => t('expandAll'), [t]);
|
||||
const collapseAllText = useMemo(() => t('collapseAll'), [t]);
|
||||
|
||||
// Handle checkbox change for individual items
|
||||
const handleCheckboxChange = useCallback(
|
||||
(key: string, checked: boolean) => {
|
||||
dispatch(setSelectOrDeselectProject({ id: key, selected: checked }));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
// Handle "Select All" checkbox change
|
||||
const handleSelectAllChange = useCallback(
|
||||
(e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
dispatch(setSelectOrDeselectAllProjects(isChecked));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
// Clear search
|
||||
const clearSearch = useCallback(() => {
|
||||
setSearchText('');
|
||||
}, []);
|
||||
|
||||
// Toggle group expansion
|
||||
const toggleGroupExpansion = useCallback((groupKey: string) => {
|
||||
setExpandedGroups(prev =>
|
||||
prev.includes(groupKey) ? prev.filter(key => key !== groupKey) : [...prev, groupKey]
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Expand/Collapse all groups
|
||||
const toggleAllGroups = useCallback(
|
||||
(expand: boolean) => {
|
||||
if (expand) {
|
||||
setExpandedGroups(groupedProjects.map(g => g.key));
|
||||
} else {
|
||||
setExpandedGroups([]);
|
||||
}
|
||||
},
|
||||
[groupedProjects]
|
||||
);
|
||||
|
||||
// Render project group
|
||||
const renderProjectGroup = (group: ProjectGroup) => {
|
||||
const isExpanded = expandedGroups.includes(group.key) || groupBy === 'none';
|
||||
const groupSelectedCount = group.projects.filter(p => p.selected).length;
|
||||
|
||||
return (
|
||||
<div key={group.key} style={{ marginBottom: '8px' }}>
|
||||
{groupBy !== 'none' && (
|
||||
<div
|
||||
style={{
|
||||
...dropdownStyles.groupHeader,
|
||||
backgroundColor: isExpanded
|
||||
? getThemeAwareColor(token.colorFillSecondary, token.colorFillTertiary)
|
||||
: dropdownStyles.groupHeader.backgroundColor,
|
||||
}}
|
||||
onClick={() => toggleGroupExpansion(group.key)}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = getThemeAwareColor(
|
||||
token.colorFillSecondary,
|
||||
token.colorFillTertiary
|
||||
);
|
||||
e.currentTarget.style.borderColor = getThemeAwareColor(
|
||||
token.colorBorder,
|
||||
token.colorBorderSecondary
|
||||
);
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = isExpanded
|
||||
? getThemeAwareColor(token.colorFillSecondary, token.colorFillTertiary)
|
||||
: dropdownStyles.groupHeader.backgroundColor;
|
||||
e.currentTarget.style.borderColor = getThemeAwareColor(
|
||||
token.colorBorderSecondary,
|
||||
token.colorBorder
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
{isExpanded ? (
|
||||
<DownOutlined style={dropdownStyles.expandedToggleIcon} />
|
||||
) : (
|
||||
<RightOutlined style={dropdownStyles.toggleIcon} />
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: group.color || processColor(undefined, token.colorPrimary),
|
||||
flexShrink: 0,
|
||||
border: `1px solid ${getThemeAwareColor('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.2)')}`,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
strong
|
||||
style={{
|
||||
color: getThemeAwareColor(token.colorText, token.colorTextBase),
|
||||
}}
|
||||
>
|
||||
{group.name}
|
||||
</Text>
|
||||
<Badge
|
||||
count={groupSelectedCount}
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: getThemeAwareColor(token.colorPrimary, token.colorPrimaryActive),
|
||||
color: getThemeAwareColor('#fff', token.colorTextLightSolid),
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isExpanded && (
|
||||
<div style={{ paddingLeft: groupBy !== 'none' ? '24px' : '0' }}>
|
||||
{group.projects.map(project => (
|
||||
<div
|
||||
key={project.id}
|
||||
style={dropdownStyles.projectItem}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.backgroundColor = getThemeAwareColor(
|
||||
token.colorFillAlter,
|
||||
token.colorFillQuaternary
|
||||
);
|
||||
e.currentTarget.style.borderColor = getThemeAwareColor(
|
||||
token.colorBorderSecondary,
|
||||
token.colorBorder
|
||||
);
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
e.currentTarget.style.borderColor = 'transparent';
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={project.selected}
|
||||
onChange={e => handleCheckboxChange(project.id || '', e.target.checked)}
|
||||
>
|
||||
<Space>
|
||||
<div
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: processColor(
|
||||
(project as any).color_code,
|
||||
token.colorPrimary
|
||||
),
|
||||
flexShrink: 0,
|
||||
border: `1px solid ${getThemeAwareColor('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.2)')}`,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: getThemeAwareColor(token.colorText, token.colorTextBase),
|
||||
}}
|
||||
>
|
||||
{project.name}
|
||||
</Text>
|
||||
</Space>
|
||||
</Checkbox>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dropdown
|
||||
menu={undefined}
|
||||
placement="bottomLeft"
|
||||
trigger={['click']}
|
||||
open={dropdownVisible}
|
||||
dropdownRender={() => (
|
||||
<div
|
||||
style={{
|
||||
...dropdownStyles.dropdown,
|
||||
padding: '8px 0',
|
||||
maxHeight: '500px',
|
||||
width: '400px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header with search and controls */}
|
||||
<div style={{ padding: '8px 12px', flexShrink: 0 }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="small">
|
||||
{/* Search input */}
|
||||
<Input
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
prefix={
|
||||
<SearchOutlined
|
||||
style={{
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextTertiary,
|
||||
token.colorTextQuaternary
|
||||
),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
suffix={
|
||||
searchText && (
|
||||
<Tooltip title={clearTooltip}>
|
||||
<ClearOutlined
|
||||
onClick={clearSearch}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextTertiary,
|
||||
token.colorTextQuaternary
|
||||
),
|
||||
transition: 'color 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
e.currentTarget.style.color = getThemeAwareColor(
|
||||
token.colorTextSecondary,
|
||||
token.colorTextTertiary
|
||||
);
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.color = getThemeAwareColor(
|
||||
token.colorTextTertiary,
|
||||
token.colorTextQuaternary
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
onClick={e => e.stopPropagation()}
|
||||
/>
|
||||
|
||||
{/* Controls row */}
|
||||
<Space style={{ width: '100%', justifyContent: 'space-between' }}>
|
||||
<Space size="small">
|
||||
<Select
|
||||
value={groupBy}
|
||||
onChange={setGroupBy}
|
||||
size="small"
|
||||
style={{ width: '120px' }}
|
||||
options={groupByOptions}
|
||||
/>
|
||||
|
||||
{groupBy !== 'none' && (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => toggleAllGroups(true)}
|
||||
style={{
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextSecondary,
|
||||
token.colorTextTertiary
|
||||
),
|
||||
}}
|
||||
>
|
||||
{expandAllText}
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => toggleAllGroups(false)}
|
||||
style={{
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextSecondary,
|
||||
token.colorTextTertiary
|
||||
),
|
||||
}}
|
||||
>
|
||||
{collapseAllText}
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
<Tooltip title={showSelectedTooltip}>
|
||||
<Button
|
||||
type={showSelectedOnly ? 'primary' : 'text'}
|
||||
size="small"
|
||||
icon={<FilterOutlined />}
|
||||
onClick={() => setShowSelectedOnly(!showSelectedOnly)}
|
||||
style={
|
||||
!showSelectedOnly
|
||||
? {
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextSecondary,
|
||||
token.colorTextTertiary
|
||||
),
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* Select All checkbox */}
|
||||
<div style={{ padding: '8px 12px', flexShrink: 0 }}>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
onChange={handleSelectAllChange}
|
||||
checked={allSelected}
|
||||
indeterminate={indeterminate}
|
||||
>
|
||||
<Space>
|
||||
<Text
|
||||
style={{
|
||||
color: getThemeAwareColor(token.colorText, token.colorTextBase),
|
||||
}}
|
||||
>
|
||||
{selectAllText}
|
||||
</Text>
|
||||
{selectedCount > 0 && (
|
||||
<Badge
|
||||
count={selectedCount}
|
||||
size="small"
|
||||
style={{
|
||||
backgroundColor: getThemeAwareColor(
|
||||
token.colorSuccess,
|
||||
token.colorSuccessActive
|
||||
),
|
||||
color: getThemeAwareColor('#fff', token.colorTextLightSolid),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</Checkbox>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '8px 0', flexShrink: 0 }} />
|
||||
|
||||
{/* Projects list */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: 'auto',
|
||||
flex: 1,
|
||||
padding: '0 12px',
|
||||
}}
|
||||
>
|
||||
{filteredProjects.length === 0 ? (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
<Text
|
||||
style={{
|
||||
color: getThemeAwareColor(
|
||||
token.colorTextTertiary,
|
||||
token.colorTextQuaternary
|
||||
),
|
||||
}}
|
||||
>
|
||||
{searchText ? noProjectsText : noDataText}
|
||||
</Text>
|
||||
}
|
||||
style={{ margin: '20px 0' }}
|
||||
/>
|
||||
) : (
|
||||
groupedProjects.map(renderProjectGroup)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer with selection summary */}
|
||||
{selectedCount > 0 && (
|
||||
<>
|
||||
<Divider style={{ margin: '8px 0', flexShrink: 0 }} />
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
flexShrink: 0,
|
||||
backgroundColor: getThemeAwareColor(
|
||||
token.colorFillAlter,
|
||||
token.colorFillQuaternary
|
||||
),
|
||||
borderRadius: `0 0 ${token.borderRadius}px ${token.borderRadius}px`,
|
||||
borderTop: `1px solid ${getThemeAwareColor(token.colorBorderSecondary, token.colorBorder)}`,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: getThemeAwareColor(token.colorTextTertiary, token.colorTextQuaternary),
|
||||
}}
|
||||
>
|
||||
{selectedCount} {projectsSelectedText}
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
setShowSelectedOnly(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Badge count={selectedCount} size="small" offset={[-5, 5]}>
|
||||
<Button loading={loadingProjects}>
|
||||
<Space>
|
||||
{t('projects')}
|
||||
<CaretDownFilled />
|
||||
</Space>
|
||||
</Button>
|
||||
</Badge>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
@@ -1,120 +0,0 @@
|
||||
import { CaretDownFilled } from '@/shared/antd-imports';
|
||||
import { Button, Checkbox, Divider, Dropdown, Input, theme } from '@/shared/antd-imports';
|
||||
import React, { useState } from 'react';
|
||||
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import {
|
||||
fetchReportingCategories,
|
||||
fetchReportingProjects,
|
||||
setSelectOrDeselectAllTeams,
|
||||
setSelectOrDeselectTeam,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
|
||||
const Team: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectAll, setSelectAll] = useState(true);
|
||||
const { t } = useTranslation('time-report');
|
||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const { teams, loadingTeams } = useAppSelector(state => state.timeReportsOverviewReducer);
|
||||
|
||||
const filteredItems = teams.filter(item =>
|
||||
item.name?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
|
||||
const handleCheckboxChange = async (key: string, checked: boolean) => {
|
||||
dispatch(setSelectOrDeselectTeam({ id: key, selected: checked }));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
const handleSelectAllChange = async (e: CheckboxChangeEvent) => {
|
||||
const isChecked = e.target.checked;
|
||||
setSelectAll(isChecked);
|
||||
dispatch(setSelectOrDeselectAllTeams(isChecked));
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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
|
||||
placeholder={t('searchByName')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
/>
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
{filteredItems.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
onClick={e => e.stopPropagation()}
|
||||
checked={item.selected}
|
||||
onChange={e => handleCheckboxChange(item.id || '', e.target.checked)}
|
||||
>
|
||||
{item.name}
|
||||
</Checkbox>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onOpenChange={visible => {
|
||||
setDropdownVisible(visible);
|
||||
if (!visible) {
|
||||
setSearchText('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button loading={loadingTeams}>
|
||||
{t('teams')} <CaretDownFilled />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -1,36 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import Team from './team';
|
||||
import Categories from './categories';
|
||||
import Projects from './projects';
|
||||
import Billable from './billable';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import {
|
||||
fetchReportingTeams,
|
||||
fetchReportingProjects,
|
||||
fetchReportingCategories,
|
||||
} from '@/features/reporting/time-reports/time-reports-overview.slice';
|
||||
|
||||
const TimeReportPageHeader: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
await dispatch(fetchReportingTeams());
|
||||
await dispatch(fetchReportingCategories());
|
||||
await dispatch(fetchReportingProjects());
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<Team />
|
||||
<Categories />
|
||||
<Projects />
|
||||
<Billable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeReportPageHeader;
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Card, Flex } from '@/shared/antd-imports';
|
||||
import TimeReportPageHeader from '@/pages/reporting/timeReports/page-header/time-report-page-header';
|
||||
import TimeReportPageHeader from '@/components/reporting/time-reports/page-header/TimeReportPageHeader';
|
||||
import ProjectTimeSheetChart, {
|
||||
ProjectTimeSheetChartRef,
|
||||
} from '@/pages/reporting/time-reports/project-time-sheet/project-time-sheet-chart';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
||||
import TimeReportingRightHeader from './timeReportingRightHeader/TimeReportingRightHeader';
|
||||
import TimeReportingRightHeader from '@/components/reporting/time-reports/right-header/TimeReportingRightHeader';
|
||||
import { useRef } from 'react';
|
||||
|
||||
const ProjectsTimeReports = () => {
|
||||
|
||||
@@ -56,7 +56,7 @@ const LanguageAndRegionSettings = () => {
|
||||
label: 'Deutsch',
|
||||
},
|
||||
{
|
||||
value: Language.ZH_CN,
|
||||
value: Language.ZH,
|
||||
label: '简体中文',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -263,6 +263,7 @@ export type {
|
||||
PaginationProps,
|
||||
CollapseProps,
|
||||
TablePaginationConfig,
|
||||
CheckboxChangeEvent
|
||||
} from 'antd/es';
|
||||
|
||||
// Dayjs
|
||||
|
||||
@@ -20,7 +20,7 @@ export const currentDateString = (): string => {
|
||||
case 'de':
|
||||
locale = 'de';
|
||||
break;
|
||||
case 'zh_cn':
|
||||
case 'zh':
|
||||
locale = 'zh-cn';
|
||||
break;
|
||||
case 'alb':
|
||||
@@ -45,7 +45,7 @@ export const currentDateString = (): string => {
|
||||
case 'de':
|
||||
todayText = 'Heute ist';
|
||||
break;
|
||||
case 'zh_cn':
|
||||
case 'zh':
|
||||
todayText = '今天是';
|
||||
break;
|
||||
case 'alb':
|
||||
|
||||
@@ -41,7 +41,7 @@ export const greetingString = (name: string): string => {
|
||||
morning = 'Morgen';
|
||||
afternoon = 'Tag';
|
||||
evening = 'Abend';
|
||||
} else if (language === 'zh_cn') {
|
||||
} else if (language === 'zh') {
|
||||
greetingPrefix = '你好';
|
||||
greetingSuffix = '';
|
||||
morning = '早上好';
|
||||
@@ -56,7 +56,7 @@ export const greetingString = (name: string): string => {
|
||||
else localizedTimePeriod = evening;
|
||||
|
||||
// Handle Chinese language which has different structure
|
||||
if (language === 'zh_cn') {
|
||||
if (language === 'zh') {
|
||||
return `${greetingPrefix} ${name}, ${localizedTimePeriod}!`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user