@meeovi/layer-departments 1.0.0

package/app/components/categories/adultstore.vue

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <AgeVerification />
+        <section data-bs-version="5.1" class="formulam5 header1 cid-uwd6B8oI8u mbr-parallax-background" id="header1-a7">
+
+            <div class="mbr-overlay"></div>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="content-wrap col-12 col-md-12 col-lg-12">
+                        <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"><strong>{{ adult?.name }}</strong>
+                        </h1>
+
+                        <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
+                            {{ adult?.description }}
+                        </p>
+                        <div class="mbr-section-btn"><NuxtLink class="btn btn-white display-4" href="#"><span
+                                    class="mobi-mbri mobi-mbri-right mbr-iconfont mbr-iconfont-btn"></span>START
+                                SHOPPING</NuxtLink>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section data-bs-version="5.1" class="formulam5 features4 cid-uwd7HtZZXP" id="features4-a9">
+
+
+            <div class="container-fluid">
+                <div class="row justify-content-center">
+                    <div class="col-12 content-head">
+
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="item features-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <div class="item-img">
+                                <img src="assets/images/features2.jpg" alt="" />
+                                <div class="item-content">
+                                    <h5 class="item-title mbr-fonts-style display-2">
+                                        <strong>Сream</strong>
+                                    </h5>
+
+
+                                    <div class="mbr-section-btn item-footer"><NuxtLink to=""
+                                            class="btn item-btn btn-white display-4"><span
+                                                class="mobi-mbri mobi-mbri-right mbr-iconfont mbr-iconfont-btn"></span>Learn
+                                            More</NuxtLink></div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                    </div>
+                    <div class="item features-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <div class="item-img">
+                                <img src="assets/images/features1.jpg" alt="" />
+                                <div class="item-content">
+                                    <h5 class="item-title mbr-fonts-style display-2">
+                                        <strong>Soap</strong>
+                                    </h5>
+
+
+                                    <div class="mbr-section-btn item-footer"><NuxtLink to=""
+                                            class="btn item-btn btn-white display-4"><span
+                                                class="mobi-mbri mobi-mbri-right mbr-iconfont mbr-iconfont-btn"></span>Learn
+                                            More</NuxtLink></div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                    </div>
+                    <div class="item features-image col-12 col-md-6 col-lg-4">
+                        <div class="item-wrapper">
+                            <div class="item-img">
+                                <img src="assets/images/features4.jpg" alt="" />
+                                <div class="item-content">
+                                    <h5 class="item-title mbr-fonts-style display-2">
+                                        <strong>Lotion</strong>
+                                    </h5>
+
+
+                                    <div class="mbr-section-btn item-footer"><NuxtLink to=""
+                                            class="btn item-btn btn-white display-4"><span
+                                                class="mobi-mbri mobi-mbri-right mbr-iconfont mbr-iconfont-btn"></span>Learn
+                                            More</NuxtLink></div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                    </div>
+
+
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import AgeVerification from '~/app/components/partials/globals/ageverification.vue'
+
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: adult
+    } = await useAsyncData('adult', () => {
+        return $directus.request($readItem('departments', '64'))
+    })
+
+    const props = defineProps({
+        category: {
+            type: String,
+            required: true,
+        },
+    });
+</script>

