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

up

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-04-29 23:36:30 -05:00
parent 9d4c4dba65
commit f787821444
30 changed files with 3738 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/auth/login.html
+4 -5
View File
@@ -77,12 +77,11 @@
</div>
<!-- Submit -->
<button type="submit" :disabled="loading"
<button type="submit"
:disabled="loading"
class="w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all mt-2"
style="background-color:#8eb02f"
:style="loading ? 'opacity:0.7; cursor:not-allowed' : ''"
onmouseover="if(!this.disabled) this.style.backgroundColor='#6d8c24'"
onmouseout="if(!this.disabled) this.style.backgroundColor='#8eb02f'">
:class="loading ? 'opacity-70 cursor-not-allowed' : 'hover:opacity-90'"
style="background-color:#8eb02f">
<span x-show="!loading" class="flex items-center justify-center gap-2">
Iniciar sesión
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
resources/views/renovaciones/clientes.html
+207
View File
@@ -0,0 +1,207 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Clientes</h1>
<p class="text-sm text-gray-500">Gestión de clientes y sus datos de contacto</p>
</div>
<div class="flex items-center gap-2 mt-3 md:mt-0">
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 text-sm"
x-model="search" @input.debounce.400ms="loadData()" />
<button @click="addModal = true" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nuevo</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Nombre</th>
<th class="py-2 px-3">Empresa</th>
<th class="py-2 px-3">Email</th>
<th class="py-2 px-3">Teléfono</th>
<th class="py-2 px-3">Estado</th>
<th class="py-2 px-3 w-24"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
<td class="py-2 px-3 text-gray-500" x-text="d.empresa||'—'"></td>
<td class="py-2 px-3" x-text="d.email"></td>
<td class="py-2 px-3" x-text="d.telefono||'—'"></td>
<td class="py-2 px-3">
<span :class="d.activo ? 'text-green-600' : 'text-red-500'" x-text="d.activo ? 'Activo' : 'Inactivo'"></span>
</td>
<td class="py-2 px-3">
<div class="flex gap-2">
<button @click="openEdit(d)" class="text-gray-400 hover:text-[#8eb02f]">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button @click="openDelete(d)" class="text-gray-400 hover:text-red-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="6" class="text-center text-gray-400 py-8">Sin registros</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4 text-sm text-gray-500">
<span>Total: <span x-text="total"></span></span>
<div class="flex gap-1">
<button @click="prevPage()" :disabled="page===1" class="px-3 py-1 rounded border disabled:opacity-40">‹</button>
<span class="px-3 py-1" x-text="'Pág. '+page+' / '+totalPages"></span>
<button @click="nextPage()" :disabled="page>=totalPages" class="px-3 py-1 rounded border disabled:opacity-40">›</button>
</div>
</div>
</div>
<!-- Modal Crear / Editar -->
<div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 p-6" @click.stop>
<h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Cliente' : 'Nuevo Cliente'"></h2>
<form @submit.prevent="save()">
<div class="grid grid-cols-2 gap-3">
<div>
<label class="text-xs font-medium text-gray-600">Nombre *</label>
<input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Empresa</label>
<input x-model="form.empresa" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Email *</label>
<input x-model="form.email" type="email" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Email CC</label>
<input x-model="form.email_cc" type="email" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Teléfono</label>
<input x-model="form.telefono" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Documento</label>
<input x-model="form.documento" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Notas</label>
<textarea x-model="form.notas" rows="2" class="mt-1 w-full border rounded px-3 py-2 text-sm"></textarea>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" x-model="form.activo" id="activo_cli" />
<label for="activo_cli" class="text-sm">Activo</label>
</div>
</div>
<div class="flex justify-end gap-2 mt-5">
<button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Modal Eliminar -->
<div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
<svg class="w-12 h-12 text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
<p class="font-semibold mb-1">¿Eliminar cliente?</p>
<p class="text-sm text-gray-400 mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-center gap-3">
<button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
</div>
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
datos: [], total: 0, totalPages: 1, page: 1, limit: 10,
search: '',
addModal: false, editModal: false, deleteModal: false,
selectedId: null,
form: { nombre:'', empresa:'', email:'', email_cc:'', telefono:'', documento:'', notas:'', activo:true },
toast: { show: false, msg: '', type: 'ok' },
async init() { await this.loadData(); },
async loadData() {
this.loading = true;
const { data } = await axios.get(`/app/api/clientes?page=${this.page}&limit=${this.limit}&search=${this.search}`);
this.datos = data.registros || [];
this.total = data.total || 0;
this.totalPages = data.totalPages || 1;
this.loading = false;
},
openEdit(d) {
this.form = { nombre: d.nombre, empresa: d.empresa, email: d.email, email_cc: d.email_cc, telefono: d.telefono, documento: d.documento, notas: d.notas, activo: d.activo };
this.selectedId = d.ID;
this.editModal = true;
},
openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
closeModals() {
this.addModal = this.editModal = this.deleteModal = false;
this.selectedId = null;
this.form = { nombre:'', empresa:'', email:'', email_cc:'', telefono:'', documento:'', notas:'', activo:true };
},
async save() {
this.loading = true;
try {
if (this.editModal) {
await axios.put(`/app/api/clientes/${this.selectedId}`, this.form);
} else {
await axios.post('/app/api/clientes', this.form);
}
this.showToast('Guardado correctamente');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async deleteItem() {
this.loading = true;
try {
await axios.delete(`/app/api/clientes/${this.selectedId}`);
this.showToast('Eliminado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
prevPage() { if(this.page>1){ this.page--; this.loadData(); } },
nextPage() { if(this.page<this.totalPages){ this.page++; this.loadData(); } },
showToast(msg, type='ok') {
this.toast = { show: true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/contratos.html
+290
View File
@@ -0,0 +1,290 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Contratos</h1>
<p class="text-sm text-gray-500">Gestión de contratos y vencimientos</p>
</div>
<div class="flex items-center gap-2 mt-3 md:mt-0 flex-wrap">
<select x-model="filtroEstado" @change="loadData()" class="border border-gray-300 rounded p-2 text-sm">
<option value="">Todos los estados</option>
<option value="activo">Activo</option>
<option value="vencido">Vencido</option>
<option value="cancelado">Cancelado</option>
<option value="renovado">Renovado</option>
</select>
<input type="text" placeholder="Buscar cliente..." class="border border-gray-300 rounded p-2 text-sm"
x-model="search" @input.debounce.400ms="loadData()" />
<button @click="addModal = true" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nuevo</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Cliente</th>
<th class="py-2 px-3">Servicio</th>
<th class="py-2 px-3">Vencimiento</th>
<th class="py-2 px-3">Días</th>
<th class="py-2 px-3">Precio</th>
<th class="py-2 px-3">Estado</th>
<th class="py-2 px-3 w-32"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3">
<div class="font-medium" x-text="d.cliente?.nombre||'—'"></div>
<div class="text-xs text-gray-400" x-text="d.cliente?.empresa||''"></div>
</td>
<td class="py-2 px-3" x-text="d.servicio?.nombre||'—'"></td>
<td class="py-2 px-3" x-text="fmtDate(d.fecha_vencimiento)"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs font-semibold"
:class="d.urgencia==='rojo' ? 'bg-red-100 text-red-700' : d.urgencia==='amarillo' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'"
x-text="d.dias_restantes <= 0 ? 'Vencido' : d.dias_restantes+' días'"></span>
</td>
<td class="py-2 px-3" x-text="(d.servicio?.moneda||'') +' '+ Number(d.precio_acordado).toFixed(2)"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs font-medium"
:class="{
'bg-green-100 text-green-700': d.estado==='activo',
'bg-red-100 text-red-700': d.estado==='vencido',
'bg-gray-100 text-gray-600': d.estado==='cancelado',
'bg-blue-100 text-blue-700': d.estado==='renovado'
}"
x-text="d.estado"></span>
</td>
<td class="py-2 px-3">
<div class="flex gap-1.5">
<button @click="openEdit(d)" title="Editar" class="text-gray-400 hover:text-[#8eb02f]">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button @click="renovar(d)" title="Renovar" x-show="d.estado==='activo'" class="text-gray-400 hover:text-blue-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
</button>
<button @click="enviarCorreo(d)" title="Enviar correo" class="text-gray-400 hover:text-purple-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
</button>
<button @click="openDelete(d)" title="Eliminar" class="text-gray-400 hover:text-red-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="7" class="text-center text-gray-400 py-8">Sin registros</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4 text-sm text-gray-500">
<span>Total: <span x-text="total"></span></span>
<div class="flex gap-1">
<button @click="prevPage()" :disabled="page===1" class="px-3 py-1 rounded border disabled:opacity-40">‹</button>
<span class="px-3 py-1" x-text="'Pág. '+page+' / '+totalPages"></span>
<button @click="nextPage()" :disabled="page>=totalPages" class="px-3 py-1 rounded border disabled:opacity-40">›</button>
</div>
</div>
</div>
<!-- Modal Crear / Editar -->
<div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 p-6" @click.stop>
<h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Contrato' : 'Nuevo Contrato'"></h2>
<form @submit.prevent="save()">
<div class="grid grid-cols-2 gap-3">
<div class="col-span-2" x-show="!editModal">
<label class="text-xs font-medium text-gray-600">Cliente *</label>
<select x-model="form.cliente_id" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="">Seleccionar...</option>
<template x-for="c in clientes" :key="c.ID">
<option :value="c.ID" x-text="c.nombre + (c.empresa ? ' — '+c.empresa : '')"></option>
</template>
</select>
</div>
<div class="col-span-2" x-show="!editModal">
<label class="text-xs font-medium text-gray-600">Servicio *</label>
<select x-model="form.servicio_id" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="">Seleccionar...</option>
<template x-for="s in servicios" :key="s.ID">
<option :value="s.ID" x-text="s.nombre"></option>
</template>
</select>
</div>
<div>
<label class="text-xs font-medium text-gray-600">Fecha inicio *</label>
<input x-model="form.fecha_inicio" type="date" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Fecha vencimiento *</label>
<input x-model="form.fecha_vencimiento" type="date" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Precio acordado</label>
<input x-model="form.precio_acordado" type="number" step="0.01" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div x-show="editModal">
<label class="text-xs font-medium text-gray-600">Estado</label>
<select x-model="form.estado" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="activo">Activo</option>
<option value="vencido">Vencido</option>
<option value="cancelado">Cancelado</option>
<option value="renovado">Renovado</option>
</select>
</div>
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Notas</label>
<textarea x-model="form.notas" rows="2" class="mt-1 w-full border rounded px-3 py-2 text-sm"></textarea>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" x-model="form.auto_renovar" id="auto_ren" />
<label for="auto_ren" class="text-sm">Auto-renovar</label>
</div>
</div>
<div class="flex justify-end gap-2 mt-5">
<button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Modal Eliminar -->
<div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
<svg class="w-12 h-12 text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
<p class="font-semibold mb-1">¿Eliminar contrato?</p>
<p class="text-sm text-gray-400 mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-center gap-3">
<button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
</div>
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
datos: [], total: 0, totalPages: 1, page: 1, limit: 10,
search: '', filtroEstado: '',
addModal: false, editModal: false, deleteModal: false,
clientes: [], servicios: [],
selectedId: null,
form: { cliente_id:'', servicio_id:'', fecha_inicio:'', fecha_vencimiento:'', precio_acordado:0, estado:'activo', auto_renovar:false, notas:'' },
toast: { show: false, msg: '', type: 'ok' },
async init() {
await Promise.all([this.loadData(), this.loadSelects()]);
},
async loadData() {
this.loading = true;
const { data } = await axios.get(`/app/api/contratos?page=${this.page}&limit=${this.limit}&search=${this.search}&estado=${this.filtroEstado}`);
this.datos = data.registros || [];
this.total = data.total || 0;
this.totalPages = data.totalPages || 1;
this.loading = false;
},
async loadSelects() {
const [c, s] = await Promise.all([
axios.get('/app/api/clientes/select'),
axios.get('/app/api/servicios/select'),
]);
this.clientes = c.data.registros || [];
this.servicios = s.data.registros || [];
},
openEdit(d) {
this.form = {
fecha_inicio: d.fecha_inicio ? d.fecha_inicio.substring(0,10) : '',
fecha_vencimiento: d.fecha_vencimiento ? d.fecha_vencimiento.substring(0,10) : '',
precio_acordado: d.precio_acordado,
estado: d.estado,
auto_renovar: d.auto_renovar,
notas: d.notas
};
this.selectedId = d.ID;
this.editModal = true;
},
openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
closeModals() {
this.addModal = this.editModal = this.deleteModal = false;
this.selectedId = null;
this.form = { cliente_id:'', servicio_id:'', fecha_inicio:'', fecha_vencimiento:'', precio_acordado:0, estado:'activo', auto_renovar:false, notas:'' };
},
async save() {
this.loading = true;
try {
if (this.editModal) {
await axios.put(`/app/api/contratos/${this.selectedId}`, this.form);
} else {
await axios.post('/app/api/contratos', this.form);
}
this.showToast('Guardado correctamente');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async deleteItem() {
this.loading = true;
try {
await axios.delete(`/app/api/contratos/${this.selectedId}`);
this.showToast('Eliminado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async renovar(d) {
if (!confirm(`¿Renovar el contrato de ${d.cliente?.nombre}?`)) return;
try {
await axios.post(`/app/api/contratos/${d.ID}/renovar`);
this.showToast('Contrato renovado');
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
},
async enviarCorreo(d) {
if (!confirm(`¿Enviar correo de aviso a ${d.cliente?.email}?`)) return;
try {
await axios.post(`/app/api/contratos/${d.ID}/enviar-correo`);
this.showToast('Correo enviado');
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
},
fmtDate(raw) {
if (!raw) return '—';
return new Date(raw).toLocaleDateString('es-ES', { day:'2-digit', month:'2-digit', year:'numeric' });
},
prevPage() { if(this.page>1){ this.page--; this.loadData(); } },
nextPage() { if(this.page<this.totalPages){ this.page++; this.loadData(); } },
showToast(msg, type='ok') {
this.toast = { show: true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/historial.html
+143
View File
@@ -0,0 +1,143 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Historial de Notificaciones</h1>
<p class="text-sm text-gray-500">Registro de correos enviados por el sistema</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Cliente</th>
<th class="py-2 px-3">Regla</th>
<th class="py-2 px-3">Asunto</th>
<th class="py-2 px-3">Fecha</th>
<th class="py-2 px-3">Estado</th>
<th class="py-2 px-3 w-28"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3">
<div class="font-medium" x-text="d.cliente?.nombre||'—'"></div>
<div class="text-xs text-gray-400" x-text="d.cliente?.email||''"></div>
</td>
<td class="py-2 px-3 text-gray-500 text-xs" x-text="d.regla?.nombre||'—'"></td>
<td class="py-2 px-3 max-w-xs truncate" x-text="d.asunto"></td>
<td class="py-2 px-3 text-xs" x-text="fmtDate(d.fecha_envio)"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs font-medium"
:class="{
'bg-green-100 text-green-700': d.estado==='enviado',
'bg-red-100 text-red-700': d.estado==='fallido',
'bg-yellow-100 text-yellow-700': d.estado==='pendiente'
}"
x-text="d.estado"></span>
</td>
<td class="py-2 px-3">
<div class="flex gap-2">
<button @click="verPreview(d)" title="Ver correo" class="text-gray-400 hover:text-blue-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
</button>
<button @click="reenviar(d)" title="Reenviar" class="text-gray-400 hover:text-purple-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="6" class="text-center text-gray-400 py-8">Sin registros</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4 text-sm text-gray-500">
<span>Total: <span x-text="total"></span></span>
<div class="flex gap-1">
<button @click="prevPage()" :disabled="page===1" class="px-3 py-1 rounded border disabled:opacity-40">‹</button>
<span class="px-3 py-1" x-text="'Pág. '+page+' / '+totalPages"></span>
<button @click="nextPage()" :disabled="page>=totalPages" class="px-3 py-1 rounded border disabled:opacity-40">›</button>
</div>
</div>
</div>
<!-- Modal preview -->
<div x-show="previewModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 max-h-[90vh] overflow-y-auto" @click.stop>
<div class="flex justify-between items-center mb-3">
<div>
<h2 class="text-lg font-semibold">Vista del correo</h2>
<p class="text-xs text-gray-400" x-text="previewAsunto"></p>
</div>
<button @click="previewModal=false" class="text-gray-400 hover:text-gray-700">✕</button>
</div>
<iframe x-ref="previewFrame" class="w-full border rounded" style="height:500px"></iframe>
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
datos: [], total: 0, totalPages: 1, page: 1, limit: 20,
previewModal: false, previewAsunto: '',
toast: { show:false, msg:'', type:'ok' },
async init() { await this.loadData(); },
async loadData() {
this.loading = true;
const { data } = await axios.get(`/app/api/historial-notificaciones?page=${this.page}&limit=${this.limit}`);
this.datos = data.registros || [];
this.total = data.total || 0;
this.totalPages = data.totalPages || 1;
this.loading = false;
},
async verPreview(d) {
const { data } = await axios.get(`/app/api/historial-notificaciones/${d.ID}/preview`);
this.previewAsunto = data.asunto || '';
this.previewModal = true;
this.$nextTick(() => {
this.$refs.previewFrame.srcdoc = data.html || '<p style="padding:1rem;color:#999">Sin contenido guardado</p>';
});
},
async reenviar(d) {
if (!confirm(`¿Reenviar correo a ${d.cliente?.email}?`)) return;
try {
await axios.post(`/app/api/historial-notificaciones/${d.ID}/reenviar`);
this.showToast('Reenviado correctamente');
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
},
fmtDate(raw) {
if (!raw) return '—';
return new Date(raw).toLocaleString('es-ES', { dateStyle:'short', timeStyle:'short' });
},
prevPage() { if(this.page>1){ this.page--; this.loadData(); } },
nextPage() { if(this.page<this.totalPages){ this.page++; this.loadData(); } },
showToast(msg, type='ok') {
this.toast = { show:true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/plantillas.html
+269
View File
@@ -0,0 +1,269 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Plantillas de Correo</h1>
<p class="text-sm text-gray-500">Editor de plantillas HTML para notificaciones</p>
</div>
<div class="flex items-center gap-2 mt-3 md:mt-0">
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 text-sm"
x-model="search" @input.debounce.400ms="loadData()" />
<button @click="addModal = true" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nueva</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Nombre</th>
<th class="py-2 px-3">Asunto</th>
<th class="py-2 px-3">Tipo</th>
<th class="py-2 px-3 w-36"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
<td class="py-2 px-3 text-gray-500" x-text="d.asunto"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-700" x-text="d.tipo"></span>
</td>
<td class="py-2 px-3">
<div class="flex gap-2">
<button @click="openPreview(d)" title="Vista previa" class="text-gray-400 hover:text-blue-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
</button>
<button @click="openTest(d)" title="Enviar prueba" class="text-gray-400 hover:text-purple-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"/></svg>
</button>
<button @click="openEdit(d)" title="Editar" class="text-gray-400 hover:text-[#8eb02f]">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button @click="openDelete(d)" title="Eliminar" class="text-gray-400 hover:text-red-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="4" class="text-center text-gray-400 py-8">Sin plantillas</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4 text-sm text-gray-500">
<span>Total: <span x-text="total"></span></span>
<div class="flex gap-1">
<button @click="prevPage()" :disabled="page===1" class="px-3 py-1 rounded border disabled:opacity-40">‹</button>
<span class="px-3 py-1" x-text="'Pág. '+page+' / '+totalPages"></span>
<button @click="nextPage()" :disabled="page>=totalPages" class="px-3 py-1 rounded border disabled:opacity-40">›</button>
</div>
</div>
</div>
<!-- Modal Crear / Editar (con editor HTML) -->
<div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 p-6 max-h-[90vh] overflow-y-auto" @click.stop>
<h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Plantilla' : 'Nueva Plantilla'"></h2>
<!-- Variables disponibles -->
<div class="mb-4 p-3 bg-blue-50 rounded text-xs text-blue-700 leading-6">
<strong>Variables disponibles:</strong>
<code>&#123;&#123;.ClienteNombre&#125;&#125;</code>,
<code>&#123;&#123;.ClienteEmpresa&#125;&#125;</code>,
<code>&#123;&#123;.FechaVencimiento&#125;&#125;</code>,
<code>&#123;&#123;.DiasRestantes&#125;&#125;</code>,
<code>&#123;&#123;.Total&#125;&#125;</code>,
<code>&#123;&#123;range .Servicios&#125;&#125;...&#123;&#123;.Nombre&#125;&#125; &#123;&#123;.Precio&#125;&#125;...&#123;&#123;end&#125;&#125;</code>
</div>
<form @submit.prevent="save()">
<div class="grid grid-cols-2 gap-3 mb-3">
<div>
<label class="text-xs font-medium text-gray-600">Nombre *</label>
<input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Tipo</label>
<select x-model="form.tipo" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="renovacion">Renovación</option>
<option value="vencimiento">Vencimiento</option>
<option value="pago">Pago</option>
<option value="personalizado">Personalizado</option>
</select>
</div>
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Asunto *</label>
<input x-model="form.asunto" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="text-xs font-medium text-gray-600 block mb-1">HTML del correo *</label>
<textarea x-model="form.cuerpo_html" rows="16"
@input.debounce.600ms="previewInline()"
class="w-full border rounded px-3 py-2 text-xs font-mono" required></textarea>
</div>
<div>
<label class="text-xs font-medium text-gray-600 block mb-1">Vista previa</label>
<iframe x-ref="previewFrame" class="w-full border rounded" style="height:352px"></iframe>
</div>
</div>
<div class="flex justify-end gap-2 mt-5">
<button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Modal vista previa del servidor -->
<div x-show="previewModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 p-5 max-h-[90vh] overflow-y-auto" @click.stop>
<div class="flex justify-between items-center mb-3">
<h2 class="text-lg font-semibold">Vista previa</h2>
<button @click="previewModal=false" class="text-gray-400 hover:text-gray-700">✕</button>
</div>
<iframe x-ref="serverPreviewFrame" class="w-full border rounded" style="height:500px"></iframe>
</div>
</div>
<!-- Modal Enviar prueba -->
<div x-show="testModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-sm mx-4 p-6" @click.stop>
<h2 class="text-lg font-semibold mb-4">Enviar correo de prueba</h2>
<label class="text-xs font-medium text-gray-600">Email destino *</label>
<input x-model="testEmail" type="email" class="mt-1 w-full border rounded px-3 py-2 text-sm mb-4" placeholder="correo@ejemplo.com" />
<div class="flex justify-end gap-2">
<button @click="testModal=false" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="sendTest()" class="px-4 py-2 bg-purple-600 text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Enviando…' : 'Enviar'"></span>
</button>
</div>
</div>
</div>
<!-- Modal Eliminar -->
<div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
<p class="font-semibold mb-1">¿Eliminar plantilla?</p>
<p class="text-sm text-gray-400 mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-center gap-3">
<button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
</div>
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
datos: [], total: 0, totalPages: 1, page: 1, limit: 10, search: '',
addModal: false, editModal: false, deleteModal: false, previewModal: false, testModal: false,
selectedId: null, testEmail: '',
form: { nombre:'', asunto:'', cuerpo_html:'', tipo:'renovacion' },
toast: { show:false, msg:'', type:'ok' },
async init() { await this.loadData(); },
async loadData() {
this.loading = true;
const { data } = await axios.get(`/app/api/plantillas-correo?page=${this.page}&limit=${this.limit}&search=${this.search}`);
this.datos = data.registros || [];
this.total = data.total || 0;
this.totalPages = data.totalPages || 1;
this.loading = false;
},
openEdit(d) {
this.form = { nombre: d.nombre, asunto: d.asunto, cuerpo_html: d.cuerpo_html, tipo: d.tipo };
this.selectedId = d.ID;
this.editModal = true;
this.$nextTick(() => this.previewInline());
},
openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
openTest(d) { this.selectedId = d.ID; this.testModal = true; },
async openPreview(d) {
this.selectedId = d.ID;
const { data } = await axios.get(`/app/api/plantillas-correo/${d.ID}/preview`);
this.previewModal = true;
this.$nextTick(() => {
const frame = this.$refs.serverPreviewFrame;
frame.srcdoc = data.html || '<p>Sin contenido</p>';
});
},
previewInline() {
const frame = this.$refs.previewFrame;
if (frame) frame.srcdoc = this.form.cuerpo_html || '<p style="color:#999;padding:1rem">Sin contenido</p>';
},
closeModals() {
this.addModal = this.editModal = this.deleteModal = this.previewModal = this.testModal = false;
this.selectedId = null;
this.form = { nombre:'', asunto:'', cuerpo_html:'', tipo:'renovacion' };
},
async save() {
this.loading = true;
try {
if (this.editModal) {
await axios.put(`/app/api/plantillas-correo/${this.selectedId}`, this.form);
} else {
await axios.post('/app/api/plantillas-correo', this.form);
}
this.showToast('Guardado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async deleteItem() {
this.loading = true;
try {
await axios.delete(`/app/api/plantillas-correo/${this.selectedId}`);
this.showToast('Eliminado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async sendTest() {
this.loading = true;
try {
await axios.post(`/app/api/plantillas-correo/${this.selectedId}/test`, { email: this.testEmail });
this.showToast('Correo de prueba enviado');
this.testModal = false;
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
prevPage() { if(this.page>1){ this.page--; this.loadData(); } },
nextPage() { if(this.page<this.totalPages){ this.page++; this.loadData(); } },
showToast(msg, type='ok') {
this.toast = { show:true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/reglas.html
+202
View File
@@ -0,0 +1,202 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Reglas de Notificación</h1>
<p class="text-sm text-gray-500">Define cuándo y cómo se envían las alertas automáticas</p>
</div>
<button @click="addModal = true" class="mt-3 md:mt-0 bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nueva regla</button>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Nombre</th>
<th class="py-2 px-3">Días antes</th>
<th class="py-2 px-3">Plantilla</th>
<th class="py-2 px-3">Aplica a</th>
<th class="py-2 px-3">Estado</th>
<th class="py-2 px-3 w-24"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded text-xs font-semibold" x-text="d.dias_antes+' días'"></span>
</td>
<td class="py-2 px-3 text-gray-500" x-text="d.plantilla?.nombre||'—'"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-600" x-text="d.aplica_a"></span>
</td>
<td class="py-2 px-3">
<button @click="toggleActivo(d)"
:class="d.activo ? 'bg-green-500' : 'bg-gray-300'"
class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors">
<span :class="d.activo ? 'translate-x-5' : 'translate-x-1'"
class="inline-block h-3 w-3 bg-white rounded-full transition-transform"></span>
</button>
</td>
<td class="py-2 px-3">
<div class="flex gap-2">
<button @click="openEdit(d)" class="text-gray-400 hover:text-[#8eb02f]">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button @click="openDelete(d)" class="text-gray-400 hover:text-red-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="6" class="text-center text-gray-400 py-8">Sin reglas configuradas</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal Crear / Editar -->
<div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6" @click.stop>
<h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Regla' : 'Nueva Regla'"></h2>
<form @submit.prevent="save()">
<div class="space-y-3">
<div>
<label class="text-xs font-medium text-gray-600">Nombre *</label>
<input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Días antes del vencimiento *</label>
<input x-model="form.dias_antes" type="number" min="1" max="365" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Plantilla de correo *</label>
<select x-model="form.plantilla_id" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="">Seleccionar...</option>
<template x-for="p in plantillas" :key="p.ID">
<option :value="p.ID" x-text="p.nombre"></option>
</template>
</select>
</div>
<div>
<label class="text-xs font-medium text-gray-600">Aplica a</label>
<select x-model="form.aplica_a" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="todos">Todos</option>
<option value="renovable">Solo renovables</option>
<option value="unico">Solo únicos</option>
</select>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" x-model="form.activo" id="activo_regla" />
<label for="activo_regla" class="text-sm">Activa</label>
</div>
</div>
<div class="flex justify-end gap-2 mt-5">
<button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Modal Eliminar -->
<div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
<p class="font-semibold mb-1">¿Eliminar regla?</p>
<p class="text-sm text-gray-400 mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-center gap-3">
<button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
</div>
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false, datos: [], plantillas: [],
addModal: false, editModal: false, deleteModal: false,
selectedId: null,
form: { nombre:'', dias_antes:30, plantilla_id:'', aplica_a:'todos', activo:true },
toast: { show:false, msg:'', type:'ok' },
async init() {
const [r, p] = await Promise.all([
axios.get('/app/api/reglas-notificacion'),
axios.get('/app/api/plantillas-correo?limit=100')
]);
this.datos = r.data.registros || [];
this.plantillas = p.data.registros || [];
},
async loadData() {
const { data } = await axios.get('/app/api/reglas-notificacion');
this.datos = data.registros || [];
},
openEdit(d) {
this.form = { nombre: d.nombre, dias_antes: d.dias_antes, plantilla_id: d.plantilla_id, aplica_a: d.aplica_a, activo: d.activo };
this.selectedId = d.ID;
this.editModal = true;
},
openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
closeModals() {
this.addModal = this.editModal = this.deleteModal = false;
this.selectedId = null;
this.form = { nombre:'', dias_antes:30, plantilla_id:'', aplica_a:'todos', activo:true };
},
async toggleActivo(d) {
await axios.put(`/app/api/reglas-notificacion/${d.ID}`, { ...d, activo: !d.activo });
await this.loadData();
},
async save() {
this.loading = true;
try {
if (this.editModal) {
await axios.put(`/app/api/reglas-notificacion/${this.selectedId}`, this.form);
} else {
await axios.post('/app/api/reglas-notificacion', this.form);
}
this.showToast('Guardado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async deleteItem() {
this.loading = true;
try {
await axios.delete(`/app/api/reglas-notificacion/${this.selectedId}`);
this.showToast('Eliminado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
showToast(msg, type='ok') {
this.toast = { show:true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/servicios.html
+227
View File
@@ -0,0 +1,227 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<!-- Loading -->
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full">
<!-- Header -->
<div class="justify-between items-center w-full md:flex mb-4">
<div>
<h1 class="text-2xl font-bold mb-1">Servicios</h1>
<p class="text-sm text-gray-500">Catálogo de servicios ofrecidos</p>
</div>
<div class="flex items-center gap-2 mt-3 md:mt-0">
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 text-sm"
x-model="search" @input.debounce.400ms="loadData()" />
<button @click="addModal = true"
class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nuevo</button>
</div>
</div>
<!-- Tabla -->
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="text-left border-b border-gray-200 bg-gray-50">
<tr>
<th class="py-2 px-3">Nombre</th>
<th class="py-2 px-3">Tipo</th>
<th class="py-2 px-3">Periodicidad</th>
<th class="py-2 px-3">Precio</th>
<th class="py-2 px-3">Estado</th>
<th class="py-2 px-3 w-24"></th>
</tr>
</thead>
<tbody class="text-gray-600">
<template x-for="d in datos" :key="d.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
<td class="py-2 px-3">
<span class="px-2 py-0.5 rounded text-xs font-medium"
:class="d.tipo==='renovable' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'"
x-text="d.tipo"></span>
</td>
<td class="py-2 px-3" x-text="d.periodicidad || '—'"></td>
<td class="py-2 px-3">
<span x-text="d.moneda+' '+Number(d.precio).toFixed(2)"></span>
</td>
<td class="py-2 px-3">
<span :class="d.activo ? 'text-green-600' : 'text-red-500'" x-text="d.activo ? 'Activo' : 'Inactivo'"></span>
</td>
<td class="py-2 px-3">
<div class="flex gap-2">
<button @click="openEdit(d)" title="Editar" class="text-gray-400 hover:text-[#8eb02f]">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button @click="openDelete(d)" title="Eliminar" class="text-gray-400 hover:text-red-500">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
</button>
</div>
</td>
</tr>
</template>
<tr x-show="!loading && datos.length===0">
<td colspan="6" class="text-center text-gray-400 py-8">Sin registros</td>
</tr>
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="flex items-center justify-between mt-4 text-sm text-gray-500">
<span>Total: <span x-text="total"></span></span>
<div class="flex gap-1">
<button @click="prevPage()" :disabled="page===1" class="px-3 py-1 rounded border disabled:opacity-40">‹</button>
<span class="px-3 py-1" x-text="'Pág. '+page+' / '+totalPages"></span>
<button @click="nextPage()" :disabled="page>=totalPages" class="px-3 py-1 rounded border disabled:opacity-40">›</button>
</div>
</div>
</div>
<!-- Modal Crear / Editar -->
<div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 p-6" @click.stop>
<h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Servicio' : 'Nuevo Servicio'"></h2>
<form @submit.prevent="save()">
<div class="grid grid-cols-2 gap-3">
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Nombre *</label>
<input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Descripción</label>
<textarea x-model="form.descripcion" rows="2" class="mt-1 w-full border rounded px-3 py-2 text-sm"></textarea>
</div>
<div>
<label class="text-xs font-medium text-gray-600">Precio *</label>
<input x-model="form.precio" type="number" step="0.01" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Moneda</label>
<select x-model="form.moneda" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option>USD</option><option>EUR</option><option>COP</option><option>MXN</option>
</select>
</div>
<div>
<label class="text-xs font-medium text-gray-600">Tipo</label>
<select x-model="form.tipo" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="renovable">Renovable</option>
<option value="unico">Único</option>
</select>
</div>
<div x-show="form.tipo==='renovable'">
<label class="text-xs font-medium text-gray-600">Periodicidad</label>
<select x-model="form.periodicidad" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="mensual">Mensual</option>
<option value="trimestral">Trimestral</option>
<option value="semestral">Semestral</option>
<option value="anual">Anual</option>
</select>
</div>
<div class="flex items-center gap-2 mt-2">
<input type="checkbox" x-model="form.activo" id="activo_svc" />
<label for="activo_svc" class="text-sm">Activo</label>
</div>
</div>
<div class="flex justify-end gap-2 mt-5">
<button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
</button>
</div>
</form>
</div>
</div>
<!-- Modal Eliminar -->
<div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
<svg class="w-12 h-12 text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
<p class="font-semibold text-gray-800 mb-1">¿Eliminar servicio?</p>
<p class="text-sm text-gray-500 mb-5">Esta acción no se puede deshacer.</p>
<div class="flex justify-center gap-3">
<button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm" :disabled="loading">
<span x-text="loading ? 'Eliminando…' : 'Eliminar'"></span>
</button>
</div>
</div>
</div>
<!-- Toast -->
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
datos: [], total: 0, totalPages: 1, page: 1, limit: 10,
search: '',
addModal: false, editModal: false, deleteModal: false,
selectedId: null,
form: { nombre:'', descripcion:'', precio:0, moneda:'USD', tipo:'renovable', periodicidad:'anual', activo:true },
toast: { show: false, msg: '', type: 'ok' },
async init() { await this.loadData(); },
async loadData() {
this.loading = true;
const { data } = await axios.get(`/app/api/servicios?page=${this.page}&limit=${this.limit}&search=${this.search}`);
this.datos = data.registros || [];
this.total = data.total || 0;
this.totalPages = data.totalPages || 1;
this.loading = false;
},
openEdit(d) {
this.form = { nombre: d.nombre, descripcion: d.descripcion, precio: d.precio, moneda: d.moneda, tipo: d.tipo, periodicidad: d.periodicidad, activo: d.activo };
this.selectedId = d.ID;
this.editModal = true;
},
openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
closeModals() {
this.addModal = this.editModal = this.deleteModal = false;
this.selectedId = null;
this.form = { nombre:'', descripcion:'', precio:0, moneda:'USD', tipo:'renovable', periodicidad:'anual', activo:true };
},
async save() {
this.loading = true;
try {
if (this.editModal) {
await axios.put(`/app/api/servicios/${this.selectedId}`, this.form);
} else {
await axios.post('/app/api/servicios', this.form);
}
this.showToast('Guardado correctamente');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
async deleteItem() {
this.loading = true;
try {
await axios.delete(`/app/api/servicios/${this.selectedId}`);
this.showToast('Eliminado');
this.closeModals();
await this.loadData();
} catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
this.loading = false;
},
prevPage() { if(this.page>1){ this.page--; this.loadData(); } },
nextPage() { if(this.page<this.totalPages){ this.page++; this.loadData(); } },
showToast(msg, type='ok') {
this.toast = { show: true, msg, type };
setTimeout(() => this.toast.show = false, 3000);
}
}));
});
</script>
resources/views/renovaciones/smtp.html
+133
View File
@@ -0,0 +1,133 @@
<div x-data="app" class="bg-white rounded-lg shadow">
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
</div>
<div class="container mx-auto p-6 w-full max-w-xl">
<div class="mb-6">
<h1 class="text-2xl font-bold mb-1">Configuración SMTP</h1>
<p class="text-sm text-gray-500">Servidor de correo saliente para las notificaciones automáticas</p>
</div>
<form @submit.prevent="save()" class="space-y-4 bg-gray-50 rounded-lg p-5 border border-gray-200">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 md:col-span-1">
<label class="text-xs font-medium text-gray-600">Host SMTP *</label>
<input x-model="form.host" required placeholder="smtp.gmail.com"
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Puerto *</label>
<input x-model="form.port" type="number" required placeholder="587"
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Usuario / Email *</label>
<input x-model="form.username" type="email" required
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Contraseña</label>
<input x-model="form.password" type="password"
placeholder="Dejar vacío para no cambiar"
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div>
<label class="text-xs font-medium text-gray-600">Cifrado</label>
<select x-model="form.encryption" class="mt-1 w-full border rounded px-3 py-2 text-sm">
<option value="tls">TLS (STARTTLS)</option>
<option value="ssl">SSL</option>
<option value="none">Sin cifrado</option>
</select>
</div>
<div>
<label class="text-xs font-medium text-gray-600">Nombre remitente</label>
<input x-model="form.from_name" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
<div class="col-span-2">
<label class="text-xs font-medium text-gray-600">Email remitente *</label>
<input x-model="form.from_address" type="email" required
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
</div>
</div>
<div class="flex items-center justify-between pt-2 border-t">
<div class="flex gap-2">
<input type="text" x-model="testEmail" placeholder="Email de prueba"
class="border rounded px-3 py-1.5 text-sm w-56" />
<button type="button" @click="testSMTP()"
class="px-3 py-1.5 border border-purple-300 text-purple-700 rounded text-sm hover:bg-purple-50"
:disabled="loading">
<span x-text="loading ? 'Enviando…' : 'Probar'"></span>
</button>
</div>
<button type="submit"
class="px-5 py-2 bg-[#8eb02f] text-white rounded text-sm font-medium"
:disabled="loading">
<span x-text="loading ? 'Guardando…' : 'Guardar configuración'"></span>
</button>
</div>
</form>
<!-- Estado actual -->
<div class="mt-5 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
<strong>Nota:</strong> Al guardar, la configuración se aplica inmediatamente sin necesidad de reiniciar el servidor.
La contraseña se almacena cifrada con AES-256.
</div>
</div>
<div x-show="toast.show" x-cloak x-transition
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
x-text="toast.msg"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
loading: false,
testEmail: '',
form: { host:'', port:587, username:'', password:'', encryption:'tls', from_name:'', from_address:'' },
toast: { show:false, msg:'', type:'ok' },
async init() {
const { data } = await axios.get('/app/api/smtp-config');
if (data.ok && data.config) {
this.form = {
host: data.config.host || '',
port: data.config.port || 587,
username: data.config.username || '',
password: '***',
encryption: data.config.encryption || 'tls',
from_name: data.config.from_name || '',
from_address: data.config.from_address || ''
};
}
},
async save() {
this.loading = true;
try {
await axios.post('/app/api/smtp-config', this.form);
this.showToast('Configuración guardada correctamente');
} catch(e) { this.showToast(e.response?.data?.error||'Error al guardar', 'error'); }
this.loading = false;
},
async testSMTP() {
if (!this.testEmail) { this.showToast('Ingresa un email de prueba', 'error'); return; }
this.loading = true;
try {
await axios.post('/app/api/smtp-config/test', { email: this.testEmail });
this.showToast('Correo de prueba enviado a ' + this.testEmail);
} catch(e) { this.showToast(e.response?.data?.error||'Error SMTP', 'error'); }
this.loading = false;
},
showToast(msg, type='ok') {
this.toast = { show:true, msg, type };
setTimeout(() => this.toast.show = false, 3500);
}
}));
});
</script>