add description grouping to reporting page (fixes ST-399), persist grouping selection in local storage

resources/js/Pages/Reporting.vue

@@ -35,6 +35,7 @@ import { getCurrentMembershipId, getCurrentRole } from '@/utils/useUser';
 import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
 import { useTagsStore } from '@/utils/useTags';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { useStorage } from '@vueuse/core';
 
 const startDate = ref<string>(
     getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
@@ -50,8 +51,8 @@ const selectedClients = ref<string[]>([]);
 
 const billable = ref<'true' | 'false' | null>(null);
 
-const group = ref<GroupingOption>('project');
-const subGroup = ref<GroupingOption>('task');
+const group = useStorage<GroupingOption>('reporting-group', 'project');
+const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
 
 const reportingStore = useReportingStore();
 

resources/js/packages/api/src/openapi.json.client.ts

@@ -2430,6 +2430,7 @@ If the group parameters are all set to `null` or are all missing, the
                         'task',
                         'client',
                         'billable',
+                        'description',
                     ])
                     .optional(),
             },
@@ -2447,6 +2448,7 @@ If the group parameters are all set to `null` or are all missing, the
                         'task',
                         'client',
                         'billable',
+                        'description',
                     ])
                     .optional(),
             },

resources/js/utils/useReporting.ts

@@ -17,7 +17,7 @@ import {
     UserCircleIcon,
     UserGroupIcon,
 } from '@heroicons/vue/20/solid';
-import { FolderIcon } from '@heroicons/vue/16/solid';
+import { DocumentTextIcon, FolderIcon } from '@heroicons/vue/16/solid';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 
 export type GroupingOption =
@@ -25,7 +25,8 @@ export type GroupingOption =
     | 'task'
     | 'user'
     | 'billable'
-    | 'client';
+    | 'client'
+    | 'description';
 
 export const useReportingStore = defineStore('reporting', () => {
     const reportingGraphResponse = ref<ReportingResponse | null>(null);
@@ -85,6 +86,7 @@ export const useReportingStore = defineStore('reporting', () => {
         task: 'No Task',
         billable: 'Non-Billable',
         client: 'No Client',
+        description: 'No Description',
     } as Record<string, string>;
 
     function getNameForReportingRowEntry(
@@ -158,6 +160,11 @@ export const useReportingStore = defineStore('reporting', () => {
             value: 'billable',
             icon: BillableIcon,
         },
+        {
+            label: 'Description',
+            value: 'description',
+            icon: DocumentTextIcon,
+        },
     ];
 
     return {