Intentando integrar con air-datepicker

Creando modal propio
Mas ajustes de estilos y iconos
2025-01-26 14:36:46 -03:00 · 2025-01-26 03:25:54 -03:00 · 2025-01-26 02:21:06 -03:00 · 2025-01-26 01:11:47 -03:00
32 changed files with 941 additions and 286 deletions
--- a/app/Livewire/Cajas/Index.php
+++ b/app/Livewire/Cajas/Index.php
@@ -10,6 +10,7 @@ use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Session;
 use Illuminate\Validation\ValidationException;
 use Livewire\Attributes\Computed;
+use Livewire\Attributes\On;
 use Livewire\Component;
 use Livewire\WithPagination;
 use Log;
@@ -21,8 +22,6 @@ class Index extends Component

    public $searchFecha = null;

-    public $modal = false;
-
    public $fecha = null;

    public $caja = null;
@@ -36,15 +35,16 @@ class Index extends Component

    public function createTurno(): void
    {
-        $this->modal = true;
        $this->fecha = now()->format('Y-m-d');
        $this->caja = 1;

-        if (Turno::where('fecha', $this->fecha)->exists()) {
-            $this->turno = Turno::where('fecha', $this->fecha)->max('numero_turno') + 1;
+        if (Turno::where('fecha', now())->exists()) {
+            $this->turno = Turno::where('fecha', now())->max('numero_turno') + 1;
        } else {
            $this->turno = 1;
        }
+
+        $this->dispatch('show-modal', "turno");
    }

    public function storeTurno(): void
@@ -87,14 +87,16 @@ class Index extends Component
        $this->redirectRoute('cajas.edit', $turno, navigate: true);
    }

+    #[On('close-modal-turno')]
    public function closeTurnoModal(): void
    {
-        $this->modal = false;
+        Log::info("Cerrando modal");
        $this->fecha = null;
        $this->caja = null;
        $this->turno = null;

        $this->clearValidation();
+        $this->dispatch('hide-modal', 'turno');
    }

    public function confirmDelete($id): void
@@ -113,20 +115,6 @@ class Index extends Component
        $this->toast()->success('Turno eliminado correctamente')->send();
    }

-    #[Computed]
-    public function headers(): array
-    {
-        return [
-            ['index' => 'fecha', 'label' => 'Fecha'],
-            ['index' => 'numero_caja', 'label' => 'Caja'],
-            ['index' => 'numero_turno', 'label' => 'Turno'],
-            ['index' => 'ingresos', 'label' => 'Ingresos'],
-            ['index' => 'egresos', 'label' => 'Egresos'],
-            ['index' => 'arqueo', 'label' => 'Arqueo'],
-            ['index' => 'action', 'label' => 'Acciones'],
-        ];
-    }
-
    #[Computed]
    public function rows(): LengthAwarePaginator
    {
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,20 @@
 {
-    "name": "zenithar",
+    "name": "app",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
+            "dependencies": {
+                "air-datepicker": "^3.5.3"
+            },
            "devDependencies": {
                "@tailwindcss/forms": "^0.5.9",
+                "@tailwindcss/typography": "^0.5.16",
                "autoprefixer": "^10.4.2",
                "axios": "^1.7.4",
                "chokidar": "^4.0.3",
                "concurrently": "^9.0.1",
+                "daisyui": "^4.12.23",
                "laravel-vite-plugin": "^1.0",
                "postcss": "^8.4.31",
                "tailwindcss": "^3.1.0",
@@ -853,6 +858,36 @@
                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
            }
        },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.16",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+            "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "lodash.castarray": "^4.4.0",
+                "lodash.isplainobject": "^4.0.6",
+                "lodash.merge": "^4.6.2",
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/@types/estree": {
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -860,6 +895,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/air-datepicker": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.5.3.tgz",
+            "integrity": "sha512-Elf9gLhv/jidN1+TfeRJYMQRUfYx5apXw2dY5DuAMPRnNtQ4Iw9fTTJK772osmXSUB9xQ2Y8Q1Pt6pgBOQLPQw==",
+            "license": "MIT"
+        },
        "node_modules/ansi-regex": {
            "version": "6.1.0",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -1289,6 +1330,17 @@
                "node": ">= 8"
            }
        },
+        "node_modules/css-selector-tokenizer": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+            "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "fastparse": "^1.1.2"
+            }
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1302,6 +1354,36 @@
                "node": ">=4"
            }
        },
+        "node_modules/culori": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+            "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            }
+        },
+        "node_modules/daisyui": {
+            "version": "4.12.23",
+            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
+            "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "css-selector-tokenizer": "^0.8",
+                "culori": "^3",
+                "picocolors": "^1",
+                "postcss-js": "^4"
+            },
+            "engines": {
+                "node": ">=16.9.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/daisyui"
+            }
+        },
        "node_modules/delayed-stream": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1428,6 +1510,13 @@
                "node": ">= 6"
            }
        },
+        "node_modules/fastparse": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+            "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/fastq": {
            "version": "1.18.0",
            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
@@ -1762,6 +1851,27 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/lodash.castarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+            "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.isplainobject": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/lru-cache": {
            "version": "10.4.3",
            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
--- a/package.json
+++ b/package.json
@@ -7,13 +7,18 @@
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.9",
+        "@tailwindcss/typography": "^0.5.16",
        "autoprefixer": "^10.4.2",
        "axios": "^1.7.4",
        "chokidar": "^4.0.3",
        "concurrently": "^9.0.1",
+        "daisyui": "^4.12.23",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.1.0",
        "vite": "^6.0"
+    },
+    "dependencies": {
+        "air-datepicker": "^3.5.3"
    }
 }
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,20 @@
 import './bootstrap';
