ifnex/04_Laravel/app/Filament/Pages/Dashboard.php
Kazem Alghasi 91984dbde3 feat(ui): redesign admin dashboard with layered grid and custom branding
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.
2026-10-03 11:08:50 +03:30

84 lines
3.2 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?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;
}
}