add detailed reporting page

2026-08-10 09:12:15 +01:00 · 2024-09-18 16:54:10 +02:00
parent 165391861a
commit 3ee7839ca9
13 changed files with 446 additions and 22 deletions
--- 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',
--- 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>
--- 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">
--- a/resources/js/Pages/ReportingDetailed.vue
+++ 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>
--- 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'
--- 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',
--- 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)"
--- 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>

--- 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>
--- 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>
--- 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>
--- 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'
--- 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');