+import 'air-datepicker/air-datepicker.css';
+import {Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
+import AirDatepicker from "air-datepicker";
+import localeEs from 'air-datepicker/locale/es';
+
+Alpine.data('datepicker', () => ({
+    init() {
+        new AirDatepicker(this.$el, {
+            locale: localeEs,
+            autoClose: true,
+            buttons: 'clear',
+            onSelect: ({date}) => {
+                this.$el.dispatchEvent(new Event('input'));
+            }
+        })
+    }
+}))
+
+Livewire.start();
--- a/resources/views/components/icons/arrow-left.blade.php
+++ b/resources/views/components/icons/arrow-left.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 12l14 0"/>
+    <path d="M5 12l6 6"/>
+    <path d="M5 12l6 -6"/>
+</svg>
--- a/resources/views/components/icons/cash.blade.php
+++ b/resources/views/components/icons/cash.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"/>
+    <path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
+    <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2"/>
+</svg>
--- a/resources/views/components/icons/credit-card.blade.php
+++ b/resources/views/components/icons/credit-card.blade.php
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"/>
+    <path d="M3 10l18 0"/>
+    <path d="M7 15l.01 0"/>
+    <path d="M11 15l2 0"/>
+</svg>
--- a/resources/views/components/icons/currency-dollar.blade.php
+++ b/resources/views/components/icons/currency-dollar.blade.php
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/>
+    <path d="M12 3v3m0 12v3"/>
+</svg>
--- a/resources/views/components/icons/device-floppy.blade.php
+++ b/resources/views/components/icons/device-floppy.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"/>
+    <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/>
+    <path d="M14 4l0 4l-6 0l0 -4"/>
+</svg>
--- a/resources/views/components/icons/edit.blade.php
+++ b/resources/views/components/icons/edit.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
+    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
+    <path d="M16 5l3 3"/>
+</svg>
--- a/resources/views/components/icons/home.blade.php
+++ b/resources/views/components/icons/home.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 12l-2 0l9 -9l9 9l-2 0"/>
+    <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/>
+    <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/>
+</svg>
--- a/resources/views/components/icons/minus.blade.php
+++ b/resources/views/components/icons/minus.blade.php
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 12l14 0"/>
+</svg>
--- a/resources/views/components/icons/plus-minus.blade.php
+++ b/resources/views/components/icons/plus-minus.blade.php
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M4 7h6"/>
+    <path d="M7 4v6"/>
+    <path d="M20 18h-6"/>
+    <path d="M5 19l14 -14"/>
+</svg>
--- a/resources/views/components/icons/plus.blade.php
+++ b/resources/views/components/icons/plus.blade.php
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 5l0 14"/>
+    <path d="M5 12l14 0"/>
+</svg>
--- a/resources/views/components/icons/report.blade.php
+++ b/resources/views/components/icons/report.blade.php
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"/>
+    <path d="M18 14v4h4"/>
+    <path d="M18 11v-4a2 2 0 0 0 -2 -2h-2"/>
+    <path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/>
+    <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/>
+    <path d="M8 11h4"/>
+    <path d="M8 15h3"/>
+</svg>
--- a/resources/views/components/icons/settings.blade.php
+++ b/resources/views/components/icons/settings.blade.php
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path
+        d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"/>
+    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/>
+</svg>
--- a/resources/views/components/icons/trash.blade.php
+++ b/resources/views/components/icons/trash.blade.php
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    {{$attributes}}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M4 7l16 0"/>
+    <path d="M10 11l0 6"/>
+    <path d="M14 11l0 6"/>
+    <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/>
+    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/>
+</svg>
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="emerald">

 <head>
    <meta charset="UTF-8">
@@ -11,6 +11,9 @@
    <link
        href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+
+
    <tallstackui:script/>
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@@ -27,7 +30,7 @@
        {{ $slot }}
    </main>
 </div>
-@livewireScripts
+@livewireScriptConfig
 </body>

 </html>
--- a/resources/views/components/layouts/login.blade.php
+++ b/resources/views/components/layouts/login.blade.php
@@ -11,6 +11,8 @@
    <link
        href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+
    <tallstackui:script/>
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
--- a/resources/views/components/my-modal.blade.php
+++ b/resources/views/components/my-modal.blade.php
@@ -0,0 +1,37 @@
+<div x-data="{}"
+     x-init="$refs.dialog.addEventListener('close', () => $dispatch('close-modal-{{$name}}'))"
+     x-on:show-modal.window="
+     console.log($event)
+     if($event.detail[0] === '{{$name}}') {
+        $refs.dialog.showModal();
+     }
+     "
+     x-on:hide-modal.window="
+     if($event.detail[0] === '{{$name}}') {
+        $refs.dialog.close();
+     }
+     "
+>
+    <dialog class="modal" x-ref="dialog" wire:ignore>
+        <div class="modal-box">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+                    ✕
+                </button>
+            </form>
+
+            @if(isset($title))
+                <h3 class="text-lg font-bold">{{$title}}</h3>
+            @endif
+
+            {{$slot}}
+            
+            @if(isset($footer))
+                <div class="modal-action">
+                    {{$footer}}
+                </div>
+            @endif
+        </div>
+
+    </dialog>
+</div>
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -3,37 +3,36 @@
        <div
            class="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-4 sm:py-0 sm:h-14 sm:flex-row">
            <span class="text-4xl sm:text-2xl font-semibold text-primary-700">Aureon</span>
-            <x-dropdown>
-                <x-slot:action>
-                    <button
-                        class="flex items-center gap-2 rounded p-1 text-start hover:bg-secondary-50 active:bg-secondary-100"
-                        x-on:click="show = !show">
-                        <img class="h-8 rounded" src="https://api.dicebear.com/9.x/thumbs/svg" alt="avatar"/>
-                        <div>
-                            <p class="text-sm">{{auth()->user()->name}}</p>
-                            <p class="text-xs text-secondary">{{auth()->user()->email}}</p>
-                        </div>
-                    </button>
-                </x-slot:action>
-
-                <form action="{{route('logout')}}" method="POST">
-                    @csrf
-                    <button type="submit" class="w-full">
-                        <x-dropdown.items text="Cerrar Sesión" separator/>
-                    </button>
-                </form>
-            </x-dropdown>
+            <div class="dropdown">
+                <div tabindex="0" role="button" class="btn btn-ghost m-1 text-left">
+                    <img class="h-8 rounded" src="https://api.dicebear.com/9.x/thumbs/svg" alt="avatar"/>
+                    <div class="font-normal">
+                        <p class="text-sm">{{auth()->user()->name}}</p>
+                        <p class="text-xs text-secondary">{{auth()->user()->email}}</p>
+                    </div>
+                </div>
+                <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+                    <li>
+                        <form action="{{route('logout')}}" method="POST">
+                            @csrf
+                            <button type="submit" class="w-full">
+                                Cerrar Sesión
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </div>
        </div>
    </div>
-
-    <div class="border-b">
-        <nav class="container mx-auto flex flex-col sm:h-14 sm:flex-row sm:px-4">
-            <x-navlink icon="home" :route="route('home.index')" :active="Route::is('home.*')" title="Inicio"/>
+    <div class="container mx-auto">
+        <ul class="menu lg:menu-horizontal">
+            <x-navlink icon="home" :route="route('home.index')" :active="Route::is('home.*')"
+                       title="Inicio"/>
            <x-navlink icon="cash" :route="route('cajas.index')" :active="Route::is('cajas.*')" title="Cajas"/>
            <x-navlink icon="report" :route="route('reportes.index')" :active="Route::is('reportes.*')"
                       title="Reportes"/>
            <x-navlink icon="settings" :route="route('configuracion.index')" :active="Route::is('configuracion.*')"
                       title="Configuración"/>
-        </nav>
+        </ul>
    </div>
 </div>
--- a/resources/views/components/navlink.blade.php
+++ b/resources/views/components/navlink.blade.php
@@ -3,11 +3,10 @@
        $active = false;
    }
