Set new version

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.2.0 (2024-12-09)
+
+**Implemented New Features and Enhancements**
+
+-   Refactored dashboard sections to components
+-   Migrate sass from @import to @use
+
+## 4.1.0 (2024-07-29)
+
+-   Changed menu button location at topbar
+-   Add border to overlay menu
+-   Animation for mobile mask
+-   Fixed chart colors
+
+## 4.0.0 (2024-07-29)
+
+-   Updated to PrimeVue v4
+
 ## 3.10.0 (2024-03-11)
 
 **Migration Guide**

README.md

@@ -1,29 +1,3 @@
-This template should help get you started developing with Vue 3 in Vite.
+Sakai is an application template for Vue based on the [create-vue](https://github.com/vuejs/create-vue), the recommended way to start a Vite-powered Vue projects.
 
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
+Visit the [documentation](https://sakai.primevue.org/documentation) to get started.

package-lock.json

@@ -1,22 +1,22 @@
 {
     "name": "sakai-vue",
-    "version": "4.0.0",
+    "version": "4.2.0-SNAPSHOT",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "sakai-vue",
-            "version": "4.0.0",
+            "version": "4.2.0-SNAPSHOT",
             "dependencies": {
-                "@primevue/themes": "^4.0.0",
+                "@primevue/themes": "^4.2.4",
                 "chart.js": "3.3.2",
-                "primeicons": "^6.0.1",
-                "primevue": "^4.0.0",
+                "primeicons": "^7.0.0",
+                "primevue": "^4.2.4",
                 "vue": "^3.4.34",
                 "vue-router": "^4.4.0"
             },
             "devDependencies": {
-                "@primevue/auto-import-resolver": "^4.0.1",
+                "@primevue/auto-import-resolver": "^4.2.4",
                 "@rushstack/eslint-patch": "^1.8.0",
                 "@vitejs/plugin-vue": "^5.0.5",
                 "@vue/eslint-config-prettier": "^9.0.0",
@@ -672,78 +672,78 @@
             }
         },
         "node_modules/@primeuix/styled": {
-            "version": "0.0.5",
-            "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
-            "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz",
+            "integrity": "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==",
             "dependencies": {
-                "@primeuix/utils": "^0.0.5"
+                "@primeuix/utils": "^0.3.2"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primeuix/utils": {
-            "version": "0.0.5",
-            "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
-            "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz",
+            "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==",
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/auto-import-resolver": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.3.tgz",
-            "integrity": "sha512-zwWEeIwgIJcDbW1lz6YIn8du6BY9Q3mSnBRZUYLNWVw3fqlO78vKbOLD3brY8PNVvZMRxT7zWH0c+WtGK8bUtA==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.2.4.tgz",
+            "integrity": "sha512-BTxznfDarR+l6Ef33SH8trfZMUrnz6juG4GBE980rXWzE6t+dydr44Uj1b1+xEBQaNjsEuC3qDbhx9nsU8Jf8w==",
             "dev": true,
             "dependencies": {
-                "@primevue/metadata": "4.0.3"
+                "@primevue/metadata": "4.2.4"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/core": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.3.tgz",
-            "integrity": "sha512-pKdXsYHRMtJfw1tjPJ2u3bC+QLUDIftdHgR7DRfZ4ZV0/9qOGpFZIBYTv3Px+NGQnV+qAyp3Yeh/pS9UO83wHQ==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.2.4.tgz",
+            "integrity": "sha512-QFvPcGSvyIhZPLdnjJnYrwbDtwbA1/FyGLI7VYDgYv4twsgtLw0kgKDyWB1uwM0xdJhv8CCmu7hfxcsPaLuIFg==",
             "dependencies": {
-                "@primeuix/styled": "^0.0.5",
-                "@primeuix/utils": "^0.0.5"
+                "@primeuix/styled": "^0.3.2",
+                "@primeuix/utils": "^0.3.2"
             },
             "engines": {
                 "node": ">=12.11.0"
             },
             "peerDependencies": {
-                "vue": "^3.0.0"
+                "vue": "^3.3.0"
             }
         },
         "node_modules/@primevue/icons": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.3.tgz",
-            "integrity": "sha512-eamWkgXhAt/3nC0HJLYmkpXf6DP9QDQ/ecaqT9onNlHXHXL+QDd25OG/wKHPKB94jh3AO/9rD1aMW+YtXtkKbQ==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.2.4.tgz",
+            "integrity": "sha512-vteUFM7qvWiDJWxhBbDRgc2VY6kQQyJ91yOukqfWHy4gAgfTz1jiUXMAzc7j269oh4CNFpTNhCe9riS7402HGg==",
             "dependencies": {
-                "@primeuix/utils": "^0.0.5",
-                "@primevue/core": "4.0.3"
+                "@primeuix/utils": "^0.3.2",
+                "@primevue/core": "4.2.4"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/metadata": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.3.tgz",
-            "integrity": "sha512-xL3BlD9Nx5gCCQAHyK2BMujUm34FmBlODuFyevWzEX/lkhzWs7jLVQ5lUpoaiXm+jcdgzq7K0QDA8OxCVITucA==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.2.4.tgz",
+            "integrity": "sha512-kClj0ZMe82aonNfEDp4MnlyOL+BhSbkSgagN5RNQc4RmgWaj9M7BoDEd1SBlKgpyKHCxh3btdcVjDwG/6qN1TQ==",
             "dev": true,
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/themes": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.3.tgz",
-            "integrity": "sha512-5Mcb8UES2wg9WtvuK/lKW61xZpkbmRGdxKBh3LfEsxx8pwRmFtRD8XCXUPzaxUv9lwVEW3F/AQ0oAyBbnXptoQ==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.2.4.tgz",
+            "integrity": "sha512-nVM8/8qoV+lxSTK2k6Q19xyjrBlOjrgPzoA9OneKhlMYucBjWhSf3dBQaB9JgXRXAEwV5bzh4KPfcrMqn53QJA==",
             "dependencies": {
-                "@primeuix/styled": "^0.0.5"
+                "@primeuix/styled": "^0.3.2"
             },
             "engines": {
                 "node": ">=12.11.0"
@@ -2893,19 +2893,19 @@
             }
         },
         "node_modules/primeicons": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
-            "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+            "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
         },
         "node_modules/primevue": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.3.tgz",
-            "integrity": "sha512-f/41JMb7pMP++zKuiymXYmDMk/4oFRlJKXQzgrAy5Q3esU29hS59MBaP2CsHdPoJasQSzVAgOT+36S4/WXLajg==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.2.4.tgz",
+            "integrity": "sha512-aMQymoO489isReSF/bScypswOnLBU29qkeTulGj3Wntb9plvzTIWjA4+iyDOsyxGmV5GVIvD+DuTw5FNCDWgSw==",
             "dependencies": {
-                "@primeuix/styled": "^0.0.5",
-                "@primeuix/utils": "^0.0.5",
-                "@primevue/core": "4.0.3",
-                "@primevue/icons": "4.0.3"
+                "@primeuix/styled": "^0.3.2",
+                "@primeuix/utils": "^0.3.2",
+                "@primevue/core": "4.2.4",
+                "@primevue/icons": "4.2.4"
             },
             "engines": {
                 "node": ">=12.11.0"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sakai-vue",
-    "version": "4.0.0",
+    "version": "4.2.0",
     "scripts": {
         "dev": "vite",
         "build": "vite build",
@@ -8,15 +8,15 @@
         "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
     "dependencies": {
-        "@primevue/themes": "^4.0.0",
+        "@primevue/themes": "^4.2.4",
         "chart.js": "3.3.2",
-        "primeicons": "^6.0.1",
-        "primevue": "^4.0.0",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.2.4",
         "vue": "^3.4.34",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {
-        "@primevue/auto-import-resolver": "^4.0.1",
+        "@primevue/auto-import-resolver": "^4.2.4",
         "@rushstack/eslint-patch": "^1.8.0",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-prettier": "^9.0.0",

public/demo/images/product/product-placeholder.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Artboard</title>
-    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" fill="#F8F9FA" x="0" y="0" width="300" height="200"></rect>
-        <g id="image" transform="translate(110.000000, 70.000000)" fill="#BABABC" fill-rule="nonzero">
-            <path d="M75,0 L5,0 C2.23857625,0 0,2.23857625 0,5 L0,55 C0,57.7614237 2.23857625,60 5,60 L75,60 C77.7614237,60 80,57.7614237 80,55 L80,5 C80,2.23857625 77.7614237,0 75,0 Z M20,10 C25.5228475,10 30,14.4771525 30,20 C30,25.5228475 25.5228475,30 20,30 C14.4771525,30 10,25.5228475 10,20 C10,14.4771525 14.4771525,10 20,10 Z M70,40 L70,50 L10,50 L10,40 L18.55,35.7 C19.4648753,35.2524957 20.5351247,35.2524957 21.45,35.7 L30,40 L53.65,21.1 C54.4866298,20.4991452 55.6133702,20.4991452 56.45,21.1 L70,30 L70,40 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>

src/assets/demo/demo.scss

@@ -1,2 +1,2 @@
+@use './code.scss';
 @import './flags/flags.css';
-@import './code.scss';

src/assets/layout/_menu.scss

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 .layout-sidebar {
     position: fixed;
     width: 20rem;

src/assets/layout/_responsive.scss

@@ -22,6 +22,10 @@
                 height: 100vh;
                 border-top-left-radius: 0;
                 border-bottom-left-radius: 0;
+                border-right: 1px solid var(--surface-border);
+                transition:
+                    transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                    left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
                 box-shadow:
                     0px 3px 5px rgba(0, 0, 0, 0.02),
                     0px 0px 2px rgba(0, 0, 0, 0.05),
@@ -77,6 +81,9 @@
             height: 100vh;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
+            transition:
+                transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
         }
 
         .layout-mask {
@@ -97,7 +104,6 @@
 
             .layout-mask {
                 display: block;
-                animation: fadein var(--layout-section-transition-duration);
             }
         }
     }

src/assets/layout/_topbar.scss

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 .layout-topbar {
     position: fixed;
     height: 4rem;
@@ -71,7 +73,7 @@
     }
 
     .layout-menu-button {
-        margin-left: 2rem;
+        margin-right: 0.5rem;
     }
 
     .layout-topbar-menu-button {
@@ -97,24 +99,19 @@
 
 @media (max-width: 991px) {
     .layout-topbar {
+        padding: 0 2rem;
+
         .layout-topbar-logo-container {
             width: auto;
-            order: 2;
         }
 
         .layout-menu-button {
             margin-left: 0;
-            margin-right: 1rem;
-            order: 1;
+            margin-right: 0.5rem;
         }
 
         .layout-topbar-menu-button {
             display: inline-flex;
-            order: 4;
-        }
-
-        .layout-topbar-actions {
-            order: 3;
         }
 
         .layout-topbar-menu {

src/assets/layout/layout.scss

@@ -1,13 +1,13 @@
-@import './variables/_common';
-@import './variables/_light';
-@import './variables/_dark';
-@import './_mixins';
-@import './_preloading';
-@import './_core';
-@import './_main';
-@import './_topbar';
-@import './_menu';
-@import './_footer';
-@import './_responsive';
-@import './_utils';
-@import './_typography';
+@use './variables/_common';
+@use './variables/_light';
+@use './variables/_dark';
+@use './_mixins';
+@use './_preloading';
+@use './_core';
+@use './_main';
+@use './_topbar';
+@use './_menu';
+@use './_footer';
+@use './_responsive';
+@use './_utils';
+@use './_typography';

src/assets/styles.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '@/assets/layout/layout.scss';
-@import 'primeicons/primeicons.css';
-@import '@/assets/demo/demo.scss';
+@use '@/assets/layout/layout.scss';
+@use 'primeicons/primeicons.css';
+@use '@/assets/demo/demo.scss';
 

src/components/FloatingConfigurator.vue

@@ -7,7 +7,7 @@ const { toggleDarkMode, isDarkTheme } = useLayout();
 
 <template>
     <div class="fixed flex gap-4 top-8 right-8">
-        <Button type="button" @click="toggleDarkMode" rounded :icon="{ 'pi pi-moon': isDarkTheme, 'pi pi-sun': !isDarkTheme }" severity="secondary" />
+        <Button type="button" @click="toggleDarkMode" rounded :icon="isDarkTheme ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
         <div class="relative">
             <Button
                 icon="pi pi-palette"

src/components/dashboard/BestSellingWidget.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref(null);
+
+const items = ref([
+    { label: 'Add New', icon: 'pi pi-fw pi-plus' },
+    { label: 'Remove', icon: 'pi pi-fw pi-trash' }
+]);
+</script>
+
+<template>
+    <div class="card">
+        <div class="flex justify-between items-center mb-6">
+            <div class="font-semibold text-xl">Best Selling Products</div>
+            <div>
+                <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu.toggle($event)"></Button>
+                <Menu ref="menu" popup :model="items" class="!min-w-40"></Menu>
+            </div>
+        </div>
+        <ul class="list-none p-0 m-0">
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
+                    <div class="mt-1 text-muted-color">Clothing</div>
+                </div>
+                <div class="mt-2 md:mt-0 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-orange-500 h-full" style="width: 50%"></div>
+                    </div>
+                    <span class="text-orange-500 ml-4 font-medium">%50</span>
+                </div>
+            </li>
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
+                    <div class="mt-1 text-muted-color">Accessories</div>
+                </div>
+                <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-cyan-500 h-full" style="width: 16%"></div>
+                    </div>
+                    <span class="text-cyan-500 ml-4 font-medium">%16</span>
+                </div>
+            </li>
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
+                    <div class="mt-1 text-muted-color">Accessories</div>
+                </div>
+                <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-pink-500 h-full" style="width: 67%"></div>
+                    </div>
+                    <span class="text-pink-500 ml-4 font-medium">%67</span>
+                </div>
+            </li>
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
+                    <div class="mt-1 text-muted-color">Office</div>
+                </div>
+                <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-green-500 h-full" style="width: 35%"></div>
+                    </div>
+                    <span class="text-primary ml-4 font-medium">%35</span>
+                </div>
+            </li>
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
+                    <div class="mt-1 text-muted-color">Accessories</div>
+                </div>
+                <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-purple-500 h-full" style="width: 75%"></div>
+                    </div>
+                    <span class="text-purple-500 ml-4 font-medium">%75</span>
+                </div>
+            </li>
+            <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+                <div>
+                    <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
+                    <div class="mt-1 text-muted-color">Clothing</div>
+                </div>
+                <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
+                    <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
+                        <div class="bg-teal-500 h-full" style="width: 40%"></div>
+                    </div>
+                    <span class="text-teal-500 ml-4 font-medium">%40</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>

src/components/dashboard/NotificationsWidget.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref(null);
+
+const items = ref([
+    { label: 'Add New', icon: 'pi pi-fw pi-plus' },
+    { label: 'Remove', icon: 'pi pi-fw pi-trash' }
+]);
+</script>
+
+<template>
+    <div class="card">
+        <div class="flex items-center justify-between mb-6">
+            <div class="font-semibold text-xl">Notifications</div>
+            <div>
+                <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu.toggle($event)"></Button>
+                <Menu ref="menu" popup :model="items" class="!min-w-40"></Menu>
+            </div>
+        </div>
+
+        <span class="block text-muted-color font-medium mb-4">TODAY</span>
+        <ul class="p-0 mx-0 mt-0 mb-6 list-none">
+            <li class="flex items-center py-2 border-b border-surface">
+                <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                </div>
+                <span class="text-surface-900 dark:text-surface-0 leading-normal"
+                    >Richard Jones
+                    <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
+                </span>
+            </li>
+            <li class="flex items-center py-2">
+                <div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-download !text-xl text-orange-500"></i>
+                </div>
+                <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
+            </li>
+        </ul>
+
+        <span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
+        <ul class="p-0 m-0 list-none mb-6">
+            <li class="flex items-center py-2 border-b border-surface">
+                <div class="w-12 h-12 flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                </div>
+                <span class="text-surface-900 dark:text-surface-0 leading-normal"
+                    >Keyser Wick
+                    <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
+                </span>
+            </li>
+            <li class="flex items-center py-2 border-b border-surface">
+                <div class="w-12 h-12 flex items-center justify-center bg-pink-100 dark:bg-pink-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-question !text-xl text-pink-500"></i>
+                </div>
+                <span class="text-surface-900 dark:text-surface-0 leading-normal"
+                    >Jane Davis
+                    <span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
+                </span>
+            </li>
+        </ul>
+        <span class="block text-muted-color font-medium mb-4">LAST WEEK</span>
+        <ul class="p-0 m-0 list-none">
+            <li class="flex items-center py-2 border-b border-surface">
+                <div class="w-12 h-12 flex items-center justify-center bg-green-100 dark:bg-green-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-arrow-up !text-xl text-green-500"></i>
+                </div>
+                <span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
+            </li>
+            <li class="flex items-center py-2 border-b border-surface">
+                <div class="w-12 h-12 flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-full mr-4 shrink-0">
+                    <i class="pi pi-heart !text-xl text-purple-500"></i>
+                </div>
+                <span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
+            </li>
+        </ul>
+    </div>
+</template>

src/components/dashboard/RecentSalesWidget.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ProductService } from '@/service/ProductService';
+import { onMounted, ref } from 'vue';
+
+const products = ref(null);
+
+function formatCurrency(value) {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+}
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+</script>
+
+<template>
+    <div class="card">
+        <div class="font-semibold text-xl mb-4">Recent Sales</div>
+        <DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
+            <Column style="width: 15%" header="Image">
+                <template #body="slotProps">
+                    <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" width="50" class="shadow" />
+                </template>
+            </Column>
+            <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
+            <Column field="price" header="Price" :sortable="true" style="width: 35%">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column style="width: 15%" header="View">
+                <template #body>
+                    <Button icon="pi pi-search" type="button" class="p-button-text"></Button>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>

src/components/dashboard/RevenueStreamWidget.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { useLayout } from '@/layout/composables/layout';
+import { onMounted, ref, watch } from 'vue';
+
+const { getPrimary, getSurface, isDarkTheme } = useLayout();
+
+const chartData = ref(null);
+const chartOptions = ref(null);
+
+function setChartData() {
+    const documentStyle = getComputedStyle(document.documentElement);
+
+    return {
+        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+        datasets: [
+            {
+                type: 'bar',
+                label: 'Subscriptions',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
+                data: [4000, 10000, 15000, 4000],
+                barThickness: 32
+            },
+            {
+                type: 'bar',
+                label: 'Advertising',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
+                data: [2100, 8400, 2400, 7500],
+                barThickness: 32
+            },
+            {
+                type: 'bar',
+                label: 'Affiliate',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                data: [4100, 5200, 3400, 7400],
+                borderRadius: {
+                    topLeft: 8,
+                    topRight: 8
+                },
+                borderSkipped: true,
+                barThickness: 32
+            }
+        ]
+    };
+}
+
+function setChartOptions() {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const borderColor = documentStyle.getPropertyValue('--surface-border');
+    const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
+
+    return {
+        maintainAspectRatio: false,
+        aspectRatio: 0.8,
+        scales: {
+            x: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
+                },
+                grid: {
+                    color: 'transparent',
+                    borderColor: 'transparent'
+                }
+            },
+            y: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
+                },
+                grid: {
+                    color: borderColor,
+                    borderColor: 'transparent',
+                    drawTicks: false
+                }
+            }
+        }
+    };
+}
+
+watch([getPrimary, getSurface, isDarkTheme], () => {
+    chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
+});
+
+onMounted(() => {
+    chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
+});
+</script>
+
+<template>
+    <div class="card">
+        <div class="font-semibold text-xl mb-4">Revenue Stream</div>
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
+    </div>
+</template>

src/components/dashboard/StatsWidget.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="col-span-12 lg:col-span-6 xl:col-span-3">
+        <div class="card mb-0">
+            <div class="flex justify-between mb-4">
+                <div>
+                    <span class="block text-muted-color font-medium mb-4">Orders</span>
+                    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
+                </div>
+                <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
+                    <i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
+                </div>
+            </div>
+            <span class="text-primary font-medium">24 new </span>
+            <span class="text-muted-color">since last visit</span>
+        </div>
+    </div>
+    <div class="col-span-12 lg:col-span-6 xl:col-span-3">
+        <div class="card mb-0">
+            <div class="flex justify-between mb-4">
+                <div>
+                    <span class="block text-muted-color font-medium mb-4">Revenue</span>
+                    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
+                </div>
+                <div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
+                    <i class="pi pi-dollar text-orange-500 !text-xl"></i>
+                </div>
+            </div>
+            <span class="text-primary font-medium">%52+ </span>
+            <span class="text-muted-color">since last week</span>
+        </div>
+    </div>
+    <div class="col-span-12 lg:col-span-6 xl:col-span-3">
+        <div class="card mb-0">
+            <div class="flex justify-between mb-4">
+                <div>
+                    <span class="block text-muted-color font-medium mb-4">Customers</span>
+                    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
+                </div>
+                <div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
+                    <i class="pi pi-users text-cyan-500 !text-xl"></i>
+                </div>
+            </div>
+            <span class="text-primary font-medium">520 </span>
+            <span class="text-muted-color">newly registered</span>
+        </div>
+    </div>
+    <div class="col-span-12 lg:col-span-6 xl:col-span-3">
+        <div class="card mb-0">
+            <div class="flex justify-between mb-4">
+                <div>
+                    <span class="block text-muted-color font-medium mb-4">Comments</span>
+                    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
+                </div>
+                <div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
+                    <i class="pi pi-comment text-purple-500 !text-xl"></i>
+                </div>
+            </div>
+            <span class="text-primary font-medium">85 </span>
+            <span class="text-muted-color">responded</span>
+        </div>
+    </div>
+</template>