add shared reports section in the frontend

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>