add missing data to public shared reports, add premium restrictions, add pdf download

2026-08-16 04:02:15 +01:00 · 2024-12-03 15:03:28 +01:00
parent bcb298bd6d
commit e3f981aac2
15 changed files with 525 additions and 149 deletions
--- 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>
--- 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() },
        }),
 });

--- 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"
--- 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,7 +39,21 @@ onMounted(() => {
    }
 });

-const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
+const aggregatedTableTimeEntries = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.data;
+    }
+    return {
+        grouped_data: [],
+        grouped_type: 'project',
+        seconds: 0,
+        cost: 0,
+    };
+});
+const aggregatedGraphTimeEntries = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.history_data;
+    }
    // Placeholder Data
    return {
        grouped_data: [],
@@ -47,17 +62,79 @@ const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
        cost: 0,
    };
 });
-const aggregatedGraphTimeEntries = computed<AggregatedTimeEntries>(() => {
-    // Placeholder Data
-    return {
-        grouped_data: [],
-        grouped_type: 'project',
-        seconds: 0,
-        cost: 0,
-    };
+
+const group = computed(() => {
+    if (sharedReportResponseData.value) {
+        return sharedReportResponseData.value?.properties.group;
+    }
+    return 'billable';
 });
-const group = ref('billable');
-const subGroup = ref('project');
+
+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>