Add client_ids filter to time entry export

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

@@ -51,9 +51,7 @@ async function createTag(name: string) {
         <MainContainer class="sm:flex space-y-4 sm:space-y-0 justify-between">
             <div class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-3">
                 <div class="text-sm font-medium">Filters</div>
-                <MemberMultiselectDropdown
-                    v-model="selectedMembers"
-                    @submit="emit('submit')">
+                <MemberMultiselectDropdown v-model="selectedMembers" @submit="emit('submit')">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedMembers.length"
@@ -62,9 +60,7 @@ async function createTag(name: string) {
                             :icon="UserGroupIcon" />
                     </template>
                 </MemberMultiselectDropdown>
-                <ProjectMultiselectDropdown
-                    v-model="selectedProjects"
-                    @submit="emit('submit')">
+                <ProjectMultiselectDropdown v-model="selectedProjects" @submit="emit('submit')">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedProjects.length"
@@ -73,9 +69,7 @@ async function createTag(name: string) {
                             :icon="FolderIcon" />
                     </template>
                 </ProjectMultiselectDropdown>
-                <TaskMultiselectDropdown
-                    v-model="selectedTasks"
-                    @submit="emit('submit')">
+                <TaskMultiselectDropdown v-model="selectedTasks" @submit="emit('submit')">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedTasks.length"
@@ -84,9 +78,7 @@ async function createTag(name: string) {
                             :icon="CheckCircleIcon" />
                     </template>
                 </TaskMultiselectDropdown>
-                <ClientMultiselectDropdown
-                    v-model="selectedClients"
-                    @submit="emit('submit')">
+                <ClientMultiselectDropdown v-model="selectedClients" @submit="emit('submit')">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedClients.length"

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

@@ -182,13 +182,13 @@ const groupedPieChartData = computed(() => {
         aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
             const name = getNameForReportingRowEntry(
                 entry.key,
-                aggregatedTableTimeEntries.value?.grouped_type
+                aggregatedTableTimeEntries.value?.grouped_type ?? null
             );
             let color = getRandomColorWithSeed(entry.key ?? 'none');
             if (
                 name &&
                 aggregatedTableTimeEntries.value?.grouped_type &&
-                emptyPlaceholder[aggregatedTableTimeEntries.value?.grouped_type] === name
+                emptyPlaceholder[aggregatedTableTimeEntries.value.grouped_type] === name
             ) {
                 color = '#CCCCCC';
             } else if (aggregatedTableTimeEntries.value?.grouped_type === 'project') {
@@ -200,7 +200,7 @@ const groupedPieChartData = computed(() => {
                 name:
                     getNameForReportingRowEntry(
                         entry.key,
-                        aggregatedTableTimeEntries.value?.grouped_type
+                        aggregatedTableTimeEntries.value?.grouped_type ?? null
                     ) ?? '',
                 color: color,
             };
@@ -215,7 +215,7 @@ const tableData = computed(() => {
             cost: entry.cost,
             description: getNameForReportingRowEntry(
                 entry.key,
-                aggregatedTableTimeEntries.value?.grouped_type
+                aggregatedTableTimeEntries.value?.grouped_type ?? null
             ),
             grouped_data:
                 entry.grouped_data?.map((el) => {
@@ -256,13 +256,12 @@ const tableData = computed(() => {
         v-model:rounding-type="roundingType"
         v-model:rounding-minutes="roundingMinutes"
         v-model:start-date="startDate"
-        v-model:end-date="endDate"
-        />
+        v-model:end-date="endDate" />
     <MainContainer>
         <div class="pt-10 w-full px-3 relative">
             <ReportingChart
-                :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
-                :grouped-data="aggregatedGraphTimeEntries?.grouped_data"></ReportingChart>
+                :grouped-type="aggregatedGraphTimeEntries?.grouped_type ?? null"
+                :grouped-data="aggregatedGraphTimeEntries?.grouped_data ?? null"></ReportingChart>
         </div>
     </MainContainer>
     <MainContainer>
@@ -273,13 +272,13 @@ const tableData = computed(() => {
                     <span>Group by</span>
                     <ReportingGroupBySelect
                         v-model="group"
-                        :group-by-options="groupByOptions"
-                        ></ReportingGroupBySelect>
+                        :group-by-options="groupByOptions"></ReportingGroupBySelect>
                     <span>and</span>
                     <ReportingGroupBySelect
                         v-model="subGroup"
-                        :group-by-options="groupByOptions.filter((el) => el.value !== group)"
-                        ></ReportingGroupBySelect>
+                        :group-by-options="
+                            groupByOptions.filter((el) => el.value !== group)
+                        "></ReportingGroupBySelect>
                 </div>
                 <div class="grid items-center" style="grid-template-columns: 1fr 100px 150px">
                     <div

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, ref, watch } from 'vue';
+import { computed, type Ref, ref, watch } from 'vue';
 import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
 import {
     ComboboxAnchor,
@@ -27,7 +27,7 @@ const props = defineProps<{
 
 const open = ref(false);
 const searchValue = ref('');
-const sortedItems = ref<T[]>([]);
+const sortedItems = ref<T[]>([]) as Ref<T[]>;
 
 watch(open, (isOpen) => {
     if (isOpen) {
@@ -43,7 +43,9 @@ watch(open, (isOpen) => {
 const filteredItems = computed(() => {
     const search = searchValue.value.toLowerCase().trim();
     if (!search) return sortedItems.value;
-    return sortedItems.value.filter((item) => props.getNameForItem(item).toLowerCase().includes(search));
+    return sortedItems.value.filter((item) =>
+        props.getNameForItem(item).toLowerCase().includes(search)
+    );
 });
 
 const showNoItem = computed(() => {

resources/js/utils/useAggregatedTimeEntriesQuery.ts

@@ -1,5 +1,9 @@
 import { useQuery } from '@tanstack/vue-query';
-import { api, type AggregatedTimeEntriesQueryParams, type ReportingResponse } from '@/packages/api/src';
+import {
+    api,
+    type AggregatedTimeEntriesQueryParams,
+    type ReportingResponse,
+} from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { computed, type ComputedRef, unref } from 'vue';