From e2c6026b47c7722575b83b7329b8b495848b14c7 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 16 May 2024 13:08:10 +0200
Subject: [PATCH] add aggregation/grouping of time entries with same attributes
 in time view

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 .../Common/Member/MemberTableRow.vue          |   4 +-
 .../TimeEntry/TimeEntryAggregateRow.vue       | 195 ++++++++++++++++++
 .../TimeEntry/TimeEntryDescriptionInput.vue   |   6 +-
 .../TimeEntry/TimeEntryRangeSelector.vue      |   9 +-
 .../Common/TimeEntry/TimeEntryRow.vue         |  12 +-
 .../TimeTrackerProjectTaskDropdown.vue        |  51 +++--
 .../Common/TimeTrackerStartStop.vue           |   4 +-
 resources/js/Components/Dropdown.vue          |  10 +-
 resources/js/Components/TimeTracker.vue       |   2 +-
 resources/js/Pages/Time.vue                   |  87 ++++++--
 resources/js/utils/time.ts                    |   8 +
 resources/js/utils/useMembers.ts              |  22 +-
 resources/js/utils/useTimeEntries.ts          |   1 +
 15 files changed, 355 insertions(+), 66 deletions(-)
 create mode 100644 resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue

diff --git a/package-lock.json b/package-lock.json
index f063c924..508cfc1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@vue/eslint-config-prettier": "^9.0.0",
                 "@vue/eslint-config-typescript": "^13.0.0",
                 "@vueuse/core": "^10.9.0",
-                "dayjs": "^1.11.10",
+                "dayjs": "^1.11.11",
                 "echarts": "^5.5.0",
                 "parse-duration": "^1.1.0",
                 "pinia": "^2.1.7",
