From 3ee7839ca9814f93fe309b7241fdf5af15d22c5e Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 18 Sep 2024 16:54:10 +0200
Subject: [PATCH] add detailed reporting page

---
 .../V1/TimeEntry/TimeEntryIndexRequest.php    |  14 +
 resources/js/Layouts/AppLayout.vue            |   5 +-
 resources/js/Pages/Reporting.vue              |  18 +-
 resources/js/Pages/ReportingDetailed.vue      | 349 ++++++++++++++++++
 resources/js/packages/api/src/index.ts        |   5 +
 .../packages/api/src/openapi.json.client.ts   |  10 +-
 .../ui/src/Input/MultiselectDropdown.vue      |   4 +-
 .../ui/src/Input/MultiselectDropdownItem.vue  |   4 +-
 .../TimeEntry/TimeEntryDescriptionInput.vue   |   6 +-
 .../src/TimeEntry/TimeEntryRangeSelector.vue  |  12 +-
 .../ui/src/TimeEntry/TimeEntryRow.vue         |  23 +-
 resources/js/utils/useTimeEntries.ts          |  14 +-
 routes/web.php                                |   4 +
 13 files changed, 446 insertions(+), 22 deletions(-)
 create mode 100644 resources/js/Pages/ReportingDetailed.vue

diff --git a/app/Http/Requests/V1/TimeEntry/TimeEntryIndexRequest.php b/app/Http/Requests/V1/TimeEntry/TimeEntryIndexRequest.php
index d7f4fae2..972bb0f1 100644
--- a/app/Http/Requests/V1/TimeEntry/TimeEntryIndexRequest.php
+++ b/app/Http/Requests/V1/TimeEntry/TimeEntryIndexRequest.php
@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
 use App\Models\Project;
