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

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>

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');
 
-const props = defineProps<{
-    data: GroupedDataEntries | null;
-    type: string | null;
-}>();
-const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
-const { projects } = storeToRefs(useProjectsStore());
+type ReportingChartDataEntry = {
+    value: number;
+    name: string;
+    color: string;
+}[];
 
-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 props = defineProps<{
+    data: ReportingChartDataEntry | null;
+}>();
 
 const seriesData = computed(() => {
-    return groupChartData.value.map((el) => {
+    return props.data?.map((el) => {
         return {
             ...el,
             ...{

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>