usher-manage-stack/resources/views/admin/budgets/show.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            預算詳情 - {{ $budget->fiscal_year }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 space-y-6">
            @if (session('status'))
                <div class="rounded-md bg-green-50 p-4 dark:bg-green-900/30 border-l-4 border-green-400" role="status" aria-live="polite">
                    <p class="text-sm text-green-800 dark:text-green-200">{{ session('status') }}</p>
                </div>
            @endif

            <!-- Budget Info -->
            <div class="bg-white shadow sm:rounded-lg dark:bg-gray-800 px-4 py-5 sm:p-6">
                <div class="sm:flex sm:items-center sm:justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $budget->name }}</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            {{ $budget->period_start->format('Y-m-d') }} ~ {{ $budget->period_end->format('Y-m-d') }}
                        </p>
                    </div>
                    <div>
                        @if($budget->status === 'active')
                            <span class="inline-flex rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-200"> 使用中</span>
                        @elseif($budget->status === 'approved')
                            <span class="inline-flex rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">已核准</span>
                        @else
                            <span class="inline-flex rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200">{{ ucfirst($budget->status) }}</span>
                        @endif
                    </div>
                </div>

                <div class="mt-6 flex gap-3">
                    @if($budget->canBeEdited())
                        <a href="{{ route('admin.budgets.edit', $budget) }}" class="btn-secondary">編輯</a>
                    @endif
                    @if($budget->isDraft())
                        <form method="POST" action="{{ route('admin.budgets.submit', $budget) }}">
                            @csrf
                            <button type="submit" class="btn-primary">提交</button>
                        </form>
                    @endif
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-4">
                <div class="bg-white shadow rounded-lg dark:bg-gray-800 p-5">
                    <dt class="text-sm text-gray-500 dark:text-gray-400">預算收入</dt>
                    <dd class="text-2xl font-bold text-gray-900 dark:text-gray-100">NT$ {{ number_format($budget->total_budgeted_income) }}</dd>
                </div>
                <div class="bg-white shadow rounded-lg dark:bg-gray-800 p-5">
                    <dt class="text-sm text-gray-500 dark:text-gray-400">預算支出</dt>
                    <dd class="text-2xl font-bold text-gray-900 dark:text-gray-100">NT$ {{ number_format($budget->total_budgeted_expense) }}</dd>
                </div>
                <div class="bg-white shadow rounded-lg dark:bg-gray-800 p-5">
                    <dt class="text-sm text-gray-500 dark:text-gray-400">實際收入</dt>
                    <dd class="text-2xl font-bold text-gray-900 dark:text-gray-100">NT$ {{ number_format($budget->total_actual_income) }}</dd>
                </div>
                <div class="bg-white shadow rounded-lg dark:bg-gray-800 p-5">
                    <dt class="text-sm text-gray-500 dark:text-gray-400">實際支出</dt>
                    <dd class="text-2xl font-bold text-gray-900 dark:text-gray-100">NT$ {{ number_format($budget->total_actual_expense) }}</dd>
                </div>
            </div>

            <!-- Income Items -->
            @if($incomeItems->count() > 0)
                <div class="bg-white shadow sm:rounded-lg dark:bg-gray-800 px-4 py-5 sm:p-6">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">收入 </h3>
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
                        <thead class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <th scope="col" class="py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">帳戶</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">預算</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">實際</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">差異</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($incomeItems as $item)
                                <tr>
                                    <td class="py-4 text-sm text-gray-900 dark:text-gray-100">{{ $item->chartOfAccount->account_name_zh }}</td>
                                    <td class="px-3 py-4 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">NT$ {{ number_format($item->budgeted_amount, 2) }}</td>
                                    <td class="px-3 py-4 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">NT$ {{ number_format($item->actual_amount, 2) }}</td>
                                    <td class="px-3 py-4 text-sm text-right tabular-nums {{ $item->variance >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $item->variance >= 0 ? '+' : '' }}NT$ {{ number_format($item->variance, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            <!-- Expense Items -->
            @if($expenseItems->count() > 0)
                <div class="bg-white shadow sm:rounded-lg dark:bg-gray-800 px-4 py-5 sm:p-6">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">支出 (/�)</h3>
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
                        <thead class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <th scope="col" class="py-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">帳戶</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">預算</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">實際</th>
                                <th scope="col" class="px-3 py-3 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">使用率</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($expenseItems as $item)
                                <tr class="{{ $item->isOverBudget() ? 'bg-red-50 dark:bg-red-900/20' : '' }}">
                                    <td class="py-4 text-sm text-gray-900 dark:text-gray-100">
                                        {{ $item->chartOfAccount->account_name_zh }}
                                        @if($item->isOverBudget()) <span class="text-red-600">�</span> @endif
                                    </td>
                                    <td class="px-3 py-4 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">NT$ {{ number_format($item->budgeted_amount, 2) }}</td>
                                    <td class="px-3 py-4 text-sm text-right tabular-nums text-gray-900 dark:text-gray-100">NT$ {{ number_format($item->actual_amount, 2) }}</td>
                                    <td class="px-3 py-4 text-sm text-right {{ $item->utilization_percentage > 100 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-900 dark:text-gray-100' }}">{{ number_format($item->utilization_percentage, 1) }}%</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>