// Shared line-icon set for the staff admin area (AdminShell) and the
// reseller/customer portal (ResellerShell) — both now share ONE visual
// language (see admin-shell.jsx / reseller-shell.jsx): a light
// black-on-white sidebar nav, each item paired with one of these icons.
//
// Deliberately plain geometric line-drawing style (1.6 stroke, square
// caps, no fill except where noted) — matches the existing LockIcon in
// nav.jsx and the TowerSchematic in shared/primitives.jsx, so nothing
// here introduces a new illustration style to the codebase.
//
// Every icon takes a single `size` prop (default 18) and renders
// `currentColor` for both stroke and fill, so the calling button's own
// `color` style drives the icon colour — no separate colour prop needed,
// and active/hover states "just work" by changing the parent's color.
//
// Loaded before admin-shell.jsx and reseller-shell.jsx (see index.html).
function IconOverview({ size = 18 }) {
return (
);
}
function IconQuote({ size = 18 }) {
return (
);
}
function IconOrders({ size = 18 }) {
return (
);
}
function IconInvoices({ size = 18 }) {
return (
);
}
function IconPurchaseOrders({ size = 18 }) {
return (
);
}
function IconAssets({ size = 18 }) {
return (
);
}
function IconPriceList({ size = 18 }) {
return (
);
}
function IconCustomers({ size = 18 }) {
return (
);
}
function IconApprovals({ size = 18 }) {
return (
);
}
function IconSpecSheets({ size = 18 }) {
return (
);
}
// Open-book glyph — distinct silhouette from IconSpecSheets' single
// dog-eared page, so "User Manuals" reads as its own nav item rather than
// a visual duplicate of "Spec Sheets" in the sidebar.
function IconUserManuals({ size = 18 }) {
return (
);
}
function IconTicket({ size = 18 }) {
return (
);
}
function IconTicketList({ size = 18 }) {
return (
);
}
function IconSettings({ size = 18 }) {
return (
);
}
function IconStaff({ size = 18 }) {
return (
);
}
function IconSignOut({ size = 18 }) {
return (
);
}
function IconMissionControl({ size = 18 }) {
return (
);
}
// ── Mission Control sidebar icons (added for reseller-mission-control-
// page.jsx's neumorphic left icon rail — see that file's own header
// comment for the approved design reference). Same 1.6-stroke geometric
// line style as every icon above; IconSettings/IconMissionControl above
// are reused as-is for the Gear and (bullseye) Live entries.
function IconLightningBolt({ size = 18 }) {
return (
);
}
function IconMapPin({ size = 18 }) {
return (
);
}
function IconCamera({ size = 18 }) {
return (
);
}
function IconSignal({ size = 18 }) {
return (
);
}
function IconBell({ size = 18 }) {
return (
);
}
function IconClock({ size = 16 }) {
return (
);
}
function IconHome({ size = 18 }) {
return (
);
}
// ── Speakers tab icons (unit-management-page.jsx's UM_SpeakersTab) --
// same 1.6-stroke geometric line style as every icon above.
function IconMic({ size = 18 }) {
return (
);
}
function IconSpeakerphone({ size = 18 }) {
return (
);
}
function IconBattery({ size = 18 }) {
return (
);
}
function IconChevronRight({ size = 14, style }) {
return (
);
}
function IconChevronDown({ size = 12, style }) {
return (
);
}
function IconSwitch({ size = 14 }) {
return (
);
}
function IconPulse({ size = 8 }) {
return (
);
}
// Shared sidebar nav-item button — used identically by AdminShell (light,
// `dark=false`) and ResellerShell (dark, `dark=true`) so both shells'
// nav rows behave and feel exactly the same: active state is a solid
// 2px bar on the left edge (not a whole-row tint alone, so it reads at
// a glance even out of the corner of your eye) plus a subtle background
// tint; hover nudges the icon+label 2px to the right and lightens the
// background — small, quick, not distracting.
// Lives here (not in admin-shell.jsx) because reseller-shell.jsx loads
// BEFORE admin-shell.jsx (see index.html) but both need this button —
// portal-icons.jsx loads before either, so this is the shared home.
function ShellNavButton({ label, Icon, active, onClick, testId, dark, indent }) {
const [hover, setHover] = useState(false);
const fg = dark ? "#fff" : "#000";
const fgDim = dark ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.55)";
const tint = dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)";
const tintHover = dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.025)";
const bar = dark ? "#fff" : "#000";
return (
);
}
// Collapsible group header for a section of nav items (e.g. "Sales" ->
// Price List/Quotes/Orders/Invoices/Purchase Orders) -- introduced when
// AdminShell's flat 16-item list got "very busy" and needed grouping
// (see admin-shell.jsx's ADMIN_NAV_GROUPS). Visually a heavier sibling
// of ShellNavButton: same icon+label geometry and hover nudge, plus a
// trailing chevron that rotates 90deg on expand (no active left-bar --
// the bar is reserved for the actual page-level item that's currently
// selected, not for the group wrapping it, though the header still
// tints/bolds when a descendant item is active so the open section
// stays easy to spot at a glance).
function ShellNavSection({ label, Icon, expanded, active, onClick, testId, dark }) {
const [hover, setHover] = useState(false);
const fg = dark ? "#fff" : "#000";
const fgDim = dark ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.55)";
const tint = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)";
const tintHover = dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.025)";
return (
);
}
// RUT241 eSIM Auto Provisioning nav icon — a small router chassis with
// two antennas (Teltonika RUT241's actual silhouette is a squat box with
// a pair of external antennas), used for the admin-only "RUT241 eSIM"
// sidebar item (see admin-shell.jsx's ADMIN_NAV_ITEMS).
function IconRouter({ size = 18 }) {
return (
);
}
// eSIM / SIM-card icon, used inside RUT241 pages (eSIM pool management,
// device detail eSIM status block) — a rounded card with a clipped
// corner and contact-pad lines, the standard SIM pictogram.
function IconSim({ size = 18 }) {
return (
);
}
// Device Profiles admin nav icon — a small template/checklist card (a
// stack of labelled slots), used for the "Device Profiles" sidebar item
// (see admin-shell.jsx's ADMIN_NAV_ITEMS). Distinct from IconRouter
// (a physical device) since this represents a hardware TEMPLATE, not a
// device itself.
function IconDeviceProfile({ size = 18 }) {
return (
);
}
// Camera health warning icon (unit-management-page.jsx's UM_CameraTile) --
// a standard warning triangle, used to flag an Ajax video-edge SD-card
// fault/missing-card/needs-format or a pending firmware update
// (routes/admin-assets.ts's redactCamera / routes/portal.ts's equivalent
// ajax_health_warning field, migrations/0063).
function IconWarningTriangle({ size = 18 }) {
return (
);
}
// Archive/recorded-video playback icons (unit-management-page.jsx's
// UM_CameraTile "History" button + UM_ArchiveViewModal's transport
// controls) -- roadmap item #2. Same 1.6-stroke geometric line style as
// every icon above; IconPlay/IconPause use a small filled shape (like
// the existing filled-circle accents elsewhere in this file) since a
// pure outline triangle/bars read poorly at small button sizes.
function IconHistory({ size = 18 }) {
return (
);
}
function IconPlay({ size = 18 }) {
return (
);
}
function IconPause({ size = 18 }) {
return (
);
}
Object.assign(window, {
IconOverview, IconQuote, IconOrders, IconInvoices, IconPurchaseOrders,
IconAssets, IconPriceList, IconCustomers, IconApprovals, IconSpecSheets, IconUserManuals,
IconTicket, IconTicketList, IconSettings, IconStaff, IconSignOut,
IconMissionControl, IconChevronRight, IconChevronDown, IconSwitch, IconPulse,
ShellNavButton, ShellNavSection,
IconLightningBolt, IconMapPin, IconCamera, IconSignal, IconBell, IconClock, IconHome,
IconMic, IconSpeakerphone, IconBattery,
IconRouter, IconSim, IconDeviceProfile, IconWarningTriangle,
IconHistory, IconPlay, IconPause,
});