# All files / js/layouts/app AppSidebarLayout.vue

0% Statements 0/20
0% Branches 0/9
0% Functions 0/6
0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91

     <script setup lang="ts">
    import AppContent from '@/components/AppContent.vue';
    import AppShell from '@/components/AppShell.vue';
    import AppSidebar from '@/components/AppSidebar.vue';
    import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
    import Footer from '@/components/Footer.vue';
    import NotesPanel from '@/components/NotesPanel.vue';
    import PermissionErrorModal from '@/components/PermissionErrorModal.vue';
    import type { BreadcrumbItemType } from '@/types';
    import { usePage } from '@inertiajs/vue3';
    import { useRecentlyViewed } from '@/composables/useRecentlyViewed';
    import { computed, watch, onMounted } from 'vue';

    interface Props {
        breadcrumbs?: BreadcrumbItemType[];
    }

    withDefaults(defineProps<Props>(), {
        breadcrumbs: () => [],
    });

    const page = usePage();
    const { addItem } = useRecentlyViewed();

    const noteContext = computed(() => {
        const path = (page.url || '').split('?')[0];
        const patterns: Array<{ regex: RegExp; module: string }> = [
            { regex: /^\/customers\/(\d+)\/?$/, module: 'customers' },
            { regex: /^\/contacts\/(\d+)\/?$/, module: 'contacts' },
            { regex: /^\/products\/(\d+)\/?$/, module: 'products' },
            { regex: /^\/products\/batches\/(\d+)\/?$/, module: 'product-batches' },
            { regex: /^\/products\/serial-numbers\/(\d+)\/?$/, module: 'product-serial-numbers' },
            { regex: /^\/suppliers\/(\d+)\/?$/, module: 'suppliers' },
            { regex: /^\/stock-movements\/(\d+)\/?$/, module: 'stock-movements' },
            { regex: /^\/jobcards\/(\d+)\/?$/, module: 'jobcards' },
            { regex: /^\/quotes\/(\d+)\/?$/, module: 'quotes' },
            { regex: /^\/invoices\/(\d+)\/?$/, module: 'invoices' },
            { regex: /^\/credit-notes\/(\d+)\/?$/, module: 'credit-notes' },
            { regex: /^\/purchase-orders\/(\d+)\/?$/, module: 'purchase-orders' },
            { regex: /^\/reports\/(\d+)\/?$/, module: 'reports' },
            { regex: /^\/licenses\/(\d+)\/?$/, module: 'licenses' },
        ];

        for (const pattern of patterns) {
            const match = path.match(pattern.regex);
            if (match) {
                return { module: pattern.module, recordId: Number(match[1]) };
            }
        }

        return null;
    });

    // Track page URL when it changes
    watch(
        () => page.url,
        (url) => {
            if (url) {
                addItem(url);
            }
        },
        { immediate: true }
    );

    // Also track on mount to catch initial page load
    onMounted(() => {
        if (page.url) {
            addItem(page.url);
        }
    });
    </script>

    <template>
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" class="overflow-x-hidden">
                <AppSidebarHeader :breadcrumbs="breadcrumbs" />
                <slot />
                <div v-if="noteContext" class="px-4 pb-4">
                    <NotesPanel
                        title="Record Notes"
                        :module="noteContext.module"
                        :record-id="noteContext.recordId"
                    />
                </div>
                <Footer />
            </AppContent>
            <PermissionErrorModal />
        </AppShell>
    </template>