From 819f6587bdafa6c9f6850b7ca2a991fb1842cc92 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Wed, 9 Nov 2022 17:52:22 +0300
Subject: [PATCH 1/6] mobile index actions

---
 public/akaunting-js/generalAction.js          |  17 ++-
 .../views/components/table/actions.blade.php  | 133 ++++++++++++++++++
 2 files changed, 149 insertions(+), 1 deletion(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index cbf0431bc..7a7e06de8 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -11,7 +11,7 @@ document.querySelectorAll("[data-table-list]").forEach((row) => {
 
 //redirect edit or show page for table row click
 document.querySelectorAll("[data-table-body]").forEach((table) => {
-    if (document.body.clientWidth >= 991) {
+    if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) {
         let rows = table.querySelectorAll("tr");
 
         rows.forEach((row) => {
@@ -27,6 +27,7 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             if (row_href) {
                 for (let i = first_selector; i < td.length - 1; i++) {
                     let td_item = td[i];
+
                     td_item.addEventListener("click", () => {
                         window.location.href = row_href;
                     });
@@ -42,6 +43,20 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             }
         });
     }
+
+    if (document.body.clientWidth <= 768) {
+        table.querySelectorAll('[data-table-list]').forEach((actions) => {
+            actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show', 'flex');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('hidden');
+      
+                this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
+                    this.classList.add('hidden');
+                    this.classList.remove('show', 'flex');
+                });
+            });
+        });
+    }
 });
 //redirect edit or show page for table row click
 
diff --git a/resources/views/components/table/actions.blade.php b/resources/views/components/table/actions.blade.php
index 8ce6cd0cf..d2e273600 100644
--- a/resources/views/components/table/actions.blade.php
+++ b/resources/views/components/table/actions.blade.php
@@ -3,6 +3,138 @@
     $more_actions = [];
 @endphp
 
+@mobile
+<div
+    data-mobile-actions
+    class="absolute w-7 h-7 flex items-center justify-center ltr:right-0 rtl:left-0 -top-4 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
+>
+    <span class="material-icons-outlined text-lg">
+        arrow_drop_up
+    </span>
+</div>
+
+<div
+    data-mobile-actions-modal
+    class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
+>
+    <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
+        <div class="p-5 bg-body rounded-lg">
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                @endif
+
+                @if ($count_buttons > 3 && $loop->count > 4)
+                    @break
+                @endif
+
+                @php
+                    $type = ! empty($action['type']) ? $action['type'] : 'link';
+                @endphp
+
+                @switch($type)
+                    @case('button')
+                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                {{ $action['title'] }}
+                            </span>
+                        </button>
+                        @break
+
+                    @case('delete')
+                        @php
+                            $title = $action['title'] ?? null;
+                            $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                            $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                        @endphp
+
+                        <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                        @break
+
+                    @default
+                        <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">    
+                                {{ $action['title'] }}
+                            </span>
+                        </a>
+                @endswitch
+
+                @php
+                    array_shift($actions);
+
+                    $count_buttons++;
+                @endphp
+
+                @if (! empty($action['permission']))
+                    @endcan
+                @endif
+            @endforeach
+
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                    @php $more_actions[] = $action; @endphp
+                    @endcan
+                @else
+                    @php $more_actions[] = $action; @endphp
+                @endif
+            @endforeach
+
+            @if ($more_actions)
+                @php $divider = false; @endphp
+
+                @foreach ($more_actions as $action)
+                    @php
+                        $type = ! empty($action['type']) ? $action['type'] : 'link';
+                    @endphp
+
+                    @switch($type)
+                        @case('button')
+                            @php $divider = false; @endphp
+
+                            <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    {{ $action['title'] }}
+                                </span>
+                            </button>
+                            @break
+
+                        @case('delete')
+                            @php $divider = false; @endphp
+
+                            @php
+                                $title = $action['title'] ?? null;
+                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                            @endphp
+                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                            @break
+
+                        @case('divider')
+                            @if (! $divider)
+                                @php $divider = true; @endphp
+                                <div class="py-2 px-2">
+                                    <div class="w-full border-t border-gray-200"></div>
+                                </div>
+                            @endif
+                            @break
+
+                        @default
+                            @php $divider = false; @endphp
+
+                            <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    {{ $action['title'] }}
+                                </span>
+                            </a>
+                    @endswitch
+                @endforeach
+            @endif
+        </div>
+    </div>
+</div>
+
+@else
 <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
     @foreach ($actions as $action)
         @if (! empty($action['permission']))
