✨ Integrate Flux modals for member acceptance and rejection actions, refactor related Livewire methods, and improve Blade table structure for consistency and UX.

app/Livewire/EinundzwanzigPlebTable.php

@@ -164,39 +164,28 @@ class EinundzwanzigPlebTable extends PowerGridComponent
         return [];
     }
 
+    public ?int $confirmAcceptId = null;
+
+    public ?int $confirmDeleteId = null;
+
     #[\Livewire\Attributes\On('accept')]
     public function accept($rowId): void
     {
-        $pleb = EinundzwanzigPleb::query()
+        $this->confirmAcceptId = $rowId;
-            ->with('profile')
+        $this->modal('confirm-accept-pleb')->show();
-            ->findOrFail($rowId);
-        $this->dialog()->confirm([
-            'title' => 'Bist du sicher?',
-            'description' => 'Möchtest du '.$pleb->profile->name.' wirklich akzeptieren?',
-            'acceptLabel' => 'Ja, akzeptieren',
-            'method' => 'acceptPleb',
-            'params' => $rowId,
-        ]);
     }
 
     #[\Livewire\Attributes\On('delete')]
     public function delete($rowId): void
     {
-        $pleb = EinundzwanzigPleb::query()
+        $this->confirmDeleteId = $rowId;
-            ->with('profile')
+        $this->modal('confirm-delete-pleb')->show();
-            ->findOrFail($rowId);
-        $this->dialog()->confirm([
-            'title' => 'Bist du sicher?',
-            'description' => 'Möchtest du '.$pleb->profile->name.' wirklich löschen?',
-            'acceptLabel' => 'Ja, lösche',
-            'method' => 'deletePleb',
-            'params' => $rowId,
-        ]);
     }
 
-    public function acceptPleb($rowId)
+    public function acceptPleb(): void
     {
-        $pleb = EinundzwanzigPleb::query()->findOrFail($rowId);
+        if ($this->confirmAcceptId) {
+            $pleb = EinundzwanzigPleb::query()->findOrFail($this->confirmAcceptId);
             $for = $pleb->application_for;
             $text = $pleb->application_text;
             $pleb->association_status = AssociationStatus::from($for);
@@ -205,18 +194,25 @@ class EinundzwanzigPlebTable extends PowerGridComponent
             $pleb->application_text = null;
             $pleb->save();
 
+            $this->confirmAcceptId = null;
+            $this->modal('confirm-accept-pleb')->close();
             $this->fillData();
         }
+    }
 
-    public function deletePleb($rowId)
+    public function deletePleb(): void
     {
-        $pleb = EinundzwanzigPleb::query()->findOrFail($rowId);
+        if ($this->confirmDeleteId) {
+            $pleb = EinundzwanzigPleb::query()->findOrFail($this->confirmDeleteId);
             $pleb->application_for = null;
             $pleb->application_text = null;
             $pleb->save();
 
+            $this->confirmDeleteId = null;
+            $this->modal('confirm-delete-pleb')->close();
             $this->fillData();
         }
+    }
 
     public function actions(EinundzwanzigPleb $row): array
     {
@@ -224,16 +220,12 @@ class EinundzwanzigPlebTable extends PowerGridComponent
             Button::add('delete')
                 ->slot('Löschen')
                 ->id()
-                ->class(
+                ->class('px-3 py-1.5 text-sm font-medium rounded-md border transition-colors bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 text-red-600 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-950')
-                    'btn bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-red-500',
-                )
                 ->dispatch('delete', ['rowId' => $row->id]),
             Button::add('accept')
                 ->slot('Akzeptieren')
                 ->id()
-                ->class(
+                ->class('px-3 py-1.5 text-sm font-medium rounded-md border transition-colors bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 text-emerald-600 dark:text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-950')
-                    'btn bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500',
-                )
                 ->dispatch('accept', ['rowId' => $row->id]),
         ];
     }

resources/views/components/detail.blade.php

@@ -1,55 +1,38 @@
 <div class="p-4">
-
     @if($row->application_text )