@@ -49,6 +50,19 @@ class TimeEntryIndexRequest extends FormRequest
                     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',
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 99bfc784..9f2fb23d 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/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>
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index cda54941..edc6ecbc 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/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">
diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue
new file mode 100644
index 00000000..92980eb5
--- /dev/null
+++ b/resources/js/Pages/ReportingDetailed.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import { FolderIcon } from '@heroicons/vue/16/solid';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import {
+    ChartBarIcon,
+    UserGroupIcon,
+    CheckCircleIcon,
+    TagIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+} from '@heroicons/vue/20/solid';
+import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import {
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { storeToRefs } from 'pinia';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+import type {
+    Client,
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    TimeEntriesQueryParams,
+    TimeEntry,
+} from '@/packages/api/src';
+import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
+import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
+import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
+import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
+import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
+import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
+import { useTagsStore } from '@/utils/useTags';
+import { useElementVisibility, useSessionStorage } from '@vueuse/core';
+import { router } from '@inertiajs/vue3';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTasksStore } from '@/utils/useTasks';
+import { useClientsStore } from '@/utils/useClients';
+import dayjs from 'dayjs';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { useMembersStore } from '@/utils/useMembers';
+import { SecondaryButton } from '@/packages/ui/src';
+
+const startDate = useSessionStorage<string>(
+    'reporting-start-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
+);
+const endDate = useSessionStorage<string>(
+    'reporting-end-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).format()
+);
+const selectedTags = ref<string[]>([]);
+const selectedProjects = ref<string[]>([]);
+const selectedMembers = ref<string[]>([]);
+const selectedTasks = ref<string[]>([]);
+const selectedClients = ref<string[]>([]);
+const billable = ref<'true' | 'false' | null>(null);
+
+const { members } = storeToRefs(useMembersStore());
+const pageLimit = 10;
+function getFilterAttributes() {
+    let params: TimeEntriesQueryParams = {
+        start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
+        end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
+        active: 'false',
+        limit: pageLimit,
+    };
+    params = {
+        ...params,
+        member_ids:
+            selectedMembers.value.length > 0
+                ? selectedMembers.value
+                : undefined,
+        project_ids:
+            selectedProjects.value.length > 0
+                ? selectedProjects.value
+                : undefined,
+        task_ids:
+            selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
+        client_ids:
+            selectedClients.value.length > 0
+                ? selectedClients.value
+                : undefined,
+        tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+        billable: billable.value !== null ? billable.value : undefined,
+    };
+    return params;
+}
+
+const timeEntriesStore = useTimeEntriesStore();
+const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
+const { updateTimeEntry, fetchTimeEntries, createTimeEntry } =
+    useTimeEntriesStore();
+
+const loading = ref(false);
+const loadMoreContainer = ref<HTMLDivElement | null>(null);
+const isLoadMoreVisible = useElementVisibility(loadMoreContainer);
+const currentTimeEntryStore = useCurrentTimeEntryStore();
+const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
+const { stopTimer } = currentTimeEntryStore;
+const { tags } = storeToRefs(useTagsStore());
+
+const currentPage = ref(1);
+
+function deleteTimeEntries(timeEntries: TimeEntry[]) {
+    timeEntries.forEach((entry) => {
+        timeEntriesStore.deleteTimeEntry(entry.id);
+    });
+    updateFilteredTimeEntries();
+}
+
+watch(isLoadMoreVisible, async (isVisible) => {
+    if (
+        isVisible &&
+        timeEntries.value.length > 0 &&
+        !allTimeEntriesLoaded.value
+    ) {
+        loading.value = true;
+        await timeEntriesStore.fetchMoreTimeEntries();
+    }
+});
+
+onMounted(async () => {
+    await updateFilteredTimeEntries();
+});
+
+const projectStore = useProjectsStore();
+const { projects } = storeToRefs(projectStore);
+const taskStore = useTasksStore();
+const { tasks } = storeToRefs(taskStore);
+const clientStore = useClientsStore();
+const { clients } = storeToRefs(clientStore);
+
+async function createTag(name: string) {
+    return await useTagsStore().createTag(name);
+}
+async function createProject(
+    project: CreateProjectBody
+): Promise<Project | undefined> {
+    return await useProjectsStore().createProject(project);
+}
+async function createClient(
+    body: CreateClientBody
+): Promise<Client | undefined> {
+    return await useClientsStore().createClient(body);
+}
+
+async function startTimeEntryFromExisting(entry: TimeEntry) {
+    if (currentTimeEntry.value.id) {
+        await stopTimer();
+    }
+    await createTimeEntry({
+        project_id: entry.project_id,
+        task_id: entry.task_id,
+        start: dayjs().utc().format(),
+        end: null,
+        billable: entry.billable,
+        description: entry.description,
+    });
+    updateFilteredTimeEntries();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+}
+
+async function updateFilteredTimeEntries() {
+    await fetchTimeEntries(getFilterAttributes());
+}
+
+const isNextPageAvailable = computed(() => {
+    return timeEntries && timeEntries.value.length === pageLimit;
+});
+
+function nextPage() {
+    currentPage.value++;
+    fetchTimeEntries({
+        ...getFilterAttributes(),
+        end: timeEntries.value[timeEntries.value.length - 1].start,
+    });
+}
+</script>
+
+<template>
+    <AppLayout
+        title="Reporting"
+        data-testid="reporting_view"
+        class="overflow-hidden">
+        <MainContainer
+            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'))"
+                        >Overview
+                    </TabBarItem>
+                    <TabBarItem
+                        @click="router.visit(route('reporting.detailed'))"
+                        active
+                        >Detailed
+                    </TabBarItem>
+                </TabBar>
+            </div>
+        </MainContainer>
+        <div class="py-2 w-full border-b border-default-background-separator">
+            <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-4">
+                    <div class="text-sm font-medium">Filters</div>
+                    <MemberMultiselectDropdown
+                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedMembers">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                :count="selectedMembers.length"
+                                :active="selectedMembers.length > 0"
+                                title="Members"
+                                :icon="UserGroupIcon"></ReportingFilterBadge>
+                        </template>
+                    </MemberMultiselectDropdown>
+                    <ProjectMultiselectDropdown
+                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedProjects">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                :count="selectedProjects.length"
+                                :active="selectedProjects.length > 0"
+                                title="Projects"
+                                :icon="FolderIcon"></ReportingFilterBadge>
+                        </template>
+                    </ProjectMultiselectDropdown>
+                    <TaskMultiselectDropdown
+                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedTasks">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                :count="selectedTasks.length"
+                                :active="selectedTasks.length > 0"
+                                title="Tasks"
+                                :icon="CheckCircleIcon"></ReportingFilterBadge>
+                        </template>
+                    </TaskMultiselectDropdown>
+                    <ClientMultiselectDropdown
+                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedClients">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                title="Clients"
+                                :icon="FolderIcon"></ReportingFilterBadge>
+                        </template>
+                    </ClientMultiselectDropdown>
+                    <TagDropdown
+                        @submit="updateFilteredTimeEntries"
+                        :createTag
+                        v-model="selectedTags"
+                        :tags="tags">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                :count="selectedTags.length"
+                                :active="selectedTags.length > 0"
+                                title="Tags"
+                                :icon="TagIcon"></ReportingFilterBadge>
+                        </template>
+                    </TagDropdown>
+
+                    <SelectDropdown
+                        @changed="updateFilteredTimeEntries"
+                        v-model="billable"
+                        :get-key-from-item="(item) => item.value"
+                        :get-name-for-item="(item) => item.label"
+                        :items="[
+                            {
+                                label: 'Both',
+                                value: null,
+                            },
+                            {
+                                label: 'Billable',
+                                value: 'true',
+                            },
+                            {
+                                label: 'Non Billable',
+                                value: 'false',
+                            },
+                        ]">
+                        <template v-slot:trigger>
+                            <ReportingFilterBadge
+                                :active="billable !== null"
+                                :title="
+                                    billable === 'false'
+                                        ? 'Non Billable'
+                                        : 'Billable'
+                                "
+                                :icon="BillableIcon"></ReportingFilterBadge>
+                        </template>
+                    </SelectDropdown>
+                </div>
+                <div>
+                    <DateRangePicker
+                        v-model:start="startDate"
+                        v-model:end="endDate"
+                        @submit="updateFilteredTimeEntries"></DateRangePicker>
+                </div>
+            </MainContainer>
+        </div>
+        <div class="w-full relative">
+            <div v-for="(entry, key) in timeEntries" :key="key">
+                <TimeEntryRow
+                    :createClient
+                    :createProject
+                    :projects="projects"
+                    :tasks="tasks"
+                    :tags="tags"
+                    :clients
+                    :createTag
+                    :updateTimeEntry
+                    :onStartStopClick="() => startTimeEntryFromExisting(entry)"
+                    :deleteTimeEntry="() => deleteTimeEntries([entry])"
+                    :currency="getOrganizationCurrencyString()"
+                    :members="members"
+                    showDate
+                    showMember
+                    :time-entry="entry"></TimeEntryRow>
+            </div>
+        </div>
+
+        <div
+            class="flex space-x-5 text-sm font-medium py-8 justify-center items-center">
+            <SecondaryButton size="small" disabled>
+                <ChevronLeftIcon class="w-4 text-text-tertiary">
+                </ChevronLeftIcon>
+            </SecondaryButton>
+            <span> Page {{ currentPage }} </span>
+            <SecondaryButton
+                :disabled="!isNextPageAvailable"
+                @click="nextPage"
+                size="small">
+                <ChevronRightIcon
+                    class="w-4 text-text-tertiary"></ChevronRightIcon>
+            </SecondaryButton>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/packages/api/src/index.ts b/resources/js/packages/api/src/index.ts
index 9ee2a2cd..120812f9 100644
--- a/resources/js/packages/api/src/index.ts
+++ b/resources/js/packages/api/src/index.ts
@@ -107,6 +107,11 @@ export type ReportingResponse = ZodiosResponseByAlias<
 export type AggregatedTimeEntries = ReportingResponse['data'];
 export type GroupedDataEntries = ReportingResponse['data']['grouped_data'];
 
