From 440f236ae71e812ef6000556a1a14d624551d1e6 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 3 Dec 2024 15:03:28 +0100
Subject: [PATCH] add missing data to public shared reports, add premium
 restrictions, add pdf download

---
 .../Report/DetailedWithDataReportResource.php |   2 +
 .../Common/Report/ReportCreateModal.vue       |  11 +-
 .../Common/Report/ReportSaveButton.vue        |  41 +++
 .../Reporting/ReportingExportButton.vue       |  25 +-
 .../Common/Reporting/ReportingPieChart.vue    |  39 +--
 .../Common/Reporting/ReportingRow.vue         |  14 +-
 .../js/Components/Common/UpgradeBadge.vue     |   5 +-
 .../js/Components/Common/UpgradeModal.vue     |  10 +-
 resources/js/Pages/Reporting.vue              |  93 +++++--
 resources/js/Pages/ReportingDetailed.vue      |  11 +-
 resources/js/Pages/ReportingShared.vue        |  41 +++
 resources/js/Pages/SharedReport.vue           | 118 +++++++--
 .../packages/api/src/openapi.json.client.ts   | 248 +++++++++++++++---
 .../TimeTrackerProjectTaskDropdown.vue        |   1 +
 .../time-entry-aggregate/pdf.blade.php        |   1 +
 15 files changed, 518 insertions(+), 142 deletions(-)
 create mode 100644 resources/js/Components/Common/Report/ReportSaveButton.vue

