lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: modales contabilidad/websms alineados con diseño del proyecto (text-slate-800, gap-4, SVG, mt-5, color input)

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-06-22 16:04:22 -05:00
parent 39f56372c3
commit 24c4f6b26f
8 changed files with 194 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/view/contabilidad/cuentas.html
+34 -8
View File
@@ -5,7 +5,14 @@
<h1 class="text-2xl font-bold text-slate-800">Categorías contables</h1>
<p class="text-sm text-slate-500 mt-1">Plan de cuentas para clasificar transacciones</p>
</div>
<button @click="openCreate()" class="btn-primary flex items-center gap-2">Nueva categoría</button>
<button @click="openCreate()" class="btn-primary flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
Nueva categoría
</button>
</div>
<div class="mb-4">
<input x-model="search" @input.debounce.400ms="page=1;load()" type="text" placeholder="Buscar por nombre o código..." class="input-field w-full max-w-sm">
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-x-auto">
@@ -57,10 +64,10 @@
<!-- Modal -->
<div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 p-6">
<h2 class="text-lg font-bold mb-4" x-text="editId ? 'Editar categoría' : 'Nueva categoría'"></h2>
<div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
<h2 class="text-lg font-bold text-slate-800 mb-4" x-text="editId ? 'Editar categoría' : 'Nueva categoría'"></h2>
<form @submit.prevent="save()">
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="label">Código</label>
<input x-model="form.codigo" class="input-field w-full" placeholder="ING-FAC">
@@ -78,7 +85,7 @@
</div>
<div>
<label class="label">Color</label>
<input x-model="form.color" type="color" class="input-field w-full h-10">
<input x-model="form.color" type="color" class="h-10 w-full rounded border border-slate-200 cursor-pointer">
</div>
<div class="flex items-center gap-2 pt-5">
<input type="checkbox" x-model="form.activo" id="ca" class="w-4 h-4">
@@ -96,7 +103,8 @@
<div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
<h2 class="text-lg font-bold mb-2">¿Eliminar categoría?</h2>
<h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar categoría?</h2>
<p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-end gap-3">
<button @click="showDelete=false" class="btn-secondary">Cancelar</button>
<button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -109,7 +117,7 @@
<script>
function cuentasApp() {
return {
items:[], total:0, totalPages:1, page:1,
items:[], total:0, totalPages:1, page:1, search:'',
loading:false, saving:false, showModal:false, showDelete:false,
editId:null, deleteId:null, error:'',
form:{ codigo:'', nombre:'', tipo:'egreso', color:'#3b82f6', activo:true },
@@ -119,7 +127,7 @@ function cuentasApp() {
async load(){
this.loading=true;
try {
const r=await axios.get(`/app/contabilidad/cuentas/list?page=${this.page}`);
const r=await axios.get(`/app/contabilidad/cuentas/list?page=${this.page}&search=${encodeURIComponent(this.search)}`);
this.items=r.data.items; this.total=r.data.total; this.totalPages=r.data.totalPages;
} finally{ this.loading=false; }
},
@@ -148,3 +156,21 @@ function cuentasApp() {
}
}
</script>
<style>
.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
.btn-primary:hover { background:#6d8c24; }
.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
.btn-icon:hover { background:#f1f5f9; }
.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
.input-field:focus { border-color:#8eb02f; }
.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-slate { background:#f1f5f9; color:#475569; }
.badge-red { background:#fee2e2; color:#991b1b; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
</style>