+export type TimeEntriesQueryParams = ZodiosQueryParamsByAlias<
+    SolidTimeApi,
+    'getTimeEntries'
+>;
+
 export type AggregatedTimeEntriesQueryParams = ZodiosQueryParamsByAlias<
     SolidTimeApi,
     'getAggregatedTimeEntries'
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index 084ad8c4..8d4aa9e4 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -2157,6 +2157,11 @@ Users with the permission &#x60;time-entries:view:own&#x60; can only use this en
                 type: 'Query',
                 schema: z.array(z.string().uuid()).min(1).optional(),
             },
+            {
+                name: 'client_ids',
+                type: 'Query',
+                schema: z.array(z.string().uuid()).min(1).optional(),
+            },
             {
                 name: 'project_ids',
                 type: 'Query',
@@ -2172,11 +2177,6 @@ Users with the permission &#x60;time-entries:view:own&#x60; can only use this en
                 type: 'Query',
                 schema: z.array(z.string().uuid()).min(1).optional(),
             },
-            {
-                name: 'client_ids',
-                type: 'Query',
-                schema: z.string().optional(),
-            },
             {
                 name: 'user_id',
                 type: 'Query',
diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
index ebbee064..f6df0393 100644
--- a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
@@ -165,7 +165,9 @@ const highlightedItem = computed(() => {
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 :placeholder="searchPlaceholder" />
-            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
+            <div
+                ref="dropdownViewport"
+                class="min-w-60 max-w-80 max-h-60 overflow-y-scroll">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item)"
diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue b/resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue
index d8702d26..b978acca 100644
--- a/resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue
+++ b/resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue
@@ -21,7 +21,9 @@ const iconClasses = computed(() => {
     <div
         class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
         <CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
-        <span>{{ name }}</span>
+        <span class="flex-1 min-w-0 overflow-ellipsis overflow-hidden">{{
+            name
+        }}</span>
     </div>
 </template>
 
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
index 0c526516..4bfd127d 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
@@ -29,8 +29,8 @@ const displaysPlaceholder = computed(() => {
         <div class="relative text-sm font-medium min-w-0">
             <div
                 :class="[
-                    'opacity-0 py-2 text-base whitespace-pre min-w-0 pl-3 pr-1',
-                    { 'min-w-[150px]': displaysPlaceholder },
+                    'opacity-0 py-2 text-sm whitespace-pre min-w-0 pl-3 pr-1',
+                    { 'min-w-[130px]': displaysPlaceholder },
                 ]">
                 {{ liveDataValue }}
             </div>
@@ -41,7 +41,7 @@ const displaysPlaceholder = computed(() => {
                 @input="onInput"
                 @keydown.enter="onChange"
                 placeholder="Add a description"
-                class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
+                class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
         </div>
     </div>
 </template>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
index 271ad0ae..84c10ccc 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { defineProps, ref } from 'vue';
-import { formatStartEnd } from '@/packages/ui/src/utils/time';
+import { formatDate, formatStartEnd } from '@/packages/ui/src/utils/time';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 
 defineProps<{
     start: string;
     end: string | null;
+    showDate?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -26,8 +27,15 @@ const open = ref(false);
             <template #trigger>
                 <button
                     data-testid="time_entry_range_selector"
-                    class="text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
+                    class="text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border"
+                    :class="{
+                        'text-sm py-2 font-medium': !showDate,
+                        'text-xs py-1.5 font-semibold': showDate,
+                    }">
                     {{ formatStartEnd(start, end) }}
+                    <span v-if="showDate" class="text-text-tertiary font-medium"
+                        >{{ formatDate(start) }}
+                    </span>
                 </button>
             </template>
             <template #content>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
index feac8eaf..66a77624 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
@@ -6,6 +6,7 @@ import type {
     Client,
     CreateClientBody,
     CreateProjectBody,
+    Member,
     Project,
     Tag,
     Task,
@@ -17,6 +18,7 @@ import TimeEntryRowDurationInput from '@/packages/ui/src/TimeEntry/TimeEntryRowD
 import TimeEntryMoreOptionsDropdown from '@/packages/ui/src/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
+import { computed } from 'vue';
 
 const props = defineProps<{
     timeEntry: TimeEntry;
@@ -25,6 +27,7 @@ const props = defineProps<{
     tasks: Task[];
     tags: Tag[];
     clients: Client[];
+    members?: Member[];
     createTag: (name: string) => Promise<Tag | undefined>;
     createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
@@ -32,6 +35,8 @@ const props = defineProps<{
     deleteTimeEntry: () => void;
     updateTimeEntry: (timeEntry: TimeEntry) => void;
     currency: string;
+    showMember?: boolean;
+    showDate?: boolean;
 }>();
 
 function updateTimeEntryDescription(description: string) {
@@ -57,6 +62,18 @@ function updateProjectAndTask(projectId: string, taskId: string) {
         task_id: taskId,
     });
 }
+
+const memberName = computed(() => {
+    if (props.members) {
+        const member = props.members.find(
+            (member) => member.user_id === props.timeEntry.user_id
+        );
+        if (member) {
+            return member.name;
+        }
+    }
+    return '';
+});
 </script>
 
 <template>
@@ -65,7 +82,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
             <div
-                class="sm:flex py-1 lg:py-1.5 min-w-0 items-center justify-between group">
+                class="sm:flex py-0.5 min-w-0 items-center justify-between group">
                 <div class="flex space-x-1 items-center min-w-0">
                     <input
                         type="checkbox"
@@ -91,6 +108,9 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                         "></TimeTrackerProjectTaskDropdown>
                 </div>
                 <div class="flex items-center font-medium lg:space-x-2">
+                    <div class="text-sm px-2" v-if="showMember && members">
+                        {{ memberName }}
+                    </div>
                     <TimeEntryRowTagDropdown
                         @changed="updateTimeEntryTags"
                         :createTag
@@ -107,6 +127,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             class="hidden lg:block"
                             :start="timeEntry.start"
                             :end="timeEntry.end"
+                            :showDate
                             @changed="
                                 updateStartEndTime
                             "></TimeEntryRangeSelector>
diff --git a/resources/js/utils/useTimeEntries.ts b/resources/js/utils/useTimeEntries.ts
index 28c7ab28..43209eab 100644
--- a/resources/js/utils/useTimeEntries.ts
+++ b/resources/js/utils/useTimeEntries.ts
@@ -8,6 +8,7 @@ import { reactive, ref } from 'vue';
 import {
     api,
     type CreateTimeEntryBody,
+    type TimeEntriesQueryParams,
     type TimeEntry,
 } from '@/packages/api/src';
 import dayjs from 'dayjs';
@@ -19,8 +20,14 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
     const allTimeEntriesLoaded = ref(false);
     const { handleApiRequestNotifications } = useNotificationsStore();
 
-    async function fetchTimeEntries() {
+    async function fetchTimeEntries(
+        queryParams: TimeEntriesQueryParams = {
+            only_full_dates: 'true',
+            member_id: getCurrentMembershipId(),
+        }
+    ) {
         const organizationId = getCurrentOrganizationId();
+
         if (organizationId) {
             const timeEntriesResponse = await handleApiRequestNotifications(
                 () =>
@@ -28,10 +35,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
                         params: {
                             organization: organizationId,
                         },
-                        queries: {
-                            only_full_dates: 'true',
-                            member_id: getCurrentMembershipId(),
-                        },
+                        queries: queryParams,
                     }),
                 undefined,
                 'Failed to fetch time entries'
diff --git a/routes/web.php b/routes/web.php
index 76e3d6c0..b5c59cca 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -36,6 +36,10 @@ Route::middleware([
         return Inertia::render('Reporting');
     })->name('reporting');
 
+    Route::get('/reporting/detailed', function () {
+        return Inertia::render('ReportingDetailed');
+    })->name('reporting.detailed');
+
     Route::get('/projects', function () {
         return Inertia::render('Projects');
     })->name('projects');