Images and Some demos fixed

src/views/pages/Crud.vue

@@ -56,7 +56,7 @@
                     <Column header="Image" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Image</span>
-                            <img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                            <img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -92,7 +92,7 @@
                 </DataTable>
 
                 <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                    <img :src="'images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
+                    <img :src="'/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
                     <div class="field">
                         <label for="name">Name</label>
                         <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
@@ -187,122 +187,131 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { FilterMatchMode } from 'primevue/api';
-import ProductService from '../service/ProductService';
+import { ref, onMounted, onBeforeMount } from 'vue';
+import ProductService from '@/layout/service/ProductService';
+import { useToast } from 'primevue/usetoast';
 
-export default {
-    data() {
-        return {
-            products: null,
-            productDialog: false,
-            deleteProductDialog: false,
-            deleteProductsDialog: false,
-            product: {},
-            selectedProducts: null,
-            filters: {},
-            submitted: false,
-            statuses: [
-                { label: 'INSTOCK', value: 'instock' },
-                { label: 'LOWSTOCK', value: 'lowstock' },
-                { label: 'OUTOFSTOCK', value: 'outofstock' }
-            ]
-        };
-    },
-    productService: null,
-    created() {
-        this.productService = new ProductService();
-        this.initFilters();
-    },
-    mounted() {
-        this.productService.getProducts().then((data) => (this.products = data));
-    },
-    methods: {
-        formatCurrency(value) {
-            if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-            return;
-        },
-        openNew() {
-            this.product = {};
-            this.submitted = false;
-            this.productDialog = true;
-        },
-        hideDialog() {
-            this.productDialog = false;
-            this.submitted = false;
-        },
-        saveProduct() {
-            this.submitted = true;
-            if (this.product.name.trim()) {
-                if (this.product.id) {
-                    this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
-                    this.products[this.findIndexById(this.product.id)] = this.product;
-                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
-                } else {
-                    this.product.id = this.createId();
-                    this.product.code = this.createId();
-                    this.product.image = 'product-placeholder.svg';
-                    this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
-                    this.products.push(this.product);
-                    this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
-                }
-                this.productDialog = false;
-                this.product = {};
-            }
-        },
-        editProduct(product) {
-            this.product = { ...product };
-            this.productDialog = true;
-        },
-        confirmDeleteProduct(product) {
-            this.product = product;
-            this.deleteProductDialog = true;
-        },
-        deleteProduct() {
-            this.products = this.products.filter((val) => val.id !== this.product.id);
-            this.deleteProductDialog = false;
-            this.product = {};
-            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
-        },
-        findIndexById(id) {
-            let index = -1;
-            for (let i = 0; i < this.products.length; i++) {
-                if (this.products[i].id === id) {
-                    index = i;
-                    break;
-                }
-            }
-            return index;
-        },
-        createId() {
-            let id = '';
-            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-            for (var i = 0; i < 5; i++) {
-                id += chars.charAt(Math.floor(Math.random() * chars.length));
-            }
-            return id;
-        },
-        exportCSV() {
-            this.$refs.dt.exportCSV();
-        },
-        confirmDeleteSelected() {
-            this.deleteProductsDialog = true;
-        },
-        deleteSelectedProducts() {
-            this.products = this.products.filter((val) => !this.selectedProducts.includes(val));
-            this.deleteProductsDialog = false;
-            this.selectedProducts = null;
-            this.$toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
-        },
-        initFilters() {
-            this.filters = {
-                global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-            };
+const toast = useToast();
+
+const products = ref(null);
+const productDialog = ref(false);
+const deleteProductDialog = ref(false);
+const deleteProductsDialog = ref(false);
+const product = ref({});
+const selectedProducts = ref(null);
+const dt = ref(null);
+const filters = ref({});
+const submitted = ref(false);
+const statuses = ref([
+    { label: 'INSTOCK', value: 'instock' },
+    { label: 'LOWSTOCK', value: 'lowstock' },
+    { label: 'OUTOFSTOCK', value: 'outofstock' }
+]);
+
+const productService = new ProductService();
+
+onBeforeMount(() => {
+    initFilters();
+});
+onMounted(() => {
+    productService.getProducts().then((data) => (products.value = data));
+});
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const openNew = () => {
+    product.value = {};
+    submitted.value = false;
+    productDialog.value = true;
+};
+
+const hideDialog = () => {
+    productDialog.value = false;
+    submitted.value = false;
+};
+
+const saveProduct = () => {
+    submitted.value = true;
+    if (product.value.name.trim()) {
+        if (product.value.id) {
+            product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
+            product.value[findIndexById(product.value.id)] = product.value;
+            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+        } else {
+            product.value.id = createId();
+            product.value.code = createId();
+            product.value.image = 'product-placeholder.svg';
+            product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
+            products.value.push(product);
+            toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+        }
+        productDialog.value = false;
+        product.value = {};
+    }
+};
+
+const editProduct = (editProduct) => {
+    product.value = { ...editProduct };
+    console.log(product);
+    productDialog.value = true;
+};
+
+const confirmDeleteProduct = (editProduct) => {
+    product.value = editProduct;
+    deleteProductDialog.value = true;
+};
+
+const deleteProduct = () => {
+    products.value = products.value.filter((val) => val.id !== product.value.id);
+    deleteProductDialog.value = false;
+    product.value = {};
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+};
+
+const findIndexById = (id) => {
+    let index = -1;
+    for (let i = 0; i < products.value.length; i++) {
+        if (products.value[i].id === id) {
+            index = i;
+            break;
         }
     }
+    return index;
+};
+
+const createId = () => {
+    let id = '';
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 5; i++) {
+        id += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return id;
+};
+
+const exportCSV = () => {
+    dt.value.exportCSV();
+};
+
+const confirmDeleteSelected = () => {
+    deleteProductsDialog.value = true;
+};
+const deleteSelectedProducts = () => {
+    products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
+    deleteProductsDialog.value = false;
+    selectedProducts.value = null;
+    toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+};
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+    };
 };
 </script>
 
 <style scoped lang="scss">
-@import '../assets/demo/badges.scss';
+@import '@/assets/demo/styles/badges.scss';
 </style>

src/views/pages/Landing.vue

@@ -41,7 +41,7 @@
                 <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
                 <Button label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
             </div>
-            <img src="layout/images/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
+            <img src="@/assets/demo/images/landing/screen-1.png" class="bottom-0" alt="hero screen" style="right: 10%" />
         </div>
 
         <div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8" id="features">
@@ -166,7 +166,7 @@
                         <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width: 800px">
                             “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
                         </p>
-                        <img src="layout/images/peak-logo.svg" class="mt-4" alt="" />
+                        <img src="@/assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="" />
                     </div>
                 </div>
             </div>
@@ -180,7 +180,7 @@
 
             <div class="grid mt-8 pb-2 md:pb-8">
                 <div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius: 8px">
-                    <img src="layout/images/mockup.png" class="w-11" alt="mockup mobile" />
+                    <img src="@/assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
                 </div>
 
                 <div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end lg:text-right align-items-center text-center">
@@ -206,7 +206,7 @@
                 </div>
 
                 <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius: 8px">
-                    <img src="layout/images/mockup-desktop.png" class="w-11 pt-4" alt="mockup" />
+                    <img src="@/assets/demo/images/landing/mockup-desktop.svg" class="w-11 pt-4" alt="mockup" />
                 </div>
             </div>
         </div>
@@ -221,7 +221,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Free</h3>
-                        <img src="layout/images/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$0</span>
                             <span class="text-600">per month</span>
@@ -252,7 +252,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Startup</h3>
-                        <img src="layout/images/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$1</span>
                             <span class="text-600">per month</span>
@@ -283,7 +283,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Enterprice</h3>
-                        <img src="layout/images/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$999</span>
                             <span class="text-600">per month</span>
@@ -317,7 +317,7 @@
             <div class="grid justify-content-between">
                 <div class="col-12 md:col-2" style="margin-top: -1.5rem">
                     <div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
-                        <img :src="'layout/images/logo-' + logoColor + '.svg'" alt="footer sections" width="50" height="50" class="mr-2" />
+                        <img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
                         <h4 class="font-medium text-3xl text-900">SAKAI</h4>
                     </div>
                 </div>
@@ -343,7 +343,7 @@
                         <div class="col-12 md:col-3 mt-4 md:mt-0">
                             <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
                             <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
-                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="layout/images/new-badge.svg" class="ml-2" /></a>
+                            <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="@/assets/demo/images/landing/new-badge.svg" class="ml-2" /></a>
                             <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
                             <a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
                         </div>

src/views/pages/NotFound.vue

@@ -2,7 +2,7 @@
     <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
         <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
             <div class="col-12 mt-5 xl:mt-0 text-center">
-                <img src="layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
+                <img src="@/assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
             </div>
             <div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
                 <div class="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">

src/views/pages/Timeline.vue

@@ -1,45 +1,100 @@
 <template>
     <div class="grid">
-        <div class="col-12">
+        <div class="col-6">
             <div class="card">
-                <h4>Timeline</h4>
-
-                <h5>Custom Timeline</h5>
-                <Timeline :value="customEvents" align="alternate" class="customized-timeline">
-                    <template #marker="slotProps">
-                        <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
-                            <i :class="slotProps.item.icon"></i>
-                        </span>
-                    </template>
+                <h5>Left Align</h5>
+                <Timeline :value="customEvents">
                     <template #content="slotProps">
-                        <Card>
-                            <template #title>
-                                {{ slotProps.item.status }}
-                            </template>
-                            <template #subtitle>
-                                {{ slotProps.item.date }}
-                            </template>
-                            <template #content>
-                                <img v-if="slotProps.item.image" :src="'images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
-                                <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
-                                    cupiditate neque quas!
-                                </p>
-                                <Button label="Read more" class="p-button-text"></Button>
-                            </template>
-                        </Card>
+                        {{ slotProps.item.status }}
                     </template>
                 </Timeline>
-
-                <h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
-                <Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
-                    <template #content="slotProps">
-                        {{ slotProps.item }}
-                    </template>
-                    <template #opposite> &nbsp; </template>
-                </Timeline>
             </div>
         </div>
+        <div class="col-6">
+            <div class="card">
+                <h5>Right Align</h5>
+                <Timeline :value="customEvents" align="right">
+                    <template #content="slotProps">
+                        {{ slotProps.item.status }}
+                    </template>
+                </Timeline>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="card">
+                <h5>Alternate Align</h5>
+                <Timeline :value="customEvents" align="alternate">
+                    <template #content="slotProps">
+                        {{ slotProps.item.status }}
+                    </template>
+                </Timeline>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="card">
+                <h5>Opposite Content</h5>
+                <Timeline :value="customEvents">
+                    <template #opposite="slotProps">
+                        <small class="p-text-secondary">{{ slotProps.item.date }}</small>
+                    </template>
+                    <template #content="slotProps">
+                        {{ slotProps.item.status }}
+                    </template>
+                </Timeline>
+            </div>
+        </div>
+    </div>
+    <div class="card">
+        <h5>Custom Timeline</h5>
+        <Timeline :value="customEvents" align="alternate" class="customized-timeline">
+            <template #marker="slotProps">
+                <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }">
+                    <i :class="slotProps.item.icon"></i>
+                </span>
+            </template>
+            <template #content="slotProps">
+                <Card>
+                    <template #title>
+                        {{ slotProps.item.status }}
+                    </template>
+                    <template #subtitle>
+                        {{ slotProps.item.date }}
+                    </template>
+                    <template #content>
+                        <img v-if="slotProps.item.image" :src="'/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                            neque quas!
+                        </p>
+                        <Button label="Read more" class="p-button-text"></Button>
+                    </template>
+                </Card>
+            </template>
+        </Timeline>
+    </div>
+    <div class="card mt-3">
+        <h5>Horizontal</h5>
+        <h6>Top Align</h6>
+        <Timeline :value="horizontalEvents" layout="horizontal" align="top">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <h6>Bottom Align</h6>
+        <Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
+
+        <h6>Alternate Align</h6>
+        <Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
+            <template #opposite> &nbsp; </template>
+            <template #content="slotProps">
+                {{ slotProps.item }}
+            </template>
+        </Timeline>
     </div>
 </template>
 

src/views/pages/auth/Access.vue

@@ -2,7 +2,7 @@
     <div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
         <div class="grid justify-content-center p-2 lg:p-0" style="min-width: 80%">
             <div class="col-12 mt-5 xl:mt-0 text-center">
-                <img src="layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
+                <img src="@/assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width: 81px; height: 60px" />
             </div>
             <div class="col-12 xl:col-6" style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
                 <div class="h-full w-full m-0 py-7 px-4" style="border-radius: 53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0))">
@@ -12,7 +12,7 @@
                         </div>
                         <h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
                         <span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
-                        <img src="layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
+                        <img src="@/assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%" />
                         <div class="col-12 mt-5 text-center">
                             <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
                             <router-link to="/" class="text-blue-500">Go to Dashboard</router-link>