add shared reports section in the frontend

resources/js/Components/Common/Report/ReportCreateModal.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import TextInput from '../../../packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '../../../packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { ref } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type {
+    CreateReportBody,
+    CreateReportBodyProperties,
+} from '@/packages/api/src';
+import { useMutation } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const createReportMutation = useMutation({
+    mutationFn: async (report: CreateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - create report');
+        }
+        return await api.createReport(report, {
+            params: {
+                organization: organizationId,
+            },
+        });
+    },
+});
+
+const props = defineProps<{
+    properties: CreateReportBodyProperties;
+}>();
+
+const report = ref<CreateReportBody>({
+    name: '',
+    description: '',
+    is_public: false,
+    public_until: null,
+    properties: {},
+});
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    report.value.properties = { ...props.properties };
+    await handleApiRequestNotifications(
+        () => createReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportEditModal.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import TextInput from '../../../packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '../../../packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { ref, watch } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type { UpdateReportBody } from '@/packages/api/src';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+import type { Report } from '@/packages/api/src';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+const queryClient = useQueryClient();
+
+const updateReportMutation = useMutation({
+    mutationFn: async (report: UpdateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - update report');
+        }
+        return await api.updateReport(report, {
+            params: {
+                organization: organizationId,
+                report: props.originalReport.id,
+            },
+        });
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
+});
+
+const props = defineProps<{
+    originalReport: Report;
+}>();
+
+const report = ref<UpdateReportBody>({
+    name: props.originalReport.name,
+    description: props.originalReport.description,
+    is_public: props.originalReport.is_public,
+    public_until: props.originalReport.public_until,
+});
+
+watch(
+    () => props.originalReport,
+    () => {
+        report.value = {
+            name: props.originalReport.name,
+            description: props.originalReport.description,
+            is_public: props.originalReport.is_public,
+            public_until: props.originalReport.public_until,
+        };
+    }
+);
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    await handleApiRequestNotifications(
+        () => updateReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import type { Report } from '@/packages/api/src';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import { canDeleteReport, canUpdateReport } from '@/utils/permissions';
+const emit = defineEmits<{
+    delete: [];
+    edit: [];
+    archive: [];
+}>();
+const props = defineProps<{
+    report: Report;
+}>();
+</script>
+
+<template>
+    <MoreOptionsDropdown :label="'Actions for Project ' + props.report.name">
+        <div class="min-w-[150px]">
+            <button
+                @click.prevent="emit('edit')"
+                v-if="canUpdateReport()"
+                :aria-label="'Edit Report ' + props.report.name"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
+            <button
+                @click.prevent="emit('delete')"
+                :aria-label="'Delete Report ' + props.report.name"
+                v-if="canDeleteReport()"
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportTable.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import { FolderPlusIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+import { canCreateProjects } from '@/utils/permissions';
+import type { Report } from '@/packages/api/src';
+import ReportTableHeading from '@/Components/Common/Report/ReportTableHeading.vue';
+import ReportTableRow from '@/Components/Common/Report/ReportTableRow.vue';
+import { router } from '@inertiajs/vue3';
+
+defineProps<{
+    reports: Report[];
+}>();
+
+const gridTemplate = computed(() => {
+    return `grid-template-columns: minmax(150px, auto) minmax(250px, 1fr) minmax(140px, auto) minmax(130px, auto) 80px;`;
+});
+</script>
+
+<template>
+    <div class="flow-root max-w-[100vw] overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="report_table"
+                class="grid min-w-full"
+                :style="gridTemplate">
+                <ReportTableHeading></ReportTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="reports.length === 0">
+                    <FolderPlusIcon
+                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
+                    <h3 class="text-white font-semibold">
+                        No shared reports found
+                    </h3>
+                    <p class="pb-5" v-if="canCreateProjects()">
+                        Create your first project now!
+                    </p>
+                    <SecondaryButton
+                        @click="router.visit(route('reporting'))"
+                        :icon="PlusIcon"
+                        >Go to the overview to create a report
+                    </SecondaryButton>
+                </div>
+                <template v-for="report in reports" :key="report.id">
+                    <ReportTableRow :report="report"></ReportTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Report/ReportTableHeading.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
+
+<template>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Description
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Visibility
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Public URL
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Report/ReportTableRow.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import TableRow from '@/Components/TableRow.vue';
+import { api, type Report } from '@/packages/api/src';
+import ReportMoreOptionsDropdown from '@/Components/Common/Report/ReportMoreOptionsDropdown.vue';
+import ReportEditModal from '@/Components/Common/Report/ReportEditModal.vue';
+import { SecondaryButton } from '@/packages/ui/src';
+import { useClipboard } from '@vueuse/core';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+
+const props = defineProps<{
+    report: Report;
+}>();
+
+const showEditReportModal = ref(false);
+
+const { copy, copied, isSupported } = useClipboard({ legacy: true });
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+function openSharableLink() {
+    const link = props.report.shareable_link;
+    if (link) {
+        window.open(link, '_blank')?.focus();
+    }
+}
+
+const queryClient = useQueryClient();
+const deleteReportMutation = useMutation({
+    mutationFn: async (reportId: string) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - update report');
+        }
+        return await api.deleteReport(undefined, {
+            params: {
+                organization: organizationId,
+                report: reportId,
+            },
+        });
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
+});
+async function deleteReport() {
+    await handleApiRequestNotifications(
+        () => deleteReportMutation.mutateAsync(props.report.id),
+        'Success',
+        'Error'
+    );
+}
+</script>
+
+<template>
+    <ReportEditModal
+        v-model:show="showEditReportModal"
+        :original-report="report"></ReportEditModal>
+    <TableRow>
+        <div
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <span class="overflow-ellipsis overflow-hidden">
+                {{ report.name }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-muted">
+            <span class="overflow-ellipsis overflow-hidden">
+                {{ report.description }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ report.is_public ? 'Public' : 'Private' }}
+        </div>
+        <div
+            class="whitespace-nowrap px-3 flex items-center text-sm text-muted">
+            <div
+                v-if="report.shareable_link"
+                class="space-x-2 flex items-center">
+                <SecondaryButton
+                    v-if="isSupported"
+                    @click="copy(report.shareable_link)">
+                    <span v-if="!copied">Copy URL</span>
+                    <span v-else>Copied!</span>
+                </SecondaryButton>
+                <button
+                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-white/80"
+                    @click="openSharableLink">
+                    <ArrowTopRightOnSquareIcon
+                        class="w-4 text-text-tertiary hover:text-text-secondary transition"></ArrowTopRightOnSquareIcon>
+                </button>
+            </div>
+            <span v-else> -- </span>
+        </div>
+        <div
+            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <ReportMoreOptionsDropdown
+                :report="report"
+                @edit="showEditReportModal = true"
+                @delete="deleteReport"></ReportMoreOptionsDropdown>
+        </div>
+    </TableRow>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Reporting/ReportingTabNavbar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+defineProps<{
+    active: 'reporting' | 'detailed' | 'shared';
+}>();
+</script>
+
+<template>
+    <TabBar>
+        <TabBarItem
+            @click="router.visit(route('reporting'))"
+            :active="active === 'reporting'"
+            >Overview</TabBarItem
+        >
+        <TabBarItem
+            @click="router.visit(route('reporting.detailed'))"
+            :active="active === 'detailed'"
+            >Detailed</TabBarItem
+        >
+        <TabBarItem
+            @click="router.visit(route('reporting.shared'))"
+            :active="active === 'shared'"
+            >Shared</TabBarItem
+        >
+    </TabBar>
+</template>
+
+<style scoped></style>

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -38,7 +38,7 @@ async function startTaskTimer() {
     <div
         class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
         <div class="col-span-4">
-            <p class="font-semibold text-white text-sm pb-1">
+            <p class="font-semibold text-white text-sm pb-1 overflow-ellipsis">
                 {{ title }}
             </p>
             <ProjectBadge