/* FLOWLINE — views: Overview (region), UnitOrgChart (any unit, two tiers) */
/* ===================== OVERVIEW (departments → child units + people) ===================== */
function RegionView({ t, filterSev, showFlagged, onOpenUnit, onOpenEntity }) {
const FL = window.FL;
const dimIf = (sev) => (filterSev && sev !== filterSev ? " dim" : "");
const sum = FL.summary();
const depts = FL.topUnits();
// Pre-compute counts for the filter banner (units that appear as cards in this view)
let flaggedUnitCount = 0;
let totalUnitCount = 0;
depts.forEach((d) => {
const childUnits = FL.childUnitsOf(d.id);
const directPeople = FL.peopleInUnit(d.id);
// Mirror the self-card rule below, or the banner counts a card nobody sees.
const selfSt = FL.unitSelfStatus(d.id);
if (
childUnits.length === 0 ||
(directPeople.length > 0 && selfSt.sev !== "green")
) {
totalUnitCount++;
if (selfSt.sev !== "green") flaggedUnitCount++;
}
childUnits.forEach((cu) => {
totalUnitCount++;
if (FL.unitStatus(cu.id).sev !== "green") flaggedUnitCount++;
});
});
return (
{FL.orgName}
Org-wide roll-up · {FL.DEPTS.length} departments · {FL.SHOPS.length}{" "}
shops · {FL.PEOPLE.length} people
{showFlagged && (
0 ? "var(--orange)" : "var(--green)",
}}
>
{flaggedUnitCount > 0
? flaggedUnitCount +
" of " +
totalUnitCount +
" units need attention"
: "All units are in flow right now"}
)}
{sum.sev.red > 0 && {sum.sev.red} critical }
{sum.sev.orange > 0 && (
{sum.sev.orange} escalated
)}
{sum.sev.yellow > 0 && (
{sum.sev.yellow} flagged
)}
{sum.open === 0 && All in flow }
{showFlagged && flaggedUnitCount === 0 && (
)}
{depts.map((d) => {
const dst = FL.unitStatus(d.id);
const childUnits = FL.childUnitsOf(d.id);
const directPeople = FL.peopleInUnit(d.id);
// The self-card speaks for the department's OWN roster only — its
// children sit beside it as their own cards and the section header
// above already carries the rollup.
const selfSt = FL.unitSelfStatus(d.id);
// A department with no child units IS its roster, so it always gets a
// card. One that has child units only earns a self-card when someone
// reporting to it directly needs attention: otherwise it is a card
// whose whole content is "these people are fine", sitting among the
// child cards that carry the actual work. Regional managers park at
// the department level (their shops span containers), so this would
// otherwise be a permanent empty card on every such department.
const showSelfCard =
childUnits.length === 0 ||
(directPeople.length > 0 && selfSt.sev !== "green");
// When "out of flow only" is active, hide green units entirely
let visibleChildUnits = childUnits;
let selfVisible = showSelfCard;
if (showFlagged) {
visibleChildUnits = childUnits.filter(
(cu) => FL.unitStatus(cu.id).sev !== "green",
);
selfVisible = showSelfCard && selfSt.sev !== "green";
if (!selfVisible && visibleChildUnits.length === 0) return null;
}
return (
{d.name}
onOpenEntity({ kind: "dept", id: d.id })}
>
Why this color ›
{selfVisible && (
onOpenUnit(d.id)}
onBreakdown={() => onOpenEntity({ kind: "dept", id: d.id })}
/>
)}
{visibleChildUnits.map((u) => (
onOpenUnit(u.id)}
onBreakdown={() =>
onOpenEntity({
kind: u.type === "shop" ? "shop" : "dept",
id: u.id,
})
}
/>
))}
{!selfVisible && visibleChildUnits.length === 0 && (
)}
);
})}
);
}
// `selfOnly` renders a unit's own roster without its child units: the severity,
// reasons and group count all ignore the children, which are shown as sibling
// cards right next to it.
function UnitCard({ unit, t, dimIf, onOpen, onBreakdown, selfOnly }) {
const FL = window.FL;
const st = selfOnly ? FL.unitSelfStatus(unit.id) : FL.unitStatus(unit.id);
const c = st.counts;
const ppl = FL.peopleInUnit(unit.id);
const childUnits = selfOnly ? [] : FL.childUnitsOf(unit.id);
const bars = ppl.map((p) => FL.personStatus(p.id).sev);
const order = { red: 0, orange: 1, yellow: 2, green: 3 };
bars.sort((a, b) => order[a] - order[b]);
const kind = unit.type === "shop" ? "shop" : "dept";
const metaBits = [];
if (unit.deptName) metaBits.push(unit.deptName);
if (selfOnly) metaBits.push("Reports directly");
metaBits.push(ppl.length + (ppl.length === 1 ? " person" : " people"));
if (childUnits.length > 0)
metaBits.push(
childUnits.length + (childUnits.length === 1 ? " group" : " groups"),
);
return (
{unit.name}
{metaBits.join(" · ")}
{st.reasons.slice(0, 3).map((r, i) => (
))}
{st.reasons.length === 0 && (
)}
{bars.length > 0 && (
{bars.map((sv, i) => (
)}
{c.red}
{c.orange}
{c.yellow}
{c.green}
{
e.stopPropagation();
onBreakdown();
}}
>
Why this color ›
);
}
/* ===================== SHOP / BRANCH LENS (additive grouping) ===================== */
function BranchView({ t, filterSev, onOpenEntity }) {
const FL = window.FL;
const dimIf = (sev) => (filterSev && sev !== filterSev ? " dim" : "");
const groups = FL.branchGroups();
const flagged = groups.filter(
(g) => FL.branchStatus(g).sev !== "green",
).length;
return (
By shop / branch
The same people and trucks, grouped by their home branch ·{" "}
{groups.length} branches
Display lens only — supervision, routing and escalation are
unchanged.
{flagged > 0 ? (
{flagged} need attention
) : (
All in flow
)}
{groups.map((g) => (
))}
{groups.length === 0 && (
)}
);
}
function BranchCard({ group, t, dimIf, onOpenEntity }) {
const FL = window.FL;
const st = FL.branchStatus(group);
const c = st.counts;
const order = { red: 0, orange: 1, yellow: 2, green: 3 };
const people = group.peopleIds.map((id) => FL.peopleById[id]).filter(Boolean);
const bars = people.map((p) => FL.personStatus(p.id).sev);
bars.sort((a, b) => order[a] - order[b]);
const flaggedPeople = people
.filter((p) => FL.personStatus(p.id).sev !== "green")
.sort(
(a, b) =>
order[FL.personStatus(a.id).sev] - order[FL.personStatus(b.id).sev],
);
const inFlowCount = people.length - flaggedPeople.length;
const metaBits = [];
metaBits.push(people.length + (people.length === 1 ? " person" : " people"));
if (group.vehicles.length > 0)
metaBits.push(
group.vehicles.length +
(group.vehicles.length === 1 ? " truck" : " trucks"),
);
return (
{group.name}
{metaBits.join(" · ")}
{flaggedPeople.slice(0, 5).map((p) => {
const ps = FL.personStatus(p.id);
return (
onOpenEntity({ kind: "person", id: p.id })}
>
{p.role}
);
})}
{flaggedPeople.length > 5 && (
)}
{flaggedPeople.length === 0 && (
)}
{flaggedPeople.length > 0 && inFlowCount > 0 && (
)}
{bars.length > 0 && (
{bars.map((sv, i) => (
)}
{group.vehicles.length > 0 && (
{group.vehicles.map((v) => (
{
if (v.operatorId)
onOpenEntity({ kind: "person", id: v.operatorId });
}}
>
{v.name}
))}
)}
{c.red}
{c.orange}
{c.yellow}
{c.green}
);
}
/* ===================== CARD EDIT MODAL ===================== */
/* In-app edit of a person card's display fields (name / job title). Optimistic:
the local caches update immediately; a failed save rolls them back. Edits are
Flowline-authoritative — the server marks them so external syncs never
overwrite them. */
function CardEditModal({ person, onClose, onSaved }) {
const FL = window.FL;
const [name, setName] = useState(person.name || "");
const [title, setTitle] = useState(
person.role && person.role !== "Team member" ? person.role : "",
);
const [err, setErr] = useState("");
const [busy, setBusy] = useState(false);
const submit = async function (e) {
e.preventDefault();
setErr("");
var newName = name.trim();
if (!newName) {
setErr("Name can't be empty.");
return;
}
var newTitle = title.trim();
setBusy(true);
// Optimistic local update so the chart reflects the edit immediately.
var prev = { name: person.name, role: person.role };
var node = FL.nodeById[person.id];
var prevNode = node ? { name: node.name, role: node.role } : null;
person.name = newName;
person.role = newTitle || "Team member";
if (node) {
node.name = newName;
node.role = newTitle || null;
}
try {
await API.updateEntityCard(person.id, {
name: newName,
jobTitle: newTitle || null,
});
onSaved();
} catch (e2) {
// Roll back the optimistic update and surface the error.
person.name = prev.name;
person.role = prev.role;
if (node && prevNode) {
node.name = prevNode.name;
node.role = prevNode.role;
}
setErr(e2.message || "Failed to save the card.");
setBusy(false);
}
};
return (
Edit card
Display info only — permissions and alert routing are unchanged. Edits
made here stick, even when Samsara or Timetracker re-sync.
{err &&
{err}
}
Cancel
);
}
/* ===================== UNIT ORG CHART (shop OR department) ===================== */
function UnitOrgChart({
unitId,
t,
filterSev,
selectedId,
onSelectPerson,
onSelectEntity,
onOpenUnit,
quietGreens,
showLogins,
user,
onReload,
}) {
const FL = window.FL;
const unit = FL.unitById[unitId];
const unitSt = FL.unitStatus(unitId);
const mgmt = FL.managementOf(unitId);
const childUnits = FL.childUnitsOf(unitId);
const vehicles = FL.vehiclesOf(unitId);
const managers = mgmt.managers;
const reports = mgmt.reports;
// ---- pan/zoom ----
const Z = { min: 0.5, max: 1.8, step: 0.15 };
const isTouch =
typeof window !== "undefined" &&
window.matchMedia &&
window.matchMedia("(pointer: coarse)").matches;
const [scale, setScale] = useState(isTouch ? 0.7 : 1);
const vpRef = useRef(null);
const scaleRef = useRef(scale);
useEffect(() => {
scaleRef.current = scale;
}, [scale]);
useEffect(() => {
setScale(isTouch ? 0.7 : 1);
}, [unitId]);
const [collapsed, setCollapsed] = useState({});
useEffect(() => {
setCollapsed({});
}, [unitId]);
const clampZ = (v) => Math.min(Z.max, Math.max(Z.min, v));
// ---- card management (admins + in-scope managers only) ----
// Client-side gating is display sugar; the server re-enforces both the role
// and the shop scope on every offboard/edit call.
const canManage = function (personId) {
return user ? FL.canManagePerson(user, personId) : false;
};
const canManageHere =
!!user &&
(managers.some(function (p) {
return canManage(p.id);
}) ||
reports.some(function (p) {
return canManage(p.id);
}));
const [editPerson, setEditPerson] = useState(null);
// drag state: { id, name, x, y } while a card is being dragged
const [drag, setDrag] = useState(null);
const [overTrash, setOverTrash] = useState(false);
const trashRef = useRef(null);
const overTrashRef = useRef(false);
const confirmOffboard = async function (person) {
const ok = window.confirm(
"Remove " +
person.name +
" from the org chart?\n\nTheir card comes off the chart and any linked login is disabled. Past exceptions and audit history are kept.",
);
if (!ok) return;
try {
await API.offboardEntity(person.id);
if (onReload) await onReload();
} catch (e) {
window.alert(e.message || "Failed to remove this person.");
}
};
// Hand-rolled drag (no HTML5 DnD): mousedown on a manageable card arms a
// 6px-threshold drag; past it, a ghost follows the pointer and the trash
// target lights up while hovered. Mouseup over the trash offboards (after
// the same confirmation as the click path). A sub-threshold press falls
// through to the card's normal click (select person).
const startCardDrag = function (person, ev) {
if (ev.button !== undefined && ev.button !== 0) return;
const startX = ev.clientX;
const startY = ev.clientY;
let moved = false;
const isOverTrash = function (x, y) {
const el = trashRef.current;
if (!el) return false;
const r = el.getBoundingClientRect();
return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
};
const onMove = function (e) {
if (
!moved &&
Math.abs(e.clientX - startX) < 6 &&
Math.abs(e.clientY - startY) < 6
)
return;
moved = true;
e.preventDefault();
setDrag({ id: person.id, name: person.name, x: e.clientX, y: e.clientY });
const over = isOverTrash(e.clientX, e.clientY);
overTrashRef.current = over;
setOverTrash(over);
};
const onUp = function (e) {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
const dropOnTrash =
moved && (overTrashRef.current || isOverTrash(e.clientX, e.clientY));
overTrashRef.current = false;
setOverTrash(false);
setDrag(null);
if (dropOnTrash) confirmOffboard(person);
};
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
};
useEffect(() => {
const el = vpRef.current;
if (!el) return;
const onWheel = (e) => {
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
setScale((s) => clampZ(s - e.deltaY * 0.0022));
}
};
let pinchStart = 0,
pinchScale = 1;
const dist = (tt) =>
Math.hypot(tt[0].clientX - tt[1].clientX, tt[0].clientY - tt[1].clientY);
const onTS = (e) => {
if (e.touches.length === 2) {
pinchStart = dist(e.touches);
pinchScale = scaleRef.current;
}
};
const onTM = (e) => {
if (e.touches.length === 2 && pinchStart) {
e.preventDefault();
setScale(clampZ((pinchScale * dist(e.touches)) / pinchStart));
}
};
const onTE = (e) => {
if (e.touches.length < 2) pinchStart = 0;
};
el.addEventListener("wheel", onWheel, { passive: false });
el.addEventListener("touchstart", onTS, { passive: false });
el.addEventListener("touchmove", onTM, { passive: false });
el.addEventListener("touchend", onTE);
return () => {
el.removeEventListener("wheel", onWheel);
el.removeEventListener("touchstart", onTS);
el.removeEventListener("touchmove", onTM);
el.removeEventListener("touchend", onTE);
};
}, []);
if (!unit)
return (
);
const kindLabel = unit.type === "shop" ? "Shop" : "Department";
const entityKind = unit.type === "shop" ? "shop" : "dept";
const selfSelected =
selectedId === "unit:" + unitId ||
selectedId === "shop:" + unitId ||
selectedId === "dept:" + unitId;
const hasPeople = managers.length > 0 || reports.length > 0;
const roleGroups = {};
reports.forEach((p) => {
const key = p.role || "Unspecified";
if (!roleGroups[key]) roleGroups[key] = [];
roleGroups[key].push(p);
});
const sevOrd = { red: 0, orange: 1, yellow: 2, green: 3 };
const groupWorstSev = {};
Object.keys(roleGroups).forEach((role) => {
let best = 3;
roleGroups[role].forEach((p) => {
const s = sevOrd[FL.personStatus(p.id).sev];
if (s < best) best = s;
});
groupWorstSev[role] = ["red", "orange", "yellow", "green"][best];
});
const roleList = Object.keys(roleGroups).sort((a, b) => {
const da = sevOrd[groupWorstSev[a]];
const db = sevOrd[groupWorstSev[b]];
if (da !== db) return da - db;
return a.localeCompare(b);
});
return (
{unit.name}
{unit.deptName ? unit.deptName + " · " : ""}org chart · click any
profile to drill into its exception(s)
{kindLabel} {SevText[unitSt.sev]}
onSelectEntity({ kind: entityKind, id: unitId })}
/>
{vehicles.length > 0 &&
Fleet · {vehicles.length}
)}
{vehicles.length > 0 && (
{vehicles.map((v) => (
{
if (v.operatorId) onSelectPerson(v.operatorId);
}}
/>
))}
)}
{childUnits.length > 0 &&
Groups · {childUnits.length}
)}
{childUnits.length > 0 && (
{childUnits.map((cu) => (
onOpenUnit(cu.id)}
/>
))}
)}
{managers.length > 0 &&
Management · {managers.length}
)}
{managers.length > 0 && (
{managers.map((p) => (
onSelectPerson(p.id)}
showLogins={showLogins}
manage={canManage(p.id)}
onEdit={() => setEditPerson(p)}
onOffboard={() => confirmOffboard(p)}
onDragStart={(e) => startCardDrag(p, e)}
/>
))}
)}
{hasPeople &&
Team · {reports.length}
)}
{hasPeople && reports.length === 0 && (
)}
{hasPeople && reports.length > 0 && (
{roleList.map((role) => {
const group = roleGroups[role];
const worst = groupWorstSev[role];
const isCollapsed = !!collapsed[role];
const flagged = group.filter(
(p) => FL.personStatus(p.id).sev !== "green",
).length;
return (
{flagged} }
{group.length}{" "}
{group.length === 1 ? "person" : "people"}
{
e.stopPropagation();
setCollapsed((prev) =>
Object.assign({}, prev, { [role]: !prev[role] }),
);
}}
>
{isCollapsed ? "▸ Show" : "▾ Hide"}
{!isCollapsed && (
{group.map((p) => (
onSelectPerson(p.id)}
showLogins={showLogins}
manage={canManage(p.id)}
onEdit={() => setEditPerson(p)}
onOffboard={() => confirmOffboard(p)}
onDragStart={(e) => startCardDrag(p, e)}
/>
))}
)}
);
})}
No people in this unit.
)}
e.stopPropagation()}>
setScale((s) => clampZ(s - Z.step))}
disabled={scale <= Z.min + 0.001}
>
−
setScale(isTouch ? 0.7 : 1)}
>
{Math.round(scale * 100)}%
setScale((s) => clampZ(s + Z.step))}
disabled={scale >= Z.max - 0.001}
>
+
{canManageHere && (
{"\uD83D\uDDD1"}
{overTrash ? "Release to remove" : "Remove person"}
Drag a card here, or use the {"\uD83D\uDDD1"} on a card
)}
{drag && (
{drag.name}
)}
{editPerson && (
setEditPerson(null)}
onSaved={async () => {
setEditPerson(null);
if (onReload) await onReload();
}}
/>
)}
);
}
function Connector() {
return (
);
}
function UnitNode({ unit, st, t, filterSev, selected, onClick }) {
const dim = filterSev && st.sev !== filterSev ? " dim" : "";
const kind = unit.type === "shop" ? "shop" : "dept";
const label =
unit.type === "shop" ? "shop composite" : "department composite";
return (
{unit.name}{" "}
({label})
{unit.deptName || "Top-level department"}
{st.reasons[0] && (
{st.reasons[0].text}
{st.reasons.length > 1 ? ` · +${st.reasons.length - 1} more` : ""}
)}
);
}
function ChildUnitNode({ unit, t, filterSev, onClick }) {
const FL = window.FL;
const st = FL.unitStatus(unit.id);
const dim = filterSev && st.sev !== filterSev ? " dim" : "";
const ppl = FL.peopleInUnit(unit.id);
const kids = FL.childUnitsOf(unit.id);
const kind = unit.type === "shop" ? "shop" : "dept";
const metaBits = [ppl.length + (ppl.length === 1 ? " person" : " people")];
if (kids.length > 0)
metaBits.push(kids.length + (kids.length === 1 ? " group" : " groups"));
return (
{unit.name}
{metaBits.join(" · ")}
{st.reasons[0] && (
{st.reasons[0].text}
{st.reasons.length > 1 ? ` · +${st.reasons.length - 1} more` : ""}
)}
);
}
/**
* Small login-status badge shown on org chart person cards (owner only —
* the data behind it comes from an owner-gated admin endpoint). Hover
* reveals the linked account email and its status.
*/
function LoginBadge({ login }) {
const status = login.status;
const style =
status === "active"
? { color: "var(--green)", label: "Active login" }
: status === "disabled"
? { color: "var(--ink-3)", label: "Login disabled" }
: { color: "var(--orange)", label: "Invite pending" };
return (
{status === "active"
? "\u2713"
: status === "disabled"
? "\u2715"
: "\u2709"}
);
}
function NodeCard({
person,
t,
selected,
onClick,
quietGreens,
filterSev,
forcedSev,
reasonOverride,
showLogins,
manage,
onEdit,
onOffboard,
onDragStart,
}) {
const FL = window.FL;
const ps = FL.personStatus(person.id);
const sev = forcedSev || ps.sev;
const quiet = quietGreens && sev === "green";
const dim = filterSev && sev !== filterSev ? " dim" : "";
const reason =
reasonOverride !== undefined
? reasonOverride
: ps.reasons[0]
? ps.reasons[0].text
: null;
// Owner-only login badge, double-gated: the shell passes showLogins only
// for the owner role AND FL.loginByEntity is only populated by an
// owner-gated endpoint (and cleared on sign-out / non-owner sessions).
const login =
showLogins && FL.loginByEntity ? FL.loginByEntity[person.id] : null;
return (
{person.name}
{person.role}
{manage && (
{"\u270E"}
{"\uD83D\uDDD1"}
)}
{login &&
}
{reason && sev !== "green" && (
{reason}
)}
{sev !== "green" && (
{fmtElapsed(ps.exceptions[0].elapsedMin)} open
)}
)}
);
}
function VehicleCard({ vehicle, t, onClick }) {
const sev = vehicle.status || "green";
return (
{vehicle.name}
{vehicle.operatorName
? "Operated by " + vehicle.operatorName
: "Unassigned"}
);
}
Object.assign(window, {
RegionView,
UnitOrgChart,
UnitCard,
NodeCard,
VehicleCard,
Connector,
UnitNode,
ChildUnitNode,
});