feat: add Repair Center operations view
This commit is contained in:
lussierj committed
1 parent
786a1ab910
commit
4a1959ecd6
14 files changed
+1963
-338
No files matched your search
@@ -1357,3 +1357,135 @@ button.map-position:hover {
|
||||
.fleet-search, .fleet-filter-actions { grid-column: auto; }
|
||||
.fleet-table td { grid-template-columns: 88px minmax(0, 1fr); }
|
||||
}
|
||||
|
||||
/* Repair Center */
|
||||
.repair-center { padding: 14px; }
|
||||
.repair-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(100px, 160px));
|
||||
gap: 8px;
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
.repair-summary > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 7px 9px;
|
||||
background: #f6f8fa;
|
||||
}
|
||||
.repair-summary span { color: var(--muted); font-size: 12px; }
|
||||
.repair-filters {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(230px, 1.6fr) repeat(6, minmax(125px, 1fr));
|
||||
align-items: end;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.repair-filters .field { min-width: 0; }
|
||||
.repair-filters input,
|
||||
.repair-filters select { min-height: 38px; }
|
||||
.repair-search { grid-column: span 2; }
|
||||
.repair-filter-actions { display: flex; gap: 7px; }
|
||||
.repair-filter-actions .quiet-button,
|
||||
.repair-pagination .quiet-button,
|
||||
.repair-row-actions .quiet-button { color: var(--ink); background: #fff; }
|
||||
.repair-table { min-width: 1260px; }
|
||||
.repair-table th,
|
||||
.repair-table td { padding: 8px 9px; vertical-align: top; }
|
||||
.repair-row[data-source="legacy"] { border-left: 4px solid #8390a0; }
|
||||
.repair-row[data-source="modular"] { border-left: 4px solid #176b9a; }
|
||||
.repair-row[data-active="false"] { opacity: .78; }
|
||||
.repair-miner { display: grid; gap: 3px; min-width: 150px; }
|
||||
.source-label { color: var(--muted); font-size: 11px; font-weight: 700; }
|
||||
.repair-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.repair-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #718096; }
|
||||
.repair-status[data-status="waiting_for_parts"]::before,
|
||||
.repair-status[data-status="waiting_parts"]::before,
|
||||
.repair-status[data-status="needs_followup"]::before { background: var(--warn); }
|
||||
.repair-status[data-status="completed"]::before { background: var(--good); }
|
||||
.repair-status[data-status="failed"]::before,
|
||||
.repair-status[data-status="cancelled"]::before { background: var(--danger); }
|
||||
.repair-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.quiet-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
border: 1px solid #8390a0;
|
||||
border-radius: 5px;
|
||||
padding: 8px 11px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.repair-result-summary { color: var(--muted); font-size: 13px; }
|
||||
.repair-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 12px; }
|
||||
.repair-inspector {
|
||||
position: fixed;
|
||||
inset: 68px 0 0 auto;
|
||||
z-index: 70;
|
||||
width: min(520px, 100%);
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--line);
|
||||
padding: 18px;
|
||||
background: var(--surface);
|
||||
box-shadow: -10px 0 26px rgb(15 23 42 / 18%);
|
||||
}
|
||||
.inspector-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
|
||||
.repair-detail-section { padding: 14px 0; border-top: 1px solid var(--line); }
|
||||
.repair-detail-section h3 { margin: 0 0 9px; font-size: 16px; }
|
||||
.repair-timeline,
|
||||
.repair-parts-list { display: grid; gap: 9px; margin: 0; padding-left: 22px; }
|
||||
.repair-timeline li,
|
||||
.repair-parts-list li { padding: 7px 0; }
|
||||
.repair-timeline li > span,
|
||||
.repair-parts-list li > span { display: block; }
|
||||
.voided-part { text-decoration: line-through; }
|
||||
.repair-action-form { display: grid; gap: 8px; margin: 10px 0; }
|
||||
.repair-action-form input,
|
||||
.repair-action-form select,
|
||||
.repair-action-form textarea { width: 100%; min-height: 40px; }
|
||||
.repair-action-form textarea { min-height: 78px; resize: vertical; }
|
||||
.danger-button {
|
||||
min-height: 40px;
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 5px;
|
||||
padding: 8px 11px;
|
||||
color: var(--danger);
|
||||
background: #fff;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
.state-inline-error { color: var(--danger); font-weight: 700; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.repair-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.repair-search { grid-column: span 2; }
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.repair-center { padding: 12px; }
|
||||
.repair-summary { grid-template-columns: repeat(3, 1fr); }
|
||||
.repair-summary > div { display: grid; gap: 2px; }
|
||||
.repair-filters { grid-template-columns: 1fr 1fr; }
|
||||
.repair-search, .repair-filter-actions { grid-column: 1 / -1; }
|
||||
.repair-filter-actions > * { flex: 1; }
|
||||
.repair-table { min-width: 0; }
|
||||
.repair-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
||||
.repair-table tbody { display: grid; gap: 12px; }
|
||||
.repair-table tr { display: block; border: 1px solid var(--line); padding: 8px; }
|
||||
.repair-table td { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; border: 0; }
|
||||
.repair-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; }
|
||||
.repair-pagination { justify-content: space-between; flex-wrap: wrap; }
|
||||
.repair-inspector { inset: 0; width: 100%; }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.repair-filters { grid-template-columns: 1fr; }
|
||||
.repair-search, .repair-filter-actions { grid-column: auto; }
|
||||
.repair-table td { grid-template-columns: 90px minmax(0, 1fr); }
|
||||
}
|
||||
Reference in new issue
Block a user