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

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"