buid new app

resources/js/Pages/Dashboard.vue

@@ -0,0 +1,122 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import { Pie, Bar } from 'vue-chartjs'
+import {
+    Chart as ChartJS,
+    ArcElement,
+    Tooltip,
+    Legend,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+} from 'chart.js'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const props = defineProps({
+    monthlyTotal:  Number,
+    categoryStats: Array,
+    monthlyTrend:  Array,
+})
+
+// 圓餅圖
+const pieData = {
+    labels:   props.categoryStats.map(c => c.name),
+    datasets: [{
+        data:            props.categoryStats.map(c => c.total),
+        backgroundColor: props.categoryStats.map(c => c.color),
+    }],
+}
+
+const pieOptions = {
+    responsive: true,
+    plugins: {
+        legend: { position: 'bottom' },
+    },
+}
+
+// 長條圖
+const barData = {
+    labels:   props.monthlyTrend.map(m => m.month),
+    datasets: [{
+        label:           '每月花費',
+        data:            props.monthlyTrend.map(m => m.total),
+        backgroundColor: '#3B82F6',
+        borderRadius:    4,
+    }],
+}
+
+const barOptions = {
+    responsive: true,
+    plugins: {
+        legend: { display: false },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            ticks: {
+                callback: (val) => '$' + val.toLocaleString(),
+            },
+        },
+    },
+}
+</script>
+
+<template>
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold">總覽</h2>
+        </template>
+
+        <div class="py-8 max-w-5xl mx-auto px-4 space-y-6">
+
+            <!-- 本月花費 -->
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div class="bg-white rounded-lg shadow p-6">
+                    <p class="text-sm text-gray-500">本月花費</p>
+                    <p class="text-3xl font-bold text-blue-500 mt-1">
+                        ${{ monthlyTotal.toLocaleString() }}
+                    </p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-6">
+                    <p class="text-sm text-gray-500">本月筆數</p>
+                    <p class="text-3xl font-bold text-gray-700 mt-1">
+                        {{ categoryStats.reduce((s, c) => s, 0) }}
+                        {{ categoryStats.length }} 個分類
+                    </p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-6">
+                    <p class="text-sm text-gray-500">最高花費分類</p>
+                    <p class="text-3xl font-bold text-gray-700 mt-1">
+                        {{ categoryStats.length > 0
+                            ? categoryStats.reduce((a, b) => a.total > b.total ? a : b).name
+                            : '—' }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- 圖表 -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+
+                <!-- 圓餅圖 -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <h3 class="text-lg font-medium mb-4">本月分類佔比</h3>
+                    <div v-if="categoryStats.length > 0" class="max-w-xs mx-auto">
+                        <Pie :data="pieData" :options="pieOptions" />
+                    </div>
+                    <div v-else class="py-12 text-center text-gray-400">
+                        本月還沒有記錄
+                    </div>
+                </div>
+
+                <!-- 長條圖 -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <h3 class="text-lg font-medium mb-4">近6個月趨勢</h3>
+                    <Bar :data="barData" :options="barOptions" />
+                </div>
+
+            </div>
+
+        </div>
+    </AuthenticatedLayout>
+</template>