fuck chatgpt, rat bastard has no idea
This commit is contained in:
parent
ba0b5cdf5c
commit
7a4ab82c12
34
console/.gitignore
vendored
Normal file
34
console/.gitignore
vendored
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# Build
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
73
console/README.md
Normal file
73
console/README.md
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
# PrimeVue Vite Example
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div align="start">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This example demonstrates a basic PrimeVue integration with Vite, showcasing a modern and responsive dashboard interface. The project features various PrimeVue components with standard CSS styling.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- PrimeVue components with CSS styling
|
||||||
|
- Powered by Vite for fast development
|
||||||
|
- Real-time search functionality
|
||||||
|
- Customizable UI components
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- [Vue.js](https://vuejs.org/) - The Progressive JavaScript Framework
|
||||||
|
- [PrimeVue](https://primevue.org/) - The Ultimate Vue UI Component Library
|
||||||
|
- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/primefaces/primevue-examples.git
|
||||||
|
cd primevue-examples/vite-quickstart
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Start the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Build for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
vite-quickstart/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/ # Vue components
|
||||||
|
│ ├── assets/ # Static assets
|
||||||
|
│ │ └── styles/ # CSS styles
|
||||||
|
│ └── App.vue # Root component
|
||||||
|
├── public/ # Public static assets
|
||||||
|
├── index.html # Entry HTML file
|
||||||
|
└── vite.config.js # Vite configuration
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/primefaces/primevue-examples/issues).
|
||||||
13
console/index.html
Normal file
13
console/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1869
console/package-lock.json
generated
Normal file
1869
console/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
console/package.json
Normal file
24
console/package.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "primevue-vite-quickstart",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/themes": "^1.0.0",
|
||||||
|
"@primevue/core": "^4.2.5",
|
||||||
|
"chart.js": "^4.4.7",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primevue": "^4.2.5",
|
||||||
|
"vue": "^3.4.27"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@primevue/auto-import-resolver": "^4.3.1",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
"unplugin-vue-components": "^28.4.0",
|
||||||
|
"vite": "^5.2.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
console/public/favicon.ico
Normal file
BIN
console/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
23
console/src/App.vue
Normal file
23
console/src/App.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<script setup>
|
||||||
|
import AppTopbar from "./components/AppTopbar.vue";
|
||||||
|
import AppFooter from "./components/AppFooter.vue";
|
||||||
|
import StatsWidget from "./components/dashboard/StatsWidget.vue";
|
||||||
|
import SalesTrendWidget from "./components/dashboard/SalesTrendWidget.vue";
|
||||||
|
import RecentActivityWidget from "./components/dashboard/RecentActivityWidget.vue";
|
||||||
|
import ProductOverviewWidget from "./components/dashboard/ProductOverviewWidget.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layout-container">
|
||||||
|
<AppTopbar />
|
||||||
|
<div class="layout-grid">
|
||||||
|
<StatsWidget />
|
||||||
|
<div class="layout-grid-row">
|
||||||
|
<SalesTrendWidget />
|
||||||
|
<RecentActivityWidget />
|
||||||
|
</div>
|
||||||
|
<ProductOverviewWidget />
|
||||||
|
</div>
|
||||||
|
<AppFooter />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
BIN
console/src/assets/favicon.ico
Normal file
BIN
console/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
596
console/src/assets/styles/main.css
Normal file
596
console/src/assets/styles/main.css
Normal file
@ -0,0 +1,596 @@
|
|||||||
|
@import "primeicons/primeicons.css";
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-variation-settings: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--p-surface-50);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark body {
|
||||||
|
background-color: var(--p-surface-950);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-container {
|
||||||
|
background-color: var(--p-surface-50);
|
||||||
|
color: var(--p-surface-950);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .layout-container {
|
||||||
|
background-color: var(--p-surface-950);
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1400px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-grid-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-card {
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
color: var(--p-surface-950);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .layout-card {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
gap: 1.714rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon-box {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: var(--p-primary-100);
|
||||||
|
color: var(--p-primary-600);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid var(--p-primary-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .stats-icon-box {
|
||||||
|
background-color: color-mix(in srgb, var(--p-primary-400), transparent 80%);
|
||||||
|
border-color: color-mix(in srgb, var(--p-primary-400), transparent 70%);
|
||||||
|
color: var(--p-primary-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .stats-title {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-value {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .stats-value {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-subtitle {
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .stats-subtitle {
|
||||||
|
color: var(--p-surface-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-item-2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.chart-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .chart-title {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
.activity-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--p-surface-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .activity-item {
|
||||||
|
background-color: var(--p-surface-800);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon {
|
||||||
|
font-size: 1.125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.green {
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.blue {
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.yellow {
|
||||||
|
color: #eab308;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.pink {
|
||||||
|
color: #ec4899;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-time {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .activity-time {
|
||||||
|
color: var(--p-surface-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.products-header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-header .search-field {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .products-title {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-table-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .products-table-container {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-table {
|
||||||
|
width: 100%;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .products-table {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-table-mask {
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
background-color: color-mix(in srgb, var(--p-surface-0), transparent 80%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .products-table-mask {
|
||||||
|
background-color: color-mix(in srgb, var(--p-surface-900), transparent 80%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-table-loading {
|
||||||
|
color: var(--p-primary-500) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-search {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .products-search {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.products-search {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.products-search {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.stats {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.layout-grid-row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.col-item-2 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.stats {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .topbar {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-brand {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-brand-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.topbar-brand-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--p-surface-700);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .topbar-title {
|
||||||
|
color: var(--p-surface-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-subtitle {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--p-primary-500);
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-theme-button {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 9999px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
color: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .topbar-theme-button {
|
||||||
|
color: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-theme-button:hover {
|
||||||
|
background-color: var(--p-surface-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .topbar-theme-button:hover {
|
||||||
|
background-color: var(--p-surface-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-primary {
|
||||||
|
fill: var(--p-primary-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .fill-primary {
|
||||||
|
fill: var(--p-primary-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-surface {
|
||||||
|
fill: var(--p-surface-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .fill-surface {
|
||||||
|
fill: var(--p-surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 4rem;
|
||||||
|
right: 0;
|
||||||
|
width: 16rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
transform-origin: top;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .config-panel {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .config-label {
|
||||||
|
color: var(--p-surface-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-colors {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-button {
|
||||||
|
border: none;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
--ring-offset-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
|
||||||
|
--ring-shadow: 0 0 0 calc(var(--ring-width) + var(--ring-offset-width)) var(--ring-color);
|
||||||
|
--ring-width: 2px;
|
||||||
|
--ring-offset-width: 2px;
|
||||||
|
--ring-color: var(--p-primary-500);
|
||||||
|
--ring-offset-color: #ffffff;
|
||||||
|
box-shadow: var(--ring-offset-shadow), var(--ring-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: var(--p-surface-0);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border: 1px solid var(--p-surface-200);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .footer {
|
||||||
|
background-color: var(--p-surface-900);
|
||||||
|
border-color: var(--p-surface-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.footer-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-copyright {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .footer-copyright {
|
||||||
|
color: var(--p-surface-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark .footer-link {
|
||||||
|
color: var(--p-surface-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link:hover {
|
||||||
|
color: var(--p-primary-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-icon {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fadeout {
|
||||||
|
animation: fadeout 0.15s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-scalein {
|
||||||
|
animation: scalein 0.15s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeout {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scalein {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scaleY(0.8);
|
||||||
|
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scaleY(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
49
console/src/components/AppConfig.vue
Normal file
49
console/src/components/AppConfig.vue
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useLayout } from "../composables/useLayout";
|
||||||
|
|
||||||
|
const { primaryColors, surfaces, primary, surface, isDarkMode, updateColors } = useLayout();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="config-panel hidden">
|
||||||
|
<div class="config-section">
|
||||||
|
<div>
|
||||||
|
<span class="config-label">Primary</span>
|
||||||
|
<div class="config-colors">
|
||||||
|
<button
|
||||||
|
v-for="pc of primaryColors"
|
||||||
|
:key="pc.name"
|
||||||
|
type="button"
|
||||||
|
:title="pc.name"
|
||||||
|
:class="['color-button', { selected: primary === pc.name }]"
|
||||||
|
:style="{ backgroundColor: pc.palette['500'] }"
|
||||||
|
@click="updateColors('primary', pc.name)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="config-label">Surface</span>
|
||||||
|
<div class="config-colors">
|
||||||
|
<button
|
||||||
|
v-for="s of surfaces"
|
||||||
|
:key="s.name"
|
||||||
|
type="button"
|
||||||
|
:title="s.name"
|
||||||
|
:class="[
|
||||||
|
'color-button',
|
||||||
|
{
|
||||||
|
selected: surface
|
||||||
|
? surface === s.name
|
||||||
|
: isDarkMode
|
||||||
|
? s.name === 'zinc'
|
||||||
|
: s.name === 'slate',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:style="{ backgroundColor: s.palette['500'] }"
|
||||||
|
@click="updateColors('surface', s.name)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
23
console/src/components/AppFooter.vue
Normal file
23
console/src/components/AppFooter.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-copyright">202X PrimeVue.</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="https://twitter.com/primevue" target="_blank" rel="noopener noreferrer" class="footer-link">
|
||||||
|
<i class="pi pi-twitter footer-icon"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://primevue.org" target="_blank" rel="noopener noreferrer" class="footer-link">
|
||||||
|
<i class="pi pi-globe footer-icon"></i>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/primefaces/primevue"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="footer-link"
|
||||||
|
>
|
||||||
|
<i class="pi pi-github footer-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
58
console/src/components/AppTopbar.vue
Normal file
58
console/src/components/AppTopbar.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useLayout } from "../composables/useLayout";
|
||||||
|
import AppConfig from "./AppConfig.vue";
|
||||||
|
|
||||||
|
const { isDarkMode, toggleDarkMode } = useLayout();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="topbar-container">
|
||||||
|
<div class="topbar-brand">
|
||||||
|
<svg
|
||||||
|
width="35"
|
||||||
|
height="40"
|
||||||
|
viewBox="0 0 35 40"
|
||||||
|
fill="none"
|
||||||
|
class="w-8"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
class="fill-primary"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
|
class="fill-surface"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="topbar-brand-text">
|
||||||
|
<span class="topbar-title">PrimeVue Examples</span>
|
||||||
|
<span class="topbar-subtitle">Vite</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="topbar-actions">
|
||||||
|
<Button type="button" class="topbar-theme-button" @click="toggleDarkMode" text rounded>
|
||||||
|
<i :class="['pi ', 'pi ', { 'pi-moon': isDarkMode, 'pi-sun': !isDarkMode }]" />
|
||||||
|
</Button>
|
||||||
|
<div class="relative">
|
||||||
|
<Button
|
||||||
|
v-styleclass="{
|
||||||
|
selector: '@next',
|
||||||
|
enterFromClass: 'hidden',
|
||||||
|
enterActiveClass: 'animate-scalein',
|
||||||
|
leaveToClass: 'hidden',
|
||||||
|
leaveActiveClass: 'animate-fadeout',
|
||||||
|
hideOnOutsideClick: true,
|
||||||
|
}"
|
||||||
|
icon="pi pi-cog"
|
||||||
|
text
|
||||||
|
rounded
|
||||||
|
aria-label="Settings"
|
||||||
|
/>
|
||||||
|
<AppConfig />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
103
console/src/components/dashboard/ProductOverviewWidget.vue
Normal file
103
console/src/components/dashboard/ProductOverviewWidget.vue
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted } from "vue";
|
||||||
|
|
||||||
|
const products = ref([
|
||||||
|
{
|
||||||
|
name: "Laptop Pro",
|
||||||
|
category: "Electronics",
|
||||||
|
price: 2499,
|
||||||
|
status: "In Stock",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Wireless Mouse",
|
||||||
|
category: "Accessories",
|
||||||
|
price: 49,
|
||||||
|
status: "Low Stock",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Monitor 4K",
|
||||||
|
category: "Electronics",
|
||||||
|
price: 699,
|
||||||
|
status: "Out of Stock",
|
||||||
|
},
|
||||||
|
{ name: "Keyboard", category: "Accessories", price: 149, status: "In Stock" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const selectedProduct = ref(null);
|
||||||
|
const searchQuery = ref("");
|
||||||
|
const loading = ref(false);
|
||||||
|
const filteredProducts = ref([]);
|
||||||
|
|
||||||
|
const searchProducts = () => {
|
||||||
|
loading.value = true;
|
||||||
|
filteredProducts.value = products.value.filter(
|
||||||
|
(product) =>
|
||||||
|
product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||||
|
product.category.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||||
|
product.status.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(searchQuery, () => {
|
||||||
|
searchProducts();
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
filteredProducts.value = [...products.value];
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layout-card">
|
||||||
|
<div class="products-header">
|
||||||
|
<span class="products-title">Products Overview</span>
|
||||||
|
<IconField class="search-field">
|
||||||
|
<InputIcon class="pi pi-search" />
|
||||||
|
<InputText
|
||||||
|
v-model="searchQuery"
|
||||||
|
placeholder="Search products..."
|
||||||
|
class="products-search"
|
||||||
|
@keyup.enter="searchProducts"
|
||||||
|
/>
|
||||||
|
</IconField>
|
||||||
|
</div>
|
||||||
|
<div class="products-table-container">
|
||||||
|
<DataTable
|
||||||
|
:value="filteredProducts"
|
||||||
|
v-model:selection="selectedProduct"
|
||||||
|
selectionMode="single"
|
||||||
|
:loading="loading"
|
||||||
|
:rows="5"
|
||||||
|
class="products-table"
|
||||||
|
:pt="{
|
||||||
|
mask: {
|
||||||
|
class: 'products-table-mask',
|
||||||
|
},
|
||||||
|
loadingIcon: {
|
||||||
|
class: 'products-table-loading',
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Column field="name" header="Name" sortable></Column>
|
||||||
|
<Column field="category" header="Category" sortable></Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="{ data }"> ${{ data.price }} </template>
|
||||||
|
</Column>
|
||||||
|
<Column field="status" header="Status">
|
||||||
|
<template #body="{ data }">
|
||||||
|
<Tag
|
||||||
|
:severity="
|
||||||
|
data.status === 'In Stock' ? 'success' : data.status === 'Low Stock' ? 'warn' : 'danger'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ data.status }}
|
||||||
|
</Tag>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
43
console/src/components/dashboard/RecentActivityWidget.vue
Normal file
43
console/src/components/dashboard/RecentActivityWidget.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<script setup>
|
||||||
|
const activities = [
|
||||||
|
{
|
||||||
|
icon: "pi-shopping-cart",
|
||||||
|
text: "New order #1123",
|
||||||
|
time: "2 minutes ago",
|
||||||
|
color: "pink",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "pi-user-plus",
|
||||||
|
text: "New customer registered",
|
||||||
|
time: "15 minutes ago",
|
||||||
|
color: "green",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "pi-check-circle",
|
||||||
|
text: "Payment processed",
|
||||||
|
time: "25 minutes ago",
|
||||||
|
color: "blue",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "pi-inbox",
|
||||||
|
text: "Inventory updated",
|
||||||
|
time: "40 minutes ago",
|
||||||
|
color: "yellow",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layout-card col-item-2">
|
||||||
|
<span class="chart-title">Recent Activity</span>
|
||||||
|
<div class="activity-list">
|
||||||
|
<div v-for="(activity, index) in activities" :key="index" class="activity-item">
|
||||||
|
<i :class="['activity-icon', activity.color, 'pi', activity.icon]"></i>
|
||||||
|
<div class="activity-content">
|
||||||
|
<span class="activity-text">{{ activity.text }}</span>
|
||||||
|
<span class="activity-time">{{ activity.time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
94
console/src/components/dashboard/SalesTrendWidget.vue
Normal file
94
console/src/components/dashboard/SalesTrendWidget.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted } from "vue";
|
||||||
|
import { useLayout } from "../../composables/useLayout";
|
||||||
|
|
||||||
|
const { primary, surface, isDarkMode } = 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,
|
||||||
|
},
|
||||||
|
barThickness: 32,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function setChartOptions() {
|
||||||
|
return {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
stacked: true,
|
||||||
|
grid: {
|
||||||
|
color: "transparent",
|
||||||
|
borderColor: "transparent",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
stacked: true,
|
||||||
|
grid: {
|
||||||
|
color: "transparent",
|
||||||
|
borderColor: "transparent",
|
||||||
|
drawTicks: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
watch([primary, surface, isDarkMode], () => {
|
||||||
|
chartData.value = setChartData();
|
||||||
|
chartOptions.value = setChartOptions();
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
chartData.value = setChartData();
|
||||||
|
chartOptions.value = setChartOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layout-card col-item-2">
|
||||||
|
<div class="chart-header">
|
||||||
|
<span class="chart-title">Sales Trend</span>
|
||||||
|
</div>
|
||||||
|
<div class="chart-content">
|
||||||
|
<Chart type="bar" :data="chartData" :options="chartOptions" style="height: 300px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
45
console/src/components/dashboard/StatsWidget.vue
Normal file
45
console/src/components/dashboard/StatsWidget.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<script setup>
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: "Total Orders",
|
||||||
|
icon: "pi-shopping-cart",
|
||||||
|
value: "1,234",
|
||||||
|
subtitle: "Last 7 days",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Active Users",
|
||||||
|
icon: "pi-users",
|
||||||
|
value: "2,573",
|
||||||
|
subtitle: "Last 7 days",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Revenue",
|
||||||
|
icon: "pi-dollar",
|
||||||
|
value: "$45,200",
|
||||||
|
subtitle: "Last 7 days",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Success Rate",
|
||||||
|
icon: "pi-chart-line",
|
||||||
|
value: "95%",
|
||||||
|
subtitle: "Last 7 days",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="stats">
|
||||||
|
<div v-for="(stat, index) in stats" :key="index" class="layout-card">
|
||||||
|
<div class="stats-header">
|
||||||
|
<span class="stats-title">{{ stat.title }}</span>
|
||||||
|
<span class="stats-icon-box">
|
||||||
|
<i :class="['pi', stat.icon]"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="stats-content">
|
||||||
|
<div class="stats-value">{{ stat.value }}</div>
|
||||||
|
<div class="stats-subtitle">{{ stat.subtitle }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
459
console/src/composables/useLayout.js
Normal file
459
console/src/composables/useLayout.js
Normal file
@ -0,0 +1,459 @@
|
|||||||
|
import { updatePrimaryPalette, updateSurfacePalette } from "@primeuix/themes";
|
||||||
|
import { computed, ref } from "vue";
|
||||||
|
|
||||||
|
const appState = ref({
|
||||||
|
primary: "emerald",
|
||||||
|
surface: null,
|
||||||
|
darkMode: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const primaryColors = ref([
|
||||||
|
{
|
||||||
|
name: "emerald",
|
||||||
|
palette: {
|
||||||
|
50: "#ecfdf5",
|
||||||
|
100: "#d1fae5",
|
||||||
|
200: "#a7f3d0",
|
||||||
|
300: "#6ee7b7",
|
||||||
|
400: "#34d399",
|
||||||
|
500: "#10b981",
|
||||||
|
600: "#059669",
|
||||||
|
700: "#047857",
|
||||||
|
800: "#065f46",
|
||||||
|
900: "#064e3b",
|
||||||
|
950: "#022c22"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "green",
|
||||||
|
palette: {
|
||||||
|
50: "#f0fdf4",
|
||||||
|
100: "#dcfce7",
|
||||||
|
200: "#bbf7d0",
|
||||||
|
300: "#86efac",
|
||||||
|
400: "#4ade80",
|
||||||
|
500: "#22c55e",
|
||||||
|
600: "#16a34a",
|
||||||
|
700: "#15803d",
|
||||||
|
800: "#166534",
|
||||||
|
900: "#14532d",
|
||||||
|
950: "#052e16"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "lime",
|
||||||
|
palette: {
|
||||||
|
50: "#f7fee7",
|
||||||
|
100: "#ecfccb",
|
||||||
|
200: "#d9f99d",
|
||||||
|
300: "#bef264",
|
||||||
|
400: "#a3e635",
|
||||||
|
500: "#84cc16",
|
||||||
|
600: "#65a30d",
|
||||||
|
700: "#4d7c0f",
|
||||||
|
800: "#3f6212",
|
||||||
|
900: "#365314",
|
||||||
|
950: "#1a2e05"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "orange",
|
||||||
|
palette: {
|
||||||
|
50: "#fff7ed",
|
||||||
|
100: "#ffedd5",
|
||||||
|
200: "#fed7aa",
|
||||||
|
300: "#fdba74",
|
||||||
|
400: "#fb923c",
|
||||||
|
500: "#f97316",
|
||||||
|
600: "#ea580c",
|
||||||
|
700: "#c2410c",
|
||||||
|
800: "#9a3412",
|
||||||
|
900: "#7c2d12",
|
||||||
|
950: "#431407"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "amber",
|
||||||
|
palette: {
|
||||||
|
50: "#fffbeb",
|
||||||
|
100: "#fef3c7",
|
||||||
|
200: "#fde68a",
|
||||||
|
300: "#fcd34d",
|
||||||
|
400: "#fbbf24",
|
||||||
|
500: "#f59e0b",
|
||||||
|
600: "#d97706",
|
||||||
|
700: "#b45309",
|
||||||
|
800: "#92400e",
|
||||||
|
900: "#78350f",
|
||||||
|
950: "#451a03"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "yellow",
|
||||||
|
palette: {
|
||||||
|
50: "#fefce8",
|
||||||
|
100: "#fef9c3",
|
||||||
|
200: "#fef08a",
|
||||||
|
300: "#fde047",
|
||||||
|
400: "#facc15",
|
||||||
|
500: "#eab308",
|
||||||
|
600: "#ca8a04",
|
||||||
|
700: "#a16207",
|
||||||
|
800: "#854d0e",
|
||||||
|
900: "#713f12",
|
||||||
|
950: "#422006"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "teal",
|
||||||
|
palette: {
|
||||||
|
50: "#f0fdfa",
|
||||||
|
100: "#ccfbf1",
|
||||||
|
200: "#99f6e4",
|
||||||
|
300: "#5eead4",
|
||||||
|
400: "#2dd4bf",
|
||||||
|
500: "#14b8a6",
|
||||||
|
600: "#0d9488",
|
||||||
|
700: "#0f766e",
|
||||||
|
800: "#115e59",
|
||||||
|
900: "#134e4a",
|
||||||
|
950: "#042f2e"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "cyan",
|
||||||
|
palette: {
|
||||||
|
50: "#ecfeff",
|
||||||
|
100: "#cffafe",
|
||||||
|
200: "#a5f3fc",
|
||||||
|
300: "#67e8f9",
|
||||||
|
400: "#22d3ee",
|
||||||
|
500: "#06b6d4",
|
||||||
|
600: "#0891b2",
|
||||||
|
700: "#0e7490",
|
||||||
|
800: "#155e75",
|
||||||
|
900: "#164e63",
|
||||||
|
950: "#083344"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "sky",
|
||||||
|
palette: {
|
||||||
|
50: "#f0f9ff",
|
||||||
|
100: "#e0f2fe",
|
||||||
|
200: "#bae6fd",
|
||||||
|
300: "#7dd3fc",
|
||||||
|
400: "#38bdf8",
|
||||||
|
500: "#0ea5e9",
|
||||||
|
600: "#0284c7",
|
||||||
|
700: "#0369a1",
|
||||||
|
800: "#075985",
|
||||||
|
900: "#0c4a6e",
|
||||||
|
950: "#082f49"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "blue",
|
||||||
|
palette: {
|
||||||
|
50: "#eff6ff",
|
||||||
|
100: "#dbeafe",
|
||||||
|
200: "#bfdbfe",
|
||||||
|
300: "#93c5fd",
|
||||||
|
400: "#60a5fa",
|
||||||
|
500: "#3b82f6",
|
||||||
|
600: "#2563eb",
|
||||||
|
700: "#1d4ed8",
|
||||||
|
800: "#1e40af",
|
||||||
|
900: "#1e3a8a",
|
||||||
|
950: "#172554"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "indigo",
|
||||||
|
palette: {
|
||||||
|
50: "#eef2ff",
|
||||||
|
100: "#e0e7ff",
|
||||||
|
200: "#c7d2fe",
|
||||||
|
300: "#a5b4fc",
|
||||||
|
400: "#818cf8",
|
||||||
|
500: "#6366f1",
|
||||||
|
600: "#4f46e5",
|
||||||
|
700: "#4338ca",
|
||||||
|
800: "#3730a3",
|
||||||
|
900: "#312e81",
|
||||||
|
950: "#1e1b4b"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "violet",
|
||||||
|
palette: {
|
||||||
|
50: "#f5f3ff",
|
||||||
|
100: "#ede9fe",
|
||||||
|
200: "#ddd6fe",
|
||||||
|
300: "#c4b5fd",
|
||||||
|
400: "#a78bfa",
|
||||||
|
500: "#8b5cf6",
|
||||||
|
600: "#7c3aed",
|
||||||
|
700: "#6d28d9",
|
||||||
|
800: "#5b21b6",
|
||||||
|
900: "#4c1d95",
|
||||||
|
950: "#2e1065"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "purple",
|
||||||
|
palette: {
|
||||||
|
50: "#faf5ff",
|
||||||
|
100: "#f3e8ff",
|
||||||
|
200: "#e9d5ff",
|
||||||
|
300: "#d8b4fe",
|
||||||
|
400: "#c084fc",
|
||||||
|
500: "#a855f7",
|
||||||
|
600: "#9333ea",
|
||||||
|
700: "#7e22ce",
|
||||||
|
800: "#6b21a8",
|
||||||
|
900: "#581c87",
|
||||||
|
950: "#3b0764"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fuchsia",
|
||||||
|
palette: {
|
||||||
|
50: "#fdf4ff",
|
||||||
|
100: "#fae8ff",
|
||||||
|
200: "#f5d0fe",
|
||||||
|
300: "#f0abfc",
|
||||||
|
400: "#e879f9",
|
||||||
|
500: "#d946ef",
|
||||||
|
600: "#c026d3",
|
||||||
|
700: "#a21caf",
|
||||||
|
800: "#86198f",
|
||||||
|
900: "#701a75",
|
||||||
|
950: "#4a044e"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pink",
|
||||||
|
palette: {
|
||||||
|
50: "#fdf2f8",
|
||||||
|
100: "#fce7f3",
|
||||||
|
200: "#fbcfe8",
|
||||||
|
300: "#f9a8d4",
|
||||||
|
400: "#f472b6",
|
||||||
|
500: "#ec4899",
|
||||||
|
600: "#db2777",
|
||||||
|
700: "#be185d",
|
||||||
|
800: "#9d174d",
|
||||||
|
900: "#831843",
|
||||||
|
950: "#500724"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "rose",
|
||||||
|
palette: {
|
||||||
|
50: "#fff1f2",
|
||||||
|
100: "#ffe4e6",
|
||||||
|
200: "#fecdd3",
|
||||||
|
300: "#fda4af",
|
||||||
|
400: "#fb7185",
|
||||||
|
500: "#f43f5e",
|
||||||
|
600: "#e11d48",
|
||||||
|
700: "#be123c",
|
||||||
|
800: "#9f1239",
|
||||||
|
900: "#881337",
|
||||||
|
950: "#4c0519"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const surfaces = ref([
|
||||||
|
{
|
||||||
|
name: "slate",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#f8fafc",
|
||||||
|
100: "#f1f5f9",
|
||||||
|
200: "#e2e8f0",
|
||||||
|
300: "#cbd5e1",
|
||||||
|
400: "#94a3b8",
|
||||||
|
500: "#64748b",
|
||||||
|
600: "#475569",
|
||||||
|
700: "#334155",
|
||||||
|
800: "#1e293b",
|
||||||
|
900: "#0f172a",
|
||||||
|
950: "#020617"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "gray",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#f9fafb",
|
||||||
|
100: "#f3f4f6",
|
||||||
|
200: "#e5e7eb",
|
||||||
|
300: "#d1d5db",
|
||||||
|
400: "#9ca3af",
|
||||||
|
500: "#6b7280",
|
||||||
|
600: "#4b5563",
|
||||||
|
700: "#374151",
|
||||||
|
800: "#1f2937",
|
||||||
|
900: "#111827",
|
||||||
|
950: "#030712"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "zinc",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#fafafa",
|
||||||
|
100: "#f4f4f5",
|
||||||
|
200: "#e4e4e7",
|
||||||
|
300: "#d4d4d8",
|
||||||
|
400: "#a1a1aa",
|
||||||
|
500: "#71717a",
|
||||||
|
600: "#52525b",
|
||||||
|
700: "#3f3f46",
|
||||||
|
800: "#27272a",
|
||||||
|
900: "#18181b",
|
||||||
|
950: "#09090b"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "neutral",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#fafafa",
|
||||||
|
100: "#f5f5f5",
|
||||||
|
200: "#e5e5e5",
|
||||||
|
300: "#d4d4d4",
|
||||||
|
400: "#a3a3a3",
|
||||||
|
500: "#737373",
|
||||||
|
600: "#525252",
|
||||||
|
700: "#404040",
|
||||||
|
800: "#262626",
|
||||||
|
900: "#171717",
|
||||||
|
950: "#0a0a0a"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "stone",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#fafaf9",
|
||||||
|
100: "#f5f5f4",
|
||||||
|
200: "#e7e5e4",
|
||||||
|
300: "#d6d3d1",
|
||||||
|
400: "#a8a29e",
|
||||||
|
500: "#78716c",
|
||||||
|
600: "#57534e",
|
||||||
|
700: "#44403c",
|
||||||
|
800: "#292524",
|
||||||
|
900: "#1c1917",
|
||||||
|
950: "#0c0a09"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "soho",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#f4f4f4",
|
||||||
|
100: "#e8e9e9",
|
||||||
|
200: "#d2d2d4",
|
||||||
|
300: "#bbbcbe",
|
||||||
|
400: "#a5a5a9",
|
||||||
|
500: "#8e8f93",
|
||||||
|
600: "#77787d",
|
||||||
|
700: "#616268",
|
||||||
|
800: "#4a4b52",
|
||||||
|
900: "#34343d",
|
||||||
|
950: "#1d1e27"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "viva",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#f3f3f3",
|
||||||
|
100: "#e7e7e8",
|
||||||
|
200: "#cfd0d0",
|
||||||
|
300: "#b7b8b9",
|
||||||
|
400: "#9fa1a1",
|
||||||
|
500: "#87898a",
|
||||||
|
600: "#6e7173",
|
||||||
|
700: "#565a5b",
|
||||||
|
800: "#3e4244",
|
||||||
|
900: "#262b2c",
|
||||||
|
950: "#0e1315"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ocean",
|
||||||
|
palette: {
|
||||||
|
0: "#ffffff",
|
||||||
|
50: "#fbfcfc",
|
||||||
|
100: "#F7F9F8",
|
||||||
|
200: "#EFF3F2",
|
||||||
|
300: "#DADEDD",
|
||||||
|
400: "#B1B7B6",
|
||||||
|
500: "#828787",
|
||||||
|
600: "#5F7274",
|
||||||
|
700: "#415B61",
|
||||||
|
800: "#29444E",
|
||||||
|
900: "#183240",
|
||||||
|
950: "#0c1920"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
export function useLayout() {
|
||||||
|
function setPrimary(value) {
|
||||||
|
appState.value.primary = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSurface(value) {
|
||||||
|
appState.value.surface = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDarkMode(value) {
|
||||||
|
appState.value.darkMode = value;
|
||||||
|
if (value) {
|
||||||
|
document.documentElement.classList.add("p-dark");
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove("p-dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDarkMode() {
|
||||||
|
appState.value.darkMode = !appState.value.darkMode;
|
||||||
|
document.documentElement.classList.toggle("p-dark");
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateColors(type, colorName) {
|
||||||
|
if (type === "primary") {
|
||||||
|
setPrimary(colorName);
|
||||||
|
const color = primaryColors.value.find((c) => c.name === colorName);
|
||||||
|
updatePrimaryPalette(color.palette);
|
||||||
|
} else if (type === "surface") {
|
||||||
|
setSurface(colorName);
|
||||||
|
const surfaceColor = surfaces.value.find((s) => s.name === colorName);
|
||||||
|
updateSurfacePalette(surfaceColor.palette);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isDarkMode = computed(() => appState.value.darkMode);
|
||||||
|
const primary = computed(() => appState.value.primary);
|
||||||
|
const surface = computed(() => appState.value.surface);
|
||||||
|
|
||||||
|
return {
|
||||||
|
primaryColors,
|
||||||
|
surfaces,
|
||||||
|
isDarkMode,
|
||||||
|
primary,
|
||||||
|
surface,
|
||||||
|
toggleDarkMode,
|
||||||
|
setDarkMode,
|
||||||
|
setPrimary,
|
||||||
|
setSurface,
|
||||||
|
updateColors
|
||||||
|
};
|
||||||
|
}
|
||||||
19
console/src/main.js
Normal file
19
console/src/main.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import "./assets/styles/main.css";
|
||||||
|
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import PrimeVue from "primevue/config";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import Aura from "@primeuix/themes/aura";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
preset: Aura,
|
||||||
|
options: {
|
||||||
|
darkModeSelector: ".p-dark",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount("#app");
|
||||||
16
console/vite.config.js
Normal file
16
console/vite.config.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
import Components from 'unplugin-vue-components/vite';
|
||||||
|
import { PrimeVueResolver } from '@primevue/auto-import-resolver';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
Components({
|
||||||
|
resolvers: [
|
||||||
|
PrimeVueResolver()
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user