add detailed reporting page

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)"

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>
 

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>

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>

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>