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.
84 lines
3.2 KiB
PHP
84 lines
3.2 KiB
PHP
<?php
|
||
|
||
namespace App\Filament\Pages;
|
||
|
||
use App\Filament\Widgets\DashboardInfoWidget;
|
||
use App\Filament\Widgets\ExchangeRateWidget;
|
||
use App\Filament\Widgets\FinanceOverviewWidget;
|
||
use App\Filament\Widgets\RecentShipmentsWidget;
|
||
use App\Filament\Widgets\RecentTransactionsWidget;
|
||
use App\Filament\Widgets\TransactionChartWidget;
|
||
use Filament\Pages\Dashboard as BaseDashboard;
|
||
|
||
/**
|
||
* IFNEX Admin Dashboard — layered layout (12-column grid)
|
||
*
|
||
* Layer 1 (header): FinanceOverviewWidget (10/12) + DashboardInfoWidget (2/12)
|
||
* → 4 KPI cards + small clock/welcome card in the corner
|
||
* Layer 2: ExchangeRateWidget (12/12) → 4 rate cards in a comfortable row
|
||
* Layer 3: RecentShipmentsWidget (6/12) + RecentTransactionsWidget (6/12)
|
||
* → two tables with identical style/size
|
||
* Layer 4 (bottom): TransactionChartWidget (12/12) → 7-day trend, full width
|
||
*
|
||
* Smart Grid: 12-column responsive grid. Each widget uses an array-based
|
||
* columnSpan so mobile stacks everything full-width; desktop shows the
|
||
* layered progressive-disclosure design.
|
||
*
|
||
* ⚠️ نام متد ستونها در فیلامنت getColumns() است نه getWidgetsColumns() —
|
||
* با نام اشتباه، گرید روی پیشفرض ۲ ستون میماند و spanهای ۴/۶/۸ گرید را میشکنند.
|
||
* این صفحه باید تنها Dashboard ثبتشده پنل باشد؛ ثبت صریح Filament\Pages\Dashboard
|
||
* در AdminPanelProvider باعث میشود داشبورد پایه (با کل استخر ویجتها) بر این override غلبه کند.
|
||
*/
|
||
class Dashboard extends BaseDashboard
|
||
{
|
||
protected static ?string $navigationLabel = 'داشبورد';
|
||
protected static ?string $slug = 'dashboard';
|
||
protected static ?string $title = 'داشبورد مالی';
|
||
protected static ?string $navigationIcon = 'heroicon-o-home';
|
||
|
||
/**
|
||
* Layer 1 — Top row: 4 KPI cards + small clock/welcome corner card.
|
||
*/
|
||
public function getHeaderWidgets(): array
|
||
{
|
||
return [
|
||
FinanceOverviewWidget::class,
|
||
DashboardInfoWidget::class,
|
||
];
|
||
}
|
||
|
||
/**
|
||
* Layers 2–4 — rate row, two tables, then the full-width trend chart at the bottom.
|
||
* ترتیب نمایش با sort هر ویجت تعیین میشود: نرخ(3) ← جدولها(6,7) ← چارت(8).
|
||
*/
|
||
public function getWidgets(): array
|
||
{
|
||
return [
|
||
// Layer 2: exchange rates (12/12)
|
||
ExchangeRateWidget::class,
|
||
|
||
// Layer 3: recent shipments (6/12) + recent transactions (6/12)
|
||
RecentShipmentsWidget::class,
|
||
RecentTransactionsWidget::class,
|
||
|
||
// Layer 4: 7-day revenue trend (12/12) — full width, bottom of the page
|
||
TransactionChartWidget::class,
|
||
];
|
||
}
|
||
|
||
/**
|
||
* Main widgets grid: 12 columns on desktop, 1 on mobile so each
|
||
* widget stacks full-width. Each widget sets its own responsive
|
||
* columnSpan; the grid just exposes the columns.
|
||
*/
|
||
public function getColumns(): int | string | array
|
||
{
|
||
return 12;
|
||
}
|
||
|
||
public function getHeaderWidgetsColumns(): int | string | array
|
||
{
|
||
return 12;
|
||
}
|
||
}
|