Skip to content

Commit 6fbc369

Browse files
author
Itamar Junior
committed
refactor: convert contract manager view from cards to table layout with improved styling
1 parent b223035 commit 6fbc369

File tree

2 files changed

+61
-47
lines changed

2 files changed

+61
-47
lines changed

‎resources/views/livewire/company/service/contract-manager.blade.php‎

Lines changed: 61 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,47 +11,65 @@
1111
@endif
1212

1313
<div class="space-y-3">
14-
@forelse ($contracts as $contract)
15-
<div x-data x-init="if (window.location.hash === '#contract-{{ $contract->id }}') $el.classList.add('alerts-border')" class="border p-4 rounded-xl bg-white dark:bg-gray-800"
16-
id="contract-{{ $contract->id }}">
17-
<div class="flex justify-between items-start">
18-
<div>
19-
<div class="text-sm text-gray-500">{{ $contract->company->name }}</div>
20-
<div class="text-lg font-semibold">{{ $contract->category->name }}</div>
21-
<div class="text-sm">{{ $contract->provider->name }}</div>
22-
</div>
23-
<div class="text-right text-sm">
24-
<div class="font-medium">€{{ number_format($contract->budget, 2) }}</div>
25-
<div class="text-xs text-gray-500">End: {{ $contract->end_date ?? '—' }}</div>
26-
<div class="text-xs">{{ ucfirst($contract->status) }}</div>
27-
</div>
28-
</div>
29-
<div class="flex gap-2 mt-2 text-right">
30-
@foreach ($contract->reminders as $reminder)
31-
<div class="flex items-center gap-2">
32-
<div class="text-xs text-gray-500">{{ $reminder->title }} -
33-
{{ \Carbon\Carbon::parse($reminder->due_date)->format('j M, Y') }}</div>
34-
<flux:button size="xs" variant="outline"
35-
wire:click="editReminder({{ $reminder->id }})">{{ __('Edit Reminders') }}
36-
</flux:button>
37-
</div>
38-
@endforeach
39-
<flux:button size="sm" variant="outline"
40-
wire:click="openReminderModal({{ $contract->id }})">
41-
{{ __('Add Reminder') }}
42-
</flux:button>
43-
<flux:button size="sm" variant="outline" wire:click="edit({{ $contract->id }})">
44-
{{ __('Edit') }}
45-
</flux:button>
46-
<flux:button size="sm" variant="outline" class="!text-red-600 hover:!bg-red-100"
47-
wire:click="confirmDelete({{ $contract->id }})">
48-
{{ __('Delete') }}
49-
</flux:button>
50-
</div>
51-
</div>
52-
@empty
53-
<p class="text-sm text-gray-500">{{ __('No contracts created yet.') }}</p>
54-
@endforelse
14+
15+
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
16+
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
17+
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
18+
<tr>
19+
<th scope="col" class="px-6 py-3">
20+
Name
21+
</th>
22+
<th scope="col" class="px-6 py-3">
23+
<span class="sr-only">Edit</span>
24+
</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
@forelse ($contracts as $contract)
29+
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
30+
x-data x-init="if (window.location.hash === '#contract-{{ $contract->id }}') $el.classList.add('alerts-border')" id="contract-{{ $contract->id }}">
31+
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white">
32+
{{ $contract->company->name }}
33+
<span class="text-xs text-gray-500">
34+
({{ $contract->category->name }}, {{ $contract->provider->name }})
35+
</span>
36+
@foreach ($contract->reminders as $reminder)
37+
<div class="flex items-center gap-2">
38+
<div class="text-xs text-gray-500">{{ $reminder->title }} -
39+
{{ \Carbon\Carbon::parse($reminder->due_date)->format('j M, Y') }}</div>
40+
<flux:button size="xs" variant="outline"
41+
wire:click="editReminder({{ $reminder->id }})">
42+
{{ __('Edit Reminders') }}
43+
</flux:button>
44+
</div>
45+
@endforeach
46+
<flux:button size="sm" variant="outline"
47+
wire:click="openReminderModal({{ $contract->id }})">
48+
{{ __('Add Reminder') }}
49+
</flux:button>
50+
</th>
51+
<td class="px-6 py-4 text-right flex items-center justify-end space-x-2">
52+
<flux:button size="sm" variant="outline"
53+
wire:click="edit({{ $contract->id }})">
54+
{{ __('Edit') }}
55+
</flux:button>
56+
<flux:button size="sm" variant="outline"
57+
class="!text-red-600 hover:!bg-red-100"
58+
wire:click="confirmDelete({{ $contract->id }})">
59+
{{ __('Delete') }}
60+
</flux:button>
61+
</td>
62+
</tr>
63+
@empty
64+
<tr>
65+
<td colspan="4" class="px-6 py-4 text-center text-gray-500">
66+
{{ __('No contracts added yet.') }}
67+
</td>
68+
</tr>
69+
@endforelse
70+
</tbody>
71+
</table>
72+
</div>
5573
</div>
5674

5775
{{-- CREATE MODAL --}}
@@ -179,19 +197,18 @@
179197
</x-contract.layout>
180198
<style>
181199
.alerts-border {
182-
border: 4px #1c2ecb solid;
200+
background-color: rgba(28, 46, 203, 0.1);
183201
184202
animation: blink 0.8s ease-in-out;
185203
animation-iteration-count: 5;
186204
animation-fill-mode: forwards;
187205
188-
border-radius: 0.5rem;
189206
box-shadow: 0 0 10px rgba(28, 46, 203, 0.5);
190207
}
191208
192209
@keyframes blink {
193210
50% {
194-
border-color: #fff;
211+
background-color: rgba(255, 255, 255, 0.5);
195212
}
196213
}
197214
</style>

‎resources/views/livewire/company/service/provider/provider-manager.blade.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@
1212
@endif
1313

1414
<div class="space-y-2">
15-
16-
17-
1815
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
1916
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
2017
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">

0 commit comments

Comments
 (0)