usher-manage-stack/resources/views/dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    台灣尤塞氏症暨視聽弱協會｜工作桌面
                </h2>
                <p class="text-sm text-gray-500 mt-1">會員服務、財務簽核、文件與公告都在這裡。</p>
            </div>
            <div class="hidden sm:flex items-center gap-3">
                <a href="{{ route('member.dashboard') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200">
                    我的會籍/繳費
                </a>
                @can('create_finance_documents')
                <a href="{{ route('admin.finance.create') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200">
                    建立財務申請
                </a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-10">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <!-- Primary cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100 p-5">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="text-sm font-semibold text-gray-700">會員狀態</div>
                            <p class="mt-1 text-sm text-gray-500">查看會籍期限、繳費紀錄、下載收據</p>
                        </div>
                        <span class="text-2xl">🎫</span>
                    </div>
                    <div class="mt-4 flex gap-3">
                        <a href="{{ route('member.dashboard') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700">
                            前往會員專區
                        </a>
                        <a href="{{ route('member.payments.create') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">
                            自助繳費
                        </a>
                    </div>
                </div>

                @if(Auth::user()->can('create_finance_documents') || Auth::user()->can('view_finance_documents'))
                <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100 p-5">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="text-sm font-semibold text-gray-700">財務申請/審核</div>
                            <p class="mt-1 text-sm text-gray-500">申請、審核、付款、對帳全流程</p>
                        </div>
                        <span class="text-2xl">💼</span>
                    </div>
                    <div class="mt-4 flex gap-3">
                        @can('create_finance_documents')
                        <a href="{{ route('admin.finance.create') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-emerald-600 text-white hover:bg-emerald-700">
                            新增申請
                        </a>
                        @endcan
                        @can('view_finance_documents')
                        <a href="{{ route('admin.finance.index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">
                            查看案件列表
                        </a>
                        @endcan
                    </div>
                </div>
                @endif

                @if(Auth::user()->hasRole(['admin', 'membership_manager']) || Auth::user()->can('view_audit_logs'))
                <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100 p-5">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="text-sm font-semibold text-gray-700">管理/維運</div>
                            <p class="mt-1 text-sm text-gray-500">會員匯入、角色權限、審計與問題追蹤</p>
                        </div>
                            <span class="text-2xl">🛡️</span>
                    </div>
                    <div class="mt-4 flex gap-3 flex-wrap">
                        @hasrole('admin|membership_manager')
                        <a href="{{ route('admin.members.index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">
                            會員管理
                        </a>
                        @endhasrole
                        @role('admin')
                        <a href="{{ route('admin.roles.index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">
                            角色與權限
                        </a>
                        <a href="{{ route('admin.audit.index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">
                            審計日誌
                        </a>
                        @endrole
                    </div>
                </div>
                @endif
            </div>

            <!-- To-do by role (all roles see the buckets) -->
            @if(Auth::user()->hasRole(['admin', 'finance_cashier', 'payment_cashier', 'finance_accountant', 'payment_accountant', 'finance_chair', 'payment_chair']) || Auth::user()->can('create_finance_documents'))
            <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100 p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">待辦總覽</h3>
                        <p class="text-sm text-gray-500">依職責挑選你需要處理的事項。</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    @can('create_finance_documents')
                    <div class="p-4 rounded-lg border border-gray-100 bg-slate-50">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-semibold text-gray-800">申請人 / 會員</h4><span>📝</span>
                        </div>
                        <ul class="mt-3 space-y-2 text-sm text-gray-700">
                            <li><a class="hover:text-blue-600" href="{{ route('admin.finance.create') }}">建立財務申請</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.finance.index') }}">查看我的申請進度</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('member.dashboard') }}">查看會籍與繳費紀錄</a></li>
                        </ul>
                    </div>
                    @endcan
                    @hasrole('finance_cashier|payment_cashier|admin')
                    <div class="p-4 rounded-lg border border-gray-100 bg-slate-50">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-semibold text-gray-800">出納</h4><span>💰</span>
                        </div>
                        <ul class="mt-3 space-y-2 text-sm text-gray-700">
                            <li><a class="hover:text-blue-600" href="{{ route('admin.finance.index') }}">待出納審核的申請</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.payment-orders.index') }}">待覆核/執行的付款單</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.cashier-ledger.index') }}">填寫現金簿/匯出報表</a></li>
                        </ul>
                    </div>
                    @endhasrole
                    @hasrole('finance_accountant|payment_accountant|admin')
                    <div class="p-4 rounded-lg border border-gray-100 bg-slate-50">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-semibold text-gray-800">會計</h4><span>📊</span>
                        </div>
                        <ul class="mt-3 space-y-2 text-sm text-gray-700">
                            <li><a class="hover:text-blue-600" href="{{ route('admin.finance.index') }}">待會計審核的申請</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.payment-orders.index') }}">製作/更新付款單</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.transactions.index') }}">建立交易分錄</a></li>
                        </ul>
                    </div>
                    @endhasrole
                    @hasrole('finance_chair|payment_chair|admin')
                    <div class="p-4 rounded-lg border border-gray-100 bg-slate-50">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-semibold text-gray-800">理事長/理事</h4><span>✅</span>
                        </div>
                        <ul class="mt-3 space-y-2 text-sm text-gray-700">
                            <li><a class="hover:text-blue-600" href="{{ route('admin.finance.index') }}">待核准的中額/大額申請</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.bank-reconciliations.index') }}">待核准的銀行調節表</a></li>
                            <li><a class="hover:text-blue-600" href="{{ route('admin.roles.index') }}">角色/權限檢視</a></li>
                        </ul>
                    </div>
                    @endhasrole
                </div>
            </div>
            @endif

            <!-- Issues / Documents -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100 p-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">問題追蹤</h3>
                        <a href="{{ route('admin.issues.create') }}" class="text-sm text-blue-600 hover:text-blue-700">建立問題</a>
                    </div>
                    <p class="mt-2 text-sm text-gray-600">回報系統/流程問題，追蹤討論、附件與狀態。</p>
                    <div class="mt-3 flex gap-3 text-sm">
                        <a href="{{ route('admin.issues.index') }}" class="inline-flex items-center px-3 py-2 rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">查看全部</a>
                        <a href="{{ route('admin.issue-reports.index') }}" class="inline-flex items-center px-3 py-2 rounded-md border border-gray-200 text-gray-700 hover:bg-gray-50">統計報表</a>
                    </div>
                </div>

                @if($recentDocuments->isNotEmpty())
                    <div class="bg-white shadow-sm sm:rounded-lg border border-gray-100">
                        <div class="px-6 py-5 border-b border-gray-200 flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">最新文件/公告</h3>
                                <p class="text-sm text-gray-500">協會文件、公告與外部發佈。</p>
                            </div>
                            <a href="{{ route('documents.index') }}" class="text-sm text-blue-600 hover:text-blue-700">查看全部 →</a>
                        </div>
                        <div class="divide-y divide-gray-200">
                            @foreach($recentDocuments as $document)
                                <div class="px-6 py-4 hover:bg-gray-50 transition">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 text-3xl mr-4">
                                            {{ $document->currentVersion?->getFileIcon() ?? '📄' }}
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <h4 class="text-sm font-medium text-gray-900">
                                                <a href="{{ route('documents.public.show', $document->public_uuid) }}" class="hover:text-blue-600">
                                                    {{ $document->title }}
                                                </a>
                                            </h4>
                                            @if($document->description)
                                                <p class="mt-1 text-sm text-gray-500 line-clamp-1">{{ $document->description }}</p>
                                            @endif
                                            <div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
                                                <span>{{ $document->category->icon }} {{ $document->category->name }}</span>
                                                <span>📅 {{ $document->created_at->format('Y-m-d') }}</span>
                                                <span>📏 {{ $document->currentVersion?->getFileSizeHuman() }}</span>
                                            </div>
                                        </div>
                                        <div class="ml-4 flex-shrink-0">
                                            <a href="{{ route('documents.public.download', $document->public_uuid) }}"
                                                class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-xs font-medium text-gray-700 bg-white hover:bg-gray-50">
                                                下載
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>