refactor: modularizar vistas de instaladores, tareas y notificaciones en la carpeta views/
This commit is contained in:
parent
f73ec58a50
commit
b2a3b2fb9e
156
public.php
156
public.php
@ -1970,159 +1970,9 @@ $installersData = json_decode($config['installersDataWhatsApp'] ?? '{"instalador
|
|||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- MODULE 1A: INSTALLERS CRUD -->
|
<?php include __DIR__ . '/views/installers.php'; ?>
|
||||||
<section id="section-instaladores" class="section-view active">
|
<?php include __DIR__ . '/views/installer_jobs.php'; ?>
|
||||||
<div class="card">
|
<?php include __DIR__ . '/views/notifications.php'; ?>
|
||||||
<div style="margin-bottom: 2rem;">
|
|
||||||
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
|
||||||
<img src="?action=get_image&name=installers-management.png" style="width:64px;height:64px;"> Gestión de Catálogo de Instaladores
|
|
||||||
</h2>
|
|
||||||
<p style="color: var(--text-muted); margin: 5px 0 0 0;">👷 Administra tu equipo de técnicos instaladores y sus números de contacto</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content: flex-end; margin-bottom: 2rem;">
|
|
||||||
<button class="btn btn-primary" onclick="openInstallerModal()" style="height: 42px;">
|
|
||||||
+ Nuevo Instalador
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="overflow-x: auto;">
|
|
||||||
<table id="installersTable">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID Sistema</th>
|
|
||||||
<th>Nombre</th>
|
|
||||||
<th>WhatsApp</th>
|
|
||||||
<th>Acciones</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="installersEmptyState" class="placeholder-state" style="display: none;">
|
|
||||||
<span class="placeholder-icon">🔍</span>
|
|
||||||
<p>No se encontraron instaladores</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- MODULE 1B: INSTALLER JOBS -->
|
|
||||||
<section id="section-installer-jobs" class="section-view">
|
|
||||||
<div class="card">
|
|
||||||
<div style="margin-bottom: 1.5rem;">
|
|
||||||
<h2 id="jobsSectionTitle" style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
|
||||||
📋 Reenviar Notificaciones de Asignación de Servicios en Curso
|
|
||||||
</h2>
|
|
||||||
<p style="color: var(--text-muted); margin: 5px 0 0 0;">Selecciona un técnico instalador para consultar sus servicios "En curso" y reenviar notificaciones de asignación de servicio por WhatsApp</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 1.5rem; max-width: 420px;">
|
|
||||||
<label for="installerJobsSelect" style="display: block; font-weight: 600; margin-bottom: 6px;">👷 Seleccionar Instalador:</label>
|
|
||||||
<select id="installerJobsSelect" onchange="onInstallerSelectChange(this.value)" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); font-size: 0.95rem;">
|
|
||||||
<option value="">-- Selecciona un instalador --</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="jobsEmptyState" class="placeholder-state">
|
|
||||||
<span class="placeholder-icon">👷</span>
|
|
||||||
<p>Selecciona un instalador arriba para ver sus tareas activas</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="jobsLoading" style="display: none; text-align: center; padding: 2rem; color: var(--text-muted);">
|
|
||||||
<div class="loader" style="margin: 0 auto 1rem;"></div>
|
|
||||||
<p>Cargando tareas del instalador...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="jobsTableWrapper" style="display: none; overflow-x: auto;">
|
|
||||||
<table id="installerJobsTable">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID Servicio</th>
|
|
||||||
<th>Cliente</th>
|
|
||||||
<th>Fecha</th>
|
|
||||||
<th>Descripción</th>
|
|
||||||
<th>Acción</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="jobsNoResults" class="placeholder-state" style="display: none;">
|
|
||||||
<span class="placeholder-icon">✅</span>
|
|
||||||
<p>Este instalador no tiene tareas "En curso"</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- MODULE 2: NOTIFICATIONS -->
|
|
||||||
<section id="section-notificaciones" class="section-view">
|
|
||||||
<div class="card">
|
|
||||||
<div style="margin-bottom: 2rem;">
|
|
||||||
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
|
||||||
<img src="?action=get_image&name=whatsapp-notification.png" style="width:64px;height:64px;"> Notificaciones WhatsApp
|
|
||||||
</h2>
|
|
||||||
<p style="color: var(--text-muted); margin: 5px 0 0 0;">📱 Busca clientes y envía comprobantes de pago directamente a su WhatsApp</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CONFIG CONTAINER -->
|
|
||||||
<div class="config-container">
|
|
||||||
<div class="form-group" style="position: relative;">
|
|
||||||
<label>Buscar Cliente (Nombre, Email o ID)</label>
|
|
||||||
<div class="search-wrapper">
|
|
||||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<circle cx="11" cy="11" r="8" />
|
|
||||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
||||||
</svg>
|
|
||||||
<input type="text" id="clientSearch" class="form-control search-input-padded" placeholder="Escribe para buscar (ej. Juan Perez)..." autocomplete="off">
|
|
||||||
</div>
|
|
||||||
<div id="searchResults" class="search-results"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PLACEHOLDER STATE (Initially Visible) -->
|
|
||||||
<div id="notificationsPlaceholder" class="placeholder-state">
|
|
||||||
<span class="placeholder-icon">👋</span>
|
|
||||||
<p>Busca un cliente arriba para ver sus pagos y enviar notificaciones</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="paymentsContainer" class="card" style="display: none;">
|
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 10px;">
|
|
||||||
<h3 style="margin: 0; display: flex; align-items: center;">
|
|
||||||
<img src="?action=image&file=client.webp" class="client-header-icon"> <span id="selectedClientName">Pagos del Cliente</span>
|
|
||||||
</h3>
|
|
||||||
<div style="display: flex; gap: 8px;">
|
|
||||||
<a id="btnNotifCrm" href="#" target="_blank" class="btn btn-uniform" style="height: 38px;">
|
|
||||||
<img src="?action=image&file=crm.webp" class="icon-crm"> Ver en CRM
|
|
||||||
</a>
|
|
||||||
<button class="btn btn-secondary" onclick="refreshClientPayments()" style="height: 38px;">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M23 4v6h-6" />
|
|
||||||
<path d="M1 20v-6h6" />
|
|
||||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
|
||||||
</svg>
|
|
||||||
Refrescar Pagos
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="overflow-x: auto;">
|
|
||||||
<table id="paymentsTable">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Fecha</th>
|
|
||||||
<th>Monto</th>
|
|
||||||
<th>Método</th>
|
|
||||||
<th>Acción</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<?php include __DIR__ . '/views/stripe.php'; ?>
|
<?php include __DIR__ . '/views/stripe.php'; ?>
|
||||||
<?php include __DIR__ . '/views/oxxo.php'; ?>
|
<?php include __DIR__ . '/views/oxxo.php'; ?>
|
||||||
|
|||||||
48
views/installer_jobs.php
Normal file
48
views/installer_jobs.php
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!-- MODULE 1B: INSTALLER JOBS -->
|
||||||
|
<section id="section-installer-jobs" class="section-view">
|
||||||
|
<div class="card">
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h2 id="jobsSectionTitle" style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
||||||
|
📋 Reenviar Notificaciones de Asignación de Servicios en Curso
|
||||||
|
</h2>
|
||||||
|
<p style="color: var(--text-muted); margin: 5px 0 0 0;">Selecciona un técnico instalador para consultar sus servicios "En curso" y reenviar notificaciones de asignación de servicio por WhatsApp</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem; max-width: 420px;">
|
||||||
|
<label for="installerJobsSelect" style="display: block; font-weight: 600; margin-bottom: 6px;">👷 Seleccionar Instalador:</label>
|
||||||
|
<select id="installerJobsSelect" onchange="onInstallerSelectChange(this.value)" style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); font-size: 0.95rem;">
|
||||||
|
<option value="">-- Selecciona un instalador --</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jobsEmptyState" class="placeholder-state">
|
||||||
|
<span class="placeholder-icon">👷</span>
|
||||||
|
<p>Selecciona un instalador arriba para ver sus tareas activas</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jobsLoading" style="display: none; text-align: center; padding: 2rem; color: var(--text-muted);">
|
||||||
|
<div class="loader" style="margin: 0 auto 1rem;"></div>
|
||||||
|
<p>Cargando tareas del instalador...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jobsTableWrapper" style="display: none; overflow-x: auto;">
|
||||||
|
<table id="installerJobsTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID Servicio</th>
|
||||||
|
<th>Cliente</th>
|
||||||
|
<th>Fecha</th>
|
||||||
|
<th>Descripción</th>
|
||||||
|
<th>Acción</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jobsNoResults" class="placeholder-state" style="display: none;">
|
||||||
|
<span class="placeholder-icon">✅</span>
|
||||||
|
<p>Este instalador no tiene tareas "En curso"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
36
views/installers.php
Normal file
36
views/installers.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!-- MODULE 1A: INSTALLERS CRUD -->
|
||||||
|
<section id="section-instaladores" class="section-view active">
|
||||||
|
<div class="card">
|
||||||
|
<div style="margin-bottom: 2rem;">
|
||||||
|
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
||||||
|
<img src="?action=get_image&name=installers-management.png" style="width:64px;height:64px;"> Gestión de Catálogo de Instaladores
|
||||||
|
</h2>
|
||||||
|
<p style="color: var(--text-muted); margin: 5px 0 0 0;">👷 Administra tu equipo de técnicos instaladores y sus números de contacto</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; margin-bottom: 2rem;">
|
||||||
|
<button class="btn btn-primary" onclick="openInstallerModal()" style="height: 42px;">
|
||||||
|
+ Nuevo Instalador
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="overflow-x: auto;">
|
||||||
|
<table id="installersTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID Sistema</th>
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>WhatsApp</th>
|
||||||
|
<th>Acciones</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="installersEmptyState" class="placeholder-state" style="display: none;">
|
||||||
|
<span class="placeholder-icon">🔍</span>
|
||||||
|
<p>No se encontraron instaladores</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
67
views/notifications.php
Normal file
67
views/notifications.php
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!-- MODULE 2: NOTIFICATIONS -->
|
||||||
|
<section id="section-notificaciones" class="section-view">
|
||||||
|
<div class="card">
|
||||||
|
<div style="margin-bottom: 2rem;">
|
||||||
|
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
|
||||||
|
<img src="?action=get_image&name=whatsapp-notification.png" style="width:64px;height:64px;"> Notificaciones WhatsApp
|
||||||
|
</h2>
|
||||||
|
<p style="color: var(--text-muted); margin: 5px 0 0 0;">📱 Busca clientes y envía comprobantes de pago directamente a su WhatsApp</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CONFIG CONTAINER -->
|
||||||
|
<div class="config-container">
|
||||||
|
<div class="form-group" style="position: relative;">
|
||||||
|
<label>Buscar Cliente (Nombre, Email o ID)</label>
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||||
|
</svg>
|
||||||
|
<input type="text" id="clientSearch" class="form-control search-input-padded" placeholder="Escribe para buscar (ej. Juan Perez)..." autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div id="searchResults" class="search-results"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PLACEHOLDER STATE (Initially Visible) -->
|
||||||
|
<div id="notificationsPlaceholder" class="placeholder-state">
|
||||||
|
<span class="placeholder-icon">👋</span>
|
||||||
|
<p>Busca un cliente arriba para ver sus pagos y enviar notificaciones</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="paymentsContainer" class="card" style="display: none;">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 10px;">
|
||||||
|
<h3 style="margin: 0; display: flex; align-items: center;">
|
||||||
|
<img src="?action=image&file=client.webp" class="client-header-icon"> <span id="selectedClientName">Pagos del Cliente</span>
|
||||||
|
</h3>
|
||||||
|
<div style="display: flex; gap: 8px;">
|
||||||
|
<a id="btnNotifCrm" href="#" target="_blank" class="btn btn-uniform" style="height: 38px;">
|
||||||
|
<img src="?action=image&file=crm.webp" class="icon-crm"> Ver en CRM
|
||||||
|
</a>
|
||||||
|
<button class="btn btn-secondary" onclick="refreshClientPayments()" style="height: 38px;">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M23 4v6h-6" />
|
||||||
|
<path d="M1 20v-6h6" />
|
||||||
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
||||||
|
</svg>
|
||||||
|
Refrescar Pagos
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="overflow-x: auto;">
|
||||||
|
<table id="paymentsTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Fecha</th>
|
||||||
|
<th>Monto</th>
|
||||||
|
<th>Método</th>
|
||||||
|
<th>Acción</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
Loading…
Reference in New Issue
Block a user