// ============================================================
// Maquinário — peças recorrentes do módulo (chips, painéis, tabelas)
// ============================================================
const STATUS_STYLE = {
'Atrasada': { bg: 'var(--color-danger-dark)', fg: '#fff' },
'A vencer': { bg: 'var(--color-warning)', fg: '#fff' },
'Atenção': { bg: 'var(--color-alert)', fg: 'var(--color-alert-dark)' },
'Segura': { bg: 'var(--color-success-light)', fg: '#fff' },
}
function StatusChip({ status, minWidth = 80 }) {
const s = STATUS_STYLE[status] || STATUS_STYLE['Segura']
return {status}
}
// Glifos ausentes na fonte ckl-icon (chave/escudo) desenhados em SVG no mesmo peso
function GlyphWrench({ size = 17 }) {
return (
)
}
function GlyphShieldCheck({ size = 17 }) {
return (
)
}
function TypeGlyph({ type, size = 17 }) {
const { Ic } = window
if (type === 'Corretiva') return
if (type === 'Preventiva') return
const s = TYPE_STYLE[type] || TYPE_STYLE['Corretiva']
return
}
// Tipos de manutenção — cada um com hue própria: Preventiva (terracota), Periódica
// (azul-petróleo, base em dias), Garantia (roxo, única) e Corretiva (azul).
const TYPE_STYLE = {
'Preventiva': { bg: 'var(--color-warning)', fg: '#fff', icon: 'checkmark-circle-outline' },
'Periódica': { bg: 'oklch(0.52 0.14 265)', fg: '#fff', icon: 'calendar' },
'Garantia': { bg: 'oklch(0.55 0.19 300)', fg: '#fff', icon: 'ribbon-outline' },
'Corretiva': { bg: 'var(--color-info)', fg: '#fff', icon: 'warning-outline' },
}
function TypeChip({ type, variant }) {
const s = TYPE_STYLE[type] || TYPE_STYLE['Corretiva']
if (variant === 'text') return (
{type}
)
return
{type}
}
// Pílulas de filtro por tipo de manutenção (dashboard)
function TypeFilterPills({ value, onChange, types }) {
const all = [{ key: '', label: 'Todas' }, ...types.map(t => ({ key: t, label: t }))]
return (
{all.map(t => {
const on = value === t.key
const s = TYPE_STYLE[t.key]
return (
)
})}
)
}
function ActiveChip({ active }) {
const { Ic } = window
return
{active ? 'Ativo' : 'Inativo'}
}
// Painel branco (styles.tableContainer / filtersContainer)
function Panel({ children, style, pad = 32 }) {
return
}
function BlockTitle({ children, style }) {
return {children}
}
// Cabeçalho de tabela com afordância de ordenação (uppercase + seta)
function Th({ children, sortable = true, align = 'left', width }) {
return
{children}{sortable && ↓} |
}
function Td({ children, style, onClick, title }) {
return {children} |
}
function Row({ children, i, onClick }) {
const [h, setH] = React.useState(false)
const zebra = i % 2 === 1
return setH(true)} onMouseLeave={() => setH(false)}
style={{ background: h ? 'var(--color-background-dark-1)' : (zebra ? '#F7F7F7' : '#fff'), cursor: onClick ? 'pointer' : 'default' }}>{children}
}
function TableFrame({ children, style }) {
return
}
function Pagination({ pages = 4, page = 1, onPage }) {
const { Ic } = window
if (pages <= 1) return null
return (
{Array.from({ length: pages }, (_, i) => i + 1).map(n => (
))}
)
}
// Estados de lista — mesmos textos do produto
function EmptyState({ message }) {
const { Ic } = window
return (
)
}
function SkeletonRows({ rows = 6, height = 22 }) {
return
{Array.from({ length: rows }).map((_, i) => (
))}
{label}
{suffix}
{segments.filter(s => s.value > 0).map((s, i) => (
))}
)
}
function Legend({ items }) {
return
{items.map((it, i) => (
{it.name}
))}
}
function InfoBanner({ message, linkText, onClose }) {
const { Ic } = window
const parts = message.split(linkText)
return (
)
}
function FilterButton({ count, onClick }) {
const { Btn } = window
return
}
function Caption({ children, style }) {
return {children}
}
function fmtNum(n) { return typeof n === 'number' ? n.toLocaleString('pt-BR') : n }
function fmtDateBR(iso) { const [y, m, d] = iso.split('-'); return `${d}/${m}/${y}` }
Object.assign(window, { StatusChip, TypeChip, TypeGlyph, TypeFilterPills, TYPE_STYLE, ActiveChip, Panel, BlockTitle, Th, Td, Row, TableFrame, Pagination, EmptyState, SkeletonRows, Bar, Legend, InfoBanner, FilterButton, Caption, fmtNum, fmtDateBR })