Skip to content

Commit 4f57b86

Browse files
author
Itamar Junior
committed
refactor: convert monthly budget list view to table format with improved styling
1 parent 0f21d7f commit 4f57b86

File tree

1 file changed

+53
-53
lines changed

1 file changed

+53
-53
lines changed

‎resources/views/livewire/company/budget-calendar.blade.php‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -202,65 +202,65 @@ class="absolute top-2 right-2 text-gray-400 hover:text-gray-600">
202202
->flatMap(fn($items) => $items)
203203
->sortBy('next_due_date');
204204
@endphp
205-
<section class="mt-12 md:mt-0 md:pl-14 w-full">
205+
<section class="mt-12 md:mt-0 2xl:pl-14 w-full col-span-3">
206206
<h2 class="text-base font-semibold text-gray-900">Monthly Budget for
207207
{{ $currentDate->format('F Y') }}</h2>
208-
<ol class="mt-4 flex flex-col gap-y-1 text-sm/6 text-gray-500">
209-
@forelse ($monthlyDueItems as $dueItem)
210-
<li
211-
class="group flex items-center rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100">
212-
<div class="flex-auto">
213-
<p class="text-gray-900">{{ $dueItem->category->name ?? '-' }}</p>
214-
<p class="mt-0.5">{{ $dueItem->provider->name ?? '-' }}</p>
215-
<p class="mt-0.5">
216-
{{ \Carbon\Carbon::parse($dueItem->next_due_date)->format('j M, Y') }}</p>
217-
<p class="mt-0.5 font-semibold text-indigo-700">
218-
{{ Number::currency($dueItem->budget, 'EUR') }}</p>
208+
<div class="mt-4 flex flex-col gap-y-1 text-sm/6 text-gray-500">
209+
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
210+
@if ($monthlyDueItems->count() > 0)
211+
<table
212+
class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
213+
<thead
214+
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
215+
<tr>
216+
<th scope="col" class="px-6 py-3">
217+
Due
218+
</th>
219+
<th scope="col" class="px-6 py-3">
220+
Category
221+
</th>
222+
<th scope="col" class="px-6 py-3">
223+
Ammount
224+
</th>
225+
<th scope="col"></th>
226+
</tr>
227+
</thead>
228+
<tbody>
229+
@forelse ($monthlyDueItems as $dueItem)
230+
<tr
231+
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
232+
<th scope="row"
233+
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
234+
{{ \Carbon\Carbon::parse($dueItem->next_due_date)->format('j M, Y') }}
235+
</th>
236+
<td class="px-6 py-4">
237+
{{ $dueItem->category->name ?? '-' }}
238+
</td>
239+
<td class="px-6 py-4">
240+
{{ Number::currency($dueItem->budget, 'EUR') }}
241+
</td>
242+
<td></td>
243+
</tr>
244+
@empty
245+
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
246+
<td colspan="4"
247+
class="px-6 py-4 text-center text-gray-500 italic">
248+
No budget items this month.
249+
</td>
250+
</tr>
251+
@endforelse
252+
</tbody>
253+
</table>
254+
@else
255+
<div class="p-4 bg-gray-100 text-gray-700">
256+
No budget items for this month.
219257
</div>
220-
<div class="relative opacity-0 focus-within:opacity-100 group-hover:opacity-100"
221-
x-data="{ open: false }" @click.away="open = false">
222-
<div>
223-
<button type="button" x-on:click="open = !open"
224-
class="-m-2 flex items-center rounded-full p-1.5 text-gray-500 hover:text-gray-600"
225-
id="menu-0-button" aria-expanded="false" aria-haspopup="true">
226-
<span class="sr-only">Open options</span>
227-
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
228-
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
229-
class="size-6 text-gray-400">
230-
<path stroke-linecap="round" stroke-linejoin="round"
231-
d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
232-
</svg>
233-
</button>
234-
</div>
235-
236-
<div x-show="open" x-transition:enter="transition ease-out duration-100"
237-
x-transition:enter-start="transform opacity-0 scale-95"
238-
x-transition:enter-end="transform opacity-100 scale-100"
239-
x-transition:leave="transition ease-in duration-75"
240-
x-transition:leave-start="transform opacity-100 scale-100"
241-
x-transition:leave-end="transform opacity-0 scale-95"
242-
class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
243-
role="menu" aria-orientation="vertical"
244-
aria-labelledby="menu-0-button" tabindex="-1">
245-
<div class="py-1" role="none">
246-
<a href="#"
247-
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
248-
role="menuitem" tabindex="-1" id="menu-0-item-0">Edit</a>
249-
<a href="#"
250-
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
251-
role="menuitem" tabindex="-1" id="menu-0-item-1">Cancel</a>
252-
</div>
253-
</div>
254-
</div>
255-
</li>
256-
@empty
257-
<li class="text-gray-500 italic">No budget items this month.</li>
258-
@endforelse
259-
</ol>
258+
@endif
259+
</div>
260+
</div>
260261
</section>
261262
@endif
262263

263-
264264
</div>
265265
</div>
266266
</div>

0 commit comments

Comments
 (0)