diff --git a/app/Http/Resources/V1/Report/DetailedWithDataReportResource.php b/app/Http/Resources/V1/Report/DetailedWithDataReportResource.php
index 100ff7e3..1b6449f3 100644
--- a/app/Http/Resources/V1/Report/DetailedWithDataReportResource.php
+++ b/app/Http/Resources/V1/Report/DetailedWithDataReportResource.php
@@ -90,12 +90,14 @@ public function toArray(Request $request): array
              *        grouped_data: null|array<array{
              *            key: string|null,
              *            description: string|null,
+             *            color: string|null,
              *            seconds: int,
              *            cost: int,
              *            grouped_type: string|null,
              *            grouped_data: null|array<array{
              *                key: string|null,
              *                description: string|null,
+             *                color: string|null,
              *                seconds: int,
              *                cost: int,
              *                grouped_type: null,
diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
index e34d0213..59b30300 100644
--- a/resources/js/Components/Common/Report/ReportCreateModal.vue
+++ b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -37,20 +37,22 @@ const props = defineProps<{
     properties: CreateReportBodyProperties;
 }>();
 
-const report = ref<CreateReportBody>({
+const report = ref({
     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),
+        () =>
+            createReportMutation.mutateAsync({
+                ...report.value,
+                properties: { ...props.properties },
+            }),
         'Success',
         'Error',
         () => {
@@ -59,7 +61,6 @@ async function submit() {
                 description: '',
                 is_public: false,
                 public_until: null,
-                properties: {},
             };
             show.value = false;
         }
diff --git a/resources/js/Components/Common/Report/ReportSaveButton.vue b/resources/js/Components/Common/Report/ReportSaveButton.vue
new file mode 100644
index 00000000..7f4ab828
--- /dev/null
+++ b/resources/js/Components/Common/Report/ReportSaveButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { SecondaryButton } from '@/packages/ui/src';
+import ReportCreateModal from '@/Components/Common/Report/ReportCreateModal.vue';
+import { h, ref } from 'vue';
+import type { CreateReportBodyProperties } from '@/packages/api/src';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+defineProps<{
+    reportProperties: CreateReportBodyProperties;
+}>();
+
+const showCreateReportModal = ref(false);
+const showPremiumModal = ref(false);
+const SaveIcon = h('div', {
+    innerHTML:
+        '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7M7 3v4a1 1 0 0 0 1 1h7"/></g></svg>',
+});
+
+function onSaveReportClick() {
+    if (isAllowedToPerformPremiumAction()) {
+        showCreateReportModal.value = true;
+    } else {
+        showPremiumModal.value = true;
+    }
+}
+</script>
+
+<template>
+    <ReportCreateModal
+        :properties="reportProperties"
+        v-model:show="showCreateReportModal"></ReportCreateModal>
+    <UpgradeModal v-model:show="showPremiumModal">
+        <strong>Sharable Reports</strong> is only available in solidtime
+        Professional.
+    </UpgradeModal>
+    <SecondaryButton :icon="SaveIcon" @click="onSaveReportClick"
+        >Save Report</SecondaryButton
+    >
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Reporting/ReportingExportButton.vue b/resources/js/Components/Common/Reporting/ReportingExportButton.vue
index 73a2be8e..464cbcd0 100644
--- a/resources/js/Components/Common/Reporting/ReportingExportButton.vue
+++ b/resources/js/Components/Common/Reporting/ReportingExportButton.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { SecondaryButton } from '@/packages/ui/src';
-import { ArrowDownTrayIcon } from '@heroicons/vue/20/solid';
+import { ArrowDownTrayIcon, LockClosedIcon } from '@heroicons/vue/20/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import type { ExportFormat } from '@/types/reporting';
 import { ref } from 'vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
 
 const props = defineProps<{
     download: (format: ExportFormat) => Promise<void>;
 }>();
 const loading = ref(false);
+const showPremiumModal = ref(false);
 function triggerDownload(format: ExportFormat) {
+    if (format === 'pdf' && !isAllowedToPerformPremiumAction()) {
+        showPremiumModal.value = true;
+        return;
+    }
     loading.value = true;
     props.download(format).finally(() => {
         loading.value = false;
@@ -27,11 +34,15 @@ function triggerDownload(format: ExportFormat) {
         <template #content>
             <div class="flex flex-col space-y-1 p-1.5">
                 <SecondaryButton
-                    v-if="false"
                     class="border-0 px-2"
-                    @click="triggerDownload('pdf')"
-                    >Export as PDF</SecondaryButton
-                >
+                    @click="triggerDownload('pdf')">
+                    <div class="flex items-center space-x-2">
+                        <span> Export as PDF </span>
+                        <LockClosedIcon
+                            v-if="!isAllowedToPerformPremiumAction()"
+                            class="w-3.5 text-text-tertiary"></LockClosedIcon>
+                    </div>
+                </SecondaryButton>
                 <SecondaryButton
                     class="border-0 px-2"
                     @click="triggerDownload('xlsx')"
@@ -50,6 +61,10 @@ function triggerDownload(format: ExportFormat) {
             </div>
         </template>
     </Dropdown>
+    <UpgradeModal v-model:show="showPremiumModal">
+        <strong>PDF Reports</strong> are only available in solidtime
+        Professional.
+    </UpgradeModal>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/Components/Common/Reporting/ReportingPieChart.vue b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
index ea01cd93..7f7f5187 100644
--- a/resources/js/Components/Common/Reporting/ReportingPieChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
@@ -11,11 +11,6 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
-import type { GroupedDataEntries } from '@/packages/api/src';
-import { useReportingStore } from '@/utils/useReporting';
-import { useProjectsStore } from '@/utils/useProjects';
-import { storeToRefs } from 'pinia';
 
 use([
     CanvasRenderer,
@@ -28,36 +23,18 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+type ReportingChartDataEntry = {
+    value: number;
+    name: string;
+    color: string;
+}[];
+
 const props = defineProps<{
-    data: GroupedDataEntries | null;
-    type: string | null;
+    data: ReportingChartDataEntry | null;
 }>();
-const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
-const { projects } = storeToRefs(useProjectsStore());
-
-const groupChartData = computed(() => {
-    return (
-        props?.data?.map((entry) => {
-            const name = getNameForReportingRowEntry(entry.key, props.type);
-            let color = getRandomColorWithSeed(entry.key ?? 'none');
-            if (name && props.type && emptyPlaceholder[props.type] === name) {
-                color = '#CCCCCC';
-            } else if (props.type === 'project') {
-                color =
-                    projects.value?.find((project) => project.id === entry.key)
-                        ?.color ?? '#CCCCCC';
-            }
-            return {
-                value: entry.seconds,
-                name: getNameForReportingRowEntry(entry.key, props.type),
-                color: color,
-            };
-        }) ?? []
-    );
-});
 
 const seriesData = computed(() => {
-    return groupChartData.value.map((el) => {
+    return props.data?.map((el) => {
         return {
             ...el,
             ...{
diff --git a/resources/js/Components/Common/Reporting/ReportingRow.vue b/resources/js/Components/Common/Reporting/ReportingRow.vue
index 2ccbd208..dbdb89d6 100644
--- a/resources/js/Components/Common/Reporting/ReportingRow.vue
+++ b/resources/js/Components/Common/Reporting/ReportingRow.vue
@@ -4,30 +4,23 @@ import { formatCents } from '@/packages/ui/src/utils/money';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
 import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
-import { useReportingStore } from '@/utils/useReporting';
 import { getOrganizationCurrencyString } from '@/utils/money';
-const { getNameForReportingRowEntry } = useReportingStore();
 
 type AggregatedGroupedData = GroupedData & {
-    grouped_type?: string | null;
     grouped_data?: GroupedData[] | null;
 };
 
 type GroupedData = {
-    key: string | null;
     seconds: number;
     cost: number;
+    description: string | null | undefined;
 };
 
 const props = defineProps<{
     entry: AggregatedGroupedData;
     indent?: boolean;
-    type: string | null;
 }>();
 
-function getNameForKey(key: string | null) {
-    return getNameForReportingRowEntry(key, props.type);
-}
 const expanded = ref(false);
 </script>
 
@@ -48,7 +41,7 @@ const expanded = ref(false);
                 {{ entry.grouped_data?.length }}
             </GroupedItemsCountButton>
             <span>
-                {{ getNameForKey(entry.key) }}
+                {{ entry.description }}
             </span>
         </div>
         <div class="justify-end flex items-center">
@@ -65,8 +58,7 @@ const expanded = ref(false);
         <ReportingRow
             indent
             v-for="subEntry in entry.grouped_data"
-            :type="entry?.grouped_type ?? null"
-            :key="subEntry.key ?? 'none'"
+            :key="subEntry.description ?? 'none'"
             :entry="subEntry"></ReportingRow>
     </div>
 </template>
diff --git a/resources/js/Components/Common/UpgradeBadge.vue b/resources/js/Components/Common/UpgradeBadge.vue
index d5f18454..106ed215 100644
--- a/resources/js/Components/Common/UpgradeBadge.vue
+++ b/resources/js/Components/Common/UpgradeBadge.vue
@@ -6,7 +6,10 @@ const showUpgradeModal = ref(false);
 </script>
 
 <template>
-    <UpgradeModal v-model:show="showUpgradeModal"></UpgradeModal>
+    <UpgradeModal v-model:show="showUpgradeModal">
+        <strong>Project and Task Estimates</strong> is only available in
+        solidtime Professional.
+    </UpgradeModal>
     <button
         @click.prevent="showUpgradeModal = true"
         class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1">
diff --git a/resources/js/Components/Common/UpgradeModal.vue b/resources/js/Components/Common/UpgradeModal.vue
index f4fe9b1a..f4c22375 100644
--- a/resources/js/Components/Common/UpgradeModal.vue
+++ b/resources/js/Components/Common/UpgradeModal.vue
@@ -2,10 +2,7 @@
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { Link } from '@inertiajs/vue3';
-import {
-    isAllowedToPerformPremiumAction,
-    isBillingActivated,
-} from '@/utils/billing';
+import { isBillingActivated } from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
 import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
 import { SecondaryButton } from '@/packages/ui/src';
@@ -22,15 +19,14 @@ const show = defineModel('show', { default: false });
         </template>
 
         <template #content>
-            <div v-if="!isAllowedToPerformPremiumAction()">
+            <div>
                 <div
                     class="rounded-full flex items-center justify-center w-20 h-20 mx-auto border border-border-tertiary bg-secondary">
                     <UserGroupIcon class="w-12"></UserGroupIcon>
                 </div>
                 <div class="max-w-sm text-center mx-auto py-4 text-base">
                     <p class="py-1">
-                        <strong>Project and Task Estimates</strong> is only
-                        available in solidtime Professional.
+                        <slot></slot>
                     </p>
                     <p class="py-1">
                         If you want to use this feature,
diff --git a/resources/js/Pages/Reporting.vue b/resources/js/Pages/Reporting.vue
index c97b3b38..2ae4ea85 100644
--- a/resources/js/Pages/Reporting.vue
+++ b/resources/js/Pages/Reporting.vue
@@ -44,12 +44,12 @@ 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 { 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';
+import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
+import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
 const { handleApiRequestNotifications } = useNotificationsStore();
 
 const startDate = useSessionStorage<string>(
@@ -165,13 +165,13 @@ 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,
+        history_group: getOptimalGroupingOption(startDate.value, endDate.value),
     } as CreateReportBodyProperties;
 });
 
@@ -201,12 +201,73 @@ async function downloadExport(format: ExportFormat) {
         window.open(response.download_url, '_self')?.focus();
     }
 }
+const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
+import { useProjectsStore } from '@/utils/useProjects';
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+
+const groupedPieChartData = computed(() => {
+    return (
+        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+            const name = getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            );
+            let color = getRandomColorWithSeed(entry.key ?? 'none');
+            if (
+                name &&
+                aggregatedTableTimeEntries.value?.grouped_type &&
+                emptyPlaceholder[
+                    aggregatedTableTimeEntries.value?.grouped_type
+                ] === name
+            ) {
+                color = '#CCCCCC';
+            } else if (
+                aggregatedTableTimeEntries.value?.grouped_type === 'project'
+            ) {
+                color =
+                    projects.value?.find((project) => project.id === entry.key)
+                        ?.color ?? '#CCCCCC';
+            }
+            return {
+                value: entry.seconds,
+                name:
+                    getNameForReportingRowEntry(
+                        entry.key,
+                        aggregatedTableTimeEntries.value?.grouped_type
+                    ) ?? '',
+                color: color,
+            };
+        }) ?? []
+    );
+});
+
+const tableData = computed(() => {
+    return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+        return {
+            seconds: entry.seconds,
+            cost: entry.cost,
+            description: getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            ),
+            grouped_data:
+                entry.grouped_data?.map((el) => {
+                    return {
+                        seconds: el.seconds,
+                        cost: el.cost,
+                        description: getNameForReportingRowEntry(
+                            el.key,
+                            el.grouped_type
+                        ),
+                    };
+                }) ?? [],
+        };
+    });
+});
 </script>
 
 <template>
-    <ReportCreateModal
-        :properties="reportProperties"
-        v-model:show="showCreateReportModal"></ReportCreateModal>
     <AppLayout
         title="Reporting"
         data-testid="reporting_view"
@@ -217,11 +278,12 @@ async function downloadExport(format: ExportFormat) {
                 <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
                 <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
             </div>
-            <SecondaryButton @click="showCreateReportModal = true"
-                >Save</SecondaryButton
-            >
-            <ReportingExportButton
-                :download="downloadExport"></ReportingExportButton>
+            <div class="flex space-x-2">
+                <ReportingExportButton
+                    :download="downloadExport"></ReportingExportButton>
+                <ReportSaveButton
+                    :reportProperties="reportProperties"></ReportSaveButton>
+            </div>
         </MainContainer>
         <div class="py-2.5 w-full border-b border-default-background-separator">
             <MainContainer
@@ -370,8 +432,8 @@ async function downloadExport(format: ExportFormat) {
                                     ?.length > 0
                             ">
                             <ReportingRow
-                                v-for="entry in aggregatedTableTimeEntries.grouped_data"
-                                :key="entry.key ?? 'none'"
+                                v-for="entry in tableData"
+                                :key="entry.description ?? 'none'"
                                 :entry="entry"
                                 :type="
                                     aggregatedTableTimeEntries.grouped_type
@@ -412,10 +474,7 @@ async function downloadExport(format: ExportFormat) {
                 </div>
                 <div class="px-2 lg:px-4">
                     <ReportingPieChart
-                        :type="aggregatedTableTimeEntries?.grouped_type"
-                        :data="
-                            aggregatedTableTimeEntries?.grouped_data
-                        "></ReportingPieChart>
+                        :data="groupedPieChartData"></ReportingPieChart>
                 </div>
             </div>
         </MainContainer>
diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue
index 9734d3e3..f5e66946 100644
--- a/resources/js/Pages/ReportingDetailed.vue
+++ b/resources/js/Pages/ReportingDetailed.vue
@@ -29,7 +29,6 @@ import {
     type CreateClientBody,
     type CreateProjectBody,
     type Project,
-    type TimeEntriesQueryParams,
     type TimeEntry,
     type TimeEntryResponse,
 } from '@/packages/api/src';
@@ -89,15 +88,15 @@ const pageLimit = 15;
 const currentPage = ref(1);
 
 function getFilterAttributes() {
-    let params: TimeEntriesQueryParams = {
+    const defaultParams = {
         start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
         end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
-        active: 'false',
+        active: 'false' as 'true' | 'false',
         limit: pageLimit,
         offset: currentPage.value * pageLimit - pageLimit,
     };
-    params = {
-        ...params,
+    const params = {
+        ...defaultParams,
         member_ids:
             selectedMembers.value.length > 0
                 ? selectedMembers.value
@@ -135,7 +134,7 @@ const { data: timeEntryResponse } = useQuery<TimeEntryResponse>({
             params: {
                 organization: getCurrentOrganizationId() || '',
             },
-            queries: getFilterAttributes(),
+            queries: { ...getFilterAttributes() },
         }),
 });
 
diff --git a/resources/js/Pages/ReportingShared.vue b/resources/js/Pages/ReportingShared.vue
index f5f603a2..74da1ac0 100644
--- a/resources/js/Pages/ReportingShared.vue
+++ b/resources/js/Pages/ReportingShared.vue
@@ -8,6 +8,8 @@ import {
     ChevronDoubleLeftIcon,
     ChevronRightIcon,
     ChevronDoubleRightIcon,
+    CreditCardIcon,
+    UserGroupIcon,
 } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
 
@@ -26,6 +28,13 @@ 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';
+import {
+    isAllowedToPerformPremiumAction,
+    isBillingActivated,
+} from '@/utils/billing';
+import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
+import PrimaryButton from '../packages/ui/src/Buttons/PrimaryButton.vue';
+import { Link } from '@inertiajs/vue3';
 
 const pageLimit = 15;
 const currentPage = ref(1);
@@ -73,6 +82,38 @@ watch(currentPage, () => {
             </div>
         </MainContainer>
 
+        <div v-if="!isAllowedToPerformPremiumAction()">
+            <div class="py-12">
+                <div
+                    class="rounded-full flex items-center justify-center w-20 h-20 mx-auto border border-border-tertiary bg-secondary">
+                    <UserGroupIcon class="w-12"></UserGroupIcon>
+                </div>
+                <div class="max-w-sm text-center mx-auto py-4 text-base">
+                    <p class="py-1">
+                        <slot></slot>
+                    </p>
+                    <p class="py-1">
+                        If you want to use <strong>sharable reports</strong> ,
+                        <strong>please upgrade to a paid plan</strong>.
+                    </p>
+
+                    <Link
+                        v-if="isBillingActivated() && canManageBilling()"
+                        href="/billing">
+                        <PrimaryButton
+                            type="button"
+                            class="mt-6"
+                            v-if="
+                                isBillingActivated() && canUpdateOrganization()
+                            ">
+                            <CreditCardIcon class="w-5 h-5 me-2" />
+                            Go to Billing
+                        </PrimaryButton>
+                    </Link>
+                </div>
+            </div>
+        </div>
+
         <ReportTable
             v-if="reports"
             :reports="reports"
diff --git a/resources/js/Pages/SharedReport.vue b/resources/js/Pages/SharedReport.vue
index cbee906e..8802b63d 100644
--- a/resources/js/Pages/SharedReport.vue
+++ b/resources/js/Pages/SharedReport.vue
@@ -10,7 +10,9 @@ import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.v
 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';
+import { api } from '@/packages/api/src';
+import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
+import { useReportingStore } from '@/utils/useReporting';
 
 const sharedSecret = ref<string | null>(null);
 
@@ -18,16 +20,15 @@ const hasSharedSecret = computed(() => {
     return sharedSecret.value !== null;
 });
 
-useQuery({
+const { data: sharedReportResponseData } = useQuery({
     enabled: hasSharedSecret,
-    queryKey: ['reporting', sharedSecret.value],
-    queryFn: () => {
+    queryKey: ['reporting', sharedSecret],
+    queryFn: () =>
         api.getPublicReport({
             headers: {
                 'X-Api-Key': sharedSecret.value,
             },
-        });
-    },
+        }),
 });
 
 onMounted(() => {
@@ -38,8 +39,10 @@ onMounted(() => {
     }
 });
 
-const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
-    // Placeholder Data
+const aggregatedTableTimeEntries = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.data;
+    }
     return {
         grouped_data: [],
         grouped_type: 'project',
@@ -47,7 +50,10 @@ const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
         cost: 0,
     };
 });
-const aggregatedGraphTimeEntries = computed<AggregatedTimeEntries>(() => {
+const aggregatedGraphTimeEntries = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.history_data;
+    }
     // Placeholder Data
     return {
         grouped_data: [],
@@ -56,8 +62,79 @@ const aggregatedGraphTimeEntries = computed<AggregatedTimeEntries>(() => {
         cost: 0,
     };
 });
-const group = ref('billable');
-const subGroup = ref('project');
+
+const group = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.properties.group;
+    }
+    return 'billable';
+});
+
+const subGroup = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.properties.sub_group;
+    }
+    return 'project';
+});
+const { emptyPlaceholder } = useReportingStore();
+
+const groupedPieChartData = computed(() => {
+    return (
+        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+            if (entry.description === null) {
+                return {
+                    value: entry.seconds,
+                    name: emptyPlaceholder[
+                        aggregatedTableTimeEntries.value?.grouped_type ??
+                            'project'
+                    ],
+                    color: '#CCCCCC',
+                };
+            }
+            return {
+                value: entry.seconds,
+                name: entry.description,
+                color:
+                    entry.color ??
+                    getRandomColorWithSeed(entry.description ?? 'none'),
+            };
+        }) ?? []
+    );
+});
+
+const tableData = computed(() => {
+    return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+        return {
+            seconds: entry.seconds,
+            cost: entry.cost,
+            description:
+                entry.description ??
+                emptyPlaceholder[
+                    aggregatedTableTimeEntries.value?.grouped_type ?? 'project'
+                ],
+            grouped_data:
+                entry.grouped_data?.map((el) => {
+                    return {
+                        seconds: el.seconds,
+                        cost: el.cost,
+                        description:
+                            el.description ??
+                            emptyPlaceholder[
+                                aggregatedTableTimeEntries.value
+                                    ?.grouped_type ?? 'project'
+                            ],
+                    };
+                }) ?? [],
+        };
+    });
+});
+
+const { groupByOptions } = useReportingStore();
+function getGroupLabel(key: string) {
+    return groupByOptions.find((option) => {
+        return option.value === key;
+    })?.label;
+}
 </script>
 
 <template>
@@ -82,9 +159,13 @@ const subGroup = ref('project');
                 <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 }}
+                        class="text-sm flex text-white items-center font-medium px-6 border-b border-card-background-separator pb-3">
+                        Group by
+                        <strong class="px-2">{{ getGroupLabel(group) }}</strong>
+                        and
+                        <strong class="px-2">{{
+                            getGroupLabel(subGroup)
+                        }}</strong>
                     </div>
                     <div
                         class="grid items-center"
@@ -102,8 +183,8 @@ const subGroup = ref('project');
                                     ?.length > 0
                             ">
                             <ReportingRow
-                                v-for="entry in aggregatedTableTimeEntries.grouped_data"
-                                :key="entry.key ?? 'none'"
+                                v-for="entry in tableData"
+                                :key="entry.description ?? 'none'"
                                 :entry="entry"
                                 :type="
                                     aggregatedTableTimeEntries.grouped_type
@@ -144,10 +225,7 @@ const subGroup = ref('project');
                 </div>
                 <div class="px-2 lg:px-4">
                     <ReportingPieChart
-                        :type="aggregatedTableTimeEntries?.grouped_type"
-                        :data="
-                            aggregatedTableTimeEntries?.grouped_data
-                        "></ReportingPieChart>
+                        :data="groupedPieChartData"></ReportingPieChart>
                 </div>
             </div>
         </MainContainer>
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index cae11982..709f2119 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -52,6 +52,7 @@ const OrganizationResource = z
         is_personal: z.boolean(),
         billable_rate: z.union([z.number(), z.null()]),
         employees_can_see_billable_rates: z.boolean(),
+        currency: z.string(),
     })
     .passthrough();
 const OrganizationUpdateRequest = z
@@ -72,6 +73,7 @@ const ProjectResource = z
         is_billable: z.boolean(),
         estimated_time: z.union([z.number(), z.null()]),
         spent_time: z.number().int(),
+        is_public: z.boolean(),
     })
     .passthrough();
 const ProjectStoreRequest = z
@@ -82,6 +84,7 @@ const ProjectStoreRequest = z
         billable_rate: z.union([z.number(), z.null()]).optional(),
         client_id: z.union([z.string(), z.null()]).optional(),
         estimated_time: z.union([z.number(), z.null()]).optional(),
+        is_public: z.boolean().optional(),
     })
     .passthrough();
 const ProjectUpdateRequest = z