@@ -132,3 +264,4 @@
         </div>
     @endif
 </div>
+@endmobile

From 4a5858f724c0e172385d5853811c4654002478db Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 10 Nov 2022 11:14:30 +0300
Subject: [PATCH 2/6] other scenario fixed

---
 app/View/Components/DeleteLink.php            |   2 +-
 public/akaunting-js/generalAction.js          |   7 +-
 public/css/app.css                            |   5 +
 .../views/components/delete-button.blade.php  |  81 ++--
 .../components/table/actions-mobile.blade.php | 134 +++++++
 .../views/components/table/actions.blade.php  | 355 ++++++------------
 safelist.txt                                  |   1 +
 7 files changed, 314 insertions(+), 271 deletions(-)
 create mode 100644 resources/views/components/table/actions-mobile.blade.php

diff --git a/app/View/Components/DeleteLink.php b/app/View/Components/DeleteLink.php
index 52c9cdee7..f098768eb 100644
--- a/app/View/Components/DeleteLink.php
+++ b/app/View/Components/DeleteLink.php
@@ -282,7 +282,7 @@ class DeleteLink extends Component
 
     protected function getClass($class)
     {
-        $default_class = 'w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap';
+        $default_class = 'w-full flex items-center text-red sm:text-purple px-2 h-9 leading-9 whitespace-nowrap';
 
         $explode = explode(',', $this->override);
 
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 7a7e06de8..f608d6058 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -28,7 +28,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
                 for (let i = first_selector; i < td.length - 1; i++) {
                     let td_item = td[i];
 
-                    td_item.addEventListener("click", () => {
+                    td_item.addEventListener("click", (event) => {
+                        // click disabled when preview dialog is open
+                        if (event.target.closest('[data-tooltip-target]')) {
+                            return;
+                        }
+                        // click disabled when preview dialog is open
                         window.location.href = row_href;
                     });
 
diff --git a/public/css/app.css b/public/css/app.css
index a2837b0a6..63164f7b4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -57052,6 +57052,11 @@ body{
     line-height: 2.75rem;
   }
 
+  .sm\:text-purple{
+    --tw-text-opacity: 1;
+    color: rgb(85 88 139 / var(--tw-text-opacity));
+  }
+
   [dir="ltr"] .sm\:ltr\:right-4{
     right: 1rem;
   }
diff --git a/resources/views/components/delete-button.blade.php b/resources/views/components/delete-button.blade.php
index e7e3333b7..6197ddb5e 100644
--- a/resources/views/components/delete-button.blade.php
+++ b/resources/views/components/delete-button.blade.php
@@ -1,28 +1,55 @@
-<x-button
-    type="button"
-    class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
-    @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
-    override="class"
-    {{ $attributes }}
->
-    @if ($slot->isNotEmpty())
-        {!! $slot !!}
-    @else
-        <span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
-        <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-            <span>{!! $label !!}</span>
-            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-        </div>
-    @endif
+@mobile
+    <x-button
+        type="button"
+        class="w-full flex items-center text-red sm:text-purple px-2 h-9 leading-9"
+        @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+        override="class"
+        {{ $attributes }}
+    >
+        @if ($slot->isNotEmpty())
+            {!! $slot !!}
+        @else
+            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{!! $label !!}</span>
+        @endif
 
-    <x-form.input.hidden
-        name="delete-{{ $modelTable }}-{{ $id }}"
-        id="delete-{{ $modelTable }}-{{ $id }}"
-        data-field="delete"
-        data-action="{{ $action }}"
-        data-title="{!! $title !!}"
-        data-message="{!! $message !!}"
-        data-cancel="{!! $cancelText !!}"
-        data-delete="{!! $deleteText !!}"
-    />
-</x-button>
+        <x-form.input.hidden
+            name="delete-{{ $modelTable }}-{{ $id }}"
+            id="delete-{{ $modelTable }}-{{ $id }}"
+            data-field="delete"
+            data-action="{{ $action }}"
+            data-title="{!! $title !!}"
+            data-message="{!! $message !!}"
+            data-cancel="{!! $cancelText !!}"
+            data-delete="{!! $deleteText !!}"
+        />
+    </x-button>
+@else
+    <x-button
+        type="button"
+        class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
+        @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+        override="class"
+        {{ $attributes }}
+    >
+        @if ($slot->isNotEmpty())
+            {!! $slot !!}
+        @else
+            <span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
+            <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+                <span>{!! $label !!}</span>
+                <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+            </div>
+        @endif
+
+        <x-form.input.hidden
+            name="delete-{{ $modelTable }}-{{ $id }}"
+            id="delete-{{ $modelTable }}-{{ $id }}"
+            data-field="delete"
+            data-action="{{ $action }}"
+            data-title="{!! $title !!}"
+            data-message="{!! $message !!}"
+            data-cancel="{!! $cancelText !!}"
+            data-delete="{!! $deleteText !!}"
+        />
+    </x-button>
+@endmobile
diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
new file mode 100644
index 000000000..e0a311ddc
--- /dev/null
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -0,0 +1,134 @@
+@php
+    $count_buttons = 1;
+    $more_actions = [];
+@endphp
+
+<div
+    data-mobile-actions
+    class="absolute w-6 h-6 flex items-center justify-center ltr:right-0 rtl:left-0 -top-3 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
+>
+    <span class="material-icons-outlined text-lg">
+        more_horiz
+    </span>
+</div>
+
+<div
+    data-mobile-actions-modal
+    class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
+>
+    <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
+        <div class="p-2 bg-body rounded-lg">
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                @endif
+
+                @if ($count_buttons > 3 && $loop->count > 4)
+                    @break
+                @endif
+
+                @php
+                    $type = ! empty($action['type']) ? $action['type'] : 'link';
+                @endphp
+
+                @switch($type)
+                    @case('button')
+                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                {{ $action['title'] }}
+                            </span>
+                        </button>
+                        @break
+
+                    @case('delete')
+                        @php
+                            $title = $action['title'] ?? null;
+                            $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                            $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                        @endphp
+
+                        <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                        @break
+
+                    @default
+                        <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">    
+                                {{ $action['title'] }}
+                            </span>
+                        </a>
+                @endswitch
+
+                @php
+                    array_shift($actions);
+
+                    $count_buttons++;
+                @endphp
+
+                @if (! empty($action['permission']))
+                    @endcan
+                @endif
+            @endforeach
+
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                    @php $more_actions[] = $action; @endphp
+                    @endcan
+                @else
+                    @php $more_actions[] = $action; @endphp
+                @endif
+            @endforeach
+
+            @if ($more_actions)
+                @php $divider = false; @endphp
+
+                @foreach ($more_actions as $action)
+                    @php
+                        $type = ! empty($action['type']) ? $action['type'] : 'link';
+                    @endphp
+
+                    @switch($type)
+                        @case('button')
+                            @php $divider = false; @endphp
+
+                            <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    {{ $action['title'] }}
+                                </span>
+                            </button>
+                            @break
+
+                        @case('delete')
+                            @php $divider = false; @endphp
+
+                            @php
+                                $title = $action['title'] ?? null;
+                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                            @endphp
+                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                            @break
+
+                        @case('divider')
+                            @if (! $divider)
+                                @php $divider = true; @endphp
+                                <div class="py-2 px-2">
+                                    <div class="w-full border-t border-gray-200"></div>
+                                </div>
+                            @endif
+                            @break
+
+                        @default
+                            @php $divider = false; @endphp
+
+                            <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    {{ $action['title'] }}
+                                </span>
+                            </a>
+                    @endswitch
+                @endforeach
+            @endif
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/table/actions.blade.php b/resources/views/components/table/actions.blade.php
index d2e273600..639303fc4 100644
--- a/resources/views/components/table/actions.blade.php
+++ b/resources/views/components/table/actions.blade.php
@@ -4,264 +4,135 @@
 @endphp
 
 @mobile
-<div
-    data-mobile-actions
-    class="absolute w-7 h-7 flex items-center justify-center ltr:right-0 rtl:left-0 -top-4 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
->
-    <span class="material-icons-outlined text-lg">
-        arrow_drop_up
-    </span>
-</div>
+    <x-table.actions-mobile :actions="$actions" :model="$model" />
+@else
+    <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
+        @foreach ($actions as $action)
+            @if (! empty($action['permission']))
+                @can($action['permission'])
+            @endif
 
-<div
-    data-mobile-actions-modal
-    class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
->
-    <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
-        <div class="p-5 bg-body rounded-lg">
-            @foreach ($actions as $action)
-                @if (! empty($action['permission']))
-                    @can($action['permission'])
-                @endif
+            @if ($count_buttons > 3 && $loop->count > 4)
+                @break
+            @endif
 
-                @if ($count_buttons > 3 && $loop->count > 4)
+            @php
+                $type = ! empty($action['type']) ? $action['type'] : 'link';
+            @endphp
+
+            @switch($type)
+                @case('button')
+                    <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
+                        <span class="material-icons-outlined text-purple text-lg pointer-events-none">
+                            {{ $action['icon'] }}
+                        </span>
+
+                        <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+                            <span>{{ $action['title'] }}</span>
+                            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+                        </div>
+                    </button>
                     @break
-                @endif
 
-                @php
-                    $type = ! empty($action['type']) ? $action['type'] : 'link';
-                @endphp
+                @case('delete')
+                    @php
+                        $title = $action['title'] ?? null;
+                        $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                        $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                    @endphp
 
-                @switch($type)
-                    @case('button')
-                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                {{ $action['title'] }}
-                            </span>
-                        </button>
-                        @break
+                    <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                    @break
 
-                    @case('delete')
+                @default
+                    <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
+                        <span class="material-icons-outlined text-purple text-lg pointer-events-none">
+                            {{ $action['icon'] }}
+                        </span>
+
+                        <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+                            <span>{{ $action['title'] }}</span>
+                            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+                        </div>
+                    </a>
+            @endswitch
+
+            @php
+                array_shift($actions);
+
+                $count_buttons++;
+            @endphp
+
+            @if (! empty($action['permission']))
+                @endcan
+            @endif
+        @endforeach
+
+        @foreach ($actions as $action)
+            @if (! empty($action['permission']))
+                @can($action['permission'])
+                @php $more_actions[] = $action; @endphp
+                @endcan
+            @else
+                @php $more_actions[] = $action; @endphp
+            @endif
+        @endforeach
+
+        @if ($more_actions)
+            @php $divider = false; @endphp
+
+            <div class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions">
+                <button type="button" data-dropdown-toggle="dropdown-actions-{{ $loop->index }}" data-dropdown-placement="left" class="material-icons-outlined text-purple text-lg">more_horiz</button>
+
+                <div id="dropdown-actions-{{ $loop->index }}" data-dropdown-actions class="absolute py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 hidden !mt-[50px]" style="left:auto; min-width:10rem;">    
+                    @foreach ($more_actions as $action)
                         @php
-                            $title = $action['title'] ?? null;
-                            $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                            $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                            $type = ! empty($action['type']) ? $action['type'] : 'link';
                         @endphp
 
-                        <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                        @break
+                        @switch($type)
+                            @case('button')
+                                @php $divider = false; @endphp
 
-                    @default
-                        <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">    
-                                {{ $action['title'] }}
-                            </span>
-                        </a>
-                @endswitch
-
-                @php
-                    array_shift($actions);
-
-                    $count_buttons++;
-                @endphp
-
-                @if (! empty($action['permission']))
-                    @endcan
-                @endif
-            @endforeach
-
-            @foreach ($actions as $action)
-                @if (! empty($action['permission']))
-                    @can($action['permission'])
-                    @php $more_actions[] = $action; @endphp
-                    @endcan
-                @else
-                    @php $more_actions[] = $action; @endphp
-                @endif
-            @endforeach
-
-            @if ($more_actions)
-                @php $divider = false; @endphp
-
-                @foreach ($more_actions as $action)
-                    @php
-                        $type = ! empty($action['type']) ? $action['type'] : 'link';
-                    @endphp
-
-                    @switch($type)
-                        @case('button')
-                            @php $divider = false; @endphp
-
-                            <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </span>
-                            </button>
-                            @break
-
-                        @case('delete')
-                            @php $divider = false; @endphp
-
-                            @php
-                                $title = $action['title'] ?? null;
-                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
-                            @endphp
-                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                            @break
-
-                        @case('divider')
-                            @if (! $divider)
-                                @php $divider = true; @endphp
-                                <div class="py-2 px-2">
-                                    <div class="w-full border-t border-gray-200"></div>
+                                <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
+                                    <button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                        {{ $action['title'] }}
+                                    </button>
                                 </div>
-                            @endif
-                            @break
+                                @break
 
-                        @default
-                            @php $divider = false; @endphp
+                            @case('delete')
+                                @php $divider = false; @endphp
 
-                            <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </span>
-                            </a>
-                    @endswitch
-                @endforeach
-            @endif
-        </div>
-    </div>
-</div>
+                                @php
+                                    $title = $action['title'] ?? null;
+                                    $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                    $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                                @endphp
+                                <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                                @break
 
-@else
-<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
-    @foreach ($actions as $action)
-        @if (! empty($action['permission']))
-            @can($action['permission'])
-        @endif
+                            @case('divider')
+                                @if (! $divider)
+                                    @php $divider = true; @endphp
+                                    <div class="py-2 px-2">
+                                        <div class="w-full border-t border-gray-200"></div>
+                                    </div>
+                                @endif
+                                @break
 
-        @if ($count_buttons > 3 && $loop->count > 4)
-            @break
-        @endif
+                            @default
+                                @php $divider = false; @endphp
 
-        @php
-            $type = ! empty($action['type']) ? $action['type'] : 'link';
-        @endphp
-
-        @switch($type)
-            @case('button')
-                <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
-                    <span class="material-icons-outlined text-purple text-lg pointer-events-none">
-                        {{ $action['icon'] }}
-                    </span>
-
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-                        <span>{{ $action['title'] }}</span>
-                        <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-                    </div>
-                </button>
-                @break
-
-            @case('delete')
-                @php
-                    $title = $action['title'] ?? null;
-                    $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                    $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
-                @endphp
-
-                <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                @break
-
-            @default
-                <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
-                    <span class="material-icons-outlined text-purple text-lg pointer-events-none">
-                        {{ $action['icon'] }}
-                    </span>
-
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-                        <span>{{ $action['title'] }}</span>
-                        <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-                    </div>
-                </a>
-        @endswitch
-
-        @php
-            array_shift($actions);
-
-            $count_buttons++;
-        @endphp
-
-        @if (! empty($action['permission']))
-            @endcan
-        @endif
-    @endforeach
-
-    @foreach ($actions as $action)
-        @if (! empty($action['permission']))
-            @can($action['permission'])
-            @php $more_actions[] = $action; @endphp
-            @endcan
-        @else
-            @php $more_actions[] = $action; @endphp
-        @endif
-    @endforeach
-
-    @if ($more_actions)
-        @php $divider = false; @endphp
-
-        <div class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions">
-            <button type="button" data-dropdown-toggle="dropdown-actions-{{ $loop->index }}" data-dropdown-placement="left" class="material-icons-outlined text-purple text-lg">more_horiz</button>
-
-            <div id="dropdown-actions-{{ $loop->index }}" data-dropdown-actions class="absolute py-2 bg-white rounded-md border border-gray-200 shadow-xl z-20 hidden !mt-[50px]" style="left:auto; min-width:10rem;">    
-                @foreach ($more_actions as $action)
-                    @php
-                        $type = ! empty($action['type']) ? $action['type'] : 'link';
-                    @endphp
-
-                    @switch($type)
-                        @case('button')
-                            @php $divider = false; @endphp
-
-                            <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
-                                <button type="button" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </button>
-                            </div>
-                            @break
-
-                        @case('delete')
-                            @php $divider = false; @endphp
-
-                            @php
-                                $title = $action['title'] ?? null;
-                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
-                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
-                            @endphp
-                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
-                            @break
-
-                        @case('divider')
-                            @if (! $divider)
-                                @php $divider = true; @endphp
-                                <div class="py-2 px-2">
-                                    <div class="w-full border-t border-gray-200"></div>
+                                <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
+                                    <a href="{{ $action['url'] }}" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                        {{ $action['title'] }}
+                                    </a>
                                 </div>
-                            @endif
-                            @break
-
-                        @default
-                            @php $divider = false; @endphp
-
-                            <div class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" {!! $action['attributes'] ?? null !!}>
-                                <a href="{{ $action['url'] }}" class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
-                                    {{ $action['title'] }}
-                                </a>
-                            </div>
-                    @endswitch
-                @endforeach
+                        @endswitch
+                    @endforeach
+                </div>
             </div>
-        </div>
-    @endif
-</div>
+        @endif
+    </div>
 @endmobile
diff --git a/safelist.txt b/safelist.txt
index af51a9e1a..144f64dc2 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -16,6 +16,7 @@ sm:rtl:left-4
 sm:w-500
 sm:min-h-500
 sm:max-w-4xl
+sm:text-purple
 md:grid-cols-2
 lg:mt-2
 lg:pl-24

From d12e9968ea95f48ac7b6bdba5732de014cc10f66 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 10 Nov 2022 11:17:34 +0300
Subject: [PATCH 3/6] added animation

---
 public/akaunting-js/generalAction.js                   |  8 ++++----
 public/css/app.css                                     | 10 +++++-----
 .../views/components/table/actions-mobile.blade.php    |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index f608d6058..014a2a966 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -52,12 +52,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
     if (document.body.clientWidth <= 768) {
         table.querySelectorAll('[data-table-list]').forEach((actions) => {
             actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
-                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show', 'flex');
-                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('hidden');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
       
                 this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
-                    this.classList.add('hidden');
-                    this.classList.remove('show', 'flex');
+                    this.classList.add('opacity-0', 'invisible');
+                    this.classList.remove('show');
                 });
             });
         });
diff --git a/public/css/app.css b/public/css/app.css
index 63164f7b4..69ff04e17 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -54493,16 +54493,16 @@ body{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-lilac-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(245 247 250 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
index e0a311ddc..eca50ca8a 100644
--- a/resources/views/components/table/actions-mobile.blade.php
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -14,7 +14,7 @@
 
 <div
     data-mobile-actions-modal
-    class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
+    class="modal w-full h-full fixed flex top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 opacity-0 invisible modal-background transition-opacity"
 >
     <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
         <div class="p-2 bg-body rounded-lg">

From 070c6e819d3d7d8bc5a60222ffe59e64fff7218b Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 14 Nov 2022 14:50:24 +0300
Subject: [PATCH 4/6] added icons set

---
 .../components/table/actions-mobile.blade.php | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
index eca50ca8a..186103d6d 100644
--- a/resources/views/components/table/actions-mobile.blade.php
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -34,9 +34,13 @@
                 @switch($type)
                     @case('button')
                         <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
                                 {{ $action['title'] }}
-                            </span>
+                            </div>
                         </button>
                         @break
 
@@ -52,9 +56,13 @@
 
                     @default
                         <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">    
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
                                 {{ $action['title'] }}
-                            </span>
+                            </div>
                         </a>
                 @endswitch
 
@@ -92,9 +100,13 @@
                             @php $divider = false; @endphp
 
                             <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
                                     {{ $action['title'] }}
-                                </span>
+                                </div>
                             </button>
                             @break
 
@@ -122,9 +134,13 @@
                             @php $divider = false; @endphp
 
                             <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
-                                <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
                                     {{ $action['title'] }}
-                                </span>
+                                </div>
                             </a>
                     @endswitch
                 @endforeach

From 7df0f85d644b2aa2f0c59df1e0b64607d26f042d Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Tue, 15 Nov 2022 10:39:07 +0300
Subject: [PATCH 5/6] code refactoring

---
 public/akaunting-js/generalAction.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index cbf0431bc..9129c8ba0 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -368,7 +368,7 @@ function marqueeAnimation(truncate) {
     // offsetwidth = width of the text, clientWidth = width of parent text (div)
     // because some index page has icons, we use two time parent element
 
-    if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {   
+    if (truncate.children.length < 1 && truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
         truncate.addEventListener('mouseover', function () {
             truncate.parentElement.style.animationPlayState = 'running';
 
@@ -429,6 +429,7 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
     
     if (icon_parents_element.classList.contains('flex')) {
         icon_parents_element.appendChild(defaultText);
+        icon_parents_element.classList.remove('truncate');
     } else {
         if (icon_parents_element.classList.contains('overflow-x-hidden')) {
             icon_parents_element.parentElement.appendChild(defaultText);

From 41fb1b301efe3c5c80febeb03e4ad942ed59753f Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Tue, 15 Nov 2022 10:58:45 +0300
Subject: [PATCH 6/6] delete button refactoring

---
 .../views/components/delete-button.blade.php  | 90 +++++++++----------
 1 file changed, 40 insertions(+), 50 deletions(-)

diff --git a/resources/views/components/delete-button.blade.php b/resources/views/components/delete-button.blade.php
index 6197ddb5e..50d161f3b 100644
--- a/resources/views/components/delete-button.blade.php
+++ b/resources/views/components/delete-button.blade.php
@@ -1,55 +1,45 @@
 @mobile
-    <x-button
-        type="button"
-        class="w-full flex items-center text-red sm:text-purple px-2 h-9 leading-9"
-        @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
-        override="class"
-        {{ $attributes }}
-    >
-        @if ($slot->isNotEmpty())
-            {!! $slot !!}
-        @else
-            <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{!! $label !!}</span>
-        @endif
+<button
+    type="button"
+    class="rw-full flex items-center text-red sm:text-purple px-2 h-9 leading-9"
+    @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+    override="class"
+    {{ $attributes }}
+>
 
-        <x-form.input.hidden
-            name="delete-{{ $modelTable }}-{{ $id }}"
-            id="delete-{{ $modelTable }}-{{ $id }}"
-            data-field="delete"
-            data-action="{{ $action }}"
-            data-title="{!! $title !!}"
-            data-message="{!! $message !!}"
-            data-cancel="{!! $cancelText !!}"
-            data-delete="{!! $deleteText !!}"
-        />
-    </x-button>
+    @if ($slot->isNotEmpty())
+        {!! $slot !!}
+    @else
+        <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{!! $label !!}</span>
+    @endif
 @else
-    <x-button
-        type="button"
-        class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
-        @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
-        override="class"
-        {{ $attributes }}
-    >
-        @if ($slot->isNotEmpty())
-            {!! $slot !!}
-        @else
-            <span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
-            <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
-                <span>{!! $label !!}</span>
-                <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
-            </div>
-        @endif
+<button
+    type="button"
+    class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
+    @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+    override="class"
+    {{ $attributes }}
+>
 
-        <x-form.input.hidden
-            name="delete-{{ $modelTable }}-{{ $id }}"
-            id="delete-{{ $modelTable }}-{{ $id }}"
-            data-field="delete"
-            data-action="{{ $action }}"
-            data-title="{!! $title !!}"
-            data-message="{!! $message !!}"
-            data-cancel="{!! $cancelText !!}"
-            data-delete="{!! $deleteText !!}"
-        />
-    </x-button>
+    @if ($slot->isNotEmpty())
+        {!! $slot !!}
+    @else
+        <span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
+        <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
+            <span>{!! $label !!}</span>
+            <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
+        </div>
+    @endif
 @endmobile
+
+    <x-form.input.hidden
+        name="delete-{{ $modelTable }}-{{ $id }}"
+        id="delete-{{ $modelTable }}-{{ $id }}"
+        data-field="delete"
+        data-action="{{ $action }}"
+        data-title="{!! $title !!}"
+        data-message="{!! $message !!}"
+        data-cancel="{!! $cancelText !!}"
+        data-delete="{!! $deleteText !!}"
+    />
+</button>