feat: Enhance table filter UI by removing default date type selection, setting filter layout above content, and standardizing date/select input styles.

This commit is contained in:
Yoga Pangestu 2026-01-30 14:50:22 +07:00
parent 01fe159d52
commit ebd748fe83
5 changed files with 34 additions and 27 deletions

View File

@ -26,6 +26,7 @@
use Filament\Schemas\Components\Utilities\Get; use Filament\Schemas\Components\Utilities\Get;
use Filament\Support\Icons\Heroicon; use Filament\Support\Icons\Heroicon;
use Filament\Tables\Columns\TextColumn; use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Enums\FiltersLayout;
use Filament\Tables\Filters\Filter; use Filament\Tables\Filters\Filter;
use Filament\Tables\Filters\SelectFilter; use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\TrashedFilter; use Filament\Tables\Filters\TrashedFilter;
@ -178,12 +179,14 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date') ->live()
->live(), ->native(false),
DatePicker::make('specific_date') DatePicker::make('specific_date')
->label('Tanggal') ->label('Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'date'), ->visible(fn (Get $get) => $get('date_type') === 'date')
->native(false)
->displayFormat('l, d F Y'),
Select::make('month') Select::make('month')
->label('Bulan') ->label('Bulan')
@ -201,7 +204,8 @@ public static function configure(Table $table): Table
11 => 'November', 11 => 'November',
12 => 'Desember', 12 => 'Desember',
]) ])
->visible(fn (Get $get) => $get('date_type') === 'month'), ->visible(fn (Get $get) => $get('date_type') === 'month')
->native(false),
Select::make('year') Select::make('year')
->label('Tahun') ->label('Tahun')
@ -210,15 +214,20 @@ public static function configure(Table $table): Table
return array_combine($years, $years); return array_combine($years, $years);
}) })
->visible(fn (Get $get) => in_array($get('date_type'), ['month', 'year'])), ->visible(fn (Get $get) => in_array($get('date_type'), ['month', 'year']))
->native(false),
DatePicker::make('start_date') DatePicker::make('start_date')
->label('Mulai Tanggal') ->label('Mulai Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'range'), ->visible(fn (Get $get) => $get('date_type') === 'range')
->native(false)
->displayFormat('l, d F Y'),
DatePicker::make('end_date') DatePicker::make('end_date')
->label('Sampai Tanggal') ->label('Sampai Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'range'), ->visible(fn (Get $get) => $get('date_type') === 'range')
->native(false)
->displayFormat('l, d F Y'),
]) ])
->query(function (Builder $query, array $data): Builder { ->query(function (Builder $query, array $data): Builder {
$type = $data['date_type'] ?? null; $type = $data['date_type'] ?? null;
@ -240,7 +249,8 @@ public static function configure(Table $table): Table
return $query; return $query;
}), }),
]) ], FiltersLayout::AboveContentCollapsible)
->filtersFormColumns(3)
->recordActions([ ->recordActions([
ViewAction::make(), ViewAction::make(),

View File

@ -108,7 +108,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),

View File

@ -123,7 +123,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),

View File

@ -135,7 +135,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),

View File

@ -27,19 +27,19 @@ protected function getStats(): array
$startDate = $this->filters['startDate'] ?? null; $startDate = $this->filters['startDate'] ?? null;
$endDate = $this->filters['endDate'] ?? null; $endDate = $this->filters['endDate'] ?? null;
$totalJournalists = Journalist::when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) $totalJournalists = Journalist::when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count(); ->count();
$totalMedia = PartnerMedia::when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) $totalMedia = PartnerMedia::when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count(); ->count();
$average = $totalMedia > 0 ? round($totalJournalists / $totalMedia, 1) : 0; $average = $totalMedia > 0 ? round($totalJournalists / $totalMedia, 1) : 0;
return [ return [
Stat::make('Total Perusahaan', Company::when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) Stat::make('Total Perusahaan', Company::when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count()) ->count())
->description('Perusahaan terdaftar') ->description('Perusahaan terdaftar')
->descriptionIcon(Heroicon::BuildingOffice2) ->descriptionIcon(Heroicon::BuildingOffice2)
@ -48,38 +48,38 @@ protected function getStats(): array
Stat::make('Media Terverifikasi', PartnerMedia::whereHas('company.verificationRequest', function ($q) { Stat::make('Media Terverifikasi', PartnerMedia::whereHas('company.verificationRequest', function ($q) {
$q->approved(); $q->approved();
}) })
->when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) ->when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count()) ->count())
->description('Media aktif') ->description('Media aktif')
->descriptionIcon(Heroicon::CheckBadge) ->descriptionIcon(Heroicon::CheckBadge)
->color('success'), ->color('success'),
Stat::make('Total Jurnalis', Journalist::when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) Stat::make('Total Jurnalis', Journalist::when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count()) ->count())
->description('Jurnalis terdaftar') ->description('Jurnalis terdaftar')
->descriptionIcon(Heroicon::Identification) ->descriptionIcon(Heroicon::Identification)
->color('info'), ->color('info'),
Stat::make('Antrean Verifikasi', VerificationRequest::pending() Stat::make('Antrean Verifikasi', VerificationRequest::pending()
->when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) ->when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count()) ->count())
->description('Butuh tindakan') ->description('Butuh tindakan')
->descriptionIcon(Heroicon::PencilSquare) ->descriptionIcon(Heroicon::PencilSquare)
->color('warning'), ->color('warning'),
Stat::make('Antrean Perubahan', DataChangeRequest::pending() Stat::make('Antrean Perubahan', DataChangeRequest::pending()
->when($startDate, fn($q) => $q->whereDate('created_at', '>=', $startDate)) ->when($startDate, fn ($q) => $q->whereDate('created_at', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('created_at', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('created_at', '<=', $endDate))
->count()) ->count())
->description('Perubahan data') ->description('Perubahan data')
->descriptionIcon(Heroicon::DocumentText) ->descriptionIcon(Heroicon::DocumentText)
->color('warning'), ->color('warning'),
Stat::make('Total Pengunjung', Visitor::when($startDate, fn($q) => $q->whereDate('date', '>=', $startDate)) Stat::make('Total Pengunjung', Visitor::when($startDate, fn ($q) => $q->whereDate('date', '>=', $startDate))
->when($endDate, fn($q) => $q->whereDate('date', '<=', $endDate)) ->when($endDate, fn ($q) => $q->whereDate('date', '<=', $endDate))
->count()) ->count())
->description('Total traffic') ->description('Total traffic')
->descriptionIcon(Heroicon::ChartBar) ->descriptionIcon(Heroicon::ChartBar)