-        <div class="px-4 py-2 rounded-lg text-sm bg-violet-100 text-gray-700">
+        <flux:callout icon="information-circle" variant="info">
-            <div class="flex w-full justify-between items-start">
+            {{ $row->application_text }}
-                <div class="flex">
+        </flux:callout>
-                    <svg class="shrink-0 fill-current text-violet-500 mt-[3px] mr-3" width="16" height="16"
-                         viewBox="0 0 16 16">
-                        <path
-                            d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-                    </svg>
-                    <div>{{ $row->application_text }}</div>
-                </div>
-            </div>
-        </div>
     @endif
 
     <section>
-        <h3 class="text-xl leading-snug text-gray-800 dark:text-gray-100 font-bold mb-1">
+        <flux:heading size="lg" class="mb-4">bisherige Zahlungen</flux:heading>
-            bisherige Zahlungen</h3>
+
-        <!-- Table -->
+        <table class="table-auto w-full">
-        <table class="table-auto w-full dark:text-gray-400">
+            <thead class="text-xs font-semibold uppercase border-b">
-            <!-- Table header -->
+                <tr>
-            <thead
+                    <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap text-left">
-                class="text-xs uppercase text-gray-400 dark:text-gray-500">
+                        <div class="font-semibold">Satoshis</div>
-            <tr class="flex flex-wrap md:table-row md:flex-no-wrap">
-                <th class="w-full block md:w-auto md:table-cell py-2">
-                    <div class="font-semibold text-left">Satoshis</div>
                     </th>
-                <th class="w-full hidden md:w-auto md:table-cell py-2">
+                    <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap text-left">
-                    <div class="font-semibold text-left">Jahr</div>
+                        <div class="font-semibold">Jahr</div>
                     </th>
-                <th class="w-full hidden md:w-auto md:table-cell py-2">
+                    <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap text-left">
-                    <div class="font-semibold text-left">Event-ID</div>
+                        <div class="font-semibold">Event-ID</div>
                     </th>
                 </tr>
             </thead>
-            <!-- Table body -->
+            <tbody class="text-sm divide-y">
-            <tbody class="text-sm">
+                @foreach($row->payment_events as $payment)
-            @foreach($row->paymentEvents as $payment)
+                    <tr>
-                <tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-gray-200 dark:border-gray-700/60 py-2 md:py-0">
+                        <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                            <div class="font-medium">{{ $payment->amount }}</div>
-                        <div
-                            class="text-left font-medium text-gray-800 dark:text-gray-100">{{ $payment->amount }}</div>
                         </td>
-                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                        <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-                        <div
+                            <div>{{ $payment->year }}</div>
-                            class="text-left">{{ $payment->year }}</div>
                         </td>
-                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
+                        <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-                        <div
+                            <div class="font-medium">{{ $payment->event_id }}</div>
-                            class="text-left font-medium">{{ $payment->event_id }}</div>
                         </td>
                     </tr>
                 @endforeach

resources/views/livewire/association/members/admin.blade.php

@@ -86,4 +86,40 @@ new class extends Component {
             </flux:callout>
         </div>
     @endif
+
+    <flux:modal name="confirm-accept-pleb" class="min-w-88">
+        <div class="space-y-6">
+            <div>
+                <flux:heading size="lg">Mitglied akzeptieren</flux:heading>
+                <flux:subheading class="mt-2">
+                    Bist du sicher, dass du dieses Mitglied akzeptieren möchtest?
+                </flux:subheading>
+            </div>
+            <div class="flex gap-2">
+                <flux:spacer/>
+                <flux:modal.close>
+                    <flux:button variant="ghost">Abbrechen</flux:button>
+                </flux:modal.close>
+                <flux:button wire:click="acceptPleb" variant="primary">Ja, akzeptieren</flux:button>
+            </div>
+        </div>
+    </flux:modal>
+
+    <flux:modal name="confirm-delete-pleb" class="min-w-88">
+        <div class="space-y-6">
+            <div>
+                <flux:heading size="lg">Bewerbung ablehnen</flux:heading>
+                <flux:subheading class="mt-2">
+                    Bist du sicher, dass du diese Bewerbung ablehnen möchtest?
+                </flux:subheading>
+            </div>
+            <div class="flex gap-2">
+                <flux:spacer/>
+                <flux:modal.close>
+                    <flux:button variant="ghost">Abbrechen</flux:button>
+                </flux:modal.close>
+                <flux:button wire:click="deletePleb" variant="danger">Ja, ablehnen</flux:button>
+            </div>
+        </div>
+    </flux:modal>
 </div>