finance_app/resources/js/Pages/Dashboard.vue

<script setup>
import { computed } from "vue"; // 必須匯入 computed
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,
);

// 建議加上預設值，防止 API 還沒回傳時崩潰
// const props = defineProps({
//     monthlyTotal: { type: Number, default: 0 },
//     categoryStats: { type: Array, default: () => [] },
//     monthlyTrend: { type: Array, default: () => [] },
// });

// --- 修改重點：使用 computed 並加上空陣列保護 ---

// 圓餅圖資料
// const pieData = computed(() => ({
//     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 = computed(() => ({
//     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>