add reporting client aggregation

resources/js/Components/Common/Reporting/ReportingGroupBySelect.vue

@@ -3,7 +3,11 @@ import { FolderIcon } from '@heroicons/vue/16/solid';
 import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
 import Badge from '@/Components/Common/Badge.vue';
 import { computed } from 'vue';
-import { CheckCircleIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
+import {
+    CheckCircleIcon,
+    UserCircleIcon,
+    UserGroupIcon,
+} from '@heroicons/vue/20/solid';
 import BillableIcon from '@/Components/Common/Icons/BillableIcon.vue';
 
 const groupByOptions = [
@@ -22,6 +26,11 @@ const groupByOptions = [
         value: 'task',
         icon: CheckCircleIcon,
     },
+    {
+        label: 'Clients',
+        value: 'client',
+        icon: UserCircleIcon,
+    },
     {
         label: 'Billable',
         value: 'billable',

resources/js/utils/useReporting.ts

@@ -11,6 +11,7 @@ import { useNotificationsStore } from '@/utils/notification';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useMembersStore } from '@/utils/useMembers';
 import { useTasksStore } from '@/utils/useTasks';
+import { useClientsStore } from '@/utils/useClients';
 
 export const useReportingStore = defineStore('reporting', () => {
     const reportingGraphResponse = ref<ReportingResponse | null>(null);
@@ -75,6 +76,7 @@ export const useReportingStore = defineStore('reporting', () => {
                 project: 'No Project',
                 task: 'No Task',
                 billable: 'Non-Billable',
+                client: 'No Client',
             };
 
             return emptyPlaceholder[type as keyof typeof emptyPlaceholder];
@@ -95,6 +97,11 @@ export const useReportingStore = defineStore('reporting', () => {
             const { tasks } = storeToRefs(taskStore);
             return tasks.value.find((task) => task.id === key)?.name;
         }
+        if (type === 'client') {
+            const clientsStore = useClientsStore();
+            const { clients } = storeToRefs(clientsStore);
+            return clients.value.find((client) => client.id === key)?.name;
+        }
         if (type === 'billable') {
             if (key === '0') {
                 return 'Non-Billable';