const { Button: JB, Card: JC, Tag: JT, SectionHeader: JSH, ChartFrame: JCF, VisionFrame: JVF, Annotate: JA, FilterChip: JChip, SegmentedControl: JSeg, GlobalDelivery: JMap, PortfolioBreakdown: JBreak, CTABand: JCTA } = window.SoftVerxDesignSystem_6fd95b; const W = window.SX_DATA; function ClientMark() { return null; } /* The client marks we hold are low-resolution rasters at fifteen different crops, so they are set as type instead: one face, one size, one ink. */ function ClientTicker({ mobile }) { const names = W.projects.filter((p) => p.logo).map((p) => p.short); const track = names.concat(names); return (
{track.map((n, i) => ( {n} ))}
); } function ProjectCard({ p, mobile }) { const href = p.slug === "lesco" ? "/lesco" : (window.SX_STUDIES && window.SX_STUDIES[p.slug] ? "/case?p=" + p.slug : null); const flagship = p.tier === "flagship"; const body = ( <>
{p.sector.toLowerCase()}{p.country ? " · " + p.country.toLowerCase() : ""} {p.year || p.era}

{p.client}

{p.title}

{p.summary}

{p.practice.toLowerCase()} {p.product && our own product} {flagship && p.url && {p.url.replace(/^https?:\/\/(www\.)?/, "")}} {flagship && p.metrics && {p.metrics[0].v} {p.metrics[0].l.split(" ").slice(0, 2).join(" ")}}
{href && ( Read the case study )} ); if (p.tier === "delivery" || (mobile && p.tier === "deployment")) { const compact = p.tier === "delivery"; return ( {p.image && }
{p.client} {p.year || p.era}

{p.title}

{!compact &&

{p.summary}

}
{p.sector.toLowerCase()} · {p.practice.toLowerCase()}{p.country ? " · " + p.country.toLowerCase() : ""} {!compact && href && Case study}
); } return ( {p.image ?
{/* A photograph fills the frame. A screenshot is shown whole: cropping a dashboard to 16:9 removes the column worth looking at. */}
:
{p.practice.toLowerCase()} {p.logo && }
}
{body}
 ); } function TimelineView({ mobile }) { return (
{W.eras.map((e) => { const list = W.projects.filter((p) => p.era === e.label.slice(0, 4) || (p.era === "2000s" && +e.label.slice(0, 4) < 2010) || (p.era === "2010s" && +e.label.slice(0, 4) >= 2012)); return (

{e.label}

{e.title}

{e.detail}

{list.length} programmes recorded in this era

); })}
); } function MapView({ mobile }) { return (
); } const VIEWS = [ { id: "grid", label: "grid" }, { id: "timeline", label: "spine" }, { id: "map", label: "map" }, ]; /* One selector shape for all three facets: a quiet field that opens a list. Counts stay visible; the field states the current pick rather than 43 chips. */ function Picker({ label, value, options, onPick, width = 210 }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const away = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const key = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("pointerdown", away); document.addEventListener("keydown", key); return () => { document.removeEventListener("pointerdown", away); document.removeEventListener("keydown", key); }; }, [open]); const current = options.find((o) => o.id === value) || options[0]; const set = value !== "all"; return (
{open && (
{options.map((o) => { const on = o.id === value; return ( ); })}
)}
); } function ViewTabs({ view, setView, mobile }) { return (
{VIEWS.map((v) => { const on = view === v.id; return ( ); })}
); } function ProjectsPage({ mobile }) { const [view, setView] = React.useState(() => ({ "#spine": "timeline", "#map": "map" }[window.location.hash] || "grid")); const [sector, setSector] = React.useState("all"); const [practice, setPractice] = React.useState("all"); const list = W.projects.filter((p) => (sector === "all" || p.sector === sector) && (practice === "all" || p.practice === practice)); const filtered = sector !== "all" || practice !== "all"; const tiers = ["flagship", "deployment", "delivery"]; const practicesUsed = [...new Set(W.projects.map((p) => p.practice))]; return (
Read the LESCO case studyAsk about a similar build} meta={[{ l: "documented here", v: W.projects.length }, { l: "sectors", v: W.sectors.length }, { l: "countries", v: W.countries.length }, { l: "earliest", v: 1999 }]} />

Marks shown where we hold the client's logo. The full record is below.

The record, three ways to read it

({ id: s.label, label: s.label.toLowerCase(), count: s.value })))} /> ({ id: pr, label: pr.toLowerCase(), count: W.projects.filter((p) => p.practice === pr).length })))} /> {filtered && ( )}

{list.length} of {W.projects.length} documented programmes shown

{view === "grid" && (
{tiers.map((t) => { const rows = list.filter((p) => p.tier === t); if (!rows.length) return null; return (
{t} {t === "flagship" ? "full programmes, documented scope" : t === "deployment" ? "delivered systems in production" : "smaller deliveries, listed plainly"} {rows.length}
{rows.map((p) => )}
); })}
)} {view === "timeline" && } {view === "map" && }
); } Object.assign(window, { ProjectsPage, ProjectCard, ClientMark, ClientTicker });