style(workshop): alinea UI del taller con el resto del POS
- Usa app-shell/main, page-header con eyebrow, summary-strip y cards con iconos. - Reemplaza badges personalizados por .badge del design system. - Unifica tablas con .data-table y .table-wrapper. - Estandariza modales con .modal-overlay/.modal y formularios con .form-grid. - Actualiza workshop.js para usar clases del sistema y toggle is-open en modales. - Corrige tokens rotos (--text-sm, --color-warn, etc.) y usa variables del tema.
This commit is contained in:
@@ -15,45 +15,71 @@
|
||||
<meta name="theme-color" content="#F5A623" />
|
||||
<link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
|
||||
|
||||
<link rel="stylesheet" href="/pos/static/css/workshop.css">
|
||||
<link rel="stylesheet" href="/pos/static/css/workshop.css?v=2">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-shell">
|
||||
<div class="app-shell">
|
||||
<!-- Sidebar injected by sidebar.js -->
|
||||
<aside id="sidebar"></aside>
|
||||
|
||||
<div class="main-area pos-main-offset">
|
||||
<main class="main" role="main">
|
||||
<div id="offlineBanner"></div>
|
||||
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Taller</h1>
|
||||
<p class="page-header__subtitle">Órdenes de servicio y control de reparaciones</p>
|
||||
<div class="page-header__title-group">
|
||||
<span class="page-header__eyebrow">Operación · Taller</span>
|
||||
<h1 class="page-header__title">Taller</h1>
|
||||
</div>
|
||||
<div class="page-header__actions">
|
||||
<button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">Catálogo de servicios</button>
|
||||
<button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">+ Nueva orden</button>
|
||||
<button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
|
||||
Catálogo de servicios
|
||||
</button>
|
||||
<button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">
|
||||
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Nueva orden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary cards -->
|
||||
<div class="stats-row" id="statsRow">
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__label">Recibidos</span>
|
||||
<span class="stat-card__value" id="statReceived">--</span>
|
||||
<div class="summary-strip" id="statsRow">
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z"/><polyline points="3 8 12 13 21 8"/></svg>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__label">Recibidos</div>
|
||||
<div class="summary-card__value" id="statReceived">--</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__label">En reparación</span>
|
||||
<span class="stat-card__value" id="statRepair">--</span>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__label">En reparación</div>
|
||||
<div class="summary-card__value" id="statRepair">--</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__label">Listos</span>
|
||||
<span class="stat-card__value" id="statReady">--</span>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__icon summary-card__icon--ok">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/></svg>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__label">Listos</div>
|
||||
<div class="summary-card__value" id="statReady">--</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-card__label">Vencidos</span>
|
||||
<span class="stat-card__value stat-card__value--danger" id="statOverdue">--</span>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__icon summary-card__icon--alert">
|
||||
<svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="summary-card__body">
|
||||
<div class="summary-card__label">Vencidos</div>
|
||||
<div class="summary-card__value summary-card__value--danger" id="statOverdue">--</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -61,11 +87,11 @@
|
||||
<div class="kanban-board" id="kanbanBoard">
|
||||
<!-- Columns injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Detail modal -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal-overlay" id="detailModal">
|
||||
<div class="modal modal--lg">
|
||||
<div class="modal__header">
|
||||
<h2 class="modal__title" id="detailTitle">Orden #0000</h2>
|
||||
@@ -81,14 +107,14 @@
|
||||
</div>
|
||||
|
||||
<!-- New order modal -->
|
||||
<div class="modal-overlay" id="newOrderModal" style="display:none;">
|
||||
<div class="modal-overlay" id="newOrderModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h2 class="modal__title">Nueva orden de servicio</h2>
|
||||
<button class="modal__close" onclick="Workshop.closeNewOrderModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<form id="newOrderForm" class="form-grid form-grid--2">
|
||||
<form id="newOrderForm" class="form-grid">
|
||||
<div class="form-field">
|
||||
<label class="form-label" for="noCustomer">Cliente</label>
|
||||
<select class="form-input" id="noCustomer" required></select>
|
||||
@@ -131,14 +157,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Catalog modal -->
|
||||
<div class="modal-overlay" id="catalogModal" style="display:none;">
|
||||
<div class="modal-overlay" id="catalogModal">
|
||||
<div class="modal modal--lg">
|
||||
<div class="modal__header">
|
||||
<h2 class="modal__title">Catálogo de servicios</h2>
|
||||
<button class="modal__close" onclick="Workshop.closeCatalogModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-grid form-grid--4" id="catalogForm">
|
||||
<div class="form-grid" id="catalogForm">
|
||||
<div class="form-field form-field--span2">
|
||||
<input class="form-input" id="catName" placeholder="Nombre del servicio" />
|
||||
</div>
|
||||
@@ -155,21 +181,23 @@
|
||||
<button class="btn btn--primary" onclick="Workshop.addCatalogItem()">Agregar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vs-container" style="margin-top:var(--space-4);max-height:40vh;overflow-y:auto;">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
<th>Horas</th>
|
||||
<th>Precio/hora</th>
|
||||
<th>Total sugerido</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="catalogBody">
|
||||
<tr><td colspan="5" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-wrapper" style="margin-top:var(--space-4);">
|
||||
<div class="vs-container" style="max-height:40vh;overflow-y:auto;">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
<th>Horas</th>
|
||||
<th>Precio/hora</th>
|
||||
<th>Total sugerido</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="catalogBody">
|
||||
<tr><td colspan="5" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,7 +209,7 @@
|
||||
<script src="/pos/static/js/pos-utils.js?v=2" defer></script>
|
||||
<script src="/pos/static/js/sidebar.js" defer></script>
|
||||
<script src="/pos/static/js/offline-banner.js" defer></script>
|
||||
<script src="/pos/static/js/workshop.js" defer></script>
|
||||
<script src="/pos/static/js/workshop.js?v=2" defer></script>
|
||||
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
|
||||
<script src="/pos/static/js/pwa-install.js" defer></script>
|
||||
<script src="/pos/static/js/chat.js" defer></script>
|
||||
|
||||
Reference in New Issue
Block a user