style: custom CSS theme with top navigation from HTML design tokens
- Custom Filament CSS: Material colors (#0058be primary), Manrope/Inter fonts - Top navigation bar 56px, white bg, border-bottom - Sharper border-radius, custom badge colors, form input styling - Similar Cases & Attachment Links redesigned to match HTML mockups - AdminPanelProvider: topNavigation(), custom colors, renderHook CSS injection - Dark mode overrides included
This commit is contained in:
@@ -1,42 +1,40 @@
|
||||
<div style="padding: 1rem;">
|
||||
<div class="p-4">
|
||||
@if(empty($links) || count($links) === 0)
|
||||
<p>No attachments.</p>
|
||||
<p class="text-sm text-gray-500 py-8 text-center">No attachments.</p>
|
||||
@else
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #e5e7eb;">
|
||||
<th style="text-align: left; padding: 8px;">File</th>
|
||||
<th style="text-align: left; padding: 8px;">Collection</th>
|
||||
<th style="text-align: left; padding: 8px;">Size</th>
|
||||
<th style="text-align: right; padding: 8px;">Action</th>
|
||||
<tr class="border-b-2 border-gray-200">
|
||||
<th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">File</th>
|
||||
<th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Collection</th>
|
||||
<th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Size</th>
|
||||
<th class="text-right py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($links as $link)
|
||||
<tr style="border-bottom: 1px solid #f3f4f6;">
|
||||
<td style="padding: 8px;">{{ $link['name'] }}</td>
|
||||
<td style="padding: 8px;">
|
||||
<span style="
|
||||
display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px;
|
||||
@if($link['collection'] === 'proof_of_resolution') background: #dcfce7; color: #166534;
|
||||
@elseif($link['collection'] === 'customer_evidence') background: #dbeafe; color: #1e40af;
|
||||
@else background: #f3f4f6; color: #374151;
|
||||
@endif
|
||||
">
|
||||
{{ $link['collection'] }}
|
||||
</span>
|
||||
<tr class="border-b border-gray-100 hover:bg-gray-50/50 transition-colors">
|
||||
<td class="py-3 px-3 text-sm text-gray-900 font-medium">{{ $link['name'] }}</td>
|
||||
<td class="py-3 px-3">
|
||||
@if($link['collection'] === 'proof_of_resolution')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-700 border border-green-200">proof_of_resolution</span>
|
||||
@elseif($link['collection'] === 'customer_evidence')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200">customer_evidence</span>
|
||||
@else
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">{{ $link['collection'] }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td style="padding: 8px;">{{ $link['size'] }}</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<a href="{{ $link['url'] }}" target="_blank" style="
|
||||
display: inline-block; padding: 4px 12px; border-radius: 6px;
|
||||
background: #3b82f6; color: white; text-decoration: none; font-size: 13px;
|
||||
">Download</a>
|
||||
<td class="py-3 px-3 text-sm text-gray-500">{{ $link['size'] }}</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<a href="{{ $link['url'] }}" target="_blank"
|
||||
class="inline-flex items-center px-3 py-1.5 rounded text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm no-underline">
|
||||
Download
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin-top: 12px; font-size: 12px; color: #6b7280;">Links expire after 60 minutes.</p>
|
||||
<p class="mt-4 text-xs text-gray-500">Links expire after 60 minutes.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -15,48 +15,55 @@
|
||||
@endphp
|
||||
|
||||
@if($similarCases->isNotEmpty())
|
||||
<div class="p-6 bg-white rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
|
||||
<h3 class="text-lg font-semibold text-gray-950 dark:text-white mb-4">
|
||||
Similar Cases (shared tags)
|
||||
</h3>
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">Title</th>
|
||||
<th class="px-4 py-3 font-medium">Customer</th>
|
||||
<th class="px-4 py-3 font-medium">Status</th>
|
||||
<th class="px-4 py-3 font-medium">Assigned To</th>
|
||||
<th class="px-4 py-3 font-medium">Date</th>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mt-8">
|
||||
<div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
|
||||
<h3 class="font-semibold text-lg text-gray-900 flex items-center gap-2" style="font-family: 'Manrope', sans-serif;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
Similar Cases
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500">Matching tags: {{ $record->tags->pluck('name')->implode(', ') }}</span>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 border-b border-gray-200">
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Customer</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Handler</th>
|
||||
<th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@foreach($similarCases as $case)
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
|
||||
<td class="px-4 py-3">
|
||||
<a href="{{ \App\Filament\Resources\Feedback\FeedbackResource::getUrl('edit', ['record' => $case]) }}"
|
||||
class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
|
||||
{{ $case->title }}
|
||||
</a>
|
||||
<tr class="hover:bg-gray-50/50 transition-colors cursor-pointer"
|
||||
onclick="window.location='{{ \App\Filament\Resources\Feedback\FeedbackResource::getUrl('edit', ['record' => $case]) }}'">
|
||||
<td class="px-6 py-4 text-sm text-gray-900 hover:text-blue-600 transition-colors font-medium">
|
||||
{{ $case->title }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">
|
||||
<td class="px-6 py-4 text-sm text-gray-600">
|
||||
{{ $case->customer?->name }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-1 text-xs rounded-full font-medium
|
||||
@switch($case->status)
|
||||
@case('pending') bg-yellow-100 text-yellow-800 @break
|
||||
@case('processing') bg-blue-100 text-blue-800 @break
|
||||
@case('resolved') bg-green-100 text-green-800 @break
|
||||
@case('closed') bg-gray-100 text-gray-800 @break
|
||||
@endswitch">
|
||||
{{ ucfirst($case->status) }}
|
||||
</span>
|
||||
<td class="px-6 py-4">
|
||||
@switch($case->status)
|
||||
@case('pending')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">Pending</span>
|
||||
@break
|
||||
@case('processing')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200">Processing</span>
|
||||
@break
|
||||
@case('resolved')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-50 text-green-700 border border-green-200">Resolved</span>
|
||||
@break
|
||||
@case('closed')
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">Closed</span>
|
||||
@break
|
||||
@endswitch
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">
|
||||
<td class="px-6 py-4 text-sm text-gray-600">
|
||||
{{ $case->assignedTo?->name ?? 'Unassigned' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">
|
||||
<td class="px-6 py-4 text-sm text-gray-500">
|
||||
{{ $case->created_at->format('d/m/Y') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user