/* ============================================================ FacilityOS — Assets registry + slide-over detail ============================================================ */ window.Screens = window.Screens || {}; const ASSET_STATUS = { operational: { label: "Operational", token: "--c-done" }, maintenance: { label: "In Maintenance", token: "--c-medium" }, down: { label: "Down", token: "--c-critical" }, retired: { label: "Retired", token: "--c-low" }, }; const WARRANTY = { active: { label: "Active", token: "--c-done" }, expiring: { label: "Expiring", token: "--c-high" }, expired: { label: "Expired", token: "--c-critical" }, none: { label: "None", token: "--c-low" }, }; function HealthBar({ value }) { const tok = value >= 75 ? "--c-done" : value >= 50 ? "--c-medium" : "--c-critical"; return (
{value}
); } function QRGlyph({ size = 96 }) { // deterministic pseudo-QR from a fixed pattern const cells = "111111101010111111100000101110000001011101101010110111010110111011010100000010101000001111111010101111111000000000011110000110111011010011000010101110011100100100010111010100111011010010101011111010001100111000000110100110101111110010010101011101001010100110"; const n = 16, s = size / n; return ( {Array.from({ length: n * n }).map((_, i) => { const on = cells[i % cells.length] === "1"; if (!on) return null; const x = (i % n) * s, y = Math.floor(i / n) * s; return ; })} ); } function AssetSlideOver({ id, onClose, go }) { const DB = window.DB; const a = DB.assetDetail(id); const f = DB.facById(a.facility); const cat = DB.ASSET_CATS[a.cat]; const st = ASSET_STATUS[a.status], wr = WARRANTY[a.warranty]; const depr = Math.round((a.health / 100) * a.value); return (
{/* header */}
{a.id}

{a.name}

{/* status row */}
{st.label} {a.cat}
{/* QR + health */}
Asset health
Warranty
{wr.label}
{/* specs */}
Specifications
{a.specs.map((s) => (
{s.k}
{s.v}
))}
{/* value / depreciation */}
Purchase value
${a.value.toLocaleString()}
Current book value
${depr.toLocaleString()}
{/* maintenance history */}
Maintenance history
{a.history.map((h, i) => (
{i !== a.history.length-1 && }
{h.text}
go("wo-detail", { id: h.wo })}>{h.wo} · {h.date}
))}
{/* linked docs */}
Linked documents
{a.docs.map((d) => { const dk = DB.DOC_KIND[d.kind]; return ( ); })}
{/* footer */}
go("work-orders")}>New Work Order Print QR
); } Screens.Assets = function Assets({ go, search, params }) { const DB = window.DB; const { Card } = UI; const FilterSelect = window.FilterSelect; const [cat, setCat] = useState("all"); const [facFilter, setFacFilter] = useState(params && params.facility ? params.facility : "all"); const [openId, setOpenId] = useState(null); const q = (search || "").toLowerCase(); const cats = ["all", ...Object.keys(DB.ASSET_CATS)]; const list = DB.assets.filter((a) => (cat === "all" || a.cat === cat) && (facFilter === "all" || a.facility === facFilter) && (!q || a.name.toLowerCase().includes(q) || a.id.toLowerCase().includes(q) || a.model.toLowerCase().includes(q)) ); return (
{/* category chips */}
{cats.map((c) => { const on = cat === c; const tok = c === "all" ? "--accent" : DB.ASSET_CATS[c].token; const count = c === "all" ? DB.assets.length : DB.assets.filter((a) => a.cat === c).length; return ( ); })}
Add Asset
{/* facility filter row */}
({ v: f.id, l: f.name }))} /> {list.length} assets · ${list.reduce((s,a)=>s+a.value,0).toLocaleString()} total value
{["Asset", "Category", "Facility", "Status", "Health", "Warranty", "Purchased", "Value"].map((h, i) => ( ))} {list.map((a, i) => { const f = DB.facById(a.facility); const catC = DB.ASSET_CATS[a.cat], st = ASSET_STATUS[a.status], wr = WARRANTY[a.warranty]; return ( setOpenId(a.id)} style={{ cursor: "pointer", background: i % 2 ? "var(--surface)" : "color-mix(in oklch, var(--surface-2) 45%, var(--surface))" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--surface-2)"} onMouseLeave={(e) => e.currentTarget.style.background = i % 2 ? "var(--surface)" : "color-mix(in oklch, var(--surface-2) 45%, var(--surface))"}> ); })}
= 7 ? "right" : "left", padding: "11px 14px", fontSize: 11.5, fontWeight: 700, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--text-faint)", borderBottom: "1px solid var(--border)", whiteSpace: "nowrap" }} className={i===2?"hide-md":i===6?"hide-sm":""}>{h}
{a.name}
{a.id}
 {a.cat} {f.name} {st.label} {wr.label} {a.purchased} ${a.value.toLocaleString()}
{list.length === 0 &&
No assets match
Try a different category or facility.
} {openId && setOpenId(null)} go={go} />}
); };