consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(workshop): alinea UI del taller con el resto del POS

Browse Source 
- 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:
consultoria-as
2026-06-15 07:17:28 +00:00
parent e201dce290
commit b635e44302
3 changed files with 735 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

692
pos/static/css/workshop.css
View File

@@ -1,28 +1,556 @@
:root { /* workshop.css — Taller / Service Orders Kanban (design-system aligned) */
--kanban-column-width: 280px;
--kanban-card-bg: var(--glass-bg-strong); /* ═══════════════════════════════════════════════════════════════
--kanban-card-border: var(--glass-border); BASE RESET & SHELL
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--color-text-primary);
background-color: var(--color-bg-base);
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-theme="modern"] body {
background-color: var(--color-bg-base);
background-image: radial-gradient(
circle,
var(--dot-grid-color) 1px,
transparent 1px
);
background-size: var(--dot-grid-size) var(--dot-grid-size);
}
.app-shell {
display: flex;
height: 100vh;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════
PAGE HEADER
═══════════════════════════════════════════════════════════════ */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
[data-theme="industrial"] .page-header {
background: var(--color-surface-1);
}
.page-header__title-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.page-header__eyebrow {
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-text-muted);
}
.page-header__title {
font-family: var(--font-heading);
font-weight: var(--heading-weight-primary);
font-size: var(--text-h4);
letter-spacing: var(--heading-tracking-h4);
color: var(--color-text-primary);
line-height: 1.2;
}
[data-theme="industrial"] .page-header__title {
text-transform: uppercase;
}
.page-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
} }
.page-header__subtitle { .page-header__subtitle {
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: var(--text-sm); font-size: var(--text-body-sm);
margin-top: var(--space-1); margin-top: var(--space-1);
} }
/* ═══════════════════════════════════════════════════════════════
SUMMARY CARDS
═══════════════════════════════════════════════════════════════ */
.summary-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-base);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
[data-theme="modern"] .summary-strip {
background: transparent;
}
.summary-card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
display: flex;
align-items: flex-start;
gap: var(--space-3);
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
}
.summary-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
[data-theme="industrial"] .summary-card {
border-left: 3px solid var(--color-primary);
}
[data-theme="modern"] .summary-card {
background: var(--color-bg-overlay);
}
.summary-card__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--color-primary-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.summary-card__icon svg {
width: 20px;
height: 20px;
stroke: var(--color-primary);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.summary-card__icon--ok {
background: rgba(34, 197, 94, 0.12);
}
.summary-card__icon--ok svg {
stroke: var(--color-success);
}
.summary-card__icon--alert {
background: rgba(239, 68, 68, 0.12);
}
.summary-card__icon--alert svg {
stroke: var(--color-error);
}
.summary-card__body {
flex: 1;
min-width: 0;
}
.summary-card__label {
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.summary-card__value {
font-family: var(--font-heading);
font-weight: var(--heading-weight-primary);
font-size: 1.5rem;
color: var(--color-text-primary);
line-height: 1.1;
}
.summary-card__value--danger {
color: var(--color-error);
}
/* ═══════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-4);
height: 36px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-wide);
cursor: pointer;
border: 1px solid transparent;
transition: var(--transition-fast);
text-decoration: none;
white-space: nowrap;
}
.btn svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.btn--primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border-color: var(--btn-primary-border);
}
.btn--primary:hover {
background: var(--btn-primary-bg-hover);
}
.btn--secondary {
background: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border-color: var(--btn-secondary-border);
}
.btn--secondary:hover {
background: var(--btn-secondary-bg-hover);
}
.btn--ghost {
background: var(--btn-ghost-bg);
color: var(--btn-ghost-text);
border-color: var(--btn-ghost-border);
}
.btn--ghost:hover {
background: var(--color-surface-2);
border-color: var(--color-border-strong);
color: var(--color-text-primary);
}
.btn--sm {
height: 28px;
padding: 0 var(--space-3);
font-size: var(--text-caption);
}
/* ═══════════════════════════════════════════════════════════════
DATA TABLE
═══════════════════════════════════════════════════════════════ */
.table-wrapper {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
[data-theme="modern"] .table-wrapper {
background: var(--color-bg-overlay);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-body-sm);
}
.data-table thead {
position: sticky;
top: 0;
background: var(--color-surface-2);
border-bottom: 1px solid var(--color-border);
z-index: 10;
}
[data-theme="industrial"] .data-table thead {
background: var(--color-surface-3);
}
.data-table th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}
.data-table th:first-child { padding-left: var(--space-5); }
.data-table th:last-child { padding-right: var(--space-5); }
.data-table tbody tr {
border-bottom: 1px solid var(--color-border);
transition: background var(--duration-fast) var(--ease-in-out);
}
.data-table tbody tr:last-child {
border-bottom: none;
}
.data-table tbody tr:hover {
background: var(--color-surface-2);
}
.data-table td {
padding: var(--space-3) var(--space-4);
color: var(--color-text-secondary);
vertical-align: middle;
}
.data-table td:first-child { padding-left: var(--space-5); }
.data-table td:last-child { padding-right: var(--space-5); }
.data-table .td--primary {
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
.data-table .td--mono {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-text-accent);
}
.data-table .td--amount {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
/* ═══════════════════════════════════════════════════════════════
BADGES
═══════════════════════════════════════════════════════════════ */
.badge--reserved {
background: rgba(99, 102, 241, 0.12);
color: #818cf8;
}
.badge--installed {
background: rgba(34, 197, 94, 0.12);
color: var(--color-success);
}
.badge--normal {
background: var(--color-primary-muted);
color: var(--color-primary);
}
.badge--high {
background: rgba(234, 179, 8, 0.12);
color: var(--color-warning);
}
.badge--urgent {
background: rgba(239, 68, 68, 0.12);
color: var(--color-error);
}
/* ═══════════════════════════════════════════════════════════════
FORMS
═══════════════════════════════════════════════════════════════ */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.form-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-field--span2,
.form-field--span3,
.form-field--span4 {
grid-column: 1 / -1;
}
.form-label {
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.form-input,
.form-select {
padding: var(--space-2) var(--space-3);
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-body-sm);
outline: none;
transition: var(--transition-fast);
width: 100%;
}
.form-input:focus,
.form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-muted);
}
.form-field textarea.form-input {
min-height: 80px;
resize: vertical;
}
/* ═══════════════════════════════════════════════════════════════
MODALS
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
}
.modal-overlay.is-open {
display: flex;
}
.modal {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
width: 520px;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
}
.modal--lg {
width: 720px;
max-width: 90vw;
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.modal__header h2,
.modal__header h3 {
font-family: var(--font-heading);
font-weight: var(--heading-weight-primary);
font-size: var(--text-h5);
color: var(--color-text-primary);
margin: 0;
}
.modal__close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--color-text-muted);
cursor: pointer;
padding: 0 var(--space-1);
line-height: 1;
}
.modal__close:hover {
color: var(--color-text-primary);
}
.modal__body {
padding: var(--space-4) var(--space-5);
overflow-y: auto;
}
.modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
KANBAN BOARD
═══════════════════════════════════════════════════════════════ */
.kanban-board { .kanban-board {
flex: 1;
display: flex; display: flex;
gap: var(--space-4); gap: var(--space-4);
overflow-x: auto; overflow-x: auto;
padding-bottom: var(--space-4); padding: var(--space-4) var(--space-6);
min-height: 60vh; min-height: 0;
} }
.kanban-column { .kanban-column {
flex: 0 0 var(--kanban-column-width); flex: 0 0 280px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 75vh; max-height: 100%;
} }
.kanban-column__header { .kanban-column__header {
@@ -30,20 +558,25 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4);
background: var(--glass-bg-strong); background: var(--color-bg-elevated);
border: 1px solid var(--glass-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md) var(--radius-md) 0 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: var(--text-sm); font-size: var(--text-body-sm);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--tracking-wide); letter-spacing: var(--tracking-wide);
flex-shrink: 0;
}
[data-theme="modern"] .kanban-column__header {
background: var(--color-bg-overlay);
} }
.kanban-column__count { .kanban-column__count {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-bg); color: var(--color-text-inverse);
font-size: var(--text-xs); font-size: var(--text-caption);
padding: 2px 8px; padding: 2px 8px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
} }
@@ -51,8 +584,8 @@
.kanban-column__body { .kanban-column__body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
background: rgba(0, 0, 0, 0.15); background: var(--color-surface-2);
border: 1px solid var(--glass-border); border: 1px solid var(--color-border);
border-top: none; border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md); border-radius: 0 0 var(--radius-md) var(--radius-md);
padding: var(--space-3); padding: var(--space-3);
@@ -62,17 +595,22 @@
} }
.kanban-card { .kanban-card {
background: var(--kanban-card-bg); background: var(--color-bg-elevated);
border: 1px solid var(--kanban-card-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-3); padding: var(--space-3);
cursor: pointer; cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
} }
.kanban-card:hover { .kanban-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-lg);
border-color: var(--color-border-strong);
}
[data-theme="modern"] .kanban-card {
background: var(--color-bg-overlay);
} }
.kanban-card__header { .kanban-card__header {
@@ -80,34 +618,28 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
gap: var(--space-2);
} }
.kanban-card__id { .kanban-card__id {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: var(--text-xs); font-size: var(--text-caption);
color: var(--color-primary); color: var(--color-primary);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
.kanban-card__priority { .kanban-card__priority {
font-size: var(--text-xs); font-size: var(--text-caption);
padding: 2px 6px;
border-radius: var(--radius-sm);
text-transform: uppercase;
font-weight: var(--font-weight-bold);
} }
.kanban-card__priority--urgent { background: var(--color-error); color: #fff; }
.kanban-card__priority--high { background: var(--color-warn); color: #000; }
.kanban-card__priority--normal { background: var(--color-info); color: #fff; }
.kanban-card__customer { .kanban-card__customer {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1); margin-bottom: var(--space-1);
color: var(--color-text-primary);
} }
.kanban-card__vehicle { .kanban-card__vehicle {
font-size: var(--text-sm); font-size: var(--text-body-sm);
color: var(--color-text-muted); color: var(--color-text-muted);
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
} }
@@ -115,7 +647,8 @@
.kanban-card__meta { .kanban-card__meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: var(--text-xs); align-items: center;
font-size: var(--text-caption);
color: var(--color-text-muted); color: var(--color-text-muted);
} }
@@ -125,25 +658,33 @@
gap: var(--space-1); gap: var(--space-1);
} }
/* Detail modal */ /* ═══════════════════════════════════════════════════════════════
SERVICE ORDER DETAIL
═══════════════════════════════════════════════════════════════ */
.so-detail { .so-detail {
display: grid; display: grid;
gap: var(--space-4); gap: var(--space-4);
} }
.so-detail__section { .so-detail__section {
background: var(--glass-bg-strong); background: var(--color-bg-elevated);
border: 1px solid var(--glass-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-4); padding: var(--space-4);
} }
[data-theme="modern"] .so-detail__section {
background: var(--color-bg-overlay);
}
.so-detail__section h3 { .so-detail__section h3 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: var(--text-sm); font-size: var(--text-body-sm);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--tracking-wide); letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-3); margin-bottom: var(--space-3);
color: var(--color-text-primary);
} }
.so-detail__grid { .so-detail__grid {
@@ -159,13 +700,14 @@
} }
.so-detail__label { .so-detail__label {
font-size: var(--text-xs); font-size: var(--text-caption);
color: var(--color-text-muted); color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
} }
.so-detail__value { .so-detail__value {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
} }
.so-detail__actions { .so-detail__actions {
@@ -174,44 +716,19 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
/* Tables inside modal */ /* ═══════════════════════════════════════════════════════════════
.data-table--compact { RESPONSIVE
width: 100%; ═══════════════════════════════════════════════════════════════ */
border-collapse: collapse;
font-size: var(--text-sm);
}
.data-table--compact th,
.data-table--compact td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--glass-border);
}
.data-table--compact th {
color: var(--color-text-muted);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
font-size: var(--text-xs);
}
.status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.status-badge--pending { background: var(--color-warn); color: #000; }
.status-badge--reserved { background: var(--color-info); color: #fff; }
.status-badge--installed { background: var(--color-success); color: #000; }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.summary-strip {
grid-template-columns: repeat(2, 1fr);
}
.kanban-board { .kanban-board {
flex-direction: column; flex-direction: column;
overflow-x: visible; overflow-x: visible;
overflow-y: auto;
} }
.kanban-column { .kanban-column {
@@ -219,3 +736,34 @@
max-height: none; max-height: none;
} }
} }
@media (max-width: 768px) {
.page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.page-header__actions {
width: 100%;
flex-wrap: wrap;
}
.summary-strip {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-field--span2,
.form-field--span3,
.form-field--span4 {
grid-column: span 1;
}
.so-detail__grid {
grid-template-columns: 1fr;
}
}

58
pos/static/js/workshop.js
View File

@@ -96,7 +96,7 @@ var Workshop = (function() {
}) })
.catch(function(e) { .catch(function(e) {
console.error(e); console.error(e);
document.getElementById('kanbanBoard').innerHTML = '<div class="empty-state"><div class="empty-state__text">Error cargando órdenes</div></div>'; document.getElementById('kanbanBoard').innerHTML = '<div class="empty-state"><div class="empty-state__title">Error cargando órdenes</div><div class="empty-state__subtitle">No se pudieron cargar las órdenes de servicio.</div></div>';
}); });
} }
@@ -117,7 +117,7 @@ var Workshop = (function() {
var body = colEl.querySelector('.kanban-column__body'); var body = colEl.querySelector('.kanban-column__body');
if (!colOrders.length) { if (!colOrders.length) {
body.innerHTML = '<div class="empty-state__text" style="text-align:center;padding:var(--space-4);color:var(--color-text-muted);">Sin órdenes</div>'; body.innerHTML = '<div class="empty-state" style="padding:var(--space-4);"><div class="empty-state__subtitle">Sin órdenes</div></div>';
} else { } else {
colOrders.forEach(function(o) { colOrders.forEach(function(o) {
body.appendChild(renderCard(o)); body.appendChild(renderCard(o));
@@ -126,6 +126,33 @@ var Workshop = (function() {
}); });
} }
function priorityLabel(p) {
var map = {normal: 'Normal', high: 'Alta', urgent: 'Urgente'};
return map[p] || p;
}
function statusBadgeClass(status) {
var map = {
pending: 'badge--pending',
reserved: 'badge--reserved',
installed: 'badge--installed',
cancelled: 'badge--cancelled',
complete: 'badge--complete'
};
return map[status] || 'badge--pending';
}
function statusLabel(status) {
var map = {
pending: 'Pendiente',
reserved: 'Reservado',
installed: 'Instalado',
cancelled: 'Cancelado',
complete: 'Completado'
};
return map[status] || status;
}
function renderCard(o) { function renderCard(o) {
var card = document.createElement('div'); var card = document.createElement('div');
card.className = 'kanban-card'; card.className = 'kanban-card';
@@ -133,7 +160,7 @@ var Workshop = (function() {
card.innerHTML = card.innerHTML =
'<div class="kanban-card__header">' + '<div class="kanban-card__header">' +
' <span class="kanban-card__id">' + esc(o.order_number) + '</span>' + ' <span class="kanban-card__id">' + esc(o.order_number) + '</span>' +
' <span class="kanban-card__priority kanban-card__priority--' + esc(o.priority) + '">' + esc(o.priority) + '</span>' + ' <span class="kanban-card__priority badge badge--' + esc(o.priority) + '">' + esc(priorityLabel(o.priority)) + '</span>' +
'</div>' + '</div>' +
'<div class="kanban-card__customer">' + esc(o.customer_name || 'Cliente general') + '</div>' + '<div class="kanban-card__customer">' + esc(o.customer_name || 'Cliente general') + '</div>' +
'<div class="kanban-card__vehicle">' + esc(o.vehicle_plate || 'Sin vehículo') + '</div>' + '<div class="kanban-card__vehicle">' + esc(o.vehicle_plate || 'Sin vehículo') + '</div>' +
@@ -153,7 +180,7 @@ var Workshop = (function() {
.then(function(o) { .then(function(o) {
document.getElementById('detailTitle').textContent = 'Orden ' + esc(o.order_number); document.getElementById('detailTitle').textContent = 'Orden ' + esc(o.order_number);
renderDetailBody(o); renderDetailBody(o);
document.getElementById('detailModal').style.display = 'flex'; document.getElementById('detailModal').classList.add('is-open');
}) })
.catch(function(e) { alert('Error: ' + e.message); }); .catch(function(e) { alert('Error: ' + e.message); });
} }
@@ -176,13 +203,14 @@ var Workshop = (function() {
' <div class="so-detail__section">' + ' <div class="so-detail__section">' +
' <h3>Refacciones</h3>' + ' <h3>Refacciones</h3>' +
' <table class="data-table--compact"><thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Estado</th><th></th></tr></thead><tbody>' + ' <table class="data-table"><thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Estado</th><th></th></tr></thead><tbody>' +
(o.items || []).map(function(it) { (o.items || []).map(function(it) {
var itemStatus = it.reserved_quantity >= it.quantity ? 'reserved' : it.status;
return '<tr>' + return '<tr>' +
'<td>' + esc(it.name) + '<br><small>' + esc(it.part_number || '') + '</small></td>' + '<td>' + esc(it.name) + '<br><small>' + esc(it.part_number || '') + '</small></td>' +
'<td>' + fmt(it.quantity) + '</td>' + '<td>' + fmt(it.quantity) + '</td>' +
'<td>' + fmtMoney(it.unit_price) + '</td>' + '<td>' + fmtMoney(it.unit_price) + '</td>' +
'<td><span class="status-badge status-badge--' + (it.reserved_quantity >= it.quantity ? 'reserved' : it.status) + '">' + (it.reserved_quantity >= it.quantity ? 'Reservado' : esc(it.status)) + '</span></td>' + '<td><span class="badge ' + statusBadgeClass(itemStatus) + '">' + statusLabel(itemStatus) + '</span></td>' +
'<td>' + (it.reserved_quantity < it.quantity && it.status !== 'cancelled' ? '<button class="btn btn--sm btn--secondary" onclick="event.stopPropagation();Workshop.reserveItem(' + it.id + ')">Reservar</button>' : '') + '</td>' + '<td>' + (it.reserved_quantity < it.quantity && it.status !== 'cancelled' ? '<button class="btn btn--sm btn--secondary" onclick="event.stopPropagation();Workshop.reserveItem(' + it.id + ')">Reservar</button>' : '') + '</td>' +
'</tr>'; '</tr>';
}).join('') + }).join('') +
@@ -195,14 +223,14 @@ var Workshop = (function() {
' <div class="so-detail__section">' + ' <div class="so-detail__section">' +
' <h3>Mano de obra</h3>' + ' <h3>Mano de obra</h3>' +
' <table class="data-table--compact"><thead><tr><th>Concepto</th><th>Horas</th><th>Precio/hr</th><th>Total</th><th>Estado</th></tr></thead><tbody>' + ' <table class="data-table"><thead><tr><th>Concepto</th><th>Horas</th><th>Precio/hr</th><th>Total</th><th>Estado</th></tr></thead><tbody>' +
(o.labor || []).map(function(l) { (o.labor || []).map(function(l) {
return '<tr>' + return '<tr>' +
'<td>' + esc(l.description) + '</td>' + '<td>' + esc(l.description) + '</td>' +
'<td>' + fmt(l.hours) + '</td>' + '<td>' + fmt(l.hours) + '</td>' +
'<td>' + fmtMoney(l.hourly_rate) + '</td>' + '<td>' + fmtMoney(l.hourly_rate) + '</td>' +
'<td>' + fmtMoney(l.total_cost) + '</td>' + '<td>' + fmtMoney(l.total_cost) + '</td>' +
'<td><span class="status-badge status-badge--' + l.status + '">' + esc(l.status) + '</span></td>' + '<td><span class="badge ' + statusBadgeClass(l.status) + '">' + statusLabel(l.status) + '</span></td>' +
'</tr>'; '</tr>';
}).join('') + }).join('') +
'</tbody></table>' + '</tbody></table>' +
@@ -250,13 +278,15 @@ var Workshop = (function() {
var footer = document.getElementById('detailFooter'); var footer = document.getElementById('detailFooter');
footer.innerHTML = footer.innerHTML =
'<button class="btn btn--ghost" onclick="Workshop.closeDetailModal()">Cerrar</button>' + '<button class="btn btn--ghost" onclick="Workshop.closeDetailModal()">Cerrar</button>' +
'<button class="btn btn--secondary" onclick="Workshop.printOrder()">🖨️ Imprimir orden</button>' + '<button class="btn btn--secondary" onclick="Workshop.printOrder()">' +
'<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>' +
'Imprimir orden</button>' +
(o.status === 'ready' && !o.sale_id ? '<button class="btn btn--primary" onclick="Workshop.convertToSale()">Convertir a venta</button>' : '') + (o.status === 'ready' && !o.sale_id ? '<button class="btn btn--primary" onclick="Workshop.convertToSale()">Convertir a venta</button>' : '') +
(o.sale_id ? '<a class="btn btn--secondary" href="/pos/invoicing?sale_id=' + o.sale_id + '">Ver venta #' + o.sale_id + '</a>' : ''); (o.sale_id ? '<a class="btn btn--secondary" href="/pos/invoicing?sale_id=' + o.sale_id + '">Ver venta #' + o.sale_id + '</a>' : '');
} }
function closeDetailModal() { function closeDetailModal() {
document.getElementById('detailModal').style.display = 'none'; document.getElementById('detailModal').classList.remove('is-open');
currentOrderId = null; currentOrderId = null;
} }
@@ -358,11 +388,11 @@ var Workshop = (function() {
populateSelect('noCustomer', customers, function(c) { return {value: c.id, text: c.name + ' (' + (c.phone || '') + ')'}; }); populateSelect('noCustomer', customers, function(c) { return {value: c.id, text: c.name + ' (' + (c.phone || '') + ')'}; });
populateSelect('noVehicle', vehicles, function(v) { return {value: v.id, text: v.plate + ' ' + v.make + ' ' + v.model}; }); populateSelect('noVehicle', vehicles, function(v) { return {value: v.id, text: v.plate + ' ' + v.make + ' ' + v.model}; });
populateSelect('noMechanic', employees, function(e) { return {value: e.id, text: e.name}; }); populateSelect('noMechanic', employees, function(e) { return {value: e.id, text: e.name}; });
document.getElementById('newOrderModal').style.display = 'flex'; document.getElementById('newOrderModal').classList.add('is-open');
} }
function closeNewOrderModal() { function closeNewOrderModal() {
document.getElementById('newOrderModal').style.display = 'none'; document.getElementById('newOrderModal').classList.remove('is-open');
document.getElementById('newOrderForm').reset(); document.getElementById('newOrderForm').reset();
} }
@@ -387,12 +417,12 @@ var Workshop = (function() {
// ─── Catalog ─── // ─── Catalog ───
function openCatalogModal() { function openCatalogModal() {
document.getElementById('catalogModal').style.display = 'flex'; document.getElementById('catalogModal').classList.add('is-open');
renderCatalog(); renderCatalog();
} }
function closeCatalogModal() { function closeCatalogModal() {
document.getElementById('catalogModal').style.display = 'none'; document.getElementById('catalogModal').classList.remove('is-open');
} }
function loadCatalog() { function loadCatalog() {

86
pos/templates/workshop.html
View File

@@ -15,45 +15,71 @@
<meta name="theme-color" content="#F5A623" /> <meta name="theme-color" content="#F5A623" />
<link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" /> <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> </head>
<body> <body>
<div class="page-shell"> <div class="app-shell">
<!-- Sidebar injected by sidebar.js --> <!-- Sidebar injected by sidebar.js -->
<aside id="sidebar"></aside> <aside id="sidebar"></aside>
<div class="main-area pos-main-offset"> <main class="main" role="main">
<div id="offlineBanner"></div> <div id="offlineBanner"></div>
<div class="page-header"> <div class="page-header">
<div> <div class="page-header__title-group">
<h1>Taller</h1> <span class="page-header__eyebrow">Operación · Taller</span>
<p class="page-header__subtitle">Órdenes de servicio y control de reparaciones</p> <h1 class="page-header__title">Taller</h1>
</div> </div>
<div class="page-header__actions"> <div class="page-header__actions">
<button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">Catálogo de servicios</button> <button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">
<button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">+ Nueva orden</button> <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>
</div> </div>
<!-- Summary cards --> <!-- Summary cards -->
<div class="stats-row" id="statsRow"> <div class="summary-strip" id="statsRow">
<div class="stat-card"> <div class="summary-card">
<span class="stat-card__label">Recibidos</span> <div class="summary-card__icon">
<span class="stat-card__value" id="statReceived">--</span> <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>
<div class="stat-card"> <div class="summary-card__body">
<span class="stat-card__label">En reparación</span> <div class="summary-card__label">Recibidos</div>
<span class="stat-card__value" id="statRepair">--</span> <div class="summary-card__value" id="statReceived">--</div>
</div> </div>
<div class="stat-card">
<span class="stat-card__label">Listos</span>
<span class="stat-card__value" id="statReady">--</span>
</div> </div>
<div class="stat-card"> <div class="summary-card">
<span class="stat-card__label">Vencidos</span> <div class="summary-card__icon">
<span class="stat-card__value stat-card__value--danger" id="statOverdue">--</span> <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="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="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>
</div> </div>
@@ -61,11 +87,11 @@
<div class="kanban-board" id="kanbanBoard"> <div class="kanban-board" id="kanbanBoard">
<!-- Columns injected by JS --> <!-- Columns injected by JS -->
</div> </div>
</div> </main>
</div> </div>
<!-- Detail modal --> <!-- 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 modal--lg">
<div class="modal__header"> <div class="modal__header">
<h2 class="modal__title" id="detailTitle">Orden #0000</h2> <h2 class="modal__title" id="detailTitle">Orden #0000</h2>
@@ -81,14 +107,14 @@
</div> </div>
<!-- New order modal --> <!-- New order modal -->
<div class="modal-overlay" id="newOrderModal" style="display:none;"> <div class="modal-overlay" id="newOrderModal">
<div class="modal"> <div class="modal">
<div class="modal__header"> <div class="modal__header">
<h2 class="modal__title">Nueva orden de servicio</h2> <h2 class="modal__title">Nueva orden de servicio</h2>
<button class="modal__close" onclick="Workshop.closeNewOrderModal()">&times;</button> <button class="modal__close" onclick="Workshop.closeNewOrderModal()">&times;</button>
</div> </div>
<div class="modal__body"> <div class="modal__body">
<form id="newOrderForm" class="form-grid form-grid--2"> <form id="newOrderForm" class="form-grid">
<div class="form-field"> <div class="form-field">
<label class="form-label" for="noCustomer">Cliente</label> <label class="form-label" for="noCustomer">Cliente</label>
<select class="form-input" id="noCustomer" required></select> <select class="form-input" id="noCustomer" required></select>
@@ -131,14 +157,14 @@
</div> </div>
<!-- Catalog modal --> <!-- 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 modal--lg">
<div class="modal__header"> <div class="modal__header">
<h2 class="modal__title">Catálogo de servicios</h2> <h2 class="modal__title">Catálogo de servicios</h2>
<button class="modal__close" onclick="Workshop.closeCatalogModal()">&times;</button> <button class="modal__close" onclick="Workshop.closeCatalogModal()">&times;</button>
</div> </div>
<div class="modal__body"> <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"> <div class="form-field form-field--span2">
<input class="form-input" id="catName" placeholder="Nombre del servicio" /> <input class="form-input" id="catName" placeholder="Nombre del servicio" />
</div> </div>
@@ -155,7 +181,8 @@
<button class="btn btn--primary" onclick="Workshop.addCatalogItem()">Agregar</button> <button class="btn btn--primary" onclick="Workshop.addCatalogItem()">Agregar</button>
</div> </div>
</div> </div>
<div class="vs-container" style="margin-top:var(--space-4);max-height:40vh;overflow-y:auto;"> <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"> <table class="data-table">
<thead> <thead>
<tr> <tr>
@@ -173,6 +200,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<script src="/pos/static/js/i18n.js" defer></script> <script src="/pos/static/js/i18n.js" defer></script>
@@ -181,7 +209,7 @@
<script src="/pos/static/js/pos-utils.js?v=2" defer></script> <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/sidebar.js" defer></script>
<script src="/pos/static/js/offline-banner.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>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/pwa-install.js" defer></script>
<script src="/pos/static/js/chat.js" defer></script> <script src="/pos/static/js/chat.js" defer></script>