add detailed reporting page

app/Http/Requests/V1/TimeEntry/TimeEntryIndexRequest.php

@@ -49,6 +49,19 @@ public function rules(): array
                     return $builder->whereBelongsTo($this->organization, 'organization');
                 }),
             ],
+            // Filter by client IDs, client IDs are OR combined
+            'client_ids' => [
+                'array',
+                'min:1',
+            ],
+            'client_ids.*' => [
+                'string',
+                'uuid',
+                new ExistsEloquent(Client::class, null, function (Builder $builder): Builder {
+                    /** @var Builder<Client> $builder */
+                    return $builder->whereBelongsTo($this->organization, 'organization');
+                }),
+            ],
             // Filter by project IDs, project IDs are OR combined
             'project_ids' => [
                 'array',

resources/js/Layouts/AppLayout.vue

@@ -114,7 +114,10 @@ const page = usePage<{
                             <NavigationSidebarItem
                                 title="Reporting"
                                 :icon="ChartBarIcon"
-                                :current="route().current('reporting')"
+                                :current="
+                                    route().current('reporting') ||
+                                    route().current('reporting.detailed')
+                                "
                                 :href="
                                     route('reporting')
                                 "></NavigationSidebarItem>

resources/js/Pages/Reporting.vue

@@ -35,13 +35,16 @@ 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';
+import { useSessionStorage, useStorage } from '@vueuse/core';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import { router } from '@inertiajs/vue3';
 
-const startDate = useStorage<string>(
+const startDate = useSessionStorage<string>(
     'reporting-start-date',
     getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
 );
-const endDate = useStorage<string>(
+const endDate = useSessionStorage<string>(
     'reporting-end-date',
     getLocalizedDayJs(getDayJsInstance()().format()).format()
 );
@@ -157,6 +160,15 @@ async function createTag(tag: string) {
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
                 <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
+                <TabBar>
+                    <TabBarItem @click="router.visit(route('reporting'))" active
+                        >Overview</TabBarItem
+                    >
+                    <TabBarItem
+                        @click="router.visit(route('reporting.detailed'))"
+                        >Detailed</TabBarItem
+                    >
+                </TabBar>
             </div>
         </MainContainer>
         <div class="p-3 w-full border-b border-default-background-separator">