Enhance UI and Accessibility (WCAG)
- Add 'Skip to main content' links to App and Guest layouts. - Add aria-current to navigation links for active page indication. - Add aria-label to mobile menu button. - Include pending UI updates for Dashboard and Welcome pages with improved structure.
This commit is contained in:
@@ -1,65 +1,195 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
{{ __('Dashboard') }}
|
||||
</h2>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="py-10">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<!-- Welcome Message -->
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 text-gray-900">
|
||||
<h3 class="text-lg font-medium text-gray-900">歡迎回來，{{ Auth::user()->name }}！</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">這是您的個人儀表板</p>
|
||||
<!-- 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>
|
||||
|
||||
<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('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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Documents Widget -->
|
||||
@if($recentDocuments->isNotEmpty())
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="px-6 py-5 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900">最新文件</h3>
|
||||
<a href="{{ route('documents.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
|
||||
查看全部 →
|
||||
</a>
|
||||
</div>
|
||||
</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-indigo-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
|
||||
<!-- To-do by role (all roles see the buckets) -->
|
||||
<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>
|
||||
@endif
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user