refactor(confirmation): menyesuaikan confirmation modal

app/Traits/WithConfirmation.php

@@ -14,16 +14,24 @@ trait WithConfirmation
 
     public ?string $confirmingButtonText = null;
 
+    public ?string $confirmButtonColor = 'danger';
+
+    public ?string $target = 'delete';
+
     #[On('fn:confirmAction')]
     public function confirmAction(
         string $id,
         string $title = 'Apakah Anda yakin?',
         string $message = 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
-        string $confirmButtonText = 'Ya, Hapus'
+        string $confirmButtonText = 'Ya, Hapus',
+        string $confirmButtonColor = 'danger',
+        string $target = 'delete'
     ) {
         $this->confirmingId = $id;
         $this->confirmingTitle = $title;
         $this->confirmingMessage = $message;
         $this->confirmingButtonText = $confirmButtonText;
+        $this->confirmButtonColor = $confirmButtonColor;
+        $this->target = $target;
     }
 }

resources/views/components/confirmation.blade.php

@@ -0,0 +1,18 @@
+<flux:modal name="confirmation-modal" class="w-[22rem]">
+    <div class="space-y-6">
+        <div>
+            <flux:heading size="lg">{{ $confirmingTitle }}</flux:heading>
+            <flux:text class="mt-2">{{ $confirmingMessage }}</flux:text>
+        </div>
+        <div class="flex gap-2">
+            <flux:spacer />
+            <flux:modal.close>
+                <flux:button variant="ghost">Batal</flux:button>
+            </flux:modal.close>
+            <flux:button type="submit" variant="primary" color="{{ $confirmButtonColor }}"
+                wire:click="{{ $target }}('{{ $confirmingId }}')">
+                {{ $confirmingButtonText }}
+            </flux:button>
+        </div>
+    </div>
+</flux:modal>

resources/views/components/datatables/confirm.blade.php

@@ -0,0 +1,13 @@
+<flux:modal.trigger name="confirmation-modal">
+    <flux:tooltip content="{{ $title }}">
+        <flux:button variant="primary" color="{{ $confirmButtonColor }}" icon="{{ $icon }}" size="sm"
+            wire:click="$dispatch('fn:confirmAction', {
+                id : '{{ $id }}',
+                message: '{{ $message }}',
+                confirmButtonText: '{{ $confirmButtonText }}',
+                target: '{{ $target }}',
+                confirmButtonColor : '{{ $confirmButtonColor }}'
+            })">
+        </flux:button>
+    </flux:tooltip>
+</flux:modal.trigger>