293 lines
17 KiB
PHP
293 lines
17 KiB
PHP
<x-filament-panels::page>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
@foreach ($this->getFilters as $filter)
|
|
<x-filament::button wire:click="setFilter('{{ $filter['id'] }}')" @class([
|
|
'group inline-flex items-center gap-2.5 px-5 py-2.5 text-sm font-bold custom-rounded transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md',
|
|
// Active Styles
|
|
$filterStatus === $filter['id']
|
|
? match ($filter['color']) {
|
|
'primary'
|
|
=> 'bg-primary-500 text-white shadow-primary-500/30 ring-2 ring-primary-500/20',
|
|
'warning'
|
|
=> 'bg-warning-500 text-white shadow-warning-500/30 ring-2 ring-warning-500/20',
|
|
'success'
|
|
=> 'bg-success-500 text-white shadow-success-500/30 ring-2 ring-success-500/20',
|
|
'danger'
|
|
=> 'bg-danger-500 text-white shadow-danger-500/30 ring-2 ring-danger-500/20',
|
|
'info'
|
|
=> 'bg-info-500 text-white shadow-info-500/30 ring-2 ring-info-500/20',
|
|
default => 'bg-gray-500 text-white shadow-gray-500/25',
|
|
}
|
|
: 'bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700',
|
|
])>
|
|
@if ($filter['icon'])
|
|
<x-dynamic-component :component="$filter['icon']" @class([
|
|
'w-5 h-5 transition-transform duration-300 group-hover:scale-110',
|
|
$filterStatus === $filter['id']
|
|
? 'text-white'
|
|
: match ($filter['color']) {
|
|
'primary' => 'text-primary-500',
|
|
'warning' => 'text-warning-500',
|
|
'success' => 'text-success-500',
|
|
'danger' => 'text-danger-500',
|
|
'info' => 'text-info-500',
|
|
default => 'text-gray-500',
|
|
},
|
|
]) />
|
|
@endif
|
|
|
|
<span>{{ $filter['label'] }}</span>
|
|
|
|
<span @class([
|
|
'px-2.5 py-0.5 text-[10px] font-extrabold rounded-full transition-all duration-300',
|
|
$filterStatus === $filter['id']
|
|
? 'bg-white/20 text-white shadow-inner'
|
|
: match ($filter['color']) {
|
|
'primary'
|
|
=> 'bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-400',
|
|
'warning'
|
|
=> 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300',
|
|
'success'
|
|
=> 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-400',
|
|
'danger'
|
|
=> 'bg-danger-100 text-danger-700 dark:bg-danger-500/20 dark:text-danger-400',
|
|
'info'
|
|
=> 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-400',
|
|
default
|
|
=> 'bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400',
|
|
},
|
|
])>
|
|
{{ $filter['count'] ?? 0 }}
|
|
</span>
|
|
</x-filament::button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<x-filament::section>
|
|
{{-- Verification Cards Grid --}}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
@forelse ($this->verifications as $verification)
|
|
<x-filament::section class="h-full">
|
|
<x-slot name="heading">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="font-bold text-lg text-gray-900 dark:text-white truncate"
|
|
title="{{ $verification['company']['name'] }}">
|
|
{{ $verification['company']['name'] }}
|
|
</h3>
|
|
</div>
|
|
|
|
{{-- Status Badge --}}
|
|
<x-filament::badge :color="$verification['status']['color']" size="lg">
|
|
{{ $verification['status']['label'] }}
|
|
</x-filament::badge>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="space-y-4">
|
|
{{-- Submitter Info --}}
|
|
<div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 custom-rounded">
|
|
<div class="shrink-0">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-500/20 flex items-center justify-center">
|
|
<x-heroicon-s-user class="w-5 h-5 text-primary-500" />
|
|
</div>
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Diajukan
|
|
oleh
|
|
</p>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">
|
|
{{ $verification['submittedBy'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Data Summary --}}
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 dark:bg-gray-800 custom-rounded">
|
|
{{-- Company Summary --}}
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<x-heroicon-o-building-office-2 class="w-4 h-4 text-primary-500" />
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">
|
|
Perusahaan
|
|
</p>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">
|
|
{{ $verification['summary']['company']['name'] }}
|
|
</p>
|
|
<x-filament::badge :color="$verification['summary']['company']['exists'] ? 'success' : 'warning'" size="xs" class="mt-1">
|
|
{{ $verification['summary']['company']['exists'] ? '✓ Lengkap' : '⚠ Belum diisi' }}
|
|
</x-filament::badge>
|
|
</div>
|
|
|
|
{{-- Media Summary --}}
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<x-heroicon-o-newspaper class="w-4 h-4 text-info-500" />
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Media
|
|
</p>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white truncate">
|
|
{{ $verification['summary']['media']['name'] }}
|
|
</p>
|
|
<x-filament::badge :color="$verification['summary']['media']['exists'] ? 'success' : 'warning'" size="xs" class="mt-1">
|
|
{{ $verification['summary']['media']['exists'] ? '✓ Lengkap' : '⚠ Belum diisi' }}
|
|
</x-filament::badge>
|
|
</div>
|
|
|
|
{{-- Journalists Summary --}}
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<x-heroicon-o-identification class="w-4 h-4 text-info-500" />
|
|
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Jurnalis
|
|
</p>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
|
{{ $verification['summary']['journalists']['count'] }} jurnalis
|
|
</p>
|
|
<x-filament::badge :color="$verification['summary']['journalists']['exists'] ? 'success' : 'warning'" size="xs" class="mt-1">
|
|
{{ $verification['summary']['journalists']['exists'] ? '✓ Lengkap' : '⚠ Belum diisi' }}
|
|
</x-filament::badge>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Timeline Info --}}
|
|
<div class="grid grid-cols-2 gap-3 text-sm">
|
|
<div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Diajukan</p>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
{{ $verification['timestamps']['submittedAt'] }}
|
|
</p>
|
|
<p class="text-xs text-gray-500">
|
|
{{ $verification['timestamps']['submittedAtHuman'] }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Pembaruan
|
|
Terakhir
|
|
</p>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
{{ $verification['timestamps']['updatedAt'] }}
|
|
</p>
|
|
<p class="text-xs text-gray-500">
|
|
{{ $verification['timestamps']['updatedAtHuman'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Latest Review Note --}}
|
|
@if ($verification['reviews']['latest']['note'])
|
|
<div class="p-3 custom-rounded border {{ $verification['reviews']['latest']['classes'] }}">
|
|
<p
|
|
class="text-xs font-semibold uppercase mb-1 {{ $verification['reviews']['latest']['titleClasses'] }}">
|
|
Catatan Terakhir
|
|
</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
|
|
{{ $verification['reviews']['latest']['note'] }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
oleh {{ $verification['reviews']['latest']['reviewer'] }} •
|
|
{{ $verification['reviews']['latest']['createdAtHuman'] }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Review History Accordion --}}
|
|
@if ($verification['reviews']['count'] > 0)
|
|
<div x-data="{ open: false }"
|
|
class="border border-gray-200 dark:border-gray-700 custom-rounded overflow-hidden">
|
|
<button @click="open = !open"
|
|
class="w-full flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
|
<div
|
|
class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
<x-heroicon-o-clock class="w-4 h-4" />
|
|
Riwayat Review ({{ $verification['reviews']['count'] }})
|
|
</div>
|
|
<x-heroicon-o-chevron-down
|
|
class="w-4 h-4 text-gray-500 transition-transform duration-200"
|
|
x-bind:class="{ 'rotate-180': open }" />
|
|
</button>
|
|
|
|
<div x-show="open" x-collapse class="border-t border-gray-200 dark:border-gray-700">
|
|
<div class="divide-y divide-gray-100 dark:divide-gray-700 max-h-60 overflow-y-auto">
|
|
@foreach ($verification['reviews']['history'] as $review)
|
|
<div class="p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<x-filament::badge :color="$review['decisionColor']" size="sm">
|
|
{{ $review['decisionLabel'] }}
|
|
</x-filament::badge>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
oleh {{ $review['reviewerName'] }}
|
|
</span>
|
|
</div>
|
|
@if ($review['note'])
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{{ $review['note'] }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
<div class="shrink-0 text-xs text-gray-400">
|
|
{{ $review['createdAt'] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<x-slot name="footer">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
{{-- View Detail Button --}}
|
|
@can('View:AdminVerification')
|
|
@if ($verification['company']['detailUrl'])
|
|
{{ ($this->viewAction)(['id' => $verification['company']['hashId']]) }}
|
|
@endif
|
|
@endcan
|
|
|
|
{{-- Action Buttons based on status --}}
|
|
@if ($verification['status']['isPending'])
|
|
@canAny(['Approve:AdminVerification', 'Revision:AdminVerification',
|
|
'Reject:AdminVerification'])
|
|
@can('Approve:AdminVerification')
|
|
{{ ($this->approveAction)(['id' => $verification['id']]) }}
|
|
@endcan
|
|
|
|
@can('Revision:AdminVerification')
|
|
{{ ($this->revisionAction)(['id' => $verification['id']]) }}
|
|
@endcan
|
|
|
|
@can('Reject:AdminVerification')
|
|
{{ ($this->rejectAction)(['id' => $verification['id']]) }}
|
|
@endcan
|
|
@endcanAny
|
|
@endif
|
|
</div>
|
|
</x-slot>
|
|
</x-filament::section>
|
|
@empty
|
|
<div class="col-span-full">
|
|
<x-filament::empty-state icon="heroicon-o-inbox" :heading="$this->getEmptyStateHeading()" :description="$this->getEmptyStateDescription()"
|
|
icon-color="gray">
|
|
</x-filament::empty-state>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Infinite Scroll Sentinel --}}
|
|
@if ($this->verifications->hasMorePages())
|
|
<div x-intersect="$wire.loadMore()" class="py-6 flex justify-center">
|
|
<x-filament::loading-indicator class="w-8 h-8 text-primary-500" />
|
|
</div>
|
|
@endif
|
|
|
|
<x-filament-actions::modals />
|
|
</x-filament::section>
|
|
</x-filament-panels::page>
|