Implement a comprehensive overhaul of the Filament admin dashboard, introducing a structured 12-column responsive grid layout and enhanced visual identity. Key changes include: - Redesigned Dashboard layout with a 4-layer progressive disclosure architecture (KPIs, Exchange Rates, Data Tables, and Trends). - Introduced custom IFNEX design tokens via CSS, including branded stat cards, status badges, and improved sidebar typography. - Enhanced FinanceOverviewWidget with real-time trend analysis and sparkline-ready data structures. - Refactored RecentShipments and RecentTransactions widgets to use custom Blade templates for a more polished, consistent UI. - Integrated brand assets including the company logo and custom authentication pages. - Added global number formatting helpers and integrated them into financial widgets. - Updated AdminPanelProvider to support custom login pages and brand-specific header/footer hooks.
72 lines
4.2 KiB
PHP
72 lines
4.2 KiB
PHP
{{--
|
||
IFNEX — Layer 3 (right): Recent transactions table widget.
|
||
ساختار و استایل همسان با recent-shipments (کارت + هدر آیکوندار + بجهای برند).
|
||
--}}
|
||
<x-filament-widgets::widget>
|
||
<div wire:poll.30s class="ifnex-card-shadow ifnex-card bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||
|
||
{{-- ──────── Header ──────── --}}
|
||
<div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-amber-100 dark:bg-amber-900/40 text-amber-600 dark:text-amber-400">
|
||
<x-heroicon-o-banknotes class="w-5 h-5" />
|
||
</span>
|
||
<h3 class="text-base font-bold text-gray-900 dark:text-white">آخرین تراکنشها</h3>
|
||
</div>
|
||
<a href="{{ $viewAllUrl ?? '#' }}"
|
||
class="ifnex-link-inline text-xs font-semibold text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 transition-colors">
|
||
مشاهده همه ←
|
||
</a>
|
||
</div>
|
||
|
||
{{-- ──────── Body ──────── --}}
|
||
@if($transactions->isEmpty())
|
||
<div class="p-10 text-center">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gray-100 dark:bg-gray-700/50 mb-3">
|
||
<x-heroicon-o-inbox class="w-7 h-7 text-gray-400" />
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">هنوز تراکنشی ثبت نشده است</p>
|
||
</div>
|
||
@else
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="bg-gray-50 dark:bg-gray-900/40 text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
|
||
<th class="ifnex-th text-right">کاربر</th>
|
||
<th class="ifnex-th text-right">مبلغ</th>
|
||
<th class="ifnex-th text-right">نوع</th>
|
||
<th class="ifnex-th text-right">وضعیت</th>
|
||
<th class="ifnex-th text-right">تاریخ</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-50 dark:divide-gray-700/60">
|
||
@foreach($transactions as $transaction)
|
||
<tr class="ifnex-table-row-hover transition-colors duration-150">
|
||
<td class="ifnex-td text-xs text-gray-700 dark:text-gray-300">
|
||
{{ $transaction['user'] }}
|
||
</td>
|
||
<td class="ifnex-td text-xs font-semibold {{ $transaction['amount_negative'] ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400' }}">
|
||
{{ $transaction['amount_negative'] ? '− ' : '+ ' }}{{ $transaction['amount'] }}
|
||
</td>
|
||
<td class="ifnex-td">
|
||
<span class="ifnex-badge {{ $transaction['type_color'] }}">
|
||
{{ $transaction['type_label'] }}
|
||
</span>
|
||
</td>
|
||
<td class="ifnex-td">
|
||
<span class="ifnex-badge {{ $transaction['status_color'] }}">
|
||
{{ $transaction['status_label'] }}
|
||
</span>
|
||
</td>
|
||
<td class="ifnex-td text-xs text-gray-500 dark:text-gray-400">
|
||
{{ $transaction['date'] }}
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</x-filament-widgets::widget>
|