add mass update to detailed reporting page

resources/js/Components/Common/TimeEntry/TimeEntryMassUpdateModal.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
+import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
+
+import { storeToRefs } from 'pinia';
+import { useTasksStore } from '@/utils/useTasks';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTagsStore } from '@/utils/useTags';
+import {
+    type CreateClientBody,
+    type CreateProjectBody,
+    type Project,
+    type Client,
+    api,
+    type TimeEntry,
+    type UpdateMultipleTimeEntriesChangeset,
+} from '@/packages/api/src';
+import { useClientsStore } from '@/utils/useClients';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { Badge } from '@/packages/ui/src';
+import SelectDropdown from '../../../packages/ui/src/Input/SelectDropdown.vue';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+const projectStore = useProjectsStore();
+const { projects } = storeToRefs(projectStore);
+const taskStore = useTasksStore();
+const { tasks } = storeToRefs(taskStore);
+const clientStore = useClientsStore();
+const { clients } = storeToRefs(clientStore);
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+async function createProject(
+    project: CreateProjectBody
+): Promise<Project | undefined> {
+    return await useProjectsStore().createProject(project);
+}
+
+const props = defineProps<{
+    timeEntries: TimeEntry[];
+}>();
+
+const emit = defineEmits<{
+    submit: [];
+}>();
+
+async function createClient(
+    body: CreateClientBody
+): Promise<Client | undefined> {
+    return await useClientsStore().createClient(body);
+}
+
+const description = ref<HTMLInputElement | null>(null);
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+watch(show, (value) => {
+    if (value) {
+        nextTick(() => {
+            description.value?.focus();
+        });
+    }
+});
+
+const timeEntryUpdates = ref({
+    description: '',
+    project_id: null,
+    task_id: null,
+    tags: [] as string[],
+    billable: null as boolean | null,
+});
+
+const { tags } = storeToRefs(useTagsStore());
+async function createTag(tag: string) {
+    return await useTagsStore().createTag(tag);
+}
+
+const timeEntryBillable = computed({
+    get: () => {
+        if (timeEntryUpdates.value.billable === null) {
+            return 'do-not-update';
+        }
+        return timeEntryUpdates.value.billable ? 'billable' : 'non-billable';
+    },
+    set: (value) => {
+        if (value === 'do-not-update') {
+            timeEntryUpdates.value.billable = null;
+        } else if (value === 'billable') {
+            timeEntryUpdates.value.billable = true;
+        } else {
+            timeEntryUpdates.value.billable = false;
+        }
+    },
+});
+
+function submit() {
+    const organizationId = getCurrentOrganizationId();
+    saving.value = true;
+    if (organizationId) {
+        const timeEntryUpdatesBody = {} as UpdateMultipleTimeEntriesChangeset;
+        if (timeEntryUpdates.value.description !== '') {
+            timeEntryUpdatesBody.description =
+                timeEntryUpdates.value.description;
+        }
+        if (timeEntryUpdates.value.project_id) {
+            timeEntryUpdatesBody.project_id = timeEntryUpdates.value.project_id;
+        }
+        if (timeEntryUpdates.value.task_id) {
+            timeEntryUpdatesBody.task_id = timeEntryUpdates.value.task_id;
+        }
+        if (timeEntryUpdates.value.billable !== null) {
+            timeEntryUpdatesBody.billable = timeEntryUpdates.value.billable;
+        }
+        if (timeEntryUpdates.value.tags.length > 0) {
+            timeEntryUpdatesBody.tags = timeEntryUpdates.value.tags;
+        }
+
+        try {
+            handleApiRequestNotifications(
+                () =>
+                    api.updateMultipleTimeEntries(
+                        {
+                            ids: props.timeEntries.map(
+                                (timeEntry) => timeEntry.id
+                            ),
+                            changes: {
+                                ...timeEntryUpdatesBody,
+                            },
+                        },
+                        {
+                            params: {
+                                organization: organizationId,
+                            },
+                        }
+                    ),
+                'Time entries updated',
+                'Failed to update time entries',
+                () => {
+                    show.value = false;
+                    emit('submit');
+                    timeEntryUpdates.value = {
+                        description: '',
+                        project_id: null,
+                        task_id: null,
+                        tags: [],
+                        billable: null,
+                    };
+                    saving.value = false;
+                }
+            );
+        } catch (e) {
+            saving.value = false;
+        }
+    }
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Update {{ timeEntries.length }} time entries </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="space-y-4">
+                <div class="space-y-2">
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        ref="description"
+                        v-model="timeEntryUpdates.description"
+                        @keydown.enter="submit"
+                        type="text"
+                        class="mt-1 block w-full" />
+                </div>
+                <div class="space-y-2">
+                    <InputLabel for="project" value="Project" />
+                    <TimeTrackerProjectTaskDropdown
+                        :clients
+                        :createProject
+                        :createClient
+                        :currency="getOrganizationCurrencyString()"
+                        class="mt-1"
+                        size="xlarge"
+                        :projects="projects"
+                        :tasks="tasks"
+                        v-model:project="timeEntryUpdates.project_id"
+                        v-model:task="
+                            timeEntryUpdates.task_id
+                        "></TimeTrackerProjectTaskDropdown>
+                </div>
+                <div class="space-y-2">
+                    <InputLabel for="project" value="Tag" />
+                    <TagDropdown
+                        :createTag
+                        v-model="timeEntryUpdates.tags"
+                        :tags="tags">
+                        <template #trigger>
+                            <Badge size="xlarge">
+                                <span v-if="timeEntryUpdates.tags.length > 0">
+                                    Set {{ timeEntryUpdates.tags.length }} tags
+                                </span>
+                                <span v-else> Select Tags... </span>
+                            </Badge>
+                        </template>
+                    </TagDropdown>
+                </div>
+                <div class="space-y-2">
+                    <InputLabel for="project" value="Billable" />
+                    <SelectDropdown
+                        v-model="timeEntryBillable"
+                        :get-key-from-item="(item) => item.value"
+                        :get-name-for-item="(item) => item.label"
+                        :items="[
+                            {
+                                label: 'Keep current billable status',
+                                value: 'do-not-update',
+                            },
+                            {
+                                label: 'Billable',
+                                value: 'billable',
+                            },
+                            {
+                                label: 'Non Billable',
+                                value: 'non-billable',
+                            },
+                        ]">
+                        <template v-slot:trigger>
+                            <Badge tag="button" size="xlarge">
+                                <span v-if="timeEntryUpdates.billable === null">
+                                    Set billable status
+                                </span>
+                                <span
+                                    v-else-if="
+                                        timeEntryUpdates.billable === true
+                                    ">
+                                    Billable
+                                </span>
+                                <span v-else> Non Billable </span></Badge
+                            >
+                        </template>
+                    </SelectDropdown>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Time Entries
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -24,7 +24,7 @@ const { setActiveState } = useCurrentTimeEntryStore();
 
 async function startTaskTimer() {
     if (currentTimeEntry.value.id) {
-        await setActiveState(true);
+        await setActiveState(false);
     }
     currentTimeEntry.value.project_id = props.project_id;
     currentTimeEntry.value.task_id = props.task_id;

resources/js/Pages/ReportingDetailed.vue

@@ -9,7 +9,12 @@ import {
     CheckCircleIcon,
     TagIcon,
     ChevronLeftIcon,
+    ChevronDoubleLeftIcon,
     ChevronRightIcon,
+    ChevronDoubleRightIcon,
+    PencilSquareIcon,
+    TrashIcon,
+    ClockIcon,
 } from '@heroicons/vue/20/solid';
 import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
@@ -20,13 +25,15 @@ import {
 } 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,
+import {
+    api,
+    type Client,
+    type CreateClientBody,
+    type CreateProjectBody,
+    type Project,
+    type TimeEntriesQueryParams,
+    type TimeEntry,
+    type TimeEntryResponse,
 } from '@/packages/api/src';
 import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
 import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
@@ -35,20 +42,31 @@ import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDro
 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 { 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';
+import {
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+    PaginationNext,
+    PaginationPrev,
+    PaginationRoot,
+} from 'radix-vue';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import TimeEntryMassUpdateModal from '@/Components/Common/TimeEntry/TimeEntryMassUpdateModal.vue';
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
@@ -66,13 +84,16 @@ const selectedClients = ref<string[]>([]);
 const billable = ref<'true' | 'false' | null>(null);
 
 const { members } = storeToRefs(useMembersStore());
-const pageLimit = 10;
+const pageLimit = 15;
+const currentPage = ref(1);
+
 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,
+        offset: currentPage.value * pageLimit - pageLimit,
     };
     params = {
         ...params,
@@ -96,37 +117,41 @@ function getFilterAttributes() {
     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 { setActiveState, startLiveTimer } = currentTimeEntryStore;
+const { createTimeEntry, updateTimeEntry } = useTimeEntriesStore();
+
 const { tags } = storeToRefs(useTagsStore());
 
-const currentPage = ref(1);
+const { data: timeEntryResponse } = useQuery<TimeEntryResponse>({
+    queryKey: ['timeEntry', 'detailed-report'],
+    enabled: !!getCurrentOrganizationId(),
+    queryFn: () =>
+        api.getTimeEntries({
+            params: {
+                organization: getCurrentOrganizationId() || '',
+            },
+            queries: getFilterAttributes(),
+        }),
+});
 
-function deleteTimeEntries(timeEntries: TimeEntry[]) {
-    timeEntries.forEach((entry) => {
-        timeEntriesStore.deleteTimeEntry(entry.id);
-    });
-    updateFilteredTimeEntries();
+const totalPages = computed(() => {
+    return timeEntryResponse?.value?.meta?.total ?? 1;
+});
+
+const timeEntriesStore = useTimeEntriesStore();
+
+async function deleteTimeEntries(timeEntries: TimeEntry[]) {
+    for (const timeEntry of timeEntries) {
+        await timeEntriesStore.deleteTimeEntry(timeEntry.id);
+    }
+    selectedTimeEntries.value = [];
+    await updateFilteredTimeEntries();
 }
 
-watch(isLoadMoreVisible, async (isVisible) => {
-    if (
-        isVisible &&
-        timeEntries.value.length > 0 &&
-        !allTimeEntriesLoaded.value
-    ) {
-        loading.value = true;
-        await timeEntriesStore.fetchMoreTimeEntries();
-    }
+const timeEntries = computed(() => {
+    return timeEntryResponse?.value?.data || [];
 });
 
 onMounted(async () => {
@@ -140,14 +165,18 @@ const { tasks } = storeToRefs(taskStore);
 const clientStore = useClientsStore();
 const { clients } = storeToRefs(clientStore);
 
+const selectedTimeEntries = ref<TimeEntry[]>([]);
+
 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> {
@@ -156,35 +185,34 @@ async function createClient(
 
 async function startTimeEntryFromExisting(entry: TimeEntry) {
     if (currentTimeEntry.value.id) {
-        await stopTimer();
+        await setActiveState(false);
     }
     await createTimeEntry({
         project_id: entry.project_id,
         task_id: entry.task_id,
-        start: dayjs().utc().format(),
+        start: getDayJsInstance().utc().format(),
         end: null,
         billable: entry.billable,
         description: entry.description,
     });
+    startLiveTimer();
     updateFilteredTimeEntries();
     useCurrentTimeEntryStore().fetchCurrentTimeEntry();
 }
-
+const queryClient = useQueryClient();
 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,
+    await queryClient.invalidateQueries({
+        queryKey: ['timeEntry', 'detailed-report'],
     });
 }
+watch(currentPage, () => {
+    updateFilteredTimeEntries();
+});
+function deleteSelected() {
+    deleteTimeEntries(selectedTimeEntries.value);
+}
+
+const showMassUpdateModal = ref(false);
 </script>
 
 <template>
@@ -208,7 +236,7 @@ function nextPage() {
                 </TabBar>
             </div>
         </MainContainer>
-        <div class="py-2 w-full border-b border-default-background-separator">
+        <div class="py-2.5 w-full border-b border-default-background-separator">
             <MainContainer
                 class="sm:flex space-y-4 sm:space-y-0 justify-between">
                 <div
@@ -309,9 +337,38 @@ function nextPage() {
                 </div>
             </MainContainer>
         </div>
+        <TimeEntryMassUpdateModal
+            :time-entries="selectedTimeEntries"
+            @submit="updateFilteredTimeEntries"
+            v-model:show="showMassUpdateModal"></TimeEntryMassUpdateModal>
+        <MainContainer
+            class="text-sm py-1.5 font-medium border-b border-t bg-secondary border-border-tertiary flex items-center space-x-3">
+            <div>{{ selectedTimeEntries.length }} selected</div>
+            <button
+                class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
+                @click="showMassUpdateModal = true"
+                v-if="selectedTimeEntries.length">
+                <PencilSquareIcon class="w-4"></PencilSquareIcon>
+                <span> Edit </span>
+            </button>
+            <button
+                class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-white/80 rounded"
+                @click="deleteSelected"
+                v-if="selectedTimeEntries.length">
+                <TrashIcon class="w-3.5"></TrashIcon>
+                <span> Delete </span>
+            </button>
+        </MainContainer>
         <div class="w-full relative">
-            <div v-for="(entry, key) in timeEntries" :key="key">
+            <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow
+                    :selected="selectedTimeEntries.includes(entry)"
+                    @selected="selectedTimeEntries.push(entry)"
+                    @unselected="
+                        selectedTimeEntries = selectedTimeEntries.filter(
+                            (item) => item.id !== entry.id
+                        )
+                    "
                     :createClient
                     :createProject
                     :projects="projects"
@@ -328,22 +385,82 @@ function nextPage() {
                     showMember
                     :time-entry="entry"></TimeEntryRow>
             </div>
+            <div v-if="timeEntries.length === 0">
+                <div class="text-center pt-12">
+                    <ClockIcon
+                        class="w-8 text-icon-default inline pb-2"></ClockIcon>
+                    <h3 class="text-white font-semibold">
+                        No time entries found
+                    </h3>
+                    <p class="pb-5">
+                        Adjust the filters to see more time entries!
+                    </p>
+                </div>
+            </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>
+        <PaginationRoot
+            :total="totalPages"
+            :items-per-page="pageLimit"
+            class="flex justify-center items-center py-8"
+            v-model:page="currentPage"
+            :sibling-count="1"
+            show-edges>
+            <PaginationList
+                v-slot="{ items }"
+                class="flex items-center space-x-1 relative">
+                <div
+                    class="pr-2 flex items-center space-x-1 border-r border-border-primary mr-1">
+                    <PaginationFirst class="navigation-item">
+                        <ChevronDoubleLeftIcon class="w-4">
+                        </ChevronDoubleLeftIcon>
+                    </PaginationFirst>
+                    <PaginationPrev class="mr-4 navigation-item">
+                        <ChevronLeftIcon
+                            class="w-4 text-text-tertiary hover:text-text-primary">
+                        </ChevronLeftIcon>
+                    </PaginationPrev>
+                </div>
+                <template v-for="(page, index) in items">
+                    <PaginationListItem
+                        v-if="page.type === 'page'"
+                        :key="index"
+                        class="pagination-item"
+                        :value="page.value">
+                        {{ page.value }}
+                    </PaginationListItem>
+                    <PaginationEllipsis
+                        v-else
+                        :key="page.type"
+                        :index="index"
+                        class="PaginationEllipsis">
+                        <div class="px-2">&#8230;</div>
+                    </PaginationEllipsis>
+                </template>
+                <div
+                    class="!ml-2 pl-2 flex items-center space-x-1 border-l border-border-primary">
+                    <PaginationNext class="navigation-item">
+                        <ChevronRightIcon
+                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronRightIcon>
+                    </PaginationNext>
+                    <PaginationLast class="navigation-item">
+                        <ChevronDoubleRightIcon
+                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronDoubleRightIcon>
+                    </PaginationLast>
+                </div>
+            </PaginationList>
+        </PaginationRoot>
     </AppLayout>
 </template>
+<style lang="postcss">
+.navigation-item {
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+}
+
+.pagination-item {
+    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+}
+.pagination-item[data-selected] {
+    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-white/80 transition ease-in-out duration-150;
+}
+</style>

resources/js/app.ts

@@ -7,6 +7,7 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import { createPinia } from 'pinia';
 import type { User } from '@/types/models';
+import { VueQueryPlugin } from '@tanstack/vue-query';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 const pinia = createPinia();
@@ -42,7 +43,7 @@ createInertiaApp({
             return page.props.auth.user.timezone;
         };
 
-        app.use(plugin).use(pinia).use(ZiggyVue).mount(el);
+        app.use(plugin).use(pinia).use(ZiggyVue).use(VueQueryPlugin).mount(el);
     },
 
     progress: {

resources/js/packages/api/src/index.ts

@@ -28,6 +28,14 @@ export type CreateTimeEntryBody = ZodiosBodyByAlias<
     'createTimeEntry'
 >;
 
+export type UpdateMultipleTimeEntriesBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateMultipleTimeEntries'
+>;
+
+export type UpdateMultipleTimeEntriesChangeset =
+    UpdateMultipleTimeEntriesBody['changes'];
+
 export type ProjectResponse = ZodiosResponseByAlias<
     SolidTimeApi,
     'getProjects'

resources/js/packages/api/src/openapi.json.client.ts

@@ -170,7 +170,6 @@ const TimeEntryResource = z
         billable: z.boolean(),
     })
     .passthrough();
-const TimeEntryCollection = z.array(TimeEntryResource);
 const TimeEntryStoreRequest = z
     .object({
         member_id: z.string().uuid(),
@@ -270,7 +269,6 @@ export const schemas = {
     TaskUpdateRequest,
     start,
     TimeEntryResource,
-    TimeEntryCollection,
     TimeEntryStoreRequest,
     TimeEntryUpdateMultipleRequest,
     TimeEntryUpdateRequest,
@@ -2147,6 +2145,11 @@ Users with the permission `time-entries:view:own` can only use this en
                 type: 'Query',
                 schema: z.number().int().gte(1).lte(500).optional(),
             },
+            {
+                name: 'offset',
+                type: 'Query',
+                schema: z.number().int().gte(0).optional(),
+            },
             {
                 name: 'only_full_dates',
                 type: 'Query',
@@ -2183,7 +2186,12 @@ Users with the permission `time-entries:view:own` can only use this en
                 schema: z.string().optional(),
             },
         ],
-        response: z.object({ data: TimeEntryCollection }).passthrough(),
+        response: z
+            .object({
+                data: z.array(TimeEntryResource),
+                meta: z.object({ total: z.number().int() }).passthrough(),
+            })
+            .passthrough(),
         errors: [
             {
                 status: 401,

resources/js/packages/ui/src/Badge.vue

@@ -39,7 +39,7 @@ const borderClasses = computed(() => {
             twMerge(
                 badgeClasses[size],
                 borderClasses,
-                'rounded inline-flex items-center font-semibold text-white',
+                'rounded inline-flex items-center font-semibold text-white outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
                 props.class
             )
         ">

resources/js/packages/ui/src/Input/DateRangePicker.vue

@@ -94,7 +94,7 @@ function setLastYear() {
         @submit="emit('submit')">
         <template #trigger>
             <button
-                class="px-3 py-1.5 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
+                class="px-2 py-1 bg-input-background border border-input-border font-medium rounded-lg flex items-center space-x-2">
                 <CalendarIcon class="w-5"></CalendarIcon>
                 <div class="text-white">
                     {{ formatDate(start) }}

resources/js/packages/ui/src/Input/Dropdown.vue

@@ -85,7 +85,7 @@ const { floatingStyles } = useFloating(reference, floating, {
         <Teleport to="body">
             <div
                 v-show="open"
-                class="fixed inset-0 z-40"
+                class="fixed inset-0 z-50"
                 @click.prevent="onBackgroundClick" />
             <transition
                 enter-active-class="transition-opacity ease-out duration-200"

resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const value = defineModel();
 const emit = defineEmits(['changed']);
@@ -12,6 +12,13 @@ function onChange(event: Event) {
     }
 }
 
+watch(
+    () => value.value,
+    (newValue) => {
+        liveDataValue.value = newValue;
+    }
+);
+
 function onInput(event: Event) {
     liveDataValue.value = (event.target as HTMLInputElement).value;
 }

resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue

@@ -27,7 +27,7 @@ const open = ref(false);
             <template #trigger>
                 <button
                     data-testid="time_entry_range_selector"
-                    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-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
                     :class="{
                         'text-sm py-2 font-medium': !showDate,
                         'text-xs py-1.5 font-semibold': showDate,

resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue

@@ -16,9 +16,9 @@ import TimeEntryDescriptionInput from '@/packages/ui/src/TimeEntry/TimeEntryDesc
 import TimeEntryRowTagDropdown from '@/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryRowDurationInput from '@/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue';
 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';
+import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 
 const props = defineProps<{
     timeEntry: TimeEntry;
@@ -37,8 +37,11 @@ const props = defineProps<{
     currency: string;
     showMember?: boolean;
     showDate?: boolean;
+    selected?: boolean;
 }>();
 
+const emit = defineEmits<{ selected: []; unselected: [] }>();
+
 function updateTimeEntryDescription(description: string) {
     props.updateTimeEntry({ ...props.timeEntry, description });
 }
@@ -74,6 +77,15 @@ const memberName = computed(() => {
     }
     return '';
 });
+
+function onSelectChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.checked) {
+        emit('selected');
+    } else {
+        emit('unselected');
+    }
+}
 </script>
 
 <template>
@@ -85,6 +97,8 @@ const memberName = computed(() => {
                 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
+                        @change="onSelectChange"
+                        :value="selected"
                         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>

resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -520,6 +520,7 @@ const showCreateProject = ref(false);
         <Badge
             @click="showCreateProject = true"
             size="large"
+            tag="button"
             class="cursor-pointer hover:bg-tertiary">
             <PlusIcon class="-ml-1 w-5"></PlusIcon>
             <span>Add new project</span>