package/app/components/categories/chart/[id].vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="contentPage">
+        <v-row>
+            <v-col cols="12">
+                <v-card :color="chartbar?.color">
+                    <div class="d-flex flex-no-wrap justify-space-between">
+                        <div>
+                            <v-card-title class="text-h5">
+                                {{ chart?.name }}
+                            </v-card-title>
+
+                            <v-card-subtitle>{{ chart?.description }}</v-card-subtitle>
+                        </div>
+
+                        <v-avatar class="ma-3" rounded="0" size="125">
+                            <NuxtImg :src="`${$directus.url}/assets/${chart?.image?.filename_disk}`" />
+                        </v-avatar>
+                    </div>
+                </v-card>
+            </v-col>
+
+            <v-col cols="12">
+                <v-card elevation="0">
+                    <v-tabs v-model="tab" :bg-color="chartbar?.color">
+                        <div v-for="(menu, index) in spacebar?.menus" :key="index">
+                            <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+                        </div>
+                    </v-tabs>
+
+                    <v-card-text>
+                        <v-tabs-window v-model="tab">
+                            <v-tabs-window-item :value="chartbar?.menus[0]?.value">
+                                <!-- Weekly Chart Table -->
+                                <WeeklyChart :data="topProducts" />
+                            </v-tabs-window-item>
+                            <v-tabs-window-item :value="chartbar?.menus[1]?.value">
+                                <!-- Monthly Chart Table -->
+                                <MonthlyChart :data="topProducts" />
+                            </v-tabs-window-item>
+                            <v-tabs-window-item :value="chartbar?.menus[2]?.value">
+                                <!-- Yearly Chart Table -->
+                                <YearlyChart :data="topProducts" />
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item :value="chartbar?.menus[3]?.value">
+                                <v-row>
+                                    <v-col v-for="charts in charts" :key="charts">
+                                        <charts :chart="charts" />
+                                    </v-col>
+                                </v-row>
+                            </v-tabs-window-item>
+                        </v-tabs-window>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import WeeklyChart from '@/components/charts/weeklyChart.vue'
+    import MonthlyChart from '@/components/charts/monthlyChart.vue'
+    import YearlyChart from '@/components/charts/yearlyChart.vue'
+
+    const tab = ref('weekly')
+    const route = useRoute()
+    const topProducts = ref([]);
+
+    // Add new reactive references
+    const filterOptions = ref({
+        category: null,
+        timeRange: 'weekly'
+    })
+
+    const sortOptions = ref({
+        field: 'sales',
+        order: 'desc'
+    })
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    const {
+        data: chart
+    } = await useAsyncData('chart', () => {
+        return $directus.request($readItem('musicchart', route.params.id, {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: charts
+    } = await useAsyncData('charts', () => {
+        return $directus.request($readItems('musicchart', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: chartbar
+    } = await useAsyncData('chartbar', () => {
+        return $directus.request($readItem('navigation', '53'))
+    })
+
+    const categories = ref([]) // Will be populated from your products data
+
+    // Calculate helper functions
+    const calculateTrend = (current, previous) => {
+        if (current > previous) return 'up';
+        if (current < previous) return 'down';
+        return 'stable';
+    };
+
+    const calculateWeeksOnChart = (firstAppearance) => {
+        const now = new Date();
+        const start = new Date(firstAppearance);
+        return Math.floor((now - start) / (7 * 24 * 60 * 60 * 1000));
+    };
+
+    // Modify your existing fetchChartData function
+    const fetchChartData = async (timeframe) => {
+        try {
+            const now = new Date();
+            let startDate;
+
+            // Determine the start date based on the timeframe
+            if (timeframe === "weekly") {
+                startDate = new Date(now.setDate(now.getDate() - 7));
+            } else if (timeframe === "monthly") {
+                startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+            } else if (timeframe === "yearly") {
+                startDate = new Date(now.getFullYear(), 0, 1);
+            }
+
+            const {
+                data
+            } = await useAsyncData("productChart", () => {
+                return $directus.request(
+                    $readItems("products", {
+                        sort: ["-sales"],
+                        limit: 100,
+                        filter: {
+                            created_on: {
+                                _gte: startDate.toISOString(),
+                            },
+                        },
+                    })
+                );
+            });
+
+            // Process the data and calculate fields
+            const processedData = data.value.map((product) => ({
+                ...product,
+                trend: calculateTrend(product.currentSales, product.previousSales),
+                weeksOnChart: calculateWeeksOnChart(product.firstAppearance),
+            }));
+
+            // Update top products and categories
+            topProducts.value = processedData;
+            categories.value = [...new Set(processedData.map((p) => p.category))];
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+        }
+    };
+
+    // Watch for tab changes to update data
+    watch(tab, (newValue) => {
+        fetchChartData(newValue);
+    });
+
+    // Filter and sort products
+    const sortedAndFilteredProducts = computed(() => {
+        let filtered = [...topProducts.value];
+
+        if (filterOptions.value.category) {
+            filtered = filtered.filter(
+                (product) => product.category === filterOptions.value.category
+            );
+        }
+
+        return filtered.sort((a, b) => {
+            const aValue = a[sortOptions.value.field];
+            const bValue = b[sortOptions.value.field];
+
+            return sortOptions.value.order === 'asc' ?
+                aValue - bValue :
+                bValue - aValue;
+        });
+    });
+
+    watch(tab, (newValue) => {
+        fetchChartData(newValue);
+    });
+
+    // Set page title
+    useHead({
+        title: computed(() => chart.value?.name || 'Chart Page'),
+    });
+</script>
+
+<style scoped>
+    /* Keep existing styles */
+
+    /* Add animation styles */
+    .product-row {
+        transition: all 0.3s ease-in-out;
+    }
+
+    .position-changed {
+        animation: highlightRow 1s ease-in-out;
+    }
+
+    @keyframes highlightRow {
+        0% {
+            background-color: rgba(var(--v-theme-primary), 0.1);
+        }
+
+        100% {
+            background-color: transparent;
+        }
+    }
+
+    .position-change-enter-active,
+    .position-change-leave-active {
+        transition: all 0.3s ease;
+    }
+
+    .position-change-enter-from,
+    .position-change-leave-to {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    /* Add smooth transitions for sorting */
+    .v-table tbody tr {
+        transition: transform 0.3s ease;
+    }
+
+    /* Add hover effect */
+    .product-row:hover {
+        background-color: rgba(var(--v-theme-primary), 0.05);
+    }
+</style>

package/app/components/categories/chart/add-chart.vue

@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <form @submit.prevent="createActivityAndRefresh">
+            <v-card>
+                <v-card-text>
+                    <v-text-field v-model="chartData.name" id="chartName" label="Chart Name*" required />
+                    <v-textarea v-model="chartData.description" label="What's happening?*" variant="outlined"
+                        required></v-textarea>
+                    <v-row>
+                        <v-col cols="6">
+                            <v-select v-model="chartData.type" label="What type of chart is this?"
+                                :items="['Notes', 'News']" />
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="chartData.status" label="Is this chart public or private?"
+                                :items="['Public', 'Private']" />
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input @change="handleImageUpload" clearable density="compact"
+                                prepend-icon="fas fa-image" accept="image/*" label="Image" variant="solo-inverted" />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-divider class="mt-12"></v-divider>
+                <v-card-actions>
+                    <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                        Close
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click="reset = false">
+                        Reset
+                    </v-btn>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click="createNewChart">
+                        Create
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            reset() {
+                this.$refs.form.reset()
+            },
+        },
+    }
+</script>
+
+<script setup>
+    import {
+        ref
+    } from 'vue';
+    import {
+        useRoute    } from 'vue-router';
+    import uploadFiles from '#shared/app/composables/globals/uploadFiles';
+    import createChart from '@/composables/charts/createChart';
+
+    // Make sure your props are properly defined
+    // Update props to include spaces_id
+    const props = defineProps({
+        spaces_id: {
+            type: String,
+            required: true
+        }
+    });
+
+    const { user } = useSupabaseAuth()
+
+    const route = useRoute();
+
+
+    const chartData = ref({
+        name: '',
+        description: '',
+        type: '',
+        status: '',
+        image: '',
+        reactions: '',
+        color: '',
+        coverFile: null,
+        avatarFile: null,
+        creator: user?.email,
+    })
+
+    const dialog = ref(false);
+
+    const imageFile = ref(null);
+    const documentFile = ref(null);
+
+    // Emit event for parent component updates
+    const emit = defineEmits(['chart-created']);
+
+    const handleImageUpload = (event) => {
+        imageFile.value = event.target.files[0];
+    };
+
+
+    const createNewChart = async () => {
+    try {
+        // Upload files if any
+        const uploadedFiles = await uploadFiles({
+            imageFile: imageFile.value,
+            documentFile: documentFile.value,
+        });
+
+        // Update chart data with uploaded files
+        if (uploadedFiles) {
+            chartData.value.image = uploadedFiles.imageId;
+            chartData.value.media = uploadedFiles.documentId;
+        }
+
+        // Set spaces_id in chartData to link chart to the space
+        chartData.value.spaces_id = props.spaces_id;
+
+        // Create the chart with space relationship
+        const chart = await createChart(chartData.value);
+
+        console.log('Created Chart:', chart);
+
+        // Emit event to refresh parent component
+        emit('chart-created', chart);
+
+        // Close dialog and reset form
+        dialog.value = false;
+        reset();
+
+        // Optional: Redirect to the space page
+        router.push(`/departments/categories/chart/${props.spaces_id}`);
+    } catch (error) {
+        console.error('Error creating chart:', error);
+        // Add error handling here
+    }
+};
+
+    // Add watch to update spaces_id if props change
+    watch(() => props.spaces_id, (newSpaceId) => {
+        chartData.value.spaces_id = newSpaceId;
+    });
+</script>

package/app/components/categories/chart/chart.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="contentPage">
+        <v-toolbar :style="`background-color: ${chart?.color}`" :title="chart?.name"></v-toolbar>
+        <v-table class="charttable">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th class="text-left">
+                        This Week
+                    </th>
+                    <th class="text-left">Name</th>
+                    <th class="text-left">
+                        Award
+                    </th>
+                    <th class="text-left">
+                        Last Week
+                    </th>
+                    <th class="text-left">
+                        Peak Position
+                    </th>
+                    <th class="text-left">
+                        Weeks on Chart
+                    </th>
+                    <th class="text-left">
+                        Buy
+                    </th>
+                    <th class="text-left"><share /></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(products, index) in chart?.products?.products_id" :key="index">
+                    <td class="chartnumber">
+                        <h1>{{ chart?.thisWeek }}</h1>
+                    </td>
+                    <td>
+                        <v-avatar :image="products?.image?.filename_disk" rounded="0" size="130"></v-avatar>
+                    </td>
+                    <td>
+                        <v-list>
+                            <v-list-item>
+                                <v-list-item-title>{{ products?.name }}</v-list-item-title>
+                                <div v-for="product in products?.product_types?.product_types_id" :key="product">
+                                  <v-list-item-subtitle>{{ product?.name }}</v-list-item-subtitle>  
+                                </div>
+                            </v-list-item>
+                        </v-list>
+                    </td>
+                    <td>
+                        <v-avatar icon="fas fa-star" :style="`color: ${chart?.award}`"></v-avatar>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.last_week }}</h5>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.peak_position }}</h5>
+                    </td>
+                    <td>
+                        <h5>{{ chart?.weeks_on_chart }}</h5>
+                    </td>
+                    <td>
+                        <v-btn href="" icon="fas fa-shopping-cart"></v-btn>
+                    </td>
+                </tr>
+            </tbody>
+        </v-table>
+        <relatedchart />
+        <relatedproducts /><!---->
+        <recentlyviewed /><!---->
+    </div>
+</template>
+
+<script setup>
+    import share from '#social/app/components/blocks/share.vue'
+    import relatedchart from '../../related/relatedcharts.vue'
+    import relatedproducts from '#commerce/app/components/related/relatedproducts.vue'
+    import recentlyviewed from '#commerce/app/components/catalog/product/recentlyviewed.vue'
+
+
+useHead({
+    title: computed(() => chart?.value?.name || 'Chart Page')
+  });
+</script>

package/app/components/categories/chart/monthlyChart.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-table fixed-header>
+        <thead>
+            <tr>
+                <th class="text-left">Position</th>
+                <th class="text-left">Product</th>
+                <th class="text-left">Sales</th>
+                <th class="text-left">Last Week</th>
+                <th class="text-left">Peak Position</th>
+                <th class="text-left">Weeks on Chart</th>
+                <th class="text-left">Trend</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(product, index) in data" :key="product.id">
+                <td>{{ index + 1 }}</td>
+                <td>
+                    <div class="d-flex align-center">
+                        <v-img :src="product.image" width="50" height="50" class="mr-3" />
+                        <div>
+                            <div class="font-weight-bold">{{ product.name }}</div>
+                            <div class="text-caption">{{ product.category }}</div>
+                        </div>
+                    </div>
+                </td>
+                <td>{{ product.sales }}</td>
+                <td>
+                    <v-chip :color="getPositionColor(product.lastWeek, index + 1)" size="small">
+                        {{ product.lastWeek }}
+                    </v-chip>
+                </td>
+                <td>{{ product.peakPosition }}</td>
+                <td>{{ product.weeksOnChart }}</td>
+                <td>
+                    <v-icon :color="getTrendColor(product.trend)">{{ getTrendIcon(product.trend) }}</v-icon>
+                </td>
+            </tr>
+        </tbody>
+    </v-table>
+</template>
+
+<script setup>
+    defineProps({
+        data: Array, // Accepts the chart data
+    });
+</script>

package/app/components/categories/chart/musicchart.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <v-card color="#1F7087" :href="`/departments/categories/chart/${chart?.id}`">
+            <div class="d-flex flex-no-wrap justify-space-between">
+                <div>
+                    <v-card-title class="text-h5">
+                        {{ chart?.name }}
+                    </v-card-title>
+
+                    <v-card-subtitle>{{ chart?.description }}</v-card-subtitle>
+
+                    <v-card-actions>
+                        <v-btn class="ms-2" size="small" text="VISIT" variant="outlined"></v-btn>
+                    </v-card-actions>
+                </div>
+
+                <v-avatar class="ma-3" rounded="0" size="125">
+                    <v-img :src="`${$directus.url}assets/${chart?.image?.filename_disk}`"></v-img>
+                </v-avatar>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        chart: {
+            type: Object,
+            required: true,
+        },
+    });
+    const {
+        chart
+    } = props;
+</script>