kavehhn/mbmanager-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
kavehhn
2025-04-15 12:16:17 +03:30
parent 57d328bbfe
commit 47de2bf54c
20 changed files with 1557 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/RecentSalesWidget.vue
+8 -7
View File
@@ -1,6 +1,7 @@
<script setup>
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
import { BelongingService } from '@/service/BelongingService';
const products = ref(null);
@@ -9,26 +10,26 @@ function formatCurrency(value) {
}
onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data));
BelongingService.getAllBelongings().then((data) => (products.value = data));
});
</script>
<template>
<div class="card">
<div class="font-semibold text-xl mb-4">Recent Sales</div>
<div class="font-semibold text-xl mb-4">آخرین دارایی های افزوده شده</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" />
<img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" 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%">
<Column field="name" header="نام" :sortable="true" style="width: 35%"></Column>
<Column field="price" header="دسته بندی" :sortable="true" style="width: 35%">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.price) }}
{{ slotProps.data.category.nativeName }}
</template>
</Column>
<Column style="width: 15%" header="View">
<Column style="width: 15%" header="نمایش">
<template #body>
<Button icon="pi pi-search" type="button" class="p-button-text"></Button>
</template>
src/components/dashboard/RevenueStreamWidget.vue
+23 -24
View File
@@ -11,32 +11,17 @@ function setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
labels: ['زمین', 'ساختمان', 'خودرو', 'ارز'],
datasets: [
{
type: 'bar',
label: 'Subscriptions',
label: 'تعداد دارایی ها',
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
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
},
borderSkipped: true,
data: [18, 13, 5, 11],
barThickness: 32
}
]
@@ -55,7 +40,11 @@ function setChartOptions() {
x: {
stacked: true,
ticks: {
color: textMutedColor
color: textMutedColor,
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
}
},
grid: {
color: 'transparent',
@@ -65,7 +54,11 @@ function setChartOptions() {
y: {
stacked: true,
ticks: {
color: textMutedColor
color: textMutedColor,
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
}
},
grid: {
color: borderColor,
@@ -90,7 +83,13 @@ onMounted(() => {
<template>
<div class="card">
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
<div class="font-semibold text-xl mb-4">تقسیم بندی دارایی ها</div>
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
</div>
</template>
<style>
.card {
font-family: 'Estedad', sans-serif !important;
}
</style>
src/components/dashboard/StatsWidget.vue
+6 -27
View File
@@ -3,60 +3,39 @@
<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>
<span class="block text-muted-color font-medium mb-4">تعداد دارایی ها</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">100</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>
<span class="block text-muted-color font-medium mb-4">ارز ها</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">2800 دلار</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>
<span class="block text-muted-color font-medium mb-4">تعداد کاربران</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">3 عدد</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>