@endphp
-<a class="{{ $active 
-    ? 'bg-primary text-white hover:bg-primary-600 active:bg-primary-700' 
-    : 'text-secondary-600 hover:bg-secondary-50 active:bg-secondary-100' }} 
-    flex items-center gap-1 px-4 py-2 text-sm"
-   href="{{ $route }}" wire:navigate>
-    <x-icon name="{{ $icon }}" sm />
-    <span>{{ $title }}</span>
-</a>
+
+<li>
+    <a href="{{ $route }}" wire:navigate class="{{$active ? 'active' : ''}}">
+        <x-dynamic-component :component="'icons.'.$icon" class="w-5 h-5"/>
+        {{$title}}
+    </a>
+</li>
--- a/resources/views/livewire/cajas/components/calculo-fondo-component.blade.php
+++ b/resources/views/livewire/cajas/components/calculo-fondo-component.blade.php
@@ -1,16 +1,30 @@
@use(Illuminate\Support\Number)
 <div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(2,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
-        <x-input label="Total" wire:model="valor" invalidate/>
-        <x-input label="Descripción" wire:model="descripcion" invalidate/>

-        <x-button type="submit">
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Total</span>
+            </div>
+            <input type="number" class="input input-bordered" wire:model="valor"/>
+        </label>
+
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Descripción</span>
+            </div>
+            <input class="input input-bordered" wire:model="descripcion"/>
+        </label>
+
+        <button class="btn" type="submit">
            @if($this->currentCalculo)
+                <x-icons.device-floppy/>
                Guardar
            @else
+                <x-icons.plus/>
                Agregar
            @endif
-        </x-button>
+        </button>

        <p class="text-sm font-medium text-red-500">
            @error('valor'){{$message}}@enderror
@@ -20,20 +34,56 @@
        </p>

    </form>
-    <x-table striped :headers="$this->headers" :rows="$this->rows">
-        @interact('column_valor', $row)
-        {{Number::currency($row->valor)}}
-        @endinteract
-        @interact('column_action', $row)
-        <x-button.circle icon="edit" wire:click="edit('{{$row->id}}')" :key="uniqid()"/>
-        <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-        @endinteract
-    </x-table>
+
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Total</th>
+                <th>Descripción</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{Number::currency($row->valor)}}</td>
+                    <td>{{$row->descripcion}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <button class="btn btn-circle btn-sm" wire:click="edit('{{$row->id}}')">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </button>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+    </div>

    <div class="mt-4 grid lg:grid-cols-3 gap-4">
-        <x-input label="Fondo" type="number" wire:model.live.debounce="fondo"/>
-        <x-input label="Suma de Dinero" value="{{Number::currency($this->totalCalculo)}}" readonly/>
-        <x-input label="Deposito" value="{{Number::currency($this->totalCalculo - (is_numeric($fondo) ? $fondo : 0))}}"
-                 readonly/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Fondo</span>
+            </div>
+            <input type="number" class="input input-bordered" wire:model.live="fondo"/>
+        </label>
+
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Suma de Dinero</span>
+            </div>
+            <input class="input input-bordered bg-neutral-content" value="{{Number::currency($this->totalCalculo)}}"
+                   readonly/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Deposito</span>
+            </div>
+            <input class="input input-bordered bg-neutral-content"
+                   value="{{Number::currency($this->totalCalculo - (is_numeric($fondo) ? $fondo : 0))}}" readonly/>
+        </label>
    </div>
 </div>
--- a/resources/views/livewire/cajas/components/documentos-component.blade.php
+++ b/resources/views/livewire/cajas/components/documentos-component.blade.php
@@ -1,19 +1,39 @@
@use(Illuminate\Support\Number)
 <div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(3,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
-        <x-select.styled label="Tipo Documento" :options="$this->tipos" wire:model="tipo" id="tipo" required
-                         searchable invalidate/>
-        <x-input label="Descripción" wire:model="descripcion" invalidate/>
-        <x-input label="Total" wire:model="valor" invalidate/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Tipo Documento</span>
+            </div>
+            <select class="select select-bordered" required wire:model="tipo">
+                @foreach($this->tipos as $tipo)
+                    <option>{{$tipo}}</option>
+                @endforeach
+            </select>
+        </label>

-        <x-button type="submit">
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Descripción</span>
+            </div>
+            <input class="input input-bordered" wire:model="descripcion"/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Total</span>
+            </div>
+            <input type="number" class="input input-bordered" wire:model="valor"/>
+        </label>
+
+        <button class="btn" type="submit">
            @if($this->currentDocumento)
+                <x-icons.device-floppy/>
                Guardar
            @else
+                <x-icons.plus/>
                Agregar
            @endif
-        </x-button>
-
+        </button>

        <p class="text-sm font-medium text-red-500">
            @error('tipo'){{$message}}@enderror
@@ -24,17 +44,38 @@
        <p class="text-sm font-medium text-red-500">
            @error('valor'){{$message}}@enderror
        </p>
-
    </form>
-    <x-table striped :headers="$this->headers" :rows="$this->rows">
-        @interact('column_valor', $row)
-        {{Number::currency($row->valor)}}
-        @endinteract
-        @interact('column_action', $row)
-        <x-button.circle icon="edit" wire:click="edit('{{$row->id}}')" :key="uniqid()"/>
-        <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-        @endinteract
-    </x-table>
+
+
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Tipo Documento</th>
+                <th>Descripción</th>
+                <th>Total</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{$row->tipo_documento}}</td>
+                    <td>{{$row->descripcion}}</td>
+                    <td>{{Number::currency($row->valor)}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <button class="btn btn-circle btn-sm" wire:click="edit('{{$row->id}}')">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </button>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+    </div>

    <div class="mt-4">
        <p class="text-xl">Documentos Totales: <span class="font-bold">{{$this->totalDocumentos}}</span></p>
--- a/resources/views/livewire/cajas/components/efectivo-component.blade.php
+++ b/resources/views/livewire/cajas/components/efectivo-component.blade.php
@@ -2,26 +2,37 @@

 <div>
    <div class="grid grid-cols-[auto,minmax(0,1fr)] gap-4 items-baseline">
-        <x-label>$20.000</x-label>
-        <x-input type="number" wire:model.blur="veinte_mil"/>
-        <x-label>$10.000</x-label>
-        <x-input type="number" wire:model.blur="diez_mil"/>
-        <x-label>$5.000</x-label>
-        <x-input type="number" wire:model.blur="cinco_mil"/>
-        <x-label>$2.000</x-label>
-        <x-input type="number" wire:model.blur="dos_mil"/>
-        <x-label>$1.000</x-label>
-        <x-input type="number" wire:model.blur="mil"/>
-        <x-label>$500</x-label>
-        <x-input type="number" wire:model.blur="quinientos"/>
-        <x-label>$100</x-label>
-        <x-input type="number" wire:model.blur="cien"/>
-        <x-label>$50</x-label>
-        <x-input type="number" wire:model.blur="cincuenta"/>
-        <x-label>$10</x-label>
-        <x-input type="number" wire:model.blur="diez"/>
-        <hr class="border-b my-4 col-span-full"/>
-        <x-label>Total</x-label>
-        <x-input value="{{Number::currency($this->totalEfectivo)}}" readonly/>
+        <label class="label-text" for="veinte_mil">$20.000</label>
+        <input class="input input-bordered" type="number" id="veinte_mil" wire:model.blur="veinte_mil"/>
+
+        <label class="label-text" for="diez_mil">$10.000</label>
+        <input class="input input-bordered" type="number" id="diez_mil" wire:model.blur="diez_mil"/>
+
+        <label class="label-text" for="cinco_mil">$5.000</label>
+        <input class="input input-bordered" type="number" id="cinco_mil" wire:model.blur="cinco_mil"/>
+
+        <label class="label-text" for="dos_mil">$2.000</label>
+        <input class="input input-bordered" type="number" id="dos_mil" wire:model.blur="dos_mil"/>
+
+        <label class="label-text" for="mil">$1.000</label>
+        <input class="input input-bordered" type="number" id="mil" wire:model.blur="mil"/>
+
+        <label class="label-text" for="quinientos">$500</label>
+        <input class="input input-bordered" type="number" id="quinientos" wire:model.blur="quinientos"/>
+
+        <label class="label-text" for="cien">$100</label>
+        <input class="input input-bordered" type="number" id="cien" wire:model.blur="cien"/>
+
+        <label class="label-text" for="cincuenta">$50</label>
+        <input class="input input-bordered" type="number" id="cincuenta" wire:model.blur="cincuenta"/>
+
+        <label class="label-text" for="diez">$10</label>
+        <input class="input input-bordered" type="number" id="diez" wire:model.blur="diez"/>
+
+        <div class="divider col-span-full"></div>
+
+        <label class="label-text">Total</label>
+        <input class="input input-bordered bg-neutral-content" value="{{Number::currency($this->totalEfectivo)}}"
+               readonly/>
    </div>
 </div>
--- a/resources/views/livewire/cajas/components/egresos-component.blade.php
+++ b/resources/views/livewire/cajas/components/egresos-component.blade.php
@@ -1,20 +1,44 @@
@use(Illuminate\Support\Number)
 <div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(4,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
-        <x-select.styled label="Tipo Documento" :options="$this->tipos" wire:model="tipo" id="tipo" required
-                         searchable invalidate/>
-        <x-input label="Nº Documento" wire:model="numero" invalidate/>
-        <x-input label="Descripción" wire:model="descripcion" invalidate/>
-        <x-input label="Total" wire:model="valor" invalidate/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Tipo Documento</span>
+            </div>
+            <select class="select select-bordered" required wire:model="tipo">
+                @foreach($this->tipos as $tipo)
+                    <option>{{$tipo}}</option>
+                @endforeach
+            </select>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Nº Documento</span>
+            </div>
+            <input class="input input-bordered" wire:model="numero"/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Descripción</span>
+            </div>
+            <input class="input input-bordered" wire:model="descripcion"/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Total</span>
+            </div>
+            <input type="number" class="input input-bordered" wire:model="valor"/>
+        </label>

-        <x-button type="submit">
+        <button class="btn" type="submit">
            @if($this->currentEgreso)
+                <x-icons.device-floppy/>
                Guardar
            @else
+                <x-icons.plus/>
                Agregar
            @endif
-        </x-button>
-
+        </button>

        <p class="text-sm font-medium text-red-500">
            @error('tipo'){{$message}}@enderror
@@ -30,15 +54,38 @@
        </p>

    </form>
-    <x-table striped :headers="$this->headers" :rows="$this->rows">
-        @interact('column_valor', $row)
-        {{Number::currency($row->valor)}}
-        @endinteract
-        @interact('column_action', $row)
-        <x-button.circle icon="edit" wire:click="edit('{{$row->id}}')" :key="uniqid()"/>
-        <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-        @endinteract
-    </x-table>
+
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Tipo Egreso</th>
+                <th>Número Documento</th>
+                <th>Descripción</th>
+                <th>Total</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{$row->tipo_egreso}}</td>
+                    <td>{{$row->numero}}</td>
+                    <td>{{$row->descripcion}}</td>
+                    <td>{{Number::currency($row->valor)}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <button class="btn btn-circle btn-sm" wire:click="edit('{{$row->id}}')">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </button>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+    </div>

    <div class="mt-4">
        <p class="text-xl">Egresos Totales: <span class="font-bold">{{$this->totalEgresos}}</span></p>
--- a/resources/views/livewire/cajas/components/ingresos-component.blade.php
+++ b/resources/views/livewire/cajas/components/ingresos-component.blade.php
@@ -1,19 +1,44 @@
+@use(Illuminate\Support\Number)
 <div>
    <form wire:submit.prevent="save" class="grid lg:grid-cols-[repeat(4,minmax(0,2fr))_1fr] gap-2 mb-4 items-end">
-        <x-select.styled label="Tipo Documento" :options="$this->tipos" wire:model="tipo" required searchable
-                         invalidate/>
-        <x-input type="number" label="Documento Inicial" wire:model="ingreso_inicial" min="0" invalidate/>
-        <x-input type="number" label="Documento Final" wire:model="ingreso_final" min="0" invalidate/>
-        <x-input type="number" label="Total" wire:model="total" min="0" invalidate/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Tipo Documento</span>
+            </div>
+            <select class="select select-bordered  " required wire:model="tipo">
+                @foreach($this->tipos as $tipo)
+                    <option>{{$tipo}}</option>
+                @endforeach
+            </select>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Documento Inicial</span>
+            </div>
+            <input type="number" class="input  input-bordered" wire:model="ingreso_inicial" min="0"/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Documento Final</span>
+            </div>
+            <input type="number" class="input  input-bordered" wire:model="ingreso_final" min="0"/>
+        </label>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Total</span>
+            </div>
+            <input type="number" class="input  input-bordered" wire:model="total" min="0"/>
+        </label>

-        <x-button type="submit">
+        <button class="btn " type="submit">
            @if($this->currentIngreso)
+                <x-icons.device-floppy/>
                Guardar
            @else
+                <x-icons.plus/>
                Agregar
            @endif
-        </x-button>
-
+        </button>

        <p class="text-sm font-medium text-red-500">
            @error('tipo'){{$message}}@enderror
@@ -29,21 +54,38 @@
        </p>

    </form>
-    <x-table striped :headers="$this->headers" :rows="$this->rows">
-        @interact('column_ingreso_inicial', $row)
-        {{\Illuminate\Support\Number::format($row->ingreso_inicial)}}
-        @endinteract
-        @interact('column_ingreso_final', $row)
-        {{\Illuminate\Support\Number::format($row->ingreso_final)}}
-        @endinteract
-        @interact('column_total', $row)
-        {{\Illuminate\Support\Number::currency($row->total)}}
-        @endinteract
-        @interact('column_action', $row)
-        <x-button.circle icon="edit" wire:click="edit('{{$row->id}}')" :key="uniqid()"/>
-        <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-        @endinteract
-    </x-table>
+
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Tipo Documento</th>
+                <th>Documento Inicial</th>
+                <th>Documento Final</th>
+                <th>Total</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{$row->tipo_ingreso}}</td>
+                    <td>{{Number::format($row->ingreso_inicial)}}</td>
+                    <td>{{Number::format($row->ingreso_final)}}</td>
+                    <td>{{Number::currency($row->total)}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <button class="btn btn-circle btn-sm" wire:click="edit('{{$row->id}}')">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </button>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
+    </div>

    <div class="mt-4">
        <p class="text-xl">Ingresos Totales: <span class="font-bold">{{$this->totalIngresos}}</span></p>
--- a/resources/views/livewire/cajas/edit.blade.php
+++ b/resources/views/livewire/cajas/edit.blade.php
@@ -5,69 +5,132 @@
            {{$this->turno ? "Editar caja" : "Registrar Caja"}}
        </x-title>

-        <x-button icon="arrow-left" color="secondary" wire:navigate href="{{route('cajas.index')}}">
+        <button class="btn" wire:navigate href="{{route('cajas.index')}}">
+            <x-icons.arrow-left/>
            Volver
-        </x-button>
+        </button>
    </div>

    <div class="flex gap-8 mb-4">
        <div>
-            <x-label>Fecha</x-label>
-            <p class="font-bold text-secondary">{{$turno->fecha->format('d-m-Y')}}</p>
+            <p>Fecha</p>
+            <p class="font-bold">{{$turno->fecha->format('d-m-Y')}}</p>
        </div>
        <div>
-            <x-label>Caja</x-label>
-            <p class="font-bold text-secondary">{{$turno->numero_caja}}</p>
+            <p>Caja</p>
+            <p class="font-bold">{{$turno->numero_caja}}</p>
        </div>
        <div>
-            <x-label>Turno</x-label>
-            <p class="font-bold text-secondary">{{$turno->numero_turno}}</p>
+            <p>Turno</p>
+            <p class="font-bold">{{$turno->numero_turno}}</p>
        </div>
    </div>
-
    <div class="grid grid-cols-[minmax(0,4fr)_minmax(0,1fr)] gap-4 items-start">
-        <x-tab wire:model="tab">
-            <x-tab.items tab="Ingresos">
-                <x-slot:left>
-                    <x-icon name="plus" class="w-4 h-4"/>
-                </x-slot:left>
-                <livewire:cajas.components.ingresos-component :turno="$turno"/>
-            </x-tab.items>
-            <x-tab.items tab="Egresos">
-                <x-slot:left>
-                    <x-icon name="minus" class="w-4 h-4"/>
-                </x-slot:left>
-                <livewire:cajas.components.egresos-component :turno="$turno"/>
-            </x-tab.items>
-            <x-tab.items tab="Documentos">
-                <x-slot:left>
-                    <x-icon name="credit-card" class="w-4 h-4"/>
-                </x-slot:left>
-                <livewire:cajas.components.documentos-component :turno="$turno"/>
-            </x-tab.items>
-            <x-tab.items tab="Calculo de Fondo">
-                <x-slot:left>
-                    <x-icon name="plus-minus" class="w-4 h-4"/>
-                </x-slot:left>
-                <livewire:cajas.components.calculo-fondo-component :turno="$turno"/>
-            </x-tab.items>
-            <x-tab.items tab="Efectivo">
-                <x-slot:left>
-                    <x-icon name="currency-dollar" class="w-4 h-4"/>
-                </x-slot:left>
-                <livewire:cajas.components.efectivo-component :turno="$turno"/>
-            </x-tab.items>
-        </x-tab>
+        <div x-data="{tab: @entangle('tab').live}">
+            <div role="tablist" class="tabs tabs-lifted">
+                <button role="tab" class="tab gap-2"
+                        :class="tab === 'Ingresos' ? 'tab-active' : ''"
+                        @click="tab = 'Ingresos'">
+                    <x-icons.plus class="w-5 h-5"/>
+                    Ingresos
+                </button>
+                <button role="tab" class="tab gap-2"
+                        :class="tab === 'Egresos' ? 'tab-active' : ''"
+                        @click="tab = 'Egresos'">
+                    <x-icons.minus class="w-5 h-5"/>
+                    Egresos
+                </button>
+                <button role="tab" class="tab gap-2"
+                        :class="tab === 'Documentos' ? 'tab-active' : ''"
+                        @click="tab = 'Documentos'">
+                    <x-icons.credit-card class="w-5 h-5"/>
+                    Documentos
+                </button>
+                <button role="tab" class="tab gap-2"
+                        :class="tab === 'Calculo de Fondo' ? 'tab-active' : ''"
+                        @click="tab = 'Calculo de Fondo'">
+                    <x-icons.plus-minus class="w-5 h-5"/>
+                    Calculo de Fondo
+                </button>
+                <button role="tab" class="tab gap-2"
+                        :class="tab === 'Efectivo' ? 'tab-active' : ''"
+                        @click="tab = 'Efectivo'">
+                    <x-icons.currency-dollar class="w-5 h-5"/>
+                    Efectivo
+                </button>
+            </div>
+            <div class="border border-base-300 border-t-0">
+                <div x-show="tab === 'Ingresos'" x-cloak class="p-4">
+                    <livewire:cajas.components.ingresos-component :turno="$turno"/>
+                </div>
+                <div x-show="tab === 'Egresos'" x-cloak class="p-4">
+                    <livewire:cajas.components.egresos-component :turno="$turno"/>
+                </div>
+                <div x-show="tab === 'Documentos'" x-cloak class="p-4">
+                    <livewire:cajas.components.documentos-component :turno="$turno"/>
+                </div>
+                <div x-show="tab === 'Calculo de Fondo'" x-cloak class="p-4">
+                    <livewire:cajas.components.calculo-fondo-component :turno="$turno"/>
+                </div>
+                <div x-show="tab === 'Efectivo'" x-cloak class="p-4">
+                    <livewire:cajas.components.efectivo-component :turno="$turno"/>
+                </div>
+            </div>
+        </div>

-        <x-card class="space-y-4">
-            <x-input label="Total Efectivo" value="{{Number::currency($this->totalEfectivo)}}" readonly/>
-            <x-input label="Total Egresos" value="{{Number::currency($this->totalEgresos)}}" readonly/>
-            <x-input label="Total Documento" value="{{Number::currency($this->totalDocumentos)}}" readonly/>
-            <hr class="border-b-1 my-4"/>
-            <x-input label="Rendido" value="{{Number::currency($this->rendido)}}" readonly/>
-            <x-input label="Debe Rendir" value="{{Number::currency($this->debeRendir)}}" readonly/>
-            <x-input label="Diferencia" class="font-bold {{$this->diferencia < 0 ? 'text-red-500' : 'text-green-500'}}"
-                     value="{{Number::currency($this->diferencia)}}" readonly/>
-        </x-card>
+        <div class="space-y-4">
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Total Efectivo</span>
+                </div>
+                <input type="text" class="input input-bordered bg-neutral-content"
+                       value="{{Number::currency($this->totalEfectivo)}}"
+                       readonly>
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Total Egresos</span>
+                </div>
+                <input type="text" class="input input-bordered bg-neutral-content"
+                       value="{{Number::currency($this->totalEgresos)}}"
+                       readonly>
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Total Documentos</span>
+                </div>
+                <input type="text" class="input input-bordered bg-neutral-content"
+                       value="{{Number::currency($this->totalDocumentos)}}"
+                       readonly>
+            </label>
+
+            <div class="divider"></div>
+
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Rendido</span>
+                </div>
+                <input type="text" class="input input-bordered bg-neutral-content"
+                       value="{{Number::currency($this->rendido)}}"
+                       readonly>
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Debe Rendir</span>
+                </div>
+                <input type="text" class="input input-bordered bg-neutral-content"
+                       value="{{Number::currency($this->debeRendir)}}"
+                       readonly>
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Diferencia</span>
+                </div>
+                <input type="text"
+                       class="input input-bordered bg-neutral-content {{$this->diferencia < 0 ? 'text-red-500' : 'text-green-500'}}"
+                       value="{{Number::currency($this->diferencia)}}"
+                       readonly>
+            </label>
+        </div>
    </div>
 </div>
--- a/resources/views/livewire/cajas/index.blade.php
+++ b/resources/views/livewire/cajas/index.blade.php
@@ -1,47 +1,100 @@
@use(Illuminate\Support\Number)
 <div>
-
    <div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4">
        <x-title>Cajas</x-title>
-        <x-button wire:click="createTurno" icon="plus">Registrar Caja</x-button>
+        <button class="btn" wire:click="createTurno">
+            <x-icons.plus/>
+            Registrar Caja
+        </button>
    </div>

-    <div class="flex">
-        <x-date label="Fecha" wire:model.live="searchFecha" helpers/>
+    <div class="flex mb-4">
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Fecha</span>
+            </div>
+            <input type="date" class="input input-bordered" wire:model.live="searchFecha"/>
+            @error('fecha')
+            <p class="text-sm text-error">{{ $message }}</p>
+            @enderror
+        </label>
    </div>

-    <div class="mt-4">
-        <x-table striped :headers="$this->headers" :rows="$this->rows" paginate>
-            @interact('column_fecha', $row)
-            {{$row->fecha->format('d-m-Y')}}
-            @endinteract
-            @interact('column_ingresos', $row)
-            {{Number::currency($row->ingresos()->sum('total'))}}
-            @endinteract
-            @interact('column_egresos', $row)
-            {{Number::currency($row->egresos()->sum('valor'))}}
-            @endinteract
-            @interact('column_arqueo', $row)
-            <span class="font-bold {{$row->arqueo >= 0 ? 'text-green-500' : 'text-red-500'}}">
-                {{Number::currency($row->arqueo)}}
-            </span>
-            @endinteract
-            @interact('column_action', $row)
-            <x-button.circle icon="edit" :href="route('cajas.edit', $row->id)" wire:navigate :key="uniqid()"/>
-            <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-            @endinteract
-        </x-table>
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Fecha</th>
+                <th>Caja</th>
+                <th>Turno</th>
+                <th>Ingresos</th>
+                <th>Egresos</th>
+                <th>Arqueo</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{$row->fecha->format('d-m-Y')}}</td>
+                    <td>{{$row->numero_caja}}</td>
+                    <td>{{$row->numero_turno}}</td>
+                    <td>{{Number::currency($row->ingresos()->sum('total'))}}</td>
+                    <td>{{Number::currency($row->egresos()->sum('valor'))}}</td>
+                    <td class="{{$row->arqueo >= 0 ? 'text-green-500' : 'text-red-500'}}">{{Number::currency($row->arqueo)}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <a class="btn btn-circle btn-sm" wire:navigate href="{{route('cajas.edit', $row->id)}}">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </a>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
    </div>

-    <x-modal title="Registrar Caja" wire center blur>
+    <x-my-modal name="turno" title="Registrar Caja">
        <div class="flex flex-col gap-2">
-            <x-date label="Fecha" wire:model="fecha" format="DD-MM-YYYY"/>
-            <x-input type="number" label="Caja" wire:model="caja"/>
-            <x-input type="number" label="Turno" wire:model="turno"/>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Fecha</span>
+                </div>
+                <input type="date" class="input input-bordered" wire:model.live="fecha"/>
+                @error('fecha')
+                <p class="text-sm text-error">{{ $message }}</p>
+                @enderror
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Caja</span>
+                </div>
+                <input type="number" class="input input-bordered" wire:model="caja"/>
+                @error('caja')
+                <p class="text-sm text-error">{{ $message }}</p>
+                @enderror
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Turno</span>
+                </div>
+                <input type="number" class="input input-bordered" wire:model="turno"/>
+                @error('turno')
+                <p class="text-sm text-error">{{ $message }}</p>
+                @enderror
+            </label>
        </div>
        <x-slot:footer>
-            <x-button color="secondary" icon="arrow-left" wire:click="closeTurnoModal">Volver</x-button>
-            <x-button icon="plus" wire:click="storeTurno">Registrar Caja</x-button>
+            <button class="btn" wire:click="closeTurnoModal">
+                <x-icons.arrow-left/>
+                Volver
+            </button>
+            <button class="btn btn-primary" wire:click="storeTurno">
+                <x-icons.device-floppy/>
+                Registrar Caja
+            </button>
        </x-slot:footer>
-    </x-modal>
+    </x-my-modal>
 </div>
--- a/resources/views/livewire/usuarios/edit.blade.php
+++ b/resources/views/livewire/usuarios/edit.blade.php
@@ -7,32 +7,66 @@
        @endif
    </div>

-
    <form wire:submit.prevent="save">
-        <x-card class="space-y-4">
-            <x-input label="Nombre" wire:model="name"/>
-            <x-input label="Correo Electrónico" wire:model="email"/>
-            <x-select.styled label="Roles" :options="$this->availableRoles" select="label:title|value:id" multiple
-                             wire:model="roles"/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Nombre</span>
+            </div>
+            <input class="input input-bordered" wire:model="name"/>
+        </label>
+
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Correo Electrónico</span>
+            </div>
+            <input type="email" class="input input-bordered" wire:model="email"/>
+        </label>


-            @if($this->user)
-                <x-checkbox label="Cambiar contraseña" wire:model.live="change_password"/>
-            @endif
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Roles</span>
+            </div>
+            <select class="select select-bordered" required wire:model="roles" multiple>
+                @foreach($this->availableRoles as $role)
+                    <option value="{{$role->id}}">{{$role->title}}</option>
+                @endforeach
+            </select>
+        </label>

-            @if(!$this->user || $change_password)
-                <x-password label="Contraseña" wire:model="password"/>
-                <x-password label="Confirmación de la contraseña" wire:model="password_confirmation"/>
-            @endif
+        @if($this->user)
+            <div class="form-control">
+                <label class="label cursor-pointer w-0 whitespace-nowrap space-x-4">
+                    <span class="label-text">Cambiar contraseña</span>
+                    <input type="checkbox" class="toggle" wire:model.live="change_password"/>
+                </label>
+            </div>
+        @endif

-            <x-slot:footer>
-                <x-button wire:navigate :href="route('usuarios.index')" icon="arrow-left" color="secondary">
-                    Volver
-                </x-button>
-                <x-button type="submit" icon="plus">
-                    Guardar
-                </x-button>
-            </x-slot:footer>
-        </x-card>
+        @if(!$this->user || $change_password)
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Contraseña</span>
+                </div>
+                <input type="password" class="input input-bordered" wire:model="password"/>
+            </label>
+            <label class="form-control">
+                <div class="label">
+                    <span class="label-text">Confirmación de la contraseña</span>
+                </div>
+                <input type="password" class="input input-bordered" wire:model="password_confirmation"/>
+            </label>
+        @endif
+
+        <div class="flex justify-end gap-2 mt-4">
+            <a wire:navigate href="{{route('usuarios.index')}}" class="btn">
+                <x-icons.arrow-left/>
+                Volver
+            </a>
+            <button type="submit" class="btn btn-primary">
+                <x-icons.plus/>
+                Guardar
+            </button>
+        </div>
    </form>
 </div>
--- a/resources/views/livewire/usuarios/index.blade.php
+++ b/resources/views/livewire/usuarios/index.blade.php
@@ -1,22 +1,43 @@
-@php use App\Models\User; @endphp
+@use(App\Models\User)
+
 <div>
    <div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4">
        <x-title>Usuarios</x-title>
+
        @can('create', User::class)
-            <x-button :href="route('usuarios.create')" wire:navigate icon="plus">Registrar Usuario</x-button>
+            <button class="btn" href="{{route('usuarios.create')}}" wire:navigate>
+                <x-icons.plus/>
+                Registrar Usuario
+            </button>
        @endcan
    </div>

-    <div class="mt-4">
-        <x-table striped :headers="$this->headers" :rows="$this->rows" paginate>
-            @interact('column_action', $row)
-            @can('update', $row)
-                <x-button.circle icon="edit" :href="route('usuarios.edit', $row->id)" wire:navigate :key="uniqid()"/>
-            @endcan
-            @can('delete', $row)
-                <x-button.circle icon="trash" color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()"/>
-            @endcan
-            @endinteract
-        </x-table>
+
+    <div class="overflox-x-auto">
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Nombre</th>
+                <th>Email</th>
+                <th class="text-end">Acciones</th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($this->rows as $row)
+                <tr>
+                    <td>{{$row->name}}</td>
+                    <td>{{$row->email}}</td>
+                    <td class="w-0 whitespace-nowrap">
+                        <a class="btn btn-circle btn-sm" wire:navigate href="{{route('usuarios.edit', $row->id)}}">
+                            <x-icons.edit class="w-5 h-5"/>
+                        </a>
+                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
+                            <x-icons.trash class="w-5 h-5"/>
+                        </button>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+        </table>
    </div>
 </div>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,4 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
-import colors from 'tailwindcss/colors';
-import forms from '@tailwindcss/forms';

 /** @type {import('tailwindcss').Config} */
 export default {
@@ -20,22 +18,47 @@ export default {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
                serif: ['Domine', ...defaultTheme.fontFamily.serif],
            },
-            colors: {
-                'primary': {
-                    DEFAULT: colors.blue['500'],
-                    ...colors.blue,
-                },
-                'secondary': {
-                    DEFAULT: colors.slate['500'],
-                    ...colors.slate,
-                },
-                'dark': {
-                    DEFAULT: colors.slate['700'],
-                    ...colors.slate
-                }
-            }
        },
    },

-    plugins: [forms],
+    daisyui: {
+        themes: [
+            "light",
+            "dark",
+            "cupcake",
+            "bumblebee",
+            "emerald",
+            "corporate",
+            "synthwave",
+            "retro",
+            "cyberpunk",
+            "valentine",
+            "halloween",
+            "garden",
+            "forest",
+            "aqua",
+            "lofi",
+            "pastel",
+            "fantasy",
+            "wireframe",
+            "black",
+            "luxury",
+            "dracula",
+            "cmyk",
+            "autumn",
+            "business",
+            "acid",
+            "lemonade",
+            "night",
+            "coffee",
+            "winter",
+            "dim",
+            "nord",
+            "sunset",
+        ],
+    },
+    plugins: [
+        require('@tailwindcss/typography'),
+        require('daisyui'),
+    ],
 };
Author	SHA1	Message	Date
Daniel	b7a79e9479	Intentando integrar con air-datepicker	2025-01-26 14:36:46 -03:00
Daniel	85ae2d033e	Creando modal propio	2025-01-26 03:25:54 -03:00
Daniel	6a1458304a	Mas ajustes de estilos y iconos	2025-01-26 02:21:06 -03:00
Daniel	e33d1ddade	Agregando daisy ui y cambiando componentes por las alternativas de daisy	2025-01-26 01:11:47 -03:00