@@ -90,6 +93,7 @@ const ProjectUpdateRequest = z
         color: z.string().max(255),
         is_billable: z.boolean(),
         is_archived: z.boolean().optional(),
+        is_public: z.boolean().optional(),
         client_id: z.union([z.string(), z.null()]).optional(),
         billable_rate: z.union([z.number(), z.null()]).optional(),
         estimated_time: z.union([z.number(), z.null()]).optional(),
@@ -121,9 +125,10 @@ const ReportResource = z
         is_public: z.boolean(),
         public_until: z.union([z.string(), z.null()]),
         shareable_link: z.union([z.string(), z.null()]),
+        created_at: z.string(),
+        updated_at: z.string(),
     })
     .passthrough();
-const ReportCollection = z.array(ReportResource);
 const TimeEntryAggregationType = z.enum([
     'day',
     'week',
@@ -136,6 +141,21 @@ const TimeEntryAggregationType = z.enum([
     'billable',
     'description',
 ]);
+const TimeEntryAggregationTypeInterval = z.enum([
+    'day',
+    'week',
+    'month',
+    'year',
+]);
+const Weekday = z.enum([
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+]);
 const ReportStoreRequest = z
     .object({
         name: z.string().max(255),
@@ -144,22 +164,39 @@ const ReportStoreRequest = z
         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,
+                start: z.string(),
+                end: z.string(),
+                active: z.union([z.boolean(), z.null()]).optional(),
+                member_ids: z
+                    .union([z.array(z.string().uuid()), z.null()])
+                    .optional(),
+                billable: z.union([z.boolean(), z.null()]).optional(),
+                client_ids: z
+                    .union([z.array(z.string().uuid()), z.null()])
+                    .optional(),
+                project_ids: z
+                    .union([z.array(z.string().uuid()), z.null()])
+                    .optional(),
+                tag_ids: z
+                    .union([z.array(z.string().uuid()), z.null()])
+                    .optional(),
+                task_ids: z
+                    .union([z.array(z.string().uuid()), z.null()])
+                    .optional(),
+                group: TimeEntryAggregationType.optional(),
+                sub_group: TimeEntryAggregationType.optional(),
+                history_group: TimeEntryAggregationTypeInterval.optional(),
+                week_start: Weekday.optional(),
+                timezone: z.union([z.string(), z.null()]).optional(),
             })
-            .partial()
             .passthrough(),
-        'properties.group': z.string().optional(),
-        'properties.sub_group': z.string().optional(),
+        'properties.member_ids': z.string().optional(),
+        'properties.client_ids': z.string().optional(),
+        'properties.project_ids': z.string().optional(),
+        'properties.tag_ids': z.string().optional(),
+        'properties.task_ids': z.string().optional(),
+        'properties.week_start': z.string().optional(),
+        'properties.timezone': z.string().optional(),
     })
     .passthrough();
 const DetailedReportResource = z
