From e90ff1abe0f3324909996653a47b6e56fb8a9f22 Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Tue, 23 Jun 2026 17:16:43 +0700 Subject: [PATCH] chore: update reka-ui dependency to version 2.10.0 and refactor Dashboard.vue for improved chart configurations and color handling --- package-lock.json | 8 +- package.json | 2 +- resources/js/pages/admin/Dashboard.vue | 248 ++++++++----------------- 3 files changed, 86 insertions(+), 172 deletions(-) diff --git a/package-lock.json b/package-lock.json index 45b5fcd..31e99ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "concurrently": "^9.0.1", "dropzone-vue": "^0.1.11", "laravel-vite-plugin": "^3.1", - "reka-ui": "^2.9.10", + "reka-ui": "^2.10.0", "tailwind-merge": "^3.6.0", "tailwindcss": "^4.1.1", "typescript": "^5.2.2", @@ -10503,9 +10503,9 @@ } }, "node_modules/reka-ui": { - "version": "2.9.10", - "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.10.tgz", - "integrity": "sha512-yuvZVTp4fWH2G3qk+ze/x6YYlyc2Xl1d+eMUlIYrKqzTowBKteoDoN17fitURmqSUck3mc7JbcYgp49DnGu2EQ==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.10.0.tgz", + "integrity": "sha512-HIUVfSBM/AyGkcUI7aiOxxMc4N+0UD2ZEun8dcrT0H4fveotEoeDdvzyZu97eeEvEa1H9oGHoOpApkfxlgnC7g==", "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.6.13", diff --git a/package.json b/package.json index d0b1d21..3263df3 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "concurrently": "^9.0.1", "dropzone-vue": "^0.1.11", "laravel-vite-plugin": "^3.1", - "reka-ui": "^2.9.10", + "reka-ui": "^2.10.0", "tailwind-merge": "^3.6.0", "tailwindcss": "^4.1.1", "typescript": "^5.2.2", diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue index ca29cba..8356b7d 100644 --- a/resources/js/pages/admin/Dashboard.vue +++ b/resources/js/pages/admin/Dashboard.vue @@ -10,30 +10,22 @@ import { TrendingUp, UserCheck, } from '@lucide/vue'; -import { VisAxis, VisDonut, VisGroupedBar, VisXYContainer } from '@unovis/vue'; +import { Donut } from '@unovis/ts'; +import { VisAxis, VisDonut, VisGroupedBar, VisSingleContainer, VisXYContainer } from '@unovis/vue'; import { computed, onMounted, onUnmounted, ref } from 'vue'; import StatCard from '@/components/card/StatCard.vue'; import { Card, CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + CardDescription, CardHeader, + CardTitle } from '@/components/ui/card'; import type { ChartConfig } from '@/components/ui/chart'; -import { - ChartContainer, - ChartCrosshair, - ChartTooltip, - ChartTooltipContent, - componentToString, -} from '@/components/ui/chart'; +import { ChartContainer } from '@/components/ui/chart'; import AdminLayout from '@/layouts/AdminLayout.vue'; import { formatRupiah } from '@/lib/rupiah'; interface DashboardProps { - // Row 1: Stat Cards attendance: { total_employees: number; percentage: number; @@ -63,7 +55,6 @@ interface DashboardProps { advance_total: number; }; - // Row 2: Top 5 Charts topSuppliers: Array<{ name: string; total_amount: number; @@ -80,7 +71,6 @@ interface DashboardProps { total_revenue: number; }>; - // Row 3: Order Stats orderStats: { by_channel: Array<{ channel: string; @@ -180,7 +170,7 @@ const productChartConfig = { }, } satisfies ChartConfig; -const channelColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)']; +const channelColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']; const channelChartConfig = computed(() => { const config: ChartConfig = {}; props.orderStats.by_channel.forEach((item, index) => { @@ -189,16 +179,10 @@ const channelChartConfig = computed(() => { color: channelColors[index % channelColors.length], }; }); - return config; }); -const paymentColors = [ - 'var(--chart-1)', - 'var(--chart-2)', - 'var(--chart-3)', - 'var(--chart-4)', -]; +const paymentColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']; const paymentChartConfig = computed(() => { const config: ChartConfig = {}; props.orderStats.by_payment_type.forEach((item, index) => { @@ -207,16 +191,10 @@ const paymentChartConfig = computed(() => { color: paymentColors[index % paymentColors.length], }; }); - return config; }); -const statusColors = [ - '#facc15', - 'var(--chart-1)', - 'var(--chart-2)', - 'var(--chart-4)', -]; +const statusColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']; const statusChartConfig = computed(() => { const config: ChartConfig = {}; props.orderStats.by_status.forEach((item, index) => { @@ -225,17 +203,10 @@ const statusChartConfig = computed(() => { color: statusColors[index % statusColors.length], }; }); - return config; }); -const marketingColors = [ - 'var(--chart-1)', - 'var(--chart-2)', - 'var(--chart-3)', - 'var(--chart-4)', - 'var(--chart-5)', -]; +const marketingColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']; const marketingChartConfig = computed(() => { const config: ChartConfig = {}; props.orderStats.by_marketing.forEach((item, index) => { @@ -244,7 +215,6 @@ const marketingChartConfig = computed(() => { color: marketingColors[index % marketingColors.length], }; }); - return config; }); @@ -387,9 +357,16 @@ const productBarData = computed(() => { - - + + + +
@@ -406,9 +383,16 @@ const productBarData = computed(() => { - - + + + +
@@ -425,33 +409,20 @@ const productBarData = computed(() => { - - - + + + - -
Belum ada data produk
- -
- Menampilkan 5 produk dengan penjualan tertinggi - -
-
@@ -462,34 +433,20 @@ const productBarData = computed(() => {
- - - - + + + +
-
- +
+ {{ item.label }} - {{ - item.count - }} + {{ item.count }}
@@ -505,35 +462,21 @@ item, index
- - - - + + + +
-
- + {{ item.label }} - {{ - item.count - }} + {{ item.count }}
@@ -549,36 +492,21 @@ item, index
- - - - + + + +
-
- +
+ {{ item.name }} - {{ - item.count - }} + {{ item.count }}
@@ -594,34 +522,20 @@ item, index
- - - - + + + +
-
- +
+ {{ item.label }} - {{ - item.count - }} + {{ item.count }}