// Polished Projects screen — segmented, grouped, sparkline-rich
function Projects({ setScreen, setProject }){
const [query, setQuery] = useState("");
const [tier, setTier] = useState("all"); // all | top | active | background | dormant
const [provider, setProvider] = useState("all"); // all | anthropic | google ...
const [sort, setSort] = useState("spend"); // spend | requests | recent
// Aggregate sparkline for header — sum daily across all projects (proportional)
const headerSeries = DAILY.map(d => d.cost);
let rows = [...PROJECTS];
if (query) rows = rows.filter(p => p.name.toLowerCase().includes(query.toLowerCase()) || p.client.toLowerCase().includes(query.toLowerCase()));
if (provider !== "all") rows = rows.filter(p => MODELS[p.primaryModel].provider === provider);
// Tier classification
function tierOf(p){
if (p.spend >= 10) return "top";
if (p.spend >= 0.5) return "active";
if (p.spend >= 0.001) return "background";
return "dormant";
}
if (tier !== "all") rows = rows.filter(p => tierOf(p) === tier);
rows.sort((a,b) => {
if (sort === "requests") return b.requests - a.requests;
if (sort === "recent") return parseInt(a.lastActive) - parseInt(b.lastActive);
return b.spend - a.spend;
});
// Group by tier for display
const groups = [
{ id:"top", label:"Top spenders", hint:">= £10 this period", items: rows.filter(p => tierOf(p)==="top") },
{ id:"active", label:"Active", hint:"£0.50 – £10", items: rows.filter(p => tierOf(p)==="active") },
{ id:"background", label:"Background", hint:"under £0.50", items: rows.filter(p => tierOf(p)==="background") },
{ id:"dormant", label:"Dormant", hint:"sub-cent / inactive", items: rows.filter(p => tierOf(p)==="dormant") },
].filter(g => g.items.length > 0);
return (
{/* ── Page header ───────────────────────────────────── */}
{/* ── KPI strip ─────────────────────────────────────── */}
}
delta={PERIOD.deltaPct}
sub={
vs {fmtGBP(PERIOD.previousTotalGBP)} in April}
sparkline={headerSeries}
color="var(--accent)"
/>
{PERIOD.requests.toLocaleString()}}
delta={0.521}
sub={{Math.round(PERIOD.requests/PERIOD.daysElapsed)} per day}
sparkline={DAILY.map(d=>d.reqs)}
color="var(--p-google)"
border
/>
p.status==='active').length} size="lg"/>}
delta={null}
sub={across {PROJECTS.filter(p=>p.status==='active').length} active}
icon="layers"
border
/>
{/* ── Filter / search bar ───────────────────────────── */}
p.spend>=10).length },
{ id:"active", label:"Active", count: PROJECTS.filter(p=>p.spend>=0.5 && p.spend<10).length },
{ id:"background", label:"Background", count: PROJECTS.filter(p=>p.spend>=0.001 && p.spend<0.5).length },
{ id:"dormant", label:"Dormant", count: PROJECTS.filter(p=>p.spend<0.001).length },
]}
/>
setQuery(e.target.value)}
style={{
height:32, padding:"0 10px 0 30px", width:"100%",
border:"1px solid var(--line-2)", borderRadius:8, background:"#fff",
fontFamily:"inherit", fontSize:12.5, color:"var(--fg-0)", outline:"none",
}}
/>
{/* Column header */}
setSort("spend")}>Project
Status
setSort("spend")}>Period spend {sort==="spend"&&"↓"}
All-time
setSort("requests")}>Requests {sort==="requests"&&"↓"}
Top model
11-day trend
setSort("recent")}>Last active
{/* Groups */}
{groups.map((g,gi) => (
0 ? "1px solid var(--line-1)" : "none", background:"rgba(20,16,8,0.01)" }}>
{g.label}
{g.hint}
{g.items.length}
{g.items.map(p =>
{ setProject(p.slug); setScreen("project-detail"); }}/>)}
))}
{rows.length === 0 && (
No projects match that filter
)}
{rows.length} projects shown · data as of today
{label}
{icon && }
{value}
{delta != null && }
{sub}
{sparkline && (
)}
);
}
function MostActiveKPI({ border }){
const top = [...PROJECTS].sort((a,b)=>b.spend-a.spend)[0];
return (
Most active
{top.name}
#1
{top.requests.toLocaleString()} requests ·
);
}
// ── Project row ────────────────────────────────────────────
function ProjectRow({ project: p, onOpen }){
const cpr = p.requests > 0 ? p.spend/p.requests : 0;
const series = makeSeries(p.spend, 11, p.shape);
const sparkColor = p.spend > 1 ? "var(--accent)" : "var(--fg-3)";
return (
e.currentTarget.style.background="rgba(20,16,8,0.025)"}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}
>
{p.name}
/{p.slug}
Active
{fmtGBP(p.allTime)}
{p.requests.toLocaleString()}
1}/>
{p.lastActive}
{options.map(o => {
const active = value === o.id;
return (
);
})}
);
}
// ── Provider filter chips ─────────────────────────────────
function ProviderChips({ value, onChange }){
const providers = ["all", "anthropic", "google"];
return (
{providers.map(p => {
const active = value === p;
const label = p === "all" ? "All providers" : PROVIDERS[p].name;
return (
);
})}
);
}
Object.assign(window, { Projects });