add shared reports section in the frontend

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>