@@ -2549,9 +2549,9 @@
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
         "node_modules/dayjs": {
-            "version": "1.11.10",
-            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-            "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+            "version": "1.11.11",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+            "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
         },
         "node_modules/de-indent": {
             "version": "1.0.2",
diff --git a/package.json b/package.json
index 95b4798e..835beac3 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vueuse/core": "^10.9.0",
-        "dayjs": "^1.11.10",
+        "dayjs": "^1.11.11",
         "echarts": "^5.5.0",
         "parse-duration": "^1.1.0",
         "pinia": "^2.1.7",
diff --git a/resources/js/Components/Common/Member/MemberTableRow.vue b/resources/js/Components/Common/Member/MemberTableRow.vue
index 8f898eba..56c4d3ab 100644
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Member } from '@/utils/api';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
-import { useClientsStore } from '@/utils/useClients';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
@@ -10,13 +9,14 @@ import { api } from '../../../../../openapi.json.client';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { canInvitePlaceholderMembers } from '@/utils/permissions';
+import { useMembersStore } from '@/utils/useMembers';
 
 const props = defineProps<{
     member: Member;
 }>();
 
 function removeMember() {
-    useClientsStore().deleteClient(props.member.id);
+    useMembersStore().removeMember(props.member.id);
 }
 
 async function invitePlaceholder(id: string) {
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
new file mode 100644
index 00000000..a5ec4efa
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import MainContainer from '@/Pages/MainContainer.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import type { TimeEntry } from '@/utils/api';
+import { storeToRefs } from 'pinia';
+import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
+import {
+    type TimeEntriesGroupedByType,
+    useTimeEntriesStore,
+} from '@/utils/useTimeEntries';
+import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
+import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
+import { computed, ref } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import {
+    formatHumanReadableDuration,
+    formatStartEnd,
+} from '../../../utils/time';
+import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
+
+const currentTimeEntryStore = useCurrentTimeEntryStore();
+const { stopTimer } = currentTimeEntryStore;
+const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
+
+const props = defineProps<{
+    timeEntry: TimeEntriesGroupedByType;
+}>();
+
+const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
+    useTimeEntriesStore();
+
+async function onStartStopClick() {
+    if (props.timeEntry.start && !props.timeEntry.end) {
+        await updateTimeEntry({
+            ...props.timeEntry,
+            end: dayjs().utc().format(),
+        });
+    } else {
+        if (currentTimeEntry.value.id) {
+            await stopTimer();
+        }
+        await createTimeEntry({
+            ...props.timeEntry,
+            start: dayjs().utc().format(),
+            end: null,
+        });
+    }
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+    fetchTimeEntries();
+}
+
+function deleteTimeEntry() {
+    const timeEntries = props.timeEntry.timeEntries;
+    timeEntries.forEach((entry) => {
+        useTimeEntriesStore().deleteTimeEntry(entry.id);
+    });
+    fetchTimeEntries();
+}
+
+function updateTimeEntryDescription(description: string) {
+    const timeEntries = props.timeEntry.timeEntries;
+    timeEntries.forEach((entry) => {
+        updateTimeEntry({ ...entry, description });
+        entry.description = description;
+    });
+}
+
+function updateTimeEntryTags(tags: string[]) {
+    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
+    timeEntries.forEach((entry) => {
+        updateTimeEntry({ ...entry, tags });
+        entry.tags = tags;
+    });
+}
+
+function updateTimeEntryBillable(billable: boolean) {
+    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
+    timeEntries.forEach((entry) => {
+        updateTimeEntry({ ...entry, billable });
+        entry.billable = billable;
+    });
+}
+
+function updateProjectAndTask(projectId: string, taskId: string) {
+    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
+    timeEntries.forEach((entry) => {
+        updateTimeEntry({
+            ...entry,
+            project_id: projectId,
+            task_id: taskId,
+        });
+        entry.project_id = projectId;
+        entry.task_id = taskId;
+    });
+}
+
+const expanded = ref(false);
+
+const expandedStatusClasses = computed(() => {
+    if (expanded.value) {
+        return 'border-card-border border bg-card-background-active text-white';
+    }
+    return 'border-card-border border bg-card-background text-muted';
+});
+</script>
+
+<template>
+    <div
+        class="border-b border-default-background-separator transition"
+        data-testid="time_entry_row">
+        <MainContainer>
+            <div class="sm:flex py-1.5 items-center justify-between group">
+                <div class="flex space-x-3 items-center">
+                    <input
+                        type="checkbox"
+                        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+                    <button
+                        @click="expanded = !expanded"
+                        :class="
+                            twMerge(
+                                expandedStatusClasses,
+                                'font-medium w-7 h-7 rounded flex items-center transition justify-center'
+                            )
+                        ">
+                        <span>
+                            {{ timeEntry?.timeEntries?.length }}
+                        </span>
+                    </button>
+                    <TimeEntryDescriptionInput
+                        @changed="updateTimeEntryDescription"
+                        class="flex-1"
+                        :modelValue="
+                            timeEntry.description
+                        "></TimeEntryDescriptionInput>
+                    <TimeTrackerProjectTaskDropdown
+                        :showBadgeBorder="false"
+                        @changed="updateProjectAndTask"
+                        :project="timeEntry.project_id"
+                        :task="
+                            timeEntry.task_id
+                        "></TimeTrackerProjectTaskDropdown>
+                </div>
+                <div class="flex items-center font-medium space-x-2">
+                    <TimeEntryRowTagDropdown
+                        @changed="updateTimeEntryTags"
+                        :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
+                    <BillableToggleButton
+                        :modelValue="timeEntry.billable"
+                        size="small"
+                        @changed="
+                            updateTimeEntryBillable
+                        "></BillableToggleButton>
+                    <div class="flex-1">
+                        <button
+                            @click="expanded = !expanded"
+                            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">
+                            {{ formatStartEnd(timeEntry.start, timeEntry.end) }}
+                        </button>
+                    </div>
+                    <button
+                        @click="expanded = !expanded"
+                        class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold">
+                        {{
+                            formatHumanReadableDuration(timeEntry.duration ?? 0)
+                        }}
+                    </button>
+
+                    <TimeTrackerStartStop
+                        @changed="onStartStopClick"
+                        :active="!!(timeEntry.start && !timeEntry.end)"
+                        class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
+                    <TimeEntryMoreOptionsDropdown
+                        @delete="
+                            deleteTimeEntry
+                        "></TimeEntryMoreOptionsDropdown>
+                </div>
+            </div>
+        </MainContainer>
+        <div
+            v-if="expanded"
+            class="w-full border-t border-default-background-separator bg-black/15">
+            <TimeEntryRow
+                indent
+                :key="subEntry.id"
+                v-for="subEntry in timeEntry.timeEntries"
+                :time-entry="subEntry"></TimeEntryRow>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
index fec1ad82..e69ac473 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
@@ -4,7 +4,9 @@ const emit = defineEmits(['changed']);
 
 function onChange(event: Event) {
     const target = event.target as HTMLInputElement;
-    emit('changed', target.value);
+    if (target.value !== value.value) {
+        emit('changed', target.value);
+    }
 }
 </script>
 
@@ -13,7 +15,7 @@ function onChange(event: Event) {
         <label class="input-sizer text-sm font-medium" :data-value="value">
             <input
                 data-testid="time_entry_description"
-                v-model="value"
+                :value="value"
                 @blur="onChange"
                 @keydown.enter="onChange"
                 placeholder="Add a description"
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
index 6b05d7e1..2d6595fa 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
 import { defineProps, ref, watch } from 'vue';
-import { formatTime } from '@/utils/time';
+import { formatStartEnd } from '@/utils/time';
 import TimePicker from '@/Components/Common/TimePicker.vue';
 import { useFocusWithin } from '@vueuse/core';
 
@@ -10,13 +10,6 @@ const props = defineProps<{
     end: string | null;
 }>();
 
-function formatStartEnd(start: string, end: string | null) {
-    if (end) {
-        return `${formatTime(start)} - ${formatTime(end)}`;
-    } else {
-        return `${formatTime(start)} - ...`;
-    }
-}
 const emit = defineEmits(['changed']);
 const tempStart = ref(props.start);
 const tempEnd = ref(props.end || null);
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
index 9dc53de5..36f321f2 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
@@ -20,6 +20,7 @@ const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
 
 const props = defineProps<{
     timeEntry: TimeEntry;
+    indent?: boolean;
 }>();
 
 const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
@@ -69,6 +70,10 @@ function updateTimeEntryTags(tags: string[]) {
     updateTimeEntry({ ...props.timeEntry, tags });
 }
 
+function updateTimeEntryBillable(billable: boolean) {
+    updateTimeEntry({ ...props.timeEntry, billable });
+}
+
 function updateProjectAndTask(projectId: string, taskId: string) {
     updateTimeEntry({
         ...props.timeEntry,
@@ -88,13 +93,13 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+                    <div class="w-7 h-7" v-if="indent === true"></div>
                     <TimeEntryDescriptionInput
                         @changed="updateTimeEntryDescription"
                         class="flex-1"
                         :modelValue="
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
-
                     <TimeTrackerProjectTaskDropdown
                         :showBadgeBorder="false"
                         @changed="updateProjectAndTask"
@@ -111,10 +116,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                         :modelValue="timeEntry.billable"
                         size="small"
                         @changed="
-                            updateTimeEntry({
-                                ...timeEntry,
-                                billable: $event,
-                            })
+                            updateTimeEntryBillable
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 5f5b03c2..cbe67f6e 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -54,28 +54,43 @@ withDefaults(
 );
 
 const filteredProjects = computed(() => {
-    return projects.value.reduce((filtered: ProjectWithTasks[], project) => {
-        const projectNameIncludesSearchTerm = project.name
-            .toLowerCase()
-            .includes(searchValue.value?.toLowerCase()?.trim() || '');
-
-        // check if one of the project tasks
-        const projectTasks = tasks.value.filter((task) => {
-            return task.project_id === project.id;
-        });
-
-        const filteredTasks = projectTasks.filter((task) => {
-            return task.name
+    return projects.value.reduce(
+        (filtered: ProjectWithTasks[], project) => {
+            const projectNameIncludesSearchTerm = project.name
                 .toLowerCase()
                 .includes(searchValue.value?.toLowerCase()?.trim() || '');
-        });
 
-        if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
-            filtered.push({ project: project, tasks: filteredTasks });
-        }
+            // check if one of the project tasks
+            const projectTasks = tasks.value.filter((task) => {
+                return task.project_id === project.id;
+            });
 
-        return filtered;
-    }, []);
+            const filteredTasks = projectTasks.filter((task) => {
+                return task.name
+                    .toLowerCase()
+                    .includes(searchValue.value?.toLowerCase()?.trim() || '');
+            });
+
+            if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
+                filtered.push({ project: project, tasks: filteredTasks });
+            }
+
+            return filtered;
+        },
+        [
+            {
+                project: {
+                    id: '',
+                    name: 'No Project',
+                    color: 'var(--theme-color-icon-default)',
+                    value: '',
+                    client_id: null,
+                    billable_rate: null,
+                },
+                tasks: [],
+            },
+        ]
+    );
 });
 
 async function addClientIfNoneExists() {
diff --git a/resources/js/Components/Common/TimeTrackerStartStop.vue b/resources/js/Components/Common/TimeTrackerStartStop.vue
index 9b553b0e..b0e1d8bc 100644
--- a/resources/js/Components/Common/TimeTrackerStartStop.vue
+++ b/resources/js/Components/Common/TimeTrackerStartStop.vue
@@ -16,11 +16,11 @@ const props = withDefaults(
 );
 const buttonSizeClasses = {
     base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
-    large: 'w-8 sm:w-11 h-8 sm:h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
+    large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
 };
 const iconClass = {
     base: 'w-3.5 h-3.5',
-    large: 'w-3.5 h-3.5 sm:w-4 sm:h-4',
+    large: 'w-4 h-4',
 };
 
 const buttonColorClasses = computed(() => {
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index b1363360..946cc828 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -8,18 +8,11 @@ const props = withDefaults(
     defineProps<{
         align: Placement;
         width: string;
-        contentClasses?: string[];
         closeOnContentClick: boolean;
     }>(),
     {
         align: 'bottom-start',
         width: '48',
-        contentClasses: () => [
-            'overflow-none',
-            'bg-card-background',
-            'border',
-            'border-card-border',
-        ],
         closeOnContentClick: true,
     }
 );
@@ -101,8 +94,7 @@ const { floatingStyles } = useFloating(reference, floating, {
                     leave-to-class="transform opacity-0 scale-95">
                     <div
                         v-if="open"
-                        class="rounded-lg ring-1 relative ring-black ring-opacity-5"
-                        :class="contentClasses">
+                        class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none bg-card-background shadow-lg">
                         <slot name="content" />
                     </div>
                 </transition>
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index ef4907a7..9e374672 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -194,7 +194,7 @@ function switchToTimeEntryOrganization() {
                         v-model="currentTimeEntry.description"
                         @keydown.enter="startTimerIfNotActive"
                         @blur="updateTimeEntry"
-                        class="w-full rounded-l-lg py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-sm sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
+                        class="w-full rounded-l-lg py-4 sm:py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-base sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
                         type="text" />
                 </div>
                 <div class="flex items-center justify-between pl-2">
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index ba4e7806..80802099 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -3,17 +3,21 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import TimeTracker from '@/Components/TimeTracker.vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import MainContainer from '@/Pages/MainContainer.vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import {
+    type TimeEntriesGroupedByType,
+    useTimeEntriesStore,
+} from '@/utils/useTimeEntries';
 import { storeToRefs } from 'pinia';
 import type { TimeEntry } from '@/utils/api';
 import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import { useElementVisibility } from '@vueuse/core';
 import { ClockIcon } from '@heroicons/vue/20/solid';
-import { getLocalizedDateFromTimestamp } from '@/utils/time';
+import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/utils/time';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { PlusIcon } from '@heroicons/vue/16/solid';
 import TimeEntryCreateModal from '@/Components/Common/TimeEntry/TimeEntryCreateModal.vue';
+import TimeEntryAggregateRow from '@/Components/Common/TimeEntry/TimeEntryAggregateRow.vue';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -38,14 +42,67 @@ onMounted(async () => {
 });
 
 const groupedTimeEntries = computed(() => {
-    const groupedEntries: Record<string, TimeEntry[]> = {};
+    const groupedEntriesByDay: Record<string, TimeEntry[]> = {};
     for (const entry of timeEntries.value) {
         const oldEntries =
-            groupedEntries[getLocalizedDateFromTimestamp(entry.start)];
-        const newEntries = [...(oldEntries ?? []), entry];
-        groupedEntries[getLocalizedDateFromTimestamp(entry.start)] = newEntries;
+            groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)];
+        groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)] = [
+            ...(oldEntries ?? []),
+            entry,
+        ];
     }
-    return groupedEntries;
+    const groupedEntriesByDayAndType: Record<
+        string,
+        TimeEntriesGroupedByType[]
+    > = {};
+    for (const dailyEntriesKey in groupedEntriesByDay) {
+        const dailyEntries = groupedEntriesByDay[dailyEntriesKey];
+        const newDailyEntries: TimeEntriesGroupedByType[] = [];
+
+        for (const entry of dailyEntries) {
+            // check if same entry already exists
+            const oldEntriesIndex = newDailyEntries.findIndex(
+                (e) =>
+                    e.project_id === entry.project_id &&
+                    e.task_id === entry.task_id &&
+                    e.billable === entry.billable &&
+                    e.description === entry.description
+            );
+            console.log(oldEntriesIndex);
+            if (oldEntriesIndex !== -1 && newDailyEntries[oldEntriesIndex]) {
+                newDailyEntries[oldEntriesIndex].timeEntries.push(entry);
+
+                // Add up durations for time entries of the same type
+                console.log(newDailyEntries[oldEntriesIndex], entry?.duration);
+                newDailyEntries[oldEntriesIndex].duration =
+                    (newDailyEntries[oldEntriesIndex].duration ?? 0) +
+                    (entry?.duration ?? 0);
+
+                // adapt start end times so they show the earliest start and latest end time
+                if (
+                    getDayJsInstance()(entry.start).isBefore(
+                        getDayJsInstance()(
+                            newDailyEntries[oldEntriesIndex].start
+                        )
+                    )
+                ) {
+                    newDailyEntries[oldEntriesIndex].start = entry.start;
+                }
+                if (
+                    getDayJsInstance()(entry.end).isAfter(
+                        getDayJsInstance()(newDailyEntries[oldEntriesIndex].end)
+                    )
+                ) {
+                    newDailyEntries[oldEntriesIndex].end = entry.end;
+                }
+            } else {
+                newDailyEntries.push({ ...entry, timeEntries: [entry] });
+            }
+        }
+
+        groupedEntriesByDayAndType[dailyEntriesKey] = newDailyEntries;
+    }
+    return groupedEntriesByDayAndType;
 });
 const showManualTimeEntryModal = ref(false);
 </script>
@@ -66,17 +123,21 @@ const showManualTimeEntryModal = ref(false);
                         class="w-full text-center flex justify-center"
                         @click="showManualTimeEntryModal = true"
                         :icon="PlusIcon"
-                        >Manual time entry</SecondaryButton
-                    >
+                        >Manual time entry
+                    </SecondaryButton>
                 </div>
             </div>
         </MainContainer>
         <div v-for="(value, key) in groupedTimeEntries" :key="key">
             <TimeEntryRowHeading :date="key"></TimeEntryRowHeading>
-            <TimeEntryRow
-                :key="entry.id"
-                v-for="entry in value"
-                :time-entry="entry"></TimeEntryRow>
+            <template v-for="entry in value" :key="entry.id">
+                <TimeEntryAggregateRow
+                    v-if="
+                        'timeEntries' in entry && entry.timeEntries.length > 1
+                    "
+                    :time-entry="entry"></TimeEntryAggregateRow>
+                <TimeEntryRow v-else :time-entry="entry"></TimeEntryRow>
+            </template>
         </div>
         <div
             v-if="Object.keys(groupedTimeEntries).length === 0"
diff --git a/resources/js/utils/time.ts b/resources/js/utils/time.ts
index 39ebef86..ece1dfb3 100644
--- a/resources/js/utils/time.ts
+++ b/resources/js/utils/time.ts
@@ -87,3 +87,11 @@ export function formatHumanReadableDate(date: string) {
     }
     return dayjs(date).fromNow();
 }
+
+export function formatStartEnd(start: string, end: string | null) {
+    if (end) {
+        return `${formatTime(start)} - ${formatTime(end)}`;
+    } else {
+        return `${formatTime(start)} - ...`;
+    }
+}
diff --git a/resources/js/utils/useMembers.ts b/resources/js/utils/useMembers.ts
index 578616ce..faf10084 100644
--- a/resources/js/utils/useMembers.ts
+++ b/resources/js/utils/useMembers.ts
@@ -24,9 +24,29 @@ export const useMembersStore = defineStore('members', () => {
         }
     }
 
+    async function removeMember(membershipId: string) {
+        const organization = getCurrentOrganizationId();
+        if (organization) {
+            await handleApiRequestNotifications(
+                api.removeMember(
+                    {},
+                    {
+                        params: {
+                            organization: organization,
+                            membership: membershipId,
+                        },
+                    }
+                ),
+                'Member deleted successfully',
+                'Failed to delete member'
+            );
+            await fetchMembers();
+        }
+    }
+
     const members = computed<Member[]>(() => {
         return membersResponse.value?.data || [];
     });
 
-    return { members, fetchMembers };
+    return { members, fetchMembers, removeMember };
 });
diff --git a/resources/js/utils/useTimeEntries.ts b/resources/js/utils/useTimeEntries.ts
index 08d41325..8d98f03e 100644
--- a/resources/js/utils/useTimeEntries.ts
+++ b/resources/js/utils/useTimeEntries.ts
@@ -5,6 +5,7 @@ import { reactive, ref } from 'vue';
 import type { CreateTimeEntryBody, TimeEntry } from '@/utils/api';
 import dayjs from 'dayjs';
 import { useNotificationsStore } from '@/utils/notification';
+export type TimeEntriesGroupedByType = TimeEntry & { timeEntries: TimeEntry[] };
 
 export const useTimeEntriesStore = defineStore('timeEntries', () => {
     const timeEntries = ref<TimeEntry[]>(reactive([]));