@@ -174,17 +211,20 @@ const DetailedReportResource = z
             .object({
                 group: z.string(),
                 sub_group: z.string(),
-                start: z.union([z.string(), z.null()]),
-                end: z.union([z.string(), z.null()]),
+                history_group: z.string(),
+                start: z.string(),
+                end: z.string(),
                 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(),
+                member_ids: z.union([z.array(z.string()), z.null()]),
+                billable: z.union([z.boolean(), z.null()]),
+                client_ids: z.union([z.array(z.string()), z.null()]),
+                project_ids: z.union([z.array(z.string()), z.null()]),
+                tag_ids: z.union([z.array(z.string()), z.null()]),
+                task_ids: z.union([z.array(z.string()), z.null()]),
             })
             .passthrough(),
+        created_at: z.string(),
+        updated_at: z.string(),
     })
     .passthrough();
 const ReportUpdateRequest = z
@@ -196,6 +236,112 @@ const ReportUpdateRequest = z
     })
     .partial()
     .passthrough();
+const DetailedWithDataReportResource = z
+    .object({
+        name: z.string(),
+        description: z.union([z.string(), z.null()]),
+        public_until: z.union([z.string(), z.null()]),
+        currency: z.string(),
+        properties: z
+            .object({
+                group: z.string(),
+                sub_group: z.string(),
+                history_group: z.string(),
+                start: z.string(),
+                end: z.string(),
+            })
+            .passthrough(),
+        data: z
+            .object({
+                grouped_type: z.union([z.string(), z.null()]),
+                grouped_data: z.union([
+                    z.array(
+                        z
+                            .object({
+                                key: z.union([z.string(), z.null()]),
+                                description: z.union([z.string(), z.null()]),
+                                color: z.union([z.string(), z.null()]),
+                                seconds: z.number().int(),
+                                cost: z.number().int(),
+                                grouped_type: z.union([z.string(), z.null()]),
+                                grouped_data: z.union([
+                                    z.array(
+                                        z
+                                            .object({
+                                                key: z.union([
+                                                    z.string(),
+                                                    z.null(),
+                                                ]),
+                                                description: z.union([
+                                                    z.string(),
+                                                    z.null(),
+                                                ]),
+                                                color: z.union([
+                                                    z.string(),
+                                                    z.null(),
+                                                ]),
+                                                seconds: z.number().int(),
+                                                cost: z.number().int(),
+                                                grouped_type: z.null(),
+                                                grouped_data: z.null(),
+                                            })
+                                            .passthrough()
+                                    ),
+                                    z.null(),
+                                ]),
+                            })
+                            .passthrough()
+                    ),
+                    z.null(),
+                ]),
+                seconds: z.number().int(),
+                cost: z.number().int(),
+            })
+            .passthrough(),
+        history_data: z
+            .object({
+                grouped_type: z.union([z.string(), z.null()]),
+                grouped_data: z.union([
+                    z.array(
+                        z
+                            .object({
+                                key: z.union([z.string(), z.null()]),
+                                description: z.union([z.string(), z.null()]),
+                                seconds: z.number().int(),
+                                cost: z.number().int(),
+                                grouped_type: z.union([z.string(), z.null()]),
+                                grouped_data: z.union([
+                                    z.array(
+                                        z
+                                            .object({
+                                                key: z.union([
+                                                    z.string(),
+                                                    z.null(),
+                                                ]),
+                                                description: z.union([
+                                                    z.string(),
+                                                    z.null(),
+                                                ]),
+                                                seconds: z.number().int(),
+                                                cost: z.number().int(),
+                                                grouped_type: z.null(),
+                                                grouped_data: z.null(),
+                                            })
+                                            .passthrough()
+                                    ),
+                                    z.null(),
+                                ]),
+                            })
+                            .passthrough()
+                    ),
+                    z.null(),
+                ]),
+                seconds: z.number().int(),
+                cost: z.number().int(),
+            })
+            .passthrough(),
+    })
+    .passthrough();
 const TagResource = z
     .object({
         id: z.string(),
@@ -294,15 +440,6 @@ const TimeEntryUpdateRequest = z
     })
     .partial()
     .passthrough();
