Set new version

Update CHANGELOG.md
Layout composable changes
2024-12-09 10:49:37 +03:00 · 2024-12-09 10:49:27 +03:00 · 2024-12-06 16:04:53 +03:00 · 2024-12-05 13:28:00 +03:00 · 2024-12-05 13:26:47 +03:00 · 2024-12-05 13:16:36 +03:00
125 changed files with 1048 additions and 1015 deletions
@@ -1,5 +1,12 @@
 # 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
@@ -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.
@@ -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"
@@ -1,6 +1,6 @@
 {
    "name": "sakai-vue",
-    "version": "4.1.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",
@@ -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>
@@ -1,2 +1,2 @@
+@use './code.scss';
@import './flags/flags.css';
-@import './code.scss';
@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 .layout-sidebar {
    position: fixed;
    width: 20rem;
@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 .layout-topbar {
    position: fixed;
    height: 4rem;
@@ -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';
@@ -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';

@@ -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"
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,132 @@
+<template>
+    <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
+        <div class="grid grid-cols-12 gap-4 justify-center">
+            <div class="col-span-12 text-center mt-20 mb-6">
+                <div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Marvelous Features</div>
+                <span class="text-muted-color text-2xl">Placerat in egestas erat...</span>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-users !text-2xl text-yellow-700"></i>
+                        </div>
+                        <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
+                        <span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-palette !text-2xl text-cyan-700"></i>
+                        </div>
+                        <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
+                        <span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-map !text-2xl text-indigo-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Well Documented</div>
+                        <span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-id-card !text-2xl text-slate-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Responsive Layout</div>
+                        <span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-star !text-2xl text-orange-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Clean Code</div>
+                        <span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-moon !text-2xl text-pink-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Dark Mode</div>
+                        <span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-shopping-cart !text-2xl text-teal-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Ready to Use</div>
+                        <span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-globe !text-2xl text-blue-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Modern Practices</div>
+                        <span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0">
+                <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
+                    <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
+                        <div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-eye !text-2xl text-purple-700"></i>
+                        </div>
+                        <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Privacy</div>
+                        <span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                class="col-span-12 mt-20 mb-20 p-2 md:p-20"
+                style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)"
+            >
+                <div class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
+                    <div class="text-gray-900 mb-2 text-3xl font-semibold">Joséphine Miller</div>
+                    <span class="text-gray-600 text-2xl">Peak Interactive</span>
+                    <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6" 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="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tugcekucukoglu	aad48fca63	Set new version	2024-12-09 10:49:37 +03:00
tugcekucukoglu	59f3ebffe7	Update CHANGELOG.md	2024-12-09 10:49:27 +03:00
tugcekucukoglu	6fd2e4d96e	Layout composable changes	2024-12-06 16:04:53 +03:00
tugcekucukoglu	1c65a74541	Update CHANGELOG.md	2024-12-05 13:28:00 +03:00
tugcekucukoglu	a5aafc1d34	Laanding re-implementation	2024-12-05 13:26:47 +03:00
tugcekucukoglu	0f42b3760d	Dashboard re-implementation	2024-12-05 13:16:36 +03:00
tugcekucukoglu	c4dec65f2a	Sass warning fixes	2024-12-05 13:04:39 +03:00
tugcekucukoglu	6f85c751de	Version updates	2024-12-05 13:04:19 +03:00
Cagatay Civici	411fecb517	Fixed warning	2024-09-02 15:59:14 +03:00
tugcekucukoglu	4c7b0c0f5d	Refactor	2024-08-05 09:27:58 +03:00
Cagatay Civici	3ba6d75db2	Update README.md	2024-08-03 11:36:25 +03:00