add shared reports section in the frontend

resources/js/Components/Common/Report/ReportCreateModal.vue

@@ -0,0 +1,124 @@
+<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 { ref } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type {
+    CreateReportBody,
+    CreateReportBodyProperties,
+} from '@/packages/api/src';
+import { useMutation } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const createReportMutation = useMutation({
+    mutationFn: async (report: CreateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - create report');
+        }
+        return await api.createReport(report, {
+            params: {
+                organization: organizationId,
+            },
+        });
+    },
+});
+
+const props = defineProps<{
+    properties: CreateReportBodyProperties;
+}>();
+
+const report = ref<CreateReportBody>({
+    name: '',
+    description: '',
+    is_public: false,
+    public_until: null,
+    properties: {},
+});
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    report.value.properties = { ...props.properties };
+    await handleApiRequestNotifications(
+        () => createReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportEditModal.vue

@@ -0,0 +1,139 @@
+<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 { ref, watch } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type { UpdateReportBody } from '@/packages/api/src';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+import type { Report } from '@/packages/api/src';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+const queryClient = useQueryClient();
+
+const updateReportMutation = useMutation({
+    mutationFn: async (report: UpdateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - update report');
+        }
+        return await api.updateReport(report, {
+            params: {
+                organization: organizationId,
+                report: props.originalReport.id,
+            },
+        });
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
+});
+
+const props = defineProps<{
+    originalReport: Report;
+}>();
+
+const report = ref<UpdateReportBody>({
+    name: props.originalReport.name,
+    description: props.originalReport.description,
+    is_public: props.originalReport.is_public,
+    public_until: props.originalReport.public_until,
+});
+
+watch(
+    () => props.originalReport,
+    () => {
+        report.value = {
+            name: props.originalReport.name,
+            description: props.originalReport.description,
+            is_public: props.originalReport.is_public,
+            public_until: props.originalReport.public_until,
+        };
+    }
+);
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    await handleApiRequestNotifications(
+        () => updateReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import type { Report } from '@/packages/api/src';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import { canDeleteReport, canUpdateReport } from '@/utils/permissions';
+const emit = defineEmits<{
+    delete: [];
+    edit: [];
+    archive: [];
+}>();
+const props = defineProps<{
+    report: Report;
+}>();
+</script>
+
+<template>
+    <MoreOptionsDropdown :label="'Actions for Project ' + props.report.name">
+        <div class="min-w-[150px]">
+            <button
+                @click.prevent="emit('edit')"
+                v-if="canUpdateReport()"
+                :aria-label="'Edit Report ' + props.report.name"
+                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">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
+            <button
+                @click.prevent="emit('delete')"
+                :aria-label="'Delete Report ' + props.report.name"
+                v-if="canDeleteReport()"
+                class="border-b border-card-background-separator 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">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportTable.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import { FolderPlusIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+import { canCreateProjects } from '@/utils/permissions';
+import type { Report } from '@/packages/api/src';
+import ReportTableHeading from '@/Components/Common/Report/ReportTableHeading.vue';
+import ReportTableRow from '@/Components/Common/Report/ReportTableRow.vue';
+import { router } from '@inertiajs/vue3';
+
+defineProps<{
+    reports: Report[];
+}>();
+
+const gridTemplate = computed(() => {
+    return `grid-template-columns: minmax(150px, auto) minmax(250px, 1fr) minmax(140px, auto) minmax(130px, auto) 80px;`;
+});
+</script>
+
+<template>
+    <div class="flow-root max-w-[100vw] overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="report_table"
+                class="grid min-w-full"
+                :style="gridTemplate">
+                <ReportTableHeading></ReportTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="reports.length === 0">
+                    <FolderPlusIcon
+                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
+                    <h3 class="text-white font-semibold">
+                        No shared reports found
+                    </h3>
+                    <p class="pb-5" v-if="canCreateProjects()">
+                        Create your first project now!
+                    </p>
+                    <SecondaryButton
+                        @click="router.visit(route('reporting'))"
+                        :icon="PlusIcon"
+                        >Go to the overview to create a report
+                    </SecondaryButton>
+                </div>
+                <template v-for="report in reports" :key="report.id">
+                    <ReportTableRow :report="report"></ReportTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Report/ReportTableHeading.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
+
+<template>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Description
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Visibility
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Public URL
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportTableRow.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import TableRow from '@/Components/TableRow.vue';
+import { api, type Report } from '@/packages/api/src';
+import ReportMoreOptionsDropdown from '@/Components/Common/Report/ReportMoreOptionsDropdown.vue';
+import ReportEditModal from '@/Components/Common/Report/ReportEditModal.vue';
+import { SecondaryButton } from '@/packages/ui/src';
+import { useClipboard } from '@vueuse/core';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+
+const props = defineProps<{
+    report: Report;
+}>();
+
+const showEditReportModal = ref(false);
+
+const { copy, copied, isSupported } = useClipboard({ legacy: true });
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+function openSharableLink() {
+    const link = props.report.shareable_link;
+    if (link) {
+        window.open(link, '_blank')?.focus();
+    }
+}
+
+const queryClient = useQueryClient();
+const deleteReportMutation = useMutation({
+    mutationFn: async (reportId: string) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - update report');
+        }
+        return await api.deleteReport(undefined, {
+            params: {
+                organization: organizationId,
+                report: reportId,
+            },
+        });
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
+});
+async function deleteReport() {
+    await handleApiRequestNotifications(
+        () => deleteReportMutation.mutateAsync(props.report.id),
+        'Success',
+        'Error'
+    );
+}
+</script>
+
+<template>
+    <ReportEditModal
+        v-model:show="showEditReportModal"
+        :original-report="report"></ReportEditModal>
+    <TableRow>
+        <div
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <span class="overflow-ellipsis overflow-hidden">
+                {{ report.name }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-muted">
+            <span class="overflow-ellipsis overflow-hidden">
+                {{ report.description }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ report.is_public ? 'Public' : 'Private' }}
+        </div>
+        <div
+            class="whitespace-nowrap px-3 flex items-center text-sm text-muted">
+            <div
+                v-if="report.shareable_link"
+                class="space-x-2 flex items-center">
+                <SecondaryButton
+                    v-if="isSupported"
+                    @click="copy(report.shareable_link)">
+                    <span v-if="!copied">Copy URL</span>
+                    <span v-else>Copied!</span>
+                </SecondaryButton>
+                <button
+                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-white/80"
+                    @click="openSharableLink">
+                    <ArrowTopRightOnSquareIcon
+                        class="w-4 text-text-tertiary hover:text-text-secondary transition"></ArrowTopRightOnSquareIcon>
+                </button>
+            </div>
+            <span v-else> -- </span>
+        </div>
+        <div
+            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <ReportMoreOptionsDropdown
+                :report="report"
+                @edit="showEditReportModal = true"
+                @delete="deleteReport"></ReportMoreOptionsDropdown>
+        </div>
+    </TableRow>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Reporting/ReportingTabNavbar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+defineProps<{
+    active: 'reporting' | 'detailed' | 'shared';
+}>();
+</script>
+
+<template>
+    <TabBar>
+        <TabBarItem
+            @click="router.visit(route('reporting'))"
+            :active="active === 'reporting'"
+            >Overview</TabBarItem
+        >
+        <TabBarItem
+            @click="router.visit(route('reporting.detailed'))"
+            :active="active === 'detailed'"
+            >Detailed</TabBarItem
+        >
+        <TabBarItem
+            @click="router.visit(route('reporting.shared'))"
+            :active="active === 'shared'"
+            >Shared</TabBarItem
+        >
+    </TabBar>
+</template>
+
+<style scoped></style>

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -38,7 +38,7 @@ async function startTaskTimer() {
     <div
         class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
         <div class="col-span-4">
-            <p class="font-semibold text-white text-sm pb-1">
+            <p class="font-semibold text-white text-sm pb-1 overflow-ellipsis">
                 {{ title }}
             </p>
             <ProjectBadge

resources/js/Pages/Reporting.vue

@@ -12,8 +12,7 @@ import {
 import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
-
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import {
     formatHumanReadableDuration,
     getDayJsInstance,
@@ -23,6 +22,10 @@ import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
 import { storeToRefs } from 'pinia';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import { type AggregatedTimeEntriesQueryParams, api } from '@/packages/api/src';
+import type {
+    AggregatedTimeEntriesQueryParams,
+    CreateReportBodyProperties,
+} 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';
@@ -41,9 +44,9 @@ import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultisel
 import { useTagsStore } from '@/utils/useTags';
 import { formatCents } from '@/packages/ui/src/utils/money';
 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';
+import { SecondaryButton } from '@/packages/ui/src';
+import ReportCreateModal from '@/Components/Common/Report/ReportCreateModal.vue';
+import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
 import { useNotificationsStore } from '@/utils/notification';
 import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
 import type { ExportFormat } from '@/types/reporting';
@@ -162,6 +165,15 @@ const { tags } = storeToRefs(useTagsStore());
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);
 }
+const showCreateReportModal = ref(false);
+
+const reportProperties = computed(() => {
+    return {
+        ...getFilterAttributes(),
+        group: group.value,
+        sub_group: subGroup.value,
+    } as CreateReportBodyProperties;
+});
 
 async function downloadExport(format: ExportFormat) {
     const organizationId = getCurrentOrganizationId();
@@ -192,6 +204,9 @@ async function downloadExport(format: ExportFormat) {
 </script>
 
 <template>
+    <ReportCreateModal
+        :properties="reportProperties"
+        v-model:show="showCreateReportModal"></ReportCreateModal>
     <AppLayout
         title="Reporting"
         data-testid="reporting_view"
@@ -200,16 +215,11 @@ async function downloadExport(format: ExportFormat) {
             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>
+                <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
             </div>
+            <SecondaryButton @click="showCreateReportModal = true"
+                >Save</SecondaryButton
+            >
             <ReportingExportButton
                 :download="downloadExport"></ReportingExportButton>
         </MainContainer>

resources/js/Pages/ReportingDetailed.vue

@@ -41,9 +41,6 @@ import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
 import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
 import { useTagsStore } from '@/utils/useTags';
 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 { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { useProjectsStore } from '@/utils/useProjects';
@@ -64,6 +61,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
 import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
 import type { ExportFormat } from '@/types/reporting';
 import { useNotificationsStore } from '@/utils/notification';
@@ -250,16 +248,7 @@ async function downloadExport(format: ExportFormat) {
             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>
+                <ReportingTabNavbar active="detailed"></ReportingTabNavbar>
             </div>
             <ReportingExportButton
                 :download="downloadExport"></ReportingExportButton>

resources/js/Pages/ReportingShared.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import {
+    ChartBarIcon,
+    ChevronLeftIcon,
+    ChevronDoubleLeftIcon,
+    ChevronRightIcon,
+    ChevronDoubleRightIcon,
+} from '@heroicons/vue/20/solid';
+import { computed, ref, watch } from 'vue';
+
+import { api, type ReportIndexResponse } from '@/packages/api/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 ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
+import ReportTable from '@/Components/Common/Report/ReportTable.vue';
+
+const pageLimit = 15;
+const currentPage = ref(1);
+
+const { data: reportsResponse } = useQuery<ReportIndexResponse>({
+    queryKey: ['reports', currentPage],
+    enabled: !!getCurrentOrganizationId(),
+    queryFn: () =>
+        api.getReports({
+            params: {
+                organization: getCurrentOrganizationId() || '',
+            },
+        }),
+});
+
+const reports = computed(() => {
+    return reportsResponse.value?.data ?? [];
+});
+
+const totalPages = computed(() => {
+    return 1;
+});
+
+const queryClient = useQueryClient();
+async function updateFilteredTimeEntries() {
+    await queryClient.invalidateQueries({
+        queryKey: ['reports'],
+    });
+}
+watch(currentPage, () => {
+    updateFilteredTimeEntries();
+});
+</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>
+                <ReportingTabNavbar active="shared"></ReportingTabNavbar>
+            </div>
+        </MainContainer>
+
+        <ReportTable
+            v-if="reports"
+            :reports="reports"
+            show-billable-rate=""></ReportTable>
+
+        <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/Pages/SharedReport.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import { ChartBarIcon } from '@heroicons/vue/20/solid';
+import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
+import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import { computed, onMounted, ref } from 'vue';
+import { useQuery } from '@tanstack/vue-query';
+import { type AggregatedTimeEntries, api } from '@/packages/api/src';
+
+const sharedSecret = ref<string | null>(null);
+
+const hasSharedSecret = computed(() => {
+    return sharedSecret.value !== null;
+});
+
+useQuery({
+    enabled: hasSharedSecret,
+    queryKey: ['reporting', sharedSecret.value],
+    queryFn: () => {
+        api.getPublicReport({
+            headers: {
+                'X-Api-Key': sharedSecret.value,
+            },
+        });
+    },
+});
+
+onMounted(() => {
+    const currentUrl = window.location.href;
+    // check if # exists exactly once in the URL
+    if (currentUrl.split('#').length === 2) {
+        sharedSecret.value = currentUrl.split('#')[1];
+    }
+});
+
+const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
+    // Placeholder Data
+    return {
+        grouped_data: [],
+        grouped_type: 'project',
+        seconds: 0,
+        cost: 0,
+    };
+});
+const aggregatedGraphTimeEntries = computed<AggregatedTimeEntries>(() => {
+    // Placeholder Data
+    return {
+        grouped_data: [],
+        grouped_type: 'project',
+        seconds: 0,
+        cost: 0,
+    };
+});
+const group = ref('billable');
+const subGroup = ref('project');
+</script>
+
+<template>
+    <div class="text-muted">
+        <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>
+            </div>
+        </MainContainer>
+        <MainContainer>
+            <div class="pt-10 w-full px-3 relative">
+                <ReportingChart
+                    :groupedType="aggregatedGraphTimeEntries?.grouped_type"
+                    :groupedData="
+                        aggregatedGraphTimeEntries?.grouped_data
+                    "></ReportingChart>
+            </div>
+        </MainContainer>
+        <MainContainer>
+            <div class="sm:grid grid-cols-4 pt-6 items-start">
+                <div
+                    class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
+                    <div
+                        class="text-sm flex text-white items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
+                        <span>Group by</span> {{ group }} <span>and</span>
+                        {{ subGroup }}
+                    </div>
+                    <div
+                        class="grid items-center"
+                        style="grid-template-columns: 1fr 100px 150px">
+                        <div
+                            class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-muted text-sm">
+                            <div class="pl-6">Name</div>
+                            <div class="text-right">Duration</div>
+                            <div class="text-right pr-6">Cost</div>
+                        </div>
+                        <template
+                            v-if="
+                                aggregatedTableTimeEntries?.grouped_data &&
+                                aggregatedTableTimeEntries.grouped_data
+                                    ?.length > 0
+                            ">
+                            <ReportingRow
+                                v-for="entry in aggregatedTableTimeEntries.grouped_data"
+                                :key="entry.key ?? 'none'"
+                                :entry="entry"
+                                :type="
+                                    aggregatedTableTimeEntries.grouped_type
+                                "></ReportingRow>
+                            <div
+                                class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
+                                <div class="flex items-center pl-6 font-medium">
+                                    <span>Total</span>
+                                </div>
+                                <div
+                                    class="justify-end flex items-center font-medium">
+                                    {{
+                                        formatHumanReadableDuration(
+                                            aggregatedTableTimeEntries.seconds
+                                        )
+                                    }}
+                                </div>
+                                <div
+                                    class="justify-end pr-6 flex items-center font-medium">
+                                    {{
+                                        formatCents(
+                                            aggregatedTableTimeEntries.cost,
+                                            getOrganizationCurrencyString()
+                                        )
+                                    }}
+                                </div>
+                            </div>
+                        </template>
+                        <div
+                            class="chart flex flex-col items-center justify-center py-12 col-span-3"
+                            v-else>
+                            <p class="text-lg text-white font-semibold">
+                                No time entries found
+                            </p>
+                            <p>Try to change the filters and time range</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="px-2 lg:px-4">
+                    <ReportingPieChart
+                        :type="aggregatedTableTimeEntries?.grouped_type"
+                        :data="
+                            aggregatedTableTimeEntries?.grouped_data
+                        "></ReportingPieChart>
+                </div>
+            </div>
+        </MainContainer>
+    </div>
+</template>

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

@@ -152,6 +152,16 @@ export type OrganizationExportResponse = ZodiosResponseByAlias<
     'exportOrganization'
 >;
 
+export type ReportIndexResponse = ZodiosResponseByAlias<
+    SolidTimeApi,
+    'getReports'
+>;
+
+export type CreateReportBody = ZodiosBodyByAlias<SolidTimeApi, 'createReport'>;
+export type UpdateReportBody = ZodiosBodyByAlias<SolidTimeApi, 'updateReport'>;
+export type CreateReportBodyProperties = CreateReportBody['properties'];
+export type Report = ReportIndexResponse['data'][0];
+
 const api = createApiClient('/api', { validate: 'none' });
 
 export { createApiClient, api };

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

@@ -113,6 +113,89 @@ const ProjectMemberUpdateRequest = z
     .object({ billable_rate: z.union([z.number(), z.null()]) })
     .partial()
     .passthrough();
+const ReportResource = z
+    .object({
+        id: z.string(),
+        name: z.string(),
+        description: z.union([z.string(), z.null()]),
+        is_public: z.boolean(),
+        public_until: z.union([z.string(), z.null()]),
+        shareable_link: z.union([z.string(), z.null()]),
+    })
+    .passthrough();
+const ReportCollection = z.array(ReportResource);
+const TimeEntryAggregationType = z.enum([
+    'day',
+    'week',
+    'month',
+    'year',
+    'user',
+    'project',
+    'task',
+    'client',
+    'billable',
+    'description',
+]);
+const ReportStoreRequest = z
+    .object({
+        name: z.string().max(255),
+        description: z.union([z.string(), z.null()]).optional(),
+        is_public: z.boolean(),
+        public_until: z.union([z.string(), z.null()]).optional(),
+        properties: z
+            .object({
+                start: z.union([z.string(), z.null()]),
+                end: z.union([z.string(), z.null()]),
+                active: z.union([z.boolean(), z.null()]),
+                member_ids: z.union([z.array(z.string().uuid()), z.null()]),
+                billable: z.union([z.boolean(), z.null()]),
+                client_ids: z.union([z.array(z.string().uuid()), z.null()]),
+                project_ids: z.union([z.array(z.string().uuid()), z.null()]),
+                tag_ids: z.union([z.array(z.string().uuid()), z.null()]),
+                task_ids: z.union([z.array(z.string().uuid()), z.null()]),
+                group: TimeEntryAggregationType,
+                sub_group: TimeEntryAggregationType,
+            })
+            .partial()
+            .passthrough(),
+        'properties.group': z.string().optional(),
+        'properties.sub_group': z.string().optional(),
+    })
+    .passthrough();
+const DetailedReportResource = z
+    .object({
+        id: z.string(),
+        name: z.string(),
+        description: z.union([z.string(), z.null()]),
+        is_public: z.boolean(),
+        public_until: z.union([z.string(), z.null()]),
+        shareable_link: z.union([z.string(), z.null()]),
+        properties: z
+            .object({
+                group: z.string(),
+                sub_group: z.string(),
+                start: z.union([z.string(), z.null()]),
+                end: z.union([z.string(), z.null()]),
+                active: z.union([z.boolean(), z.null()]),
+                member_ids: z.string(),
+                billable: z.string(),
+                client_ids: z.string(),
+                project_ids: z.string(),
+                tag_ids: z.string(),
+                task_ids: z.string(),
+            })
+            .passthrough(),
+    })
+    .passthrough();
+const ReportUpdateRequest = z
+    .object({
+        name: z.string().max(255),
+        description: z.union([z.string(), z.null()]),
+        is_public: z.boolean(),
+        public_until: z.union([z.string(), z.null()]),
+    })
+    .partial()
+    .passthrough();
 const TagResource = z
     .object({
         id: z.string(),
@@ -260,6 +343,12 @@ export const schemas = {
     ProjectMemberResource,
     ProjectMemberStoreRequest,
     ProjectMemberUpdateRequest,
+    ReportResource,
+    ReportCollection,
+    TimeEntryAggregationType,
+    ReportStoreRequest,
+    DetailedReportResource,
+    ReportUpdateRequest,
     TagResource,
     TagCollection,
     TagStoreRequest,
@@ -1696,6 +1785,206 @@ const endpoints = makeApi([
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/reports',
+        alias: 'getReports',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: ReportCollection }).passthrough(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+        ],
+    },
+    {
+        method: 'post',
+        path: '/v1/organizations/:organization/reports',
+        alias: 'createReport',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: ReportStoreRequest,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: DetailedReportResource }).passthrough(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 422,
+                description: `Validation error`,
+                schema: z
+                    .object({
+                        message: z.string(),
+                        errors: z.record(z.array(z.string())),
+                    })
+                    .passthrough(),
+            },
+        ],
+    },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/reports/:report',
+        alias: 'getReport',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'report',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: DetailedReportResource }).passthrough(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+        ],
+    },
+    {
+        method: 'put',
+        path: '/v1/organizations/:organization/reports/:report',
+        alias: 'updateReport',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: ReportUpdateRequest,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'report',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.object({ data: DetailedReportResource }).passthrough(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 422,
+                description: `Validation error`,
+                schema: z
+                    .object({
+                        message: z.string(),
+                        errors: z.record(z.array(z.string())),
+                    })
+                    .passthrough(),
+            },
+        ],
+    },
+    {
+        method: 'delete',
+        path: '/v1/organizations/:organization/reports/:report',
+        alias: 'deleteReport',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'report',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z.null(),
+        errors: [
+            {
+                status: 401,
+                description: `Unauthenticated`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+        ],
+    },
     {
         method: 'get',
         path: '/v1/organizations/:organization/tags',
@@ -2922,6 +3211,23 @@ If the group parameters are all set to `null` or are all missing, the
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/public/reports',
+        alias: 'getPublicReport',
+        description: `This endpoint is public and does not require authentication. The report must be public and not expired.
+The report is considered expired if the `public_until` field is set and the date is in the past.
+The report is considered public if the `is_public` field is set to `true`.`,
+        requestFormat: 'json',
+        response: z.object({ data: DetailedReportResource }).passthrough(),
+        errors: [
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+        ],
+    },
     {
         method: 'get',
         path: '/v1/users/me',

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

@@ -46,7 +46,7 @@ const emit = defineEmits(['changed']);
 </script>
 
 <template>
-    <div class="flex items-center justify-center text-muted">
+    <div class="flex items-center text-muted">
         <input
             ref="datePicker"
             @change="updateTempValue"

resources/js/utils/permissions.ts

@@ -100,3 +100,10 @@ export function canDeleteTags() {
 export function canManageBilling() {
     return currentUserHasPermission('billing');
 }
+
+export function canUpdateReport() {
+    return currentUserHasPermission('reports:update');
+}
+export function canDeleteReport() {
+    return currentUserHasPermission('reports:delete');
+}

routes/web.php

@@ -48,6 +48,10 @@ Route::middleware([
         return Inertia::render('ReportingDetailed');
     })->name('reporting.detailed');
 
+    Route::get('/reporting/shared', function () {
+        return Inertia::render('ReportingShared');
+    })->name('reporting.shared');
+
     Route::get('/projects', function () {
         return Inertia::render('Projects');
     })->name('projects');