-const Weekday = z.enum([
-    'monday',
-    'tuesday',
-    'wednesday',
-    'thursday',
-    'friday',
-    'saturday',
-    'sunday',
-]);
 const UserResource = z
     .object({
         id: z.string(),
@@ -317,7 +454,7 @@ const PersonalMembershipResource = z
     .object({
         id: z.string(),
         organization: z
-            .object({ id: z.string(), name: z.string() })
+            .object({ id: z.string(), name: z.string(), currency: z.string() })
             .passthrough(),
         role: z.string(),
     })
@@ -344,11 +481,13 @@ export const schemas = {
     ProjectMemberStoreRequest,
     ProjectMemberUpdateRequest,
     ReportResource,
-    ReportCollection,
     TimeEntryAggregationType,
+    TimeEntryAggregationTypeInterval,
+    Weekday,
     ReportStoreRequest,
     DetailedReportResource,
     ReportUpdateRequest,
+    DetailedWithDataReportResource,
     TagResource,
     TagCollection,
     TagStoreRequest,
@@ -361,7 +500,6 @@ export const schemas = {
     TimeEntryStoreRequest,
     TimeEntryUpdateMultipleRequest,
     TimeEntryUpdateRequest,
-    Weekday,
     UserResource,
     PersonalMembershipResource,
     PersonalMembershipCollection,
@@ -1797,7 +1935,39 @@ const endpoints = makeApi([
                 schema: z.string(),
             },
         ],
-        response: z.object({ data: ReportCollection }).passthrough(),
+        response: z
+            .object({
+                data: z.array(ReportResource),
+                links: z
+                    .object({
+                        first: z.union([z.string(), z.null()]),
+                        last: z.union([z.string(), z.null()]),
+                        prev: z.union([z.string(), z.null()]),
+                        next: z.union([z.string(), z.null()]),
+                    })
+                    .passthrough(),
+                meta: z
+                    .object({
+                        current_page: z.number().int(),
+                        from: z.union([z.number(), z.null()]),
+                        last_page: z.number().int(),
+                        links: z.array(
+                            z
+                                .object({
+                                    url: z.union([z.string(), z.null()]),
+                                    label: z.string(),
+                                    active: z.boolean(),
+                                })
+                                .passthrough()
+                        ),
+                        path: z.union([z.string(), z.null()]),
+                        per_page: z.number().int(),
+                        to: z.union([z.number(), z.null()]),
+                        total: z.number().int(),
+                    })
+                    .passthrough(),
+            })
+            .passthrough(),
         errors: [
             {
                 status: 401,
@@ -3123,12 +3293,12 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
             {
                 name: 'start',
                 type: 'Query',
-                schema: start,
+                schema: z.string(),
             },
             {
                 name: 'end',
                 type: 'Query',
-                schema: start,
+                schema: z.string(),
             },
             {
                 name: 'active',
@@ -3219,7 +3389,7 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
 The report is considered expired if the &#x60;public_until&#x60; field is set and the date is in the past.
 The report is considered public if the &#x60;is_public&#x60; field is set to &#x60;true&#x60;.`,
         requestFormat: 'json',
-        response: z.object({ data: DetailedReportResource }).passthrough(),
+        response: DetailedWithDataReportResource,
         errors: [
             {
                 status: 404,
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 36591d4e..3bca421a 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -180,6 +180,7 @@ watchEffect(() => {
                     tasks: [],
                     estimated_time: null,
                     spent_time: 0,
+                    is_public: false,
                 },
             ],
         });
diff --git a/resources/views/reports/time-entry-aggregate/pdf.blade.php b/resources/views/reports/time-entry-aggregate/pdf.blade.php
index dc0c304d..8cca3633 100644
--- a/resources/views/reports/time-entry-aggregate/pdf.blade.php
+++ b/resources/views/reports/time-entry-aggregate/pdf.blade.php
@@ -65,6 +65,7 @@
     <span>Total cost: {{ Money::of(BigDecimal::ofUnscaledValue($aggregatedData['cost'], 2)->__toString(), $currency)->formatTo('en_US') }}</span><br>
 </div>
 
+
 <div id="main-chart" style="width: 100%; height:400px;"></div>
 
 <div id="pie-chart" style="width: 100%; height: 150px; margin-bottom: 50px;"></div>