,
document.body
);
}
/* ======================================================================
8. LAYOUT: SIDEBAR / HEADER / MOBILE NAV
====================================================================== */
const NAV_ITEMS = [
{ key: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, group: 'Workflow' },
{ key: 'pipeline', label: 'Pipeline', icon: GitBranch, group: 'Workflow' },
{ key: 'quotations', label: 'Quotations', icon: FileText, group: 'Workflow' },
{ key: 'sampling', label: 'Sampling', icon: FlaskConical, group: 'Workflow' },
{ key: 'components', label: 'Components', icon: Package, group: 'Workflow' },
{ key: 'suppliers', label: 'Suppliers', icon: Building2, group: 'Network' },
{ key: 'team', label: 'Team', icon: Users, group: 'Network' },
{ key: 'accomplished', label: 'Completed', icon: Archive, group: 'Archive' },
];
const NAV_GROUPS = ['Workflow', 'Network', 'Archive'];
const MOBILE_NAV = ['dashboard', 'pipeline', 'quotations', 'components'];
function useNavCounts() {
const app = useApp();
const nonArchived = app.projects.filter(p => !p.isArchived);
const pipelineCount = nonArchived.length;
const quotationsCount = app.quotations.reduce((n, q) => n + (q.lineItems || []).filter(li => (li.status || 'Pending') === 'Pending').length, 0);
const samplingCount = app.samplingProjects.filter(sp => !['Moved to Production', 'Cancelled'].includes(sp.status)).length;
return { pipeline: pipelineCount, quotations: quotationsCount, sampling: samplingCount };
}
function Sidebar({ collapsed, setCollapsed }) {
const app = useApp();
const counts = useNavCounts();
return (
);
}
function Header({ scrolled = false }) {
const app = useApp();
const unread = app.notifications.filter(n => !n.read).length;
const prevUnread = usePrevious(unread);
const [shake, setShake] = useState(false);
useEffect(() => {
if (prevUnread !== undefined && unread > prevUnread) {
setShake(true);
const t = setTimeout(() => setShake(false), 400);
return () => clearTimeout(t);
}
}, [unread, prevUnread]);
return (
);
}
function MobileBottomNav() {
const app = useApp();
const [menuOpen, setMenuOpen] = useState(false);
const totalSlots = MOBILE_NAV.length + 1; // + the trailing "Menu" button, all evenly flex-1
const activeIndex = MOBILE_NAV.indexOf(app.route.page);
return (
<>
setMenuOpen(false)} />
{NAV_ITEMS.map(item => {
const Icon = item.icon;
return (
{ app.navigate(item.key); setMenuOpen(false); }} className="flex flex-col items-center gap-2 py-4 rounded-xl border border-border text-muted hover:text-gold">
{item.label}
);
})}
)}
);
}
/* ======================================================================
9. DASHBOARD
====================================================================== */
function Donut({ data, onSelect }) {
const total = data.reduce((s, d) => s + d.value, 0) || 1;
let acc = 0;
const stops = data.map(d => {
const start = (acc / total) * 360;
acc += d.value;
const end = (acc / total) * 360;
return `${d.color} ${start}deg ${end}deg`;
}).join(', ');
return (
{data.map(d => (
onSelect && onSelect(d)}
className={`flex items-center gap-2 text-xs w-full text-left rounded px-1 -mx-1 transition-colors ${onSelect ? 'hover:bg-elevated hover:text-gold cursor-pointer' : ''}`}
>
{d.label}
{d.value}
))}
);
}
function KpiCard({ label, value, icon: Icon, context, onClick }) {
const prevValue = usePrevious(value);
const [flash, setFlash] = useState(false);
useEffect(() => {
if (prevValue !== undefined && prevValue !== value) {
setFlash(true);
const t = setTimeout(() => setFlash(false), 400);
return () => clearTimeout(t);
}
}, [value, prevValue]);
return (
{value}
{context && {context}
}
);
}
function ExchangeRatesModal({ open, onClose }) {
const app = useApp();
const [drafts, setDrafts] = useState({});
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = async () => {
setRefreshing(true);
await app.refreshFxRates();
setRefreshing(false);
};
const commit = (code) => {
const val = drafts[code];
if (val === undefined || val === '') return;
const num = Number(val);
if (!isNaN(num) && num > 0) app.updateFxRate(code, num);
};
return (
Source: {app.fxSource === 'live' ? 'Live market data' : app.fxSource === 'manual' ? 'Manually set' : 'Default estimate'}
· Updated {fmtRelativeFromISO(app.fxUpdatedAt)}
{refreshing ? 'Refreshing...' : 'Refresh Now'}
Rate shown is how many US Dollars 1 unit of that currency is worth. Edit any value and click away to save it manually.
{CURRENCIES.filter(c => c.code !== 'USD').map(c => (
))}
Close
);
}
/* ---- Dashboard helpers ---- */
// Timestamp of the last real activity on a sampling track — the newest statusHistory
// entry across all its rounds, or its own creation date if no round has been touched
// yet. Distinct from getOverdueSamplingInfo below: that one flags running past the
// *quoted* lead time; this one flags plain silence, regardless of how much budget is
// left — a track can go quiet well within its quoted window.
function getSamplingLastTouchedTs(sp, ctx) {
let latest = sp.createdAt ? new Date(sp.createdAt).getTime() : 0;
ctx.sampleRounds.filter(r => r.samplingProjectId === sp.id).forEach(r => {
(r.statusHistory || []).forEach(h => {
const t = h.updatedAt ? new Date(h.updatedAt).getTime() : 0;
if (t > latest) latest = t;
});
});
return latest;
}
// Checkpoints along a project's own start→target timeline. Flags the highest checkpoint
// already crossed (by elapsed time) where real progress hasn't kept pace — e.g. 70% of
// the timeline has passed but progress is still at 40%. Returns null once a project is
// done, has no usable date range, or is progressing in line with (or ahead of) elapsed time.
// `progress` is computeProgress(selectProjectSlice(ctx, p.id)) - never the unmaintained
// projects.progress column (which only ever moves 5 -> 100, so this detector used to
// false-fire for nearly every active project past 30% of its timeline).
const TIMELINE_CHECKPOINTS = [90, 70, 50, 30];
function getTimelineCheckpointRisk(p, today, ctx) {
if (p.isArchived || p.status === 'Complete' || !p.startDate || !p.target) return null;
const totalDays = daysBetween(p.startDate, p.target);
if (totalDays <= 0) return null;
const elapsedPct = Math.min(100, Math.round((daysBetween(p.startDate, today) / totalDays) * 100));
const progress = computeProgress(selectProjectSlice(ctx, p.id));
for (const checkpoint of TIMELINE_CHECKPOINTS) {
if (elapsedPct >= checkpoint && progress < checkpoint) return { checkpoint, elapsedPct, progress };
}
return null;
}
// Structured counterpart to aiRoundTimelineNote (SakanPlatform.jsx, AI section) — same
// "is the latest in-flight round running past its quoted sampling lead time" logic, but
// returns the raw numbers instead of a sentence so the Dashboard can render/sort/aggregate
// them (Risk Radar rows, Supplier Scorecard overdue counts, Financial Exposure at-risk).
function getOverdueSamplingInfo(sp, ctx) {
const rounds = ctx.sampleRounds.filter(r => r.samplingProjectId === sp.id)
.sort((a, b) => (b.dateRequested || '').localeCompare(a.dateRequested || ''));
const latest = rounds[0];
if (!latest || !latest.dateRequested) return null;
const inFlight = !SAMPLE_ROUND_TERMINAL_STATUSES.includes(latest.status) && latest.status !== 'Cancelled';
if (!inFlight) return null;
const bid = ctx.supplierBids.find(b => b.samplingProjectId === sp.id && b.supplierId === latest.supplierId);
const expectedDays = bid?.quotedSamplingLeadTime;
if (!expectedDays) return null;
const elapsed = daysBetween(latest.dateRequested, todayStr());
const overdueDays = elapsed - expectedDays;
if (overdueDays <= 0) return null;
return { round: latest, supplierId: latest.supplierId, expectedDays, elapsed, overdueDays };
}
// Classifies one quotation line item into a Decision Funnel stage. A line item's own
// `status` only distinguishes Pending/Approved/Rejected/Developing/In Sampling — it's
// never updated again once sent, so "Moved to Production" has to be derived by
// following the item's linked SamplingProject (and, past that, its Component). The
// funnel only tracks stages that still need attention — Rejected items have exited the
// pipeline, and Complete items are done — so both return null (excluded) rather than a
// bucket, keeping the funnel a clean view of exactly what's still active.
function getLineItemStage(li, ctx) {
const status = li.status || 'Pending';
if (status === 'Pending') return 'Pending';
if (status === 'Rejected') return null;
if (status === 'Developing') return 'Developing';
if (status === 'Approved' && !li.locked) return 'Approved (unsent)';
const sp = ctx.samplingProjects.find(s => s.id === li.samplingProjectId);
if (!sp || sp.status !== 'Moved to Production') return 'In Sampling';
const comp = ctx.components.find(c => c.samplingProjectId === sp.id);
return comp?.status === 'Complete' ? null : 'Moved to Production';
}
const PROJECT_STAGE_ORDER = ['Sampling', 'Approved', 'Production', 'Shipping', 'Complete'];
const PROJECT_STAGE_TONE = { Sampling: 'gold', Approved: 'gold', Production: 'gold', Shipping: 'gold', Complete: 'sage' };
function Dashboard() {
const app = useApp();
const today = todayStr();
const me = app.currentUser;
const [spendOpen, setSpendOpen] = useState(false);
const [ratesModalOpen, setRatesModalOpen] = useState(false);
const [actionExpanded, setActionExpanded] = useState(false);
const visibleProjects = app.projects.filter(p => canSeeProject(me, p));
const nonArchived = visibleProjects.filter(p => !p.isArchived);
/* ---- Action Center: personal inbox, in priority order ---- */
const myBlockedProjects = nonArchived.filter(p => p.owner === me.id && p.blocking);
const myTasksDueSoon = app.tasks.filter(t => t.assignedTo === me.id && t.status !== 'Done' && t.dueDate && daysBetween(today, t.dueDate) <= 7)
.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
const myPendingDecisions = app.quotations.flatMap(q => {
const proj = app.projects.find(p => p.id === q.projectId);
if (!proj || !canEditProject(me, proj)) return [];
return (q.lineItems || []).filter(li => (li.status || 'Pending') === 'Pending').map(li => ({ li, q, proj }));
});
const myReviewRounds = app.samplingProjects.filter(sp => sp.ownerId === me.id).flatMap(sp =>
app.sampleRounds.filter(r => r.samplingProjectId === sp.id && ['Arrived', 'Under Review'].includes(r.status)).map(r => ({ r, sp }))
);
const myStaleComponents = app.components.filter(c => c.owner === me.id && c.status !== 'Complete'
&& daysBetween(c.nextActionUpdatedAt || c.startDate, today) > 5);
const actionItems = [
...myBlockedProjects.map(p => ({
key: `blocker-${p.id}`, statusLabel: 'Blocked', title: `Resolve blocker: ${p.blocking}`, details: p.name,
ownerId: p.owner, dueDate: p.target, est: '10 min', actionLabel: 'Review',
go: () => app.navigate('projectDetail', p.id),
})),
...myPendingDecisions.map(({ li, q, proj }) => ({
key: `qli-${li.id}`, statusLabel: 'Decision', title: `Decide: ${li.itemName}`, details: `${q.supplierName} — ${proj.name}`,
ownerId: quotationOwnerId(q, proj), dueDate: q.validUntil || null, est: '3 min', actionLabel: 'Decide',
go: () => app.navigate('quotationsByProject', proj.id),
})),
...myReviewRounds.map(({ r, sp }) => ({
key: `round-${r.id}`, statusLabel: 'Decision', title: `Review sample ${r.version} — ${sp.itemName || sp.name}`, details: r.status,
ownerId: sp.ownerId, dueDate: null, est: '5 min', actionLabel: 'Review',
go: () => app.navigate('samplingDetail', sp.id),
})),
...myTasksDueSoon.map(t => {
const days = daysBetween(today, t.dueDate);
return {
key: `task-${t.id}`, statusLabel: days < 0 ? 'Blocked' : days <= 2 ? 'Decision' : 'Stale',
title: t.title, details: 'Task', ownerId: me.id, dueDate: t.dueDate, est: '15 min', actionLabel: 'Open',
go: (t.linkedEntityType === 'project' && t.linkedEntityId) ? () => app.navigate('projectDetail', t.linkedEntityId) : null,
};
}),
...myStaleComponents.map(c => ({
key: `comp-${c.id}`, statusLabel: 'Stale', title: `Stale: ${c.name}`, details: c.projectName,
ownerId: c.owner, dueDate: null, est: '2 min', actionLabel: 'Open',
go: () => app.navigate('components'),
})),
];
/* ---- Quotation Decision Funnel ---- */
const FUNNEL_STAGES = [
{ key: 'Pending', pillStatus: 'Pending', suffix: null, tone: 'muted' },
{ key: 'Approved (unsent)', pillStatus: 'Approved', suffix: '(unsent)', tone: 'sage' },
{ key: 'Developing', pillStatus: 'Developing', suffix: null, tone: 'purple' },
{ key: 'In Sampling', pillStatus: 'In Sampling', suffix: null, tone: 'gold' },
{ key: 'Moved to Production', pillStatus: 'Moved to Production', suffix: null, tone: 'gold' },
];
const funnelItems = { 'Pending': [], 'Approved (unsent)': [], 'Developing': [], 'In Sampling': [], 'Moved to Production': [] };
app.quotations.forEach(q => {
const proj = app.projects.find(p => p.id === q.projectId);
if (!proj || !canSeeProject(me, proj)) return;
(q.lineItems || []).forEach(li => {
const stage = getLineItemStage(li, app);
if (stage) funnelItems[stage].push({ li, q });
});
});
const funnelCounts = Object.fromEntries(Object.entries(funnelItems).map(([k, v]) => [k, v.length]));
const funnelTotal = Object.values(funnelCounts).reduce((s, n) => s + n, 0) || 1;
const funnelMax = Math.max(...Object.values(funnelCounts), 1);
const decisionBacklog = funnelCounts['Pending'] + funnelCounts['Approved (unsent)'];
const funnelAvgDays = (key) => {
const items = funnelItems[key];
if (!items.length) return null;
const total = items.reduce((s, { li, q }) => s + Math.max(0, daysBetween(li.decidedAt || q.createdAt, today)), 0);
return Math.round(total / items.length);
};
/* ---- Risk Radar ----
Scope is deliberately tighter than the rest of the Dashboard: Admins get the full
picture, everyone else only sees risk on projects they own or are a collaborator
(editableBy) on — not just anything visibleTo them. Every check below shares this
same scope, and every result carries a `severity` (larger = worse) so the whole
list can be sorted into one unified feed by how urgent it actually is, tone first. */
const myRiskScope = (p) => !!p && (me.accessRole === 'Admin' || p.owner === me.id || (p.editableBy || []).includes(me.id));
const overdueRoundsList = app.samplingProjects
.filter(sp => myRiskScope(app.projects.find(p => p.id === sp.linkedProjectId)))
.map(sp => ({ sp, info: getOverdueSamplingInfo(sp, app) }))
.filter(x => x.info);
const overdueProjects = nonArchived.filter(p => p.status !== 'Complete' && myRiskScope(p) && daysBetween(p.target, today) > 0);
const expiringQuotes = app.quotations.filter(q => {
const proj = app.projects.find(p => p.id === q.projectId);
return myRiskScope(proj) && ['Pending', 'Partial'].includes(deriveQuotationStatus(q)) && daysBetween(today, q.validUntil) <= 7;
});
const staleProductionComponents = app.components.filter(c => {
const proj = app.projects.find(p => p.id === c.projectId);
return myRiskScope(proj) && c.status === 'Under Production' && hoursSince(c.nextActionUpdatedAt || c.startDate) > 72;
});
// Quotation line items sitting in a given status for 72h+ without a decision moving
// them forward — Pending (never decided) and Developing (decided, but that track has
// gone quiet) are the two statuses that can silently stall with no other signal.
const staleLineItemsByStatus = (status) => {
const out = [];
app.quotations.forEach(q => {
const proj = app.projects.find(p => p.id === q.projectId);
if (!myRiskScope(proj)) return;
(q.lineItems || []).forEach(li => {
if ((li.status || 'Pending') !== status) return;
const hours = hoursSince(li.decidedAt || q.createdAt);
if (hours > 72) out.push({ li, q, proj, hours });
});
});
return out;
};
const stalePendingItems = staleLineItemsByStatus('Pending');
const staleDevelopingItems = staleLineItemsByStatus('Developing');
// Sampling tracks that have gone quiet for 72h+, independent of whether they're still
// within their quoted lead time (overdueRoundsList above covers that separate case).
const staleSamplingTracks = app.samplingProjects.filter(sp => {
const proj = app.projects.find(p => p.id === sp.linkedProjectId);
if (!myRiskScope(proj) || ['Moved to Production', 'Cancelled'].includes(sp.status)) return false;
return hoursSince(getSamplingLastTouchedTs(sp, app)) > 72;
});
const timelineRiskProjects = nonArchived
.filter(p => p.status !== 'Complete' && myRiskScope(p) && daysBetween(p.target, today) <= 0)
.map(p => ({ p, risk: getTimelineCheckpointRisk(p, today, app) }))
.filter(x => x.risk);
const riskItems = [
...overdueRoundsList.map(({ sp, info }) => {
const proj = app.projects.find(p => p.id === sp.linkedProjectId);
const supplier = supplierById(app.suppliers, info.supplierId);
return {
key: `risk-round-${sp.id}`, icon: FlaskConical, tone: 'oud', severity: info.overdueDays * 24,
text: `${supplier?.name || 'Supplier'} — ${sp.itemName || sp.name} is ${info.overdueDays}d overdue`,
sub: proj?.name || '', ownerId: sp.ownerId, go: () => app.navigate('samplingDetail', sp.id),
};
}),
...overdueProjects.map(p => ({
key: `risk-proj-${p.id}`, icon: CalendarClock, tone: 'oud', severity: daysBetween(p.target, today) * 24,
text: `${p.name} is ${daysBetween(p.target, today)}d past target`, sub: `Target was ${fmtDateShort(p.target)}`,
ownerId: p.owner, go: () => app.navigate('projectDetail', p.id),
})),
...expiringQuotes.map(q => {
const proj = app.projects.find(p => p.id === q.projectId);
const daysLeft = daysBetween(today, q.validUntil);
return {
key: `risk-quote-${q.id}`, icon: FileText, tone: 'amber', severity: (7 - daysLeft) * 24,
text: `${q.supplierName} quote ${daysLeft < 0 ? 'has expired' : `expires in ${daysLeft}d`}`, sub: proj?.name || '',
ownerId: quotationOwnerId(q, proj), go: () => app.navigate('quotationsByProject', q.projectId),
};
}),
...staleProductionComponents.map(c => ({
key: `risk-comp-${c.id}`, icon: Package, tone: 'amber', severity: hoursSince(c.nextActionUpdatedAt || c.startDate),
text: `${c.name} — no update in ${Math.floor(hoursSince(c.nextActionUpdatedAt || c.startDate) / 24)}d`, sub: c.projectName,
ownerId: c.owner, go: () => app.navigate('components'),
})),
...stalePendingItems.map(({ li, q, proj, hours }) => ({
key: `risk-pending-${li.id}`, icon: Clock, tone: 'amber', severity: hours,
text: `${li.itemName} still Pending after ${Math.floor(hours / 24)}d`, sub: `${q.supplierName} — ${proj?.name || ''}`,
ownerId: quotationOwnerId(q, proj), go: () => app.navigate('quotationsByProject', q.projectId),
})),
...staleDevelopingItems.map(({ li, q, proj, hours }) => ({
key: `risk-developing-${li.id}`, icon: Clock, tone: 'purple', severity: hours,
text: `${li.itemName} has been Developing for ${Math.floor(hours / 24)}d`, sub: `${q.supplierName} — ${proj?.name || ''}`,
ownerId: quotationOwnerId(q, proj), go: () => app.navigate('quotationsByProject', q.projectId),
})),
...staleSamplingTracks.map(sp => {
const proj = app.projects.find(p => p.id === sp.linkedProjectId);
const hours = hoursSince(getSamplingLastTouchedTs(sp, app));
return {
key: `risk-sampling-quiet-${sp.id}`, icon: FlaskConical, tone: 'amber', severity: hours,
text: `${sp.itemName || sp.name} — no update in ${Math.floor(hours / 24)}d`, sub: proj?.name || '',
ownerId: sp.ownerId, go: () => app.navigate('samplingDetail', sp.id),
};
}),
...timelineRiskProjects.map(({ p, risk }) => ({
key: `risk-timeline-${p.id}`, icon: TrendingUp, tone: 'amber', severity: risk.checkpoint * 10,
text: `${p.name} is ${risk.elapsedPct}% through its timeline, only ${risk.progress}% complete`,
sub: `${risk.checkpoint}% checkpoint passed`, ownerId: p.owner, go: () => app.navigate('projectDetail', p.id),
})),
];
const TONE_RANK = { oud: 3, amber: 2, purple: 1, gold: 1, sage: 1 };
riskItems.sort((a, b) => (TONE_RANK[b.tone] - TONE_RANK[a.tone]) || (b.severity - a.severity));
/* ---- Supplier Scorecard ---- */
const supplierScorecard = app.suppliers.map(s => {
const rounds = app.sampleRounds.filter(r => r.supplierId === s.id);
const activeRounds = rounds.filter(r => !SAMPLE_ROUND_TERMINAL_STATUSES.includes(r.status) && r.status !== 'Cancelled');
const hasOpenQuote = app.quotations.some(q => q.supplierId === s.id && (q.lineItems || []).some(li => (li.status || 'Pending') === 'Pending'));
if (!activeRounds.length && !hasOpenQuote) return null;
const received = rounds.filter(r => r.dateReceived);
const avgResponse = received.length ? Math.round(received.reduce((sum, r) => sum + daysBetween(r.dateRequested, r.dateReceived), 0) / received.length) : null;
const decided = rounds.filter(r => SAMPLE_ROUND_TERMINAL_STATUSES.includes(r.status));
const approvalRate = decided.length ? Math.round((decided.filter(r => r.status === 'Approved').length / decided.length) * 100) : null;
const overdueCount = overdueRoundsList.filter(x => x.info.supplierId === s.id).length;
return { supplier: s, activeCount: activeRounds.length, avgResponse, approvalRate, overdueCount };
}).filter(Boolean)
.sort((a, b) => (b.overdueCount - a.overdueCount) || ((b.avgResponse || 0) - (a.avgResponse || 0)))
.slice(0, 5);
/* ---- Project Health Tracker ----
One row per active project that has reached sampling — i.e. has at least one
linked samplingProject or component. Pre-sampling projects (Quotation/Development)
are intentionally excluded; the Pipeline board already covers those stages. */
const projectHealthRows = nonArchived
.filter(p => app.samplingProjects.some(sp => sp.linkedProjectId === p.id) || app.components.some(c => c.projectId === p.id))
.map(p => {
const projSampling = app.samplingProjects.filter(sp => sp.linkedProjectId === p.id);
const projComponents = app.components.filter(c => c.projectId === p.id);
const isBehind = p.status !== 'Complete' && daysBetween(p.target, today) > 0;
const hasOverdueSampling = projSampling.some(sp => getOverdueSamplingInfo(sp, app));
const hasStaleComponent = projComponents.some(c => c.status !== 'Complete' && daysBetween(c.nextActionUpdatedAt || c.startDate, today) > 7);
const health = isBehind ? 'Behind' : (p.blocking || hasOverdueSampling || hasStaleComponent) ? 'At Risk' : 'On Track';
// Component.status only ever holds 'Under Production' or 'Complete' — the
// Under Shipping state actually lives on nextAction (see updateComponent), so
// Production/Shipping are split on that instead of a status value that doesn't exist.
const stageCounts = {
Sampling: projSampling.filter(sp => ['Sourcing', 'Sampling In Progress', 'On Hold'].includes(sp.status)).length,
Approved: projSampling.filter(sp => sp.status === 'Sample Approved').length,
Production: projComponents.filter(c => c.status === 'Under Production' && c.nextAction !== 'Under Shipping').length,
Shipping: projComponents.filter(c => c.status === 'Under Shipping' || (c.status === 'Under Production' && c.nextAction === 'Under Shipping')).length,
Complete: projComponents.filter(c => c.status === 'Complete').length,
};
return { project: p, health, stageCounts };
});
/* ---- Financial Exposure by Stage ---- */
let approvedExposure = 0, inSamplingExposure = 0, inProductionExposure = 0, atRiskExposure = 0;
app.quotations.forEach(q => {
const proj = app.projects.find(p => p.id === q.projectId);
if (!proj || !canSeeProject(me, proj)) return;
(q.lineItems || []).forEach(li => {
if ((li.status || 'Pending') === 'Approved' && !li.locked) {
const amt = toUSD(lineItemAmount(li), q.currency || 'EUR', app.fxRates);
approvedExposure += amt;
if (proj.blocking) atRiskExposure += amt;
}
});
});
app.samplingProjects.forEach(sp => {
const proj = app.projects.find(p => p.id === sp.linkedProjectId);
if (!proj || !canSeeProject(me, proj) || sp.status === 'Moved to Production' || sp.status === 'Cancelled') return;
let li = null, q = null;
for (const qq of app.quotations) {
const found = (qq.lineItems || []).find(x => x.samplingProjectId === sp.id);
if (found) { li = found; q = qq; break; }
}
const currency = q?.currency || 'EUR';
const roundsCost = app.sampleRounds.filter(r => r.samplingProjectId === sp.id).reduce((s, r) => s + (r.cost || 0), 0);
const amt = toUSD((li?.moldCost || 0) + roundsCost, currency, app.fxRates);
inSamplingExposure += amt;
const overdueInfo = getOverdueSamplingInfo(sp, app);
if (overdueInfo || proj.blocking) atRiskExposure += amt;
});
app.components.forEach(c => {
if (c.status !== 'Under Production') return;
const proj = app.projects.find(p => p.id === c.projectId);
if (proj && !canSeeProject(me, proj)) return;
const qty = parseNumeric(c.orderQty);
const amt = toUSD((c.price || 0) * qty, c.currency || 'EUR', app.fxRates);
inProductionExposure += amt;
const stale = daysBetween(c.nextActionUpdatedAt || c.startDate, today) > 7;
if (stale || proj?.blocking) atRiskExposure += amt;
});
const totalExposure = approvedExposure + inSamplingExposure + inProductionExposure;
/* ---- Projects by Stage (incl. Blocked / Overdue) ---- */
// Chart palette restricted to the approved data-viz colors only (primary/accent blue,
// the four status colors, neutral grey) - no purple/gold, per the design system's
// Charts & Data Visualization rules. A couple of stages necessarily share a color
// since there are more pipeline stages than approved chart colors.
const stageColors = { Blocked: '#D94A3A', Overdue: '#E5A72E', Development: '#66C2FB', Quotation: '#1827F5', Sampling: '#E5A72E', Production: '#66C2FB', Shipping: '#3E9B68' };
const bucketOf = (p) => {
if (p.blocking) return 'Blocked';
if (p.status !== 'Complete' && daysBetween(p.target, today) > 0) return 'Overdue';
return p.status;
};
const bucketCounts = {};
nonArchived.forEach(p => { const b = bucketOf(p); bucketCounts[b] = (bucketCounts[b] || 0) + 1; });
const donutData = Object.entries(bucketCounts).map(([label, value]) => ({ label, value, color: stageColors[label] || '#98A2B3' }));
/* ---- Recent Activity ---- */
const recentActivity = app.activity.slice(0, 10);
const activityGroups = { Today: [], Yesterday: [], Earlier: [] };
recentActivity.forEach(a => activityGroups[relativeAgoBucket(a.createdAt)].push(a));
/* ---- Upcoming Deadlines (next 7 days) ---- */
const deadlineItems = [
...nonArchived.filter(p => p.status !== 'Complete').map(p => ({ date: p.target, label: p.name, type: 'Project', ownerId: p.owner, go: () => app.navigate('projectDetail', p.id) })),
...app.samplingProjects.filter(sp => !['Moved to Production', 'Cancelled'].includes(sp.status)).map(sp => ({ date: sp.targetApprovalDate, label: sp.name, type: 'Sampling', ownerId: sp.ownerId, go: () => app.navigate('samplingDetail', sp.id) })),
...app.tasks.filter(t => t.status !== 'Done').map(t => ({ date: t.dueDate, label: t.title, type: 'Task', ownerId: t.assignedTo, go: (t.linkedEntityType === 'project' && t.linkedEntityId) ? () => app.navigate('projectDetail', t.linkedEntityId) : null })),
].filter(x => x.date && daysBetween(today, x.date) >= 0 && daysBetween(today, x.date) <= 7)
.sort((a, b) => new Date(a.date) - new Date(b.date));
/* ---- Compact KPI strip ---- */
const dueThisWeek = nonArchived.filter(p => p.status !== 'Complete' && daysBetween(today, p.target) >= 0 && daysBetween(today, p.target) <= 7)
.sort((a, b) => new Date(a.target) - new Date(b.target));
const waitingProjects = nonArchived.filter(p => p.waiting);
const waitingBreakdown = { Supplier: 0, Internal: 0, External: 0 };
waitingProjects.forEach(p => { waitingBreakdown[classifyWaiting(p.waiting, app.suppliers, app.users)]++; });
const inProductionCount = app.components.filter(c => c.status === 'Under Production').length;
const inProductionDelayedCount = app.components.filter(c => c.status === 'Under Production' && hoursSince(c.nextActionUpdatedAt || c.startDate) > 72).length;
const inTransitComponents = app.components.filter(c => c.status === 'Under Shipping');
const inTransitCount = inTransitComponents.length;
const inTransitExpected = inTransitComponents
.map(c => app.projects.find(p => p.id === c.projectId)?.target).filter(Boolean).sort()[0] || null;
const completedThisWeekCount = app.projects.filter(p => p.isArchived && p.completedDate && daysBetween(p.completedDate, today) >= 0 && daysBetween(p.completedDate, today) <= 7).length;
const actionShown = actionExpanded ? actionItems : actionItems.slice(0, 5);
return (
Welcome back, {me.name.split(' ')[0]}
{actionItems.length > 0 ? `${actionItems.length} item${actionItems.length !== 1 ? 's' : ''} need your attention.` : "You're all caught up."}
{/* ---- 1. Action Center ---- */}
Needs your attention
{actionItems.length === 0 ? (
You're all caught up.
) : (
<>
Status
Item
Details
Owner
Due
Est. time
Action
{actionShown.map(item => (
{item.title}
{item.details}
{item.est}
{item.go ? {item.actionLabel} : — }
))}
{actionItems.length > 5 && (
setActionExpanded(e => !e)} className="text-xs font-medium text-gold hover:underline">
{actionExpanded ? 'Show less' : `View all (${actionItems.length})`}
)}
)}
{/* ---- 2. KPI Cards ---- */}
0 ? `Next: ${dueThisWeek[0].name}` : null}
onClick={() => app.navigate('pipeline')}
/>
app.navigate('pipeline')} className="p-4">
{['Supplier', 'Internal', 'External'].map(k => (
{waitingBreakdown[k]}
{k}
))}
0 ? `${inProductionDelayedCount} delayed` : null}
onClick={() => app.navigate('components', null, { statusFilter: 'Under Production' })}
/>
app.navigate('components', null, { statusFilter: 'Under Shipping' })}
/>
app.navigate('accomplished')} />
{/* ---- 3. Quotation Decision Funnel ---- */}
Quotation Decision Funnel
app.navigate('quotations')} className="inline-flex items-center gap-1 text-[10px] uppercase tracking-widest font-medium text-gold bg-elevated rounded-full px-3 py-1.5 hover:bg-gold/15 transition-colors animate-chipBounce">
{decisionBacklog} Decision Backlog
Stage
Progress
Count
% of Total
Avg. Days
{FUNNEL_STAGES.map(stage => {
const count = funnelCounts[stage.key];
const avgDays = funnelAvgDays(stage.key);
return (
app.navigate('quotations')} className="border-b border-border last:border-0 cursor-pointer hover:bg-elevated transition-colors">
{stage.key.replace(' (unsent)', '')}
{stage.suffix && {stage.suffix} }
{count}
{Math.round((count / funnelTotal) * 100)}%
{avgDays != null ? `${avgDays}d` : '—'}
);
})}
{/* ---- 4. Risk Radar + 5. Supplier Scorecard ---- */}
Risk Radar
{riskItems.length} active risk{riskItems.length !== 1 ? 's' : ''} across sampling, targets, quotes, and production.
{riskItems.length === 0 ? (
No active risks — the pipeline is clear.
) : riskItems.map(r => (
{r.text}
{r.sub &&
{r.sub}
}
))}
Supplier Scorecard
{supplierScorecard.length === 0 ? (
No suppliers with active work right now.
) : (
Supplier Active Avg Resp. Approval Overdue
{supplierScorecard.map(row => (
app.navigate('supplierDetail', row.supplier.id)} className="group border-b border-border last:border-0 cursor-pointer hover:bg-elevated/40 transition-colors">
{row.activeCount}
{row.avgResponse != null ? `${row.avgResponse}d` : '—'}
{row.approvalRate != null ? `${row.approvalRate}%` : '—'}
0 ? 'text-oud' : 'text-sage'}`}>{row.overdueCount}
))}
)}
{/* ---- 6. Project Health ---- */}
Project Health
{projectHealthRows.length === 0 ? No projects in sampling or production yet.
: (
{projectHealthRows.map(({ project: p, health, stageCounts }) => {
const totalItems = PROJECT_STAGE_ORDER.reduce((s, k) => s + stageCounts[k], 0);
return (
app.navigate('projectDetail', p.id)} className="font-medium text-primary hover:text-gold transition-colors">{p.name}
target {fmtDateShort(p.target)}
{totalItems === 0 ? (
Nothing in sampling yet.
) : (
<>
{PROJECT_STAGE_ORDER.filter(s => stageCounts[s] > 0).map(s => (
))}
{PROJECT_STAGE_ORDER.map(s => (
0 ? 'text-primary' : 'text-muted/40'}>{s} {stageCounts[s]}
))}
)}
);
})}
{/* ---- 7. Committed Spend ---- */}
setSpendOpen(o => !o)} className="flex-1 flex items-center justify-between">
Committed Spend
(FX {app.fxSource === 'live' ? 'live' : app.fxSource === 'manual' ? 'manual' : 'default'}, updated {fmtRelativeFromISO(app.fxUpdatedAt)})
{fmtCurrency(totalExposure, 'USD', { decimals: 0 })}
{spendOpen ?
{app.currentUser.accessRole === 'Admin' && (
setRatesModalOpen(true)} title="Manage exchange rates" className="ml-3 text-muted hover:text-gold shrink-0">
)}
{spendOpen && (
{[
{ label: 'Approved (not yet sent to sampling)', value: approvedExposure },
{ label: 'In Sampling (mold + sample costs)', value: inSamplingExposure },
{ label: 'In Production (order value)', value: inProductionExposure },
].map(row => (
{row.label}
{fmtCurrency(row.value, 'USD', { decimals: 0 })}
))}
At Risk (blocked / overdue / stale)
{fmtCurrency(atRiskExposure, 'USD', { decimals: 0 })}
Total exposure
{fmtCurrency(totalExposure, 'USD', { decimals: 0 })}
{/* ---- Projects by Stage + Recent Activity ---- */}
Projects by Stage
app.navigate('pipeline')} />
Recent Activity
{['Today', 'Yesterday', 'Earlier'].map(group => activityGroups[group].length > 0 && (
{group}
{activityGroups[group].map(a => {
const proj = app.projects.find(p => a.detail.includes(p.name));
return (
app.navigate('projectDetail', proj.id) : undefined} disabled={!proj} className="w-full text-left disabled:cursor-default hover:bg-elevated rounded-lg transition-colors">
);
})}
))}
{recentActivity.length === 0 &&
No recent activity.
}
{/* ---- Upcoming Deadlines ---- */}
Upcoming Deadlines
{deadlineItems.length === 0 ? Nothing due in the next 7 days.
: (
Date Item Type Owner
{deadlineItems.map((d, i) => (
{fmtDateShort(d.date)}
{d.label}
{d.type}
))}
)}
setRatesModalOpen(false)} />
);
}
/* ======================================================================
10. PIPELINE / KANBAN
====================================================================== */
// Wraps window.SakanIntelligenceReport (registered by IntelligenceReport.jsx,
// loaded as its own Babel-transformed script tag before this file - see the
// comment at the top of that file for why it's not a plain `import`).
// `ctx` is the live useApp() object; the report engine reads straight off
// it, so there is no separate reporting dataset to fall out of sync.
function IntelligenceReportView({ ctx, scope, projectIds, onBack }) {
const Comp = window.SakanIntelligenceReport;
if (!Comp) return
Loading report engine…
;
return
;
}
// Registry of report types shown as sub-tabs under Pipeline -> Report, one
// level below Board | Timeline | Report. Project Overview is the only
// entry today; a future report type is a new {key, label, Component} row
// here, not a rewrite of this tab strip.
const REPORT_TYPES = [
{ key: 'intelligence', label: 'Project Overview', Component: ProjectIntelligencePanel },
];
function ReportTab() {
const app = useApp();
const [reportType, setReportType] = useState(REPORT_TYPES[0].key);
const Active = REPORT_TYPES.find(r => r.key === reportType)?.Component || REPORT_TYPES[0].Component;
return (
{REPORT_TYPES.length > 1 && (
{REPORT_TYPES.map(r => (
setReportType(r.key)} className={`px-4 py-1.5 text-sm ${reportType === r.key ? 'bg-gold/15 text-gold' : 'text-muted hover:bg-elevated'}`}>{r.label}
))}
)}
);
}
// One unified picker - search by name, check any number of projects (one,
// several, or all), then Generate. Replaces the old three-button All/
// Select/Single mode toggle, which forced picking a mode before you could
// even see the project list. Reads an initial selection from route.params
// so Project Detail's "Project Overview" link lands here pre-filtered
// to one project and generates immediately, no extra click required.
function ProjectIntelligencePanel() {
const app = useApp();
const initial = app.route.params || {};
const [selected, setSelected] = useState(initial.reportProjectIds || []);
const [search, setSearch] = useState('');
const [generating, setGenerating] = useState(false);
const [generated, setGenerated] = useState(false);
const autoGenerated = useRef(false);
const visible = app.projects.filter(p => canSeeProject(app.currentUser, p) && !p.isArchived);
const filtered = search.trim() ? visible.filter(p => p.name.toLowerCase().includes(search.trim().toLowerCase())) : visible;
const allFilteredSelected = filtered.length > 0 && filtered.every(p => selected.includes(p.id));
// Report generation always re-fetches every entity the engine reads
// first (see refetchReportData), so "Generated
" on the report
// itself is never more than a few seconds stale, not up-to-30s-stale
// like ordinary cached browsing.
const generate = useCallback(async () => {
setGenerating(true);
await app.refetchReportData();
setGenerating(false);
setGenerated(true);
}, [app]);
useEffect(() => {
if (initial.reportProjectIds?.length && !autoGenerated.current) {
autoGenerated.current = true;
generate();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (generated && selected.length > 0) {
const scope = selected.length === 1 ? 'single' : (selected.length === visible.length ? 'all' : 'combined');
return (
setGenerated(false)} className="text-xs text-muted hover:text-primary mb-3 inline-flex items-center gap-1">
{ setGenerated(false); setSelected([]); }} />
);
}
return (
Project Overview
Search or check projects below, then generate — one project, a few, or all of them.
No active projects to report on yet.
) : (
<>
{filtered.length === 0 ? (
No projects match "{search}".
) : filtered.map(p => (
))}
{selected.length} project{selected.length === 1 ? '' : 's'} selected
Generate
);
}
// Pipeline -> Timeline tab. Each bar spans a project's own startDate->target
// on one shared calendar axis, same as before, but now:
// 1. the bar is split into a real-progress fill (computeProgress) inside a
// lighter full-range envelope, instead of one flat block regardless of
// how much has actually happened;
// 2. a "today" line crosses every row, so a project's filled portion vs.
// where today falls inside its own bar shows pace at a glance;
// 3. the envelope/fill is tinted by computeHealth (On Track/At Risk/Behind)
// - the same signal the Dashboard and Project Overview report already use;
// 4. a small triangle marks computeForecast's projected completion date,
// separate from the target-date tick, so slippage is visible directly
// on the axis instead of only as a number elsewhere;
// 5. projects with a missing/invalid start or target date are excluded from
// the shared axis instead of poisoning every row's position with NaN.
function TimelineTab({ visible, app }) {
const today = todayStr();
const historical = useMemo(() => computeHistoricalBaseline(app), [app]);
const rows = visible
.filter(p => p.startDate && p.target && !isNaN(new Date(p.startDate)) && !isNaN(new Date(p.target)))
.map(p => {
const slice = selectProjectSlice(app, p.id);
const progress = computeProgress(slice);
const health = computeHealth(slice);
const forecastDate = p.status === 'Complete' ? null : computeForecast(slice, historical).onTimeDate;
return { p, progress, health, forecastDate };
});
if (!rows.length) {
return
{rows.map(({ p, progress, health, forecastDate }) => {
const start = new Date(p.startDate), end = new Date(p.target);
const left = pctOf(p.startDate);
const width = Math.max(3, ((end - start) / span) * 100);
const tone = HEALTH_TONE[health] || 'info';
const forecastPct = forecastDate ? pctOf(forecastDate) : null;
return (
{p.name}
{forecastPct != null && (
)}
{p.status} · {progress}%
{fmtDateShort(p.target)}
);
})}
);
}
function Pipeline() {
const app = useApp();
const [tab, setTab] = useState(app.route.params?.tab || 'board');
const visible = app.projects.filter(p => canSeeProject(app.currentUser, p) && !p.isArchived);
const moveProject = (project, status) => {
if (!canEditProject(app.currentUser, project)) { app.toast('Only the owner or an admin can move this project.', 'error'); return; }
if (status === 'Complete' && !app.allComponentsComplete(project.id)) { app.toast('Complete all components first before moving to Complete.', 'error'); return; }
app.updateProject(project.id, { status });
app.microToast('Saved');
};
return (
Pipeline
{['board', 'timeline', 'report'].map(t => (
setTab(t)} className={`px-4 py-1.5 text-sm capitalize ${tab === t ? 'bg-gold/15 text-gold' : 'text-muted hover:bg-elevated'}`}>{t}
))}
{tab === 'report' ? (
) : tab === 'board' ? (
{PROJECT_STATUSES.map(status => {
const items = visible.filter(p => p.status === status);
return (
{status}
{items.length}
{items.map(p => (
app.navigate('projectDetail', p.id)}>
{p.blocking ?
:
}
{canEditProject(app.currentUser, p) && (
e.stopPropagation()} className="text-muted hover:text-primary"> { e.stopPropagation(); moveProject(p, s); }} className="w-full text-left px-3 py-1.5 text-xs text-primary hover:bg-base">Move to {s}
))}
)}
))}
{items.length === 0 && (
Nothing here yet
)}
);
})}
) : (
)}
);
}
/* ======================================================================
11. PROJECT DETAIL
====================================================================== */
function ComponentCostTooltip({ lines }) {
return (
{lines.map((l, i) => (
{l}
))}
app.navigate('dashboard')} />;
if (!canSeeProject(app.currentUser, project)) return app.navigate('dashboard')} />;
const owner = userById(app.users, project.owner);
const projQuotes = app.quotations.filter(q => q.projectId === id);
const projSampling = app.samplingProjects.filter(sp => sp.linkedProjectId === id);
const projRounds = app.sampleRounds.filter(r => projSampling.some(sp => sp.id === r.samplingProjectId));
const projComponents = app.components.filter(c => c.projectId === id);
const projComments = app.comments.filter(c => c.entityType === 'project' && c.entityId === id);
const relatedActivity = app.activity.filter(a => a.detail.includes(project.name)).slice(0, project.isArchived ? 200 : 8);
const allDone = app.allComponentsComplete(id);
const editable = canEditProject(app.currentUser, project);
const canDelete = editable && app.canDeleteProject(id);
const compCostItems = projComponents.map(c => {
const currency = c.currency || 'EUR';
const qty = parseFloat(String(c.orderQty ?? '').replace(/[^0-9.]/g, '')) || 0;
const priceUsd = toUSD(c.price || 0, currency, app.fxRates);
return { c, currency, qty, priceUsd, totalUsd: priceUsd * qty };
});
const totalProjectCostUsd = compCostItems.reduce((s, i) => s + i.totalUsd, 0);
const totalProjectQty = compCostItems.reduce((s, i) => s + i.qty, 0);
const aveCostPerPcsUsd = totalProjectQty > 0 ? totalProjectCostUsd / totalProjectQty : 0;
const allComponentPricesUnset = projComponents.length > 0 && projComponents.every(c => !c.price);
const compCostTooltipLines = compCostItems.map(i => {
const priceLabel = i.c.price ? fmtCurrency(i.c.price, i.currency) : `${fmtCurrency(0, i.currency)} (price not set)`;
const qtyLabel = i.qty > 0 ? i.qty.toLocaleString('en-US') : '0 (qty not set)';
const originalTotal = (i.c.price || 0) * i.qty;
return `${i.c.name}: ${priceLabel} × ${qtyLabel} = ${fmtCurrency(originalTotal, i.currency, { decimals: 0 })} (≈ ${fmtCurrency(i.totalUsd, 'USD', { decimals: 0 })})`;
});
const hasActiveSampling = projSampling.some(sp => !['Moved to Production', 'Cancelled'].includes(sp.status));
const showQuotations = project.isArchived ? projQuotes.length > 0 : (project.status === 'Development' || project.status === 'Quotation');
const showSampling = project.isArchived ? projSampling.length > 0 : (project.status === 'Sampling' || hasActiveSampling);
const showComponents = project.isArchived ? projComponents.length > 0 : (project.status === 'Production' || project.status === 'Shipping' || projComponents.length > 0);
const projAttachments = project.isArchived
? app.attachments.filter(a =>
(a.entityType === 'project' && a.entityId === id) ||
(a.entityType === 'quotation' && projQuotes.some(q => q.id === a.entityId)) ||
(a.entityType === 'samplingProject' && projSampling.some(sp => sp.id === a.entityId)) ||
(a.entityType === 'sampleRound' && projRounds.some(r => r.id === a.entityId)) ||
(a.entityType === 'component' && projComponents.some(c => c.id === a.entityId)))
: app.attachments.filter(a => a.entityType === 'project' && a.entityId === id);
const attachmentSourceLabel = (a) => {
if (a.entityType === 'project') return 'Project';
if (a.entityType === 'quotation') return `Quotation — ${projQuotes.find(q => q.id === a.entityId)?.supplierName || ''}`;
if (a.entityType === 'samplingProject') return `Sampling — ${projSampling.find(sp => sp.id === a.entityId)?.name || ''}`;
if (a.entityType === 'sampleRound') { const r = projRounds.find(x => x.id === a.entityId); const sp = projSampling.find(s => s.id === r?.samplingProjectId); return `Sample ${r?.version || ''} — ${sp?.name || ''}`; }
if (a.entityType === 'component') return `Component — ${projComponents.find(c => c.id === a.entityId)?.name || ''}`;
return '';
};
const handleDelete = async () => {
const ok = await app.confirm({ title: `Delete ${project.name}?`, message: 'This cannot be undone.', confirmLabel: 'Delete' });
if (ok) { app.deleteProject(id); app.navigate('quotations'); }
};
const handleMarkComplete = async () => {
const ok = await app.confirm({ title: 'Mark project complete?', message: `${project.name} will move to Accomplished Projects and become read-only.`, confirmLabel: 'Mark Complete' });
if (ok) app.markProjectComplete(id);
};
return (
app.navigate('dashboard')} className="flex items-center gap-1.5 text-sm text-muted hover:text-primary mb-4">
{project.isArchived && (
Accomplished on {fmtDate(project.completedDate)}
)}
app.navigate('pipeline', null, { tab: 'report', reportProjectIds: [project.id] })}
>
Project Overview
{!project.isArchived && canDelete && (
Delete
)}
{!project.isArchived && (
Mark Complete
)}
{project.blocking && !project.isArchived && (
Blocked: {project.blocking} — waiting on {project.waiting}
)}
{allDone && !project.isArchived && (
All components complete. Ready to mark this project as done.
{editable && Mark Complete }
)}
Progress
Duration
{project.isArchived ? daysBetween(project.startDate, project.completedDate) : durationSince(project.startDate)} days
{showQuotations && (
Linked Quotations
{projQuotes.length === 0 ? (
app.navigate('quotationsByProject', id)} />
) : (
{projQuotes.map(q => (
{q.supplierName}
{(q.lineItems || []).map(li => (
{li.itemName} — {fmtCurrency(li.unitPrice, q.currency)}/unit · MOQ {li.moq} · {li.status || 'Pending'}
))}
))}
)}
{showSampling && (
Linked Sampling Projects
{projSampling.length === 0 ?
{projSampling.map(sp => (
app.navigate('samplingDetail', sp.id)}>
{sp.name}
))}
)}
{showComponents && (
Linked Components
{projComponents.length === 0 ?
Component Supplier Status Price Duration
{projComponents.map(c => (
{c.name}
{supplierById(app.suppliers, c.supplier)?.name}
{fmtCurrency(c.price, c.currency)}
{c.completedDate ? daysBetween(c.startDate, c.completedDate) : durationSince(c.startDate)}d
))}
)}
)}
{project.isArchived ? 'All Attachments' : 'Attachments'}
{!project.isArchived && editable && fileInputRef.current?.click()}>Upload }
Every file uploaded across this project's quotations, sampling rounds, and components — kept for the record.
}
{projAttachments.map(a => (
))}
{projAttachments.length === 0 &&
No attachments yet.
}
Comments
{projComments.map(c =>
)}
{projComments.length === 0 &&
No comments yet.
}
{ if (commentText.trim()) { app.addComment('project', id, commentText); setCommentText(''); } }} />
{ if (commentText.trim()) { app.addComment('project', id, commentText); setCommentText(''); } }}>Post
)}
Details
Category {project.category}
Launch Wave Wave {project.launchWave}
Start Date {fmtDateShort(project.startDate)}
Target Date {fmtDateShort(project.target)}
{project.completedDate &&
Completed {fmtDateShort(project.completedDate)} }
{projComponents.length > 0 && (
<>
Ave. Cost / Pcs
${aveCostPerPcsUsd.toFixed(2)} / pcs
{allComponentPricesUnset && (prices not set)
}
Total Project Cost
{fmtCurrency(totalProjectCostUsd, 'USD', { decimals: 0 })}
{allComponentPricesUnset && (prices not set)
}
)}
{app.currentUser.accessRole === 'Admin' && !project.isArchived && (
Visible To
{!project.visibleTo.includes('all') && app.users.map(u => (
))}
)}
{app.currentUser.accessRole === 'Admin' && !project.isArchived && (
Editable By
Only {owner?.name || 'the owner'} and admins can amend this project by default. Grant edit access to others here.
{app.users.filter(u => u.id !== project.owner).map(u => (
))}
)}
Audit Log
{relatedActivity.map(a =>
)}
{relatedActivity.length === 0 &&
No history yet.
}
);
}
/* ======================================================================
12. QUOTATION LIST
====================================================================== */
const emptyProjectForm = (app) => ({
name: '', category: 'Perfume', target: addDays(todayStr(), 45), owner: app.currentUserId, priority: 'Normal',
estimatedBudget: '', budgetCurrency: 'EUR',
});
function NewProjectModal({ open, onClose }) {
const app = useApp();
const [form, setForm] = useState(() => emptyProjectForm(app));
const submit = () => {
if (!form.name.trim()) { app.toast('Project name is required.', 'error'); return; }
const budget = Number(form.estimatedBudget);
if (!form.estimatedBudget || !(budget > 0)) { app.toast('Estimated budget is required.', 'error'); return; }
if (!form.budgetCurrency) { app.toast('Currency is required.', 'error'); return; }
const id = app.createProject({ ...form, estimatedBudget: budget });
onClose();
setForm(emptyProjectForm(app));
app.navigate('projectDetail', id);
};
return (
);
}
function emptyLineItem() {
return { itemName: '', qty: '', unitPrice: '', moq: '', moldCost: '', samplingCost: '', prodLeadTime: '', samplingLeadTime: '' };
}
function LineItemCard({ item, canRemove, onChange, onRemove }) {
const set = (field, val) => onChange({ ...item, [field]: val });
const locked = !!item.locked;
return (
Item Name
{locked ? (
🔒 In Sampling
) : canRemove && (
)}
);
}
function LineItemsField({ items, onChange }) {
const list = items?.length ? items : [emptyLineItem()];
const update = (i, item) => onChange(list.map((it, idx) => idx === i ? item : it));
const add = () => onChange([...list, emptyLineItem()]);
const remove = i => onChange(list.filter((_, idx) => idx !== i));
const removableCount = list.filter(it => !it.locked).length;
return (
Line Items
{list.map((item, i) => (
1} onChange={val => update(i, val)} onRemove={() => remove(i)} />
))}
);
}
function AddQuoteModal({ open, onClose, projectId }) {
const app = useApp();
const allSuppliers = [...app.suppliers];
const emptyForm = { supplierId: allSuppliers[0]?.id || '', currency: 'EUR', validUntil: addDays(todayStr(), 30), referenceNo: '', lineItems: [emptyLineItem()] };
const [form, setForm] = useState(emptyForm);
const [file, setFile] = useState(null);
const fileInputRef = useRef(null);
const submit = () => {
if (!form.supplierId) { app.toast('Supplier is required.', 'error'); return; }
const cleanItems = form.lineItems.filter(li => li.itemName.trim() || li.unitPrice !== '');
if (!cleanItems.length) { app.toast('At least one item is required.', 'error'); return; }
if (cleanItems.some(li => !li.itemName.trim() || !li.unitPrice)) { app.toast('Each item needs a name and unit price.', 'error'); return; }
(async () => {
const id = await app.addQuotation(projectId, { ...form, lineItems: cleanItems });
if (id && file) app.addAttachment('quotation', id, file);
})();
onClose();
setForm(emptyForm);
setFile(null);
};
return (
Supplier setForm(f => ({ ...f, supplierId: e.target.value }))}>{allSuppliers.map(s => {s.name} ({s.country}) )}
Currency setForm(f => ({ ...f, currency: e.target.value }))}>{CURRENCIES.map(c => {c.code} ({c.symbol}) )}
setForm(f => ({ ...f, lineItems }))} />
Cancel Add Quote
);
}
function EditQuoteModal({ open, onClose, quotation }) {
const app = useApp();
const [form, setForm] = useState(null);
useEffect(() => {
if (quotation) {
setForm({
currency: quotation.currency || 'EUR', validUntil: quotation.validUntil, referenceNo: quotation.referenceNo || '',
lineItems: quotation.lineItems?.length ? quotation.lineItems.map(li => ({ ...li })) : [emptyLineItem()],
});
}
}, [quotation]);
if (!form) return null;
const submit = () => {
const lockedItems = form.lineItems.filter(li => li.locked);
const editableItems = form.lineItems.filter(li => !li.locked);
const cleanEditable = editableItems.filter(li => (li.itemName || '').toString().trim() || li.unitPrice !== '');
if (!cleanEditable.length && !lockedItems.length) { app.toast('At least one item is required.', 'error'); return; }
if (cleanEditable.some(li => !(li.itemName || '').toString().trim() || !li.unitPrice)) { app.toast('Each item needs a name and unit price.', 'error'); return; }
const mergedLineItems = [
...lockedItems,
...cleanEditable.map(li => ({
id: li.id || crypto.randomUUID(), itemName: li.itemName.trim(), qty: Number(li.qty) || 0, unitPrice: Number(li.unitPrice) || 0,
moq: li.moq || '', moldCost: Number(li.moldCost) || 0, samplingCost: Number(li.samplingCost) || 0,
prodLeadTime: Number(li.prodLeadTime) || 0, samplingLeadTime: Number(li.samplingLeadTime) || 0,
status: li.status || 'Pending', approvedReason: li.approvedReason, rejectedReason: li.rejectedReason,
samplingProjectId: li.samplingProjectId || null, locked: false,
})),
];
app.updateQuotation(quotation.id, { currency: form.currency, validUntil: form.validUntil, referenceNo: form.referenceNo, lineItems: mergedLineItems });
onClose();
};
return (
setForm(f => ({ ...f, lineItems }))} />
Cancel Save Changes
);
}
function EditableCell({ value, onSave, type = 'text', mono = false, currency = null }) {
const [editing, setEditing] = useState(false);
const [val, setVal] = useState(value);
useEffect(() => setVal(value), [value]);
if (editing) {
return (
setEditing(true)} className={`cursor-text hover:bg-elevated rounded px-1 -mx-1 ${mono ? 'font-mono' : ''}`}>
{type === 'number' ? (currency ? fmtCurrency(value, currency) : fmtEUR(value)) : value}
);
}
function QuotationFilesCell({ quotationId, editable }) {
const app = useApp();
const fileInputRef = useRef(null);
const files = app.attachments.filter(a => a.entityType === 'quotation' && a.entityId === quotationId);
return (
{files.length} }
}
>
Attachments
{files.map(a =>
{}} onOpen={app.getAttachmentUrl} />)}
{files.length === 0 && No files yet.
}
{editable && (
<>
fileInputRef.current?.click()} className="mt-2 w-full text-xs text-gold hover:underline flex items-center justify-center gap-1 py-1">
{ if (e.target.files[0]) app.addAttachment('quotation', quotationId, e.target.files[0]); }} />
)}
);
}
function QuotationList() {
const app = useApp();
const [modalOpen, setModalOpen] = useState(false);
const [search, setSearch] = useState('');
const [tab, setTab] = useState('byProject');
const visibleProjects = app.projects.filter(p => canSeeProject(app.currentUser, p) && !p.isArchived);
const filtered = visibleProjects.filter(p => {
if (!search) return true;
const s = search.toLowerCase();
return p.name.toLowerCase().includes(s) || app.quotations.some(q => q.projectId === p.id && q.supplierName.toLowerCase().includes(s));
});
return (
Quotations
setModalOpen(true)}>New Project
{tab === 'byProject' ? (
{filtered.map(project => {
const quotes = app.quotations.filter(q => q.projectId === project.id);
const approvedItemCount = quotes.reduce((n, q) => n + (q.lineItems || []).filter(li => li.status === 'Approved' || li.status === 'In Sampling').length, 0);
return (
app.navigate('quotationsByProject', project.id)}>
{project.name}
{quotes.length} quotation{quotes.length !== 1 ? 's' : ''}
{approvedItemCount > 0 ? ` · ${approvedItemCount} item${approvedItemCount !== 1 ? 's' : ''} approved` : ''}
Target {fmtDateShort(project.target)}
);
})}
{filtered.length === 0 && (
setModalOpen(true)} />
)}
) : (
Project Supplier Added By Item Qty Unit Price MOQ Valid Until Status Files
{app.quotations.filter(q => visibleProjects.some(p => p.id === q.projectId)).flatMap(q => {
const proj = app.projects.find(p => p.id === q.projectId);
const creator = userById(app.users, quotationOwnerId(q, proj));
return (q.lineItems || []).map((li, i) => (
{proj?.name}
{q.supplierName}
{li.itemName}
{li.qty ? li.qty.toLocaleString('en-US') : '—'}
{fmtCurrency(li.unitPrice, q.currency)}
{li.moq}
{fmtDateShort(q.validUntil)}
));
})}
)}
setModalOpen(false)} />
);
}
function LineItemDecisionRow({ quotation, project, lineItem }) {
const app = useApp();
const editable = canEditLineItem(app.currentUser, quotation, project, lineItem);
const [reason, setReason] = useState(lineItem.approvedReason || lineItem.rejectedReason || '');
useEffect(() => {
setReason(lineItem.approvedReason || lineItem.rejectedReason || '');
}, [lineItem.id, lineItem.status, lineItem.approvedReason, lineItem.rejectedReason]);
const decide = (decision) => {
if (!editable) return;
app.setLineItemDecision(quotation.id, lineItem.id, decision, reason);
};
const saveReason = () => {
if (!editable || (lineItem.status || 'Pending') === 'Pending') return;
app.setLineItemDecision(quotation.id, lineItem.id, lineItem.status, reason);
};
const segmentCls = (active, tone) => {
if (!active) return 'px-2.5 py-1 text-xs font-medium text-muted hover:bg-elevated disabled:hover:bg-transparent';
const toneCls = tone === 'sage' ? 'bg-sage/20 text-sage' : tone === 'oud' ? 'bg-oud/20 text-oud' : tone === 'purple' ? 'bg-purple/20 text-purple' : 'bg-elevated text-primary';
return `px-2.5 py-1 text-xs font-medium ${toneCls}`;
};
return (
Qty
{lineItem.qty ? lineItem.qty.toLocaleString('en-US') : '—'}
Unit
{fmtCurrency(lineItem.unitPrice, quotation.currency)}
Mold / Sampling
{fmtCurrency(lineItem.moldCost, quotation.currency, { decimals: 0 })} / {fmtCurrency(lineItem.samplingCost, quotation.currency, { decimals: 0 })}
Lead
{lineItem.prodLeadTime || 0}d / {lineItem.samplingLeadTime || 0}d
{lineItem.locked ? (
🔒 In Sampling
) : (
decide('Pending')} className={segmentCls((lineItem.status || 'Pending') === 'Pending', 'muted')}>Pending
decide('Approved')} className={segmentCls(lineItem.status === 'Approved', 'sage')}>Approve
decide('Rejected')} className={segmentCls(lineItem.status === 'Rejected', 'oud')}>Reject
decide('Developing')} className={segmentCls(lineItem.status === 'Developing', 'purple')}>Developing
)}
{!lineItem.locked && lineItem.status !== 'Pending' && lineItem.status !== 'Developing' && editable && (
setReason(e.target.value)} onBlur={saveReason}
onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }}
placeholder="Reason (optional)"
className="flex-1 min-w-[160px] text-xs bg-surface border border-border rounded-lg px-2.5 py-1.5 text-primary placeholder:text-stale focus:outline-none focus:ring-2 focus:ring-gold/40"
/>
)}
{(!editable || lineItem.locked) && (lineItem.approvedReason || lineItem.rejectedReason) && (
Reason: "{lineItem.approvedReason || lineItem.rejectedReason}"
)}
);
}
function QuotationCard({ quotation, project, onEdit }) {
const app = useApp();
const [expanded, setExpanded] = useState(false);
const editable = canEditQuotation(app.currentUser, quotation, project);
const deletable = canDeleteQuotation(app.currentUser, quotation, project);
const items = quotation.lineItems || [];
const derivedStatus = deriveQuotationStatus(quotation);
const acceptedAmt = quotationAcceptedAmount(quotation);
const originalAmt = quotationTotalAmount(quotation);
const rejectedAmt = quotationRejectedAmount(quotation);
const acceptedUSD = toUSD(acceptedAmt, quotation.currency || 'EUR', app.fxRates);
const originalUSD = toUSD(originalAmt, quotation.currency || 'EUR', app.fxRates);
const summary = lineItemDecisionSummary(items);
const hasApprovedToSend = items.some(li => li.status === 'Approved' && !li.locked);
const handleDelete = async () => {
const ok = await app.confirm({ title: `Delete quote from ${quotation.supplierName}?`, message: 'This cannot be undone.', confirmLabel: 'Delete' });
if (ok) app.deleteQuotation(quotation.id);
};
const handleSend = async () => {
const count = items.filter(li => li.status === 'Approved' && !li.locked).length;
const ok = await app.confirm({ title: 'Send approved items to sampling?', message: `${count} approved item${count > 1 ? 's' : ''} will each get its own Sampling Project.`, confirmLabel: 'Send' });
if (ok) app.sendApprovedLineItems(quotation.id);
};
const creator = userById(app.users, quotationOwnerId(quotation, project));
return (
{quotation.supplierName}
{quotation.referenceNo && Ref: {quotation.referenceNo} }
{items.length > 1 ? (
{items.length} items
) : (
{items[0]?.itemName || '—'}
)}
Accepted
{fmtCurrency(acceptedUSD, 'USD', { decimals: 0 })}
Original
{fmtCurrency(originalUSD, 'USD', { decimals: 0 })}
{summary}
{editable &&
onEdit(quotation)} title="Edit quote" className="text-muted hover:text-gold"> }
{deletable &&
}
setExpanded(e => !e)} className="flex items-center gap-1 text-xs text-muted hover:text-gold">
{expanded ?
{expanded && (
{summary}
Accepted: {fmtCurrency(acceptedAmt, quotation.currency, { decimals: 0 })}
| Original: {fmtCurrency(originalAmt, quotation.currency, { decimals: 0 })}
{rejectedAmt > 0 && | Rejected: {fmtCurrency(rejectedAmt, quotation.currency, { decimals: 0 })} }
{hasApprovedToSend && editable && (
Send Approved →
)}
{items.map(li =>
)}
);
}
function QuotationsForProject({ id }) {
const app = useApp();
const project = app.projects.find(p => p.id === id);
const [addQuoteOpen, setAddQuoteOpen] = useState(false);
const [editQuote, setEditQuote] = useState(null);
if (!project) return app.navigate('quotations')} />;
const quotes = app.quotations.filter(q => q.projectId === id);
const editable = canEditProject(app.currentUser, project);
const canDelete = editable && app.canDeleteProject(id);
const sentItems = quotes.flatMap(q => (q.lineItems || []).filter(li => li.locked).map(li => ({ q, li })));
const handleDelete = async () => {
const ok = await app.confirm({ title: `Delete ${project.name}?`, message: 'This cannot be undone.', confirmLabel: 'Delete' });
if (ok) { app.deleteProject(id); app.navigate('quotations'); }
};
return (
app.navigate('quotations')} className="flex items-center gap-1.5 text-sm text-muted hover:text-primary mb-4">
{project.name}
{canDelete && (
Target {fmtDateShort(project.target)}
{editable ? (
setAddQuoteOpen(true)}>Add Quote
) : (
View only
)}
{sentItems.length > 0 && (
{sentItems.length} item{sentItems.length > 1 ? 's' : ''} sent to sampling.
app.navigate('samplingByProject', project.id)} className="text-gold flex items-center gap-1 hover:underline">View Sampling
)}
{quotes.length === 0 ? (
setAddQuoteOpen(true)} />
) : (
Supplier Items Accepted Value Original Total Decision Summary Added By Actions
{quotes.map(q => (
)}
setAddQuoteOpen(false)} projectId={id} />
setEditQuote(null)} quotation={editQuote} />
);
}
/* ======================================================================
13. SAMPLING HUB + DETAIL
====================================================================== */
function SamplingHub() {
const app = useApp();
const [statusFilter, setStatusFilter] = useState('all');
const visibleProjects = app.projects.filter(p => canSeeProject(app.currentUser, p) && !p.isArchived);
const projectIdsWithSampling = new Set(app.samplingProjects.map(sp => sp.linkedProjectId));
const projectsWithSampling = visibleProjects.filter(p => projectIdsWithSampling.has(p.id) &&
app.samplingProjects.some(sp => sp.linkedProjectId === p.id && !['Moved to Production', 'Cancelled'].includes(sp.status)));
const filteredProjects = projectsWithSampling.filter(p => {
if (statusFilter === 'all') return true;
return app.samplingProjects.some(sp => sp.linkedProjectId === p.id && sp.status === statusFilter);
});
return (
Sampling
setStatusFilter(e.target.value)}>
All statuses
{['Sourcing', 'Sampling In Progress', 'Sample Approved', 'Moved to Production', 'On Hold', 'Cancelled'].map(s => {s} )}
{filteredProjects.length === 0 &&
app.navigate('quotations')} />}
{filteredProjects.map(project => {
const tracks = app.samplingProjects.filter(sp => sp.linkedProjectId === project.id);
const rounds = app.sampleRounds.filter(r => tracks.some(t => t.id === r.samplingProjectId));
const movedToProduction = tracks.filter(t => t.status === 'Moved to Production').length;
const latestRound = [...rounds].sort((a, b) => new Date(b.dateRequested) - new Date(a.dateRequested))[0];
return (
app.navigate('samplingByProject', project.id)}>
{project.name}
{tracks.length} sampling track{tracks.length !== 1 ? 's' : ''} · {rounds.length} round{rounds.length !== 1 ? 's' : ''} total
{latestRound ? (
Latest: {latestRound.version} {latestRound.status.toLowerCase()} with {supplierById(app.suppliers, latestRound.supplierId)?.name}
) : (
No rounds requested yet
)}
{movedToProduction}/{tracks.length} moved to production
);
})}
);
}
function SamplingByProject({ id }) {
const app = useApp();
const project = app.projects.find(p => p.id === id);
if (!project) return app.navigate('sampling')} />;
const tracks = app.samplingProjects.filter(sp => sp.linkedProjectId === id);
return (
app.navigate('sampling')} className="flex items-center gap-1.5 text-sm text-muted hover:text-primary mb-4">
app.navigate('projectDetail', project.id)} className="text-sm text-gold hover:underline flex items-center gap-1 mb-5">Open project
{tracks.length === 0 ? (
app.navigate('quotationsByProject', id)} />
) : (
{tracks.map(sp => {
const rounds = app.sampleRounds.filter(r => r.samplingProjectId === sp.id);
const bids = app.supplierBids.filter(b => b.samplingProjectId === sp.id);
const latest = rounds[rounds.length - 1];
return (
app.navigate('samplingDetail', sp.id)}>
{sp.name}
{bids.length} supplier{bids.length !== 1 ? 's' : ''} bidding · {rounds.length} round{rounds.length !== 1 ? 's' : ''} total
{latest && {latest.version} {latest.status.toLowerCase()} with {supplierById(app.suppliers, latest.supplierId)?.name}
}
);
})}
);
}
function RequestRoundModal({ open, onClose, samplingProjectId }) {
const app = useApp();
const [form, setForm] = useState({ supplierId: '', cost: '', leadTimeDays: '' });
const bids = app.supplierBids.filter(b => b.samplingProjectId === samplingProjectId);
const currentBid = bids.find(b => b.supplierId === form.supplierId);
useEffect(() => { if (open && bids[0]) setForm(f => ({ ...f, supplierId: bids[0].supplierId })); }, [open]);
const submit = () => {
if (!form.supplierId) { app.toast('Choose a supplier.', 'error'); return; }
app.requestSampleRound(samplingProjectId, form);
onClose();
};
return (
Supplier setForm(f => ({ ...f, supplierId: e.target.value }))}>{bids.map(b => {supplierById(app.suppliers, b.supplierId)?.name} )}
Cancel Request Round
);
}
function MoveToProductionModal({ open, onClose, samplingProjectId }) {
const app = useApp();
const [form, setForm] = useState({ qty: '', price: '' });
const approvedRound = app.sampleRounds.find(r => r.samplingProjectId === samplingProjectId && r.status === 'Approved');
const bid = approvedRound ? app.supplierBids.find(b => b.samplingProjectId === samplingProjectId && b.supplierId === approvedRound.supplierId) : null;
const supplier = approvedRound ? supplierById(app.suppliers, approvedRound.supplierId) : null;
const currency = bid?.currency || 'EUR';
useEffect(() => {
if (open) {
const defaultQty = bid?.quotedQty || parseNumeric(bid?.quotedMOQ) || '';
setForm({ qty: defaultQty ? String(defaultQty) : '', price: bid?.quotedPrice != null ? String(bid.quotedPrice) : '' });
}
}, [open, samplingProjectId]);
const qtyNum = Number(form.qty);
const priceNum = Number(form.price);
const valid = qtyNum >= 0.0001 && priceNum >= 0.0001;
const submit = () => {
if (!valid) { app.toast('Enter a qty and price of at least 0.0001.', 'error'); return; }
app.moveSamplingToProduction(samplingProjectId, { qty: qtyNum, price: priceNum });
onClose();
};
return (
Confirm the order quantity and unit price with {supplier?.name || 'the supplier'} before creating the component. These are pre-filled from the quotation — edit them if anything changed.
{!valid && (form.qty !== '' || form.price !== '') && (
Both qty and price must be at least 0.0001.
)}
Cancel
Confirm & Move to Production
);
}
function ReviewRoundPanel({ round, onSubmit }) {
const [notes, setNotes] = useState('');
return (
);
}
function SampleRoundTracker({ round }) {
const effectiveStatus = round.status === 'On Hold' ? (round.heldFromStatus || 'Requested') : round.status;
const isTerminal = SAMPLE_ROUND_TERMINAL_STATUSES.includes(effectiveStatus);
const currentIdx = isTerminal ? SAMPLE_ROUND_FLOW_STEPS.length : SAMPLE_ROUND_FLOW_STEPS.indexOf(effectiveStatus);
return (
{SAMPLE_ROUND_FLOW_STEPS.map((step, i) => (
{i > 0 &&
}
{step}
))}
{isTerminal && (
<>
{effectiveStatus}
)}
{round.status === 'On Hold' &&
(On Hold — was {round.heldFromStatus || 'Requested'}) }
Status History
{sorted.map((h, i) => {
const u = userById(users, h.updatedBy);
return (
{i === sorted.length - 1 ? '└─' : '├─'}
{fmtDateTimeShort(h.updatedAt)} — {u ? `${u.name} ` : ''}{h.note || `marked as ${h.status}`}
);
})}
);
}
function SampleRoundStatusDropdown({ round, nextOptions, onUpdate }) {
return (
{ if (e.target.value) onUpdate(e.target.value); }}
onClick={e => e.stopPropagation()}
className={`text-xs font-medium rounded-full border px-2.5 py-1 bg-transparent cursor-pointer focus:outline-none focus:ring-2 focus:ring-gold/40 ${TONE_CLASSES[STATUS_TONE[round.status] || 'muted']}`}
>
Update Status ▼
{nextOptions.map(o => {o} )}
);
}
function SampleRoundActionBar({ round, editable, app }) {
if (!editable) return null;
if (round.status === 'On Hold') {
return (
app.resumeSampleRound(round.id)}>Resume
);
}
const nextOptions = SAMPLE_ROUND_TRANSITIONS[round.status] || [];
const canHold = SAMPLE_ROUND_FLOW_STEPS.includes(round.status);
return (
{round.status === 'Arrived' && (
app.advanceSampleRoundStatus(round.id, 'Under Review')}>Mark as Under Review
)}
{round.status === 'Under Review' && (
app.reviewSampleRound(round.id, decision, notes)} />
)}
{nextOptions.length > 0 && round.status !== 'Arrived' && round.status !== 'Under Review' && (
app.advanceSampleRoundStatus(round.id, newStatus)} />
)}
{round.status === 'Needs Revision' && (
app.requestRevisionRound(round.id)}>Request Next Version
)}
{canHold && (
app.holdSampleRound(round.id)}>Put On Hold
)}
);
}
function SamplingProjectDetail({ id }) {
const app = useApp();
const sp = app.samplingProjects.find(s => s.id === id);
const [requestOpen, setRequestOpen] = useState(false);
const [moveToProductionOpen, setMoveToProductionOpen] = useState(false);
const [expanded, setExpanded] = useState({});
const [commentText, setCommentText] = useState('');
const fileInputRef = useRef(null);
if (!sp) return app.navigate('sampling')} />;
const project = app.projects.find(p => p.id === sp.linkedProjectId);
const bids = app.supplierBids.filter(b => b.samplingProjectId === id);
const rounds = app.sampleRounds.filter(r => r.samplingProjectId === id);
const bySupplier = {};
rounds.forEach(r => { bySupplier[r.supplierId] = bySupplier[r.supplierId] || []; bySupplier[r.supplierId].push(r); });
const attachments = app.attachments.filter(a => a.entityType === 'samplingProject' && a.entityId === id);
const projComments = app.comments.filter(c => c.entityType === 'samplingProject' && c.entityId === id);
const daysRemaining = daysBetween(todayStr(), sp.targetApprovalDate);
const anyApproved = rounds.some(r => r.status === 'Approved');
const readOnly = !!project?.isArchived;
const editable = !readOnly && canEditItem(app.currentUser, sp.ownerId, project);
return (
app.navigate('samplingByProject', sp.linkedProjectId)} className="flex items-center gap-1.5 text-sm text-muted hover:text-primary mb-4">
{sp.name}
app.navigate('projectDetail', project?.id)} className="text-sm text-gold hover:underline flex items-center gap-1">{project?.name}
Target Date
{fmtDateShort(sp.targetApprovalDate)}
Days Remaining
{daysRemaining}
Created
{fmtDateShort(sp.createdAt)}
{readOnly ? (
This project is complete — this sampling history is read-only.
) : (
<>
{!editable && (
View only — only {userById(app.users, sp.ownerId)?.name || 'the owner'} or an admin can make changes here.
)}
setRequestOpen(true)} disabled={!editable || sp.status === 'Moved to Production' || sp.status === 'Cancelled'}>Request New Round
setMoveToProductionOpen(true)}>Move to Production
app.updateSamplingProject(id, { status: 'On Hold' })}>Put On Hold
app.updateSamplingProject(id, { status: 'Cancelled' })}>Cancel
)}
Supplier Comparison
Supplier Bid Status Quoted Price MOQ Lead Time Latest Round
{bids.map(b => {
const sRounds = bySupplier[b.supplierId] || [];
const latest = sRounds[sRounds.length - 1];
return (
{supplierById(app.suppliers, b.supplierId)?.name}
{fmtCurrency(b.quotedPrice, b.currency)}
{b.quotedMOQ}
{b.quotedLeadTime}d
{latest ? `${latest.version} — ${latest.status}` : '—'}
);
})}
Sample Rounds Timeline
{Object.entries(bySupplier).map(([supplierId, sRounds]) => (
{supplierById(app.suppliers, supplierId)?.name}
{sRounds.map(r => {
const isOpen = expanded[r.id];
const roundAttachments = app.attachments.filter(a => a.entityType === 'sampleRound' && a.entityId === r.id);
return (
setExpanded(e => ({ ...e, [r.id]: !e[r.id] }))}>
{r.version}
({fmtDateShort(r.dateRequested)}{r.dateReceived ? ` → ${fmtDateShort(r.dateReceived)}` : ''})
{r.resultNotes || r.nextAction || 'Awaiting update'}
{isOpen && (
Cost: {fmtCurrency(r.cost, bids.find(b => b.supplierId === r.supplierId)?.currency)} {r.leadTimeDays ? `· Lead: ${r.leadTimeDays}d` : ''} {r.dateReviewed ? `· Reviewed ${fmtDateShort(r.dateReviewed)}` : ''}
{roundAttachments.map(a =>
)}
)}
);
})}
{sRounds.length === 0 &&
No rounds yet.
}
))}
{rounds.length === 0 &&
setRequestOpen(true)} />}
Attachments
{editable && fileInputRef.current?.click()} />}
{attachments.map(a =>
)}
{attachments.length === 0 &&
None yet.
}
Notes
{sp.notes || 'No notes recorded.'}
Comments
{projComments.map(c =>
)}
{projComments.length === 0 &&
No comments yet.
}
{ if (commentText.trim()) { app.addComment('samplingProject', id, commentText); setCommentText(''); } }} />
{ if (commentText.trim()) { app.addComment('samplingProject', id, commentText); setCommentText(''); } }}>Post
)}
{!readOnly &&
setRequestOpen(false)} samplingProjectId={id} />}
{!readOnly && setMoveToProductionOpen(false)} samplingProjectId={id} />}
);
}
/* ======================================================================
14. COMPONENT TRACKER
====================================================================== */
function ComponentTracker() {
const app = useApp();
const [statusFilter, setStatusFilter] = useState(() => app.route.params?.statusFilter || 'all');
const [ownerFilter, setOwnerFilter] = useState('all');
const [projectFilter, setProjectFilter] = useState('all');
const [selected, setSelected] = useState([]);
const visibleProjectIds = app.projects.filter(p => canSeeProject(app.currentUser, p) && !p.isArchived).map(p => p.id);
const list = app.components.filter(c => visibleProjectIds.includes(c.projectId))
.filter(c => statusFilter === 'all' || c.status === statusFilter)
.filter(c => ownerFilter === 'all' || c.owner === ownerFilter)
.filter(c => projectFilter === 'all' || c.projectId === projectFilter);
const isEditable = (c) => canEditItem(app.currentUser, c.owner, app.projects.find(p => p.id === c.projectId));
const editableList = list.filter(isEditable);
const toggleSelect = (id) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
const handleNextActionChange = (comp, nextAction) => {
app.updateComponent(comp.id, { nextAction });
app.microToast('Saved');
if (nextAction === 'Complete') {
const done = app.allComponentsComplete(comp.projectId);
if (done) app.toast(`All components complete for ${comp.projectName}. Visit the project to mark it complete.`);
}
};
const exportCSV = () => {
const header = ['Name', 'Project', 'Supplier', 'Status', 'Price', 'Currency', 'Order Qty', 'Start Prod. Date', 'Duration', 'Next Action', 'Updated', 'Owner'];
const rows = list.map(c => [c.name, c.projectName, supplierById(app.suppliers, c.supplier)?.name, c.status, c.price, c.currency || 'EUR', c.orderQty, c.startDate, durationSince(c.startDate), c.nextAction, c.nextActionUpdatedAt || c.startDate, userById(app.users, c.owner)?.name]);
const csv = [header, ...rows].map(r => r.join(',')).join('\n');
const blob = new Blob([csv], { type: 'text/csv' });
const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'components.csv'; a.click();
};
return (
Components
Export CSV
setStatusFilter(e.target.value)}>
All statuses {COMPONENT_STATUS_FILTERS.map(s => {s} )}
setOwnerFilter(e.target.value)}>
All owners {app.users.map(u => {u.name} )}
setProjectFilter(e.target.value)}>
All projects {app.projects.map(p => {p.name} )}
{selected.length > 0 && (
{selected.length} selected
{ selected.forEach(id => app.updateComponent(id, { nextAction: e.target.value })); app.toast('Bulk next action updated.'); setSelected([]); }}>
Update Next Action... {NEXT_ACTIONS.map(s => {s} )}
{ selected.forEach(id => app.updateComponent(id, { owner: e.target.value })); app.toast('Owner assigned.'); setSelected([]); }}>
Assign Owner... {app.users.map(u => {u.name} )}
)}
{list.length === 0 ? (
app.navigate('sampling')} />
) : (
)}
);
}
/* ======================================================================
15. SUPPLIERS
====================================================================== */
// Star rating is systemized rather than hand-set (developer decision,
// 2026-08-10): of every line item ever quoted by this supplier (any
// status - a batch of items quoted and never converted is itself a real
// performance signal), what fraction actually reached production. "Reached
// production" means the item's linked sampling track hit 'Moved to
// Production' - deliberately including items whose resulting component has
// since finished ('Complete'), unlike getLineItemStage's funnel-stage
// classification (which nulls those out because Complete is a separate
// bucket in that specific widget, not because they don't count as
// produced). Returns null (render as "Unrated") until the supplier has at
// least one quoted line item - a fresh/potential supplier with nothing
// quoted yet shouldn't read as "0 stars, terrible."
// serialNo comes from a real DB sequence (supplier_serial_no_seq) - this is
// purely display formatting, "No. 00001", never the source of the number.
function formatSupplierSerial(serialNo) {
return `No. ${String(serialNo).padStart(5, '0')}`;
}
function supplierPerformanceRating(supplierId, quotations, samplingProjects) {
const items = quotations.filter(q => q.supplierId === supplierId).flatMap(q => q.lineItems || []);
if (!items.length) return null;
const produced = items.filter(li => {
if (!li.samplingProjectId) return false;
const sp = samplingProjects.find(s => s.id === li.samplingProjectId);
return !!sp && sp.status === 'Moved to Production';
}).length;
return { stars: Math.round((produced / items.length) * 5), produced, quoted: items.length };
}
// Suppliers are shared org-wide by design (no per-project restriction), so
// the same real-world supplier can easily get re-entered by two different
// people who don't know the other already added it - especially once
// several people are creating suppliers. Since names/reps often get typed
// differently each time ("Zhejiang Top One" vs "Top One Packaging Co."),
// this flags a *possible* match rather than blocking on an exact-string
// check: any shared significant word in the name or representative name, or
// a matching phone number (digits only, tolerant of missing country-code
// prefixes), surfaces a "did you mean this one" prompt before creating a
// new row - not a hard constraint, since a genuine near-duplicate name for a
// different real company is possible and shouldn't be blocked outright.
const SUPPLIER_MATCH_STOPWORDS = new Set(['co', 'ltd', 'inc', 'corp', 'llc', 'gmbh', 'sa', 'the', 'and', 'company', 'group', 'technology', 'trading', 'industries']);
function significantWords(text) {
return (text || '').toLowerCase().replace(/[^\p{L}\p{N}\s]/gu, ' ').split(/\s+/).filter(w => w.length > 1 && !SUPPLIER_MATCH_STOPWORDS.has(w));
}
function normalizePhoneDigits(phone) {
return (phone || '').replace(/\D/g, '');
}
function findPossibleDuplicateSupplier(form, suppliers) {
const nameWords = significantWords(form.name);
const contactWords = significantWords(form.contact);
const phoneDigits = normalizePhoneDigits(form.phone);
for (const s of suppliers) {
const nameMatch = nameWords.some(w => significantWords(s.name).includes(w));
const contactMatch = contactWords.length > 0 && contactWords.some(w => significantWords(s.contact).includes(w));
const sPhoneDigits = normalizePhoneDigits(s.phone);
const phoneMatch = phoneDigits.length >= 7 && sPhoneDigits.length >= 7 && (phoneDigits.endsWith(sPhoneDigits) || sPhoneDigits.endsWith(phoneDigits));
if (nameMatch || contactMatch || phoneMatch) return s;
}
return null;
}
function AddSupplierModal({ open, onClose }) {
const app = useApp();
const emptyForm = { name: '', contact: '', email: '', phone: '', country: '', makes: '', moq: '', lead: '', terms: '' };
const [form, setForm] = useState(emptyForm);
const submit = async () => {
if (!form.name.trim()) { app.toast('Supplier name is required.', 'error'); return; }
const dup = findPossibleDuplicateSupplier(form, app.suppliers);
if (dup) {
const goToExisting = await app.confirm({
title: 'Possible existing supplier',
message: `This looks like it might already be "${dup.name}" — same name, representative, or phone number as a supplier already in the system. Want to open that one instead?`,
confirmLabel: 'Yes, show me',
cancelLabel: "No, it's different",
confirmVariant: 'primary',
});
if (goToExisting) { onClose(); app.navigate('supplierDetail', dup.id); return; }
}
app.addSupplier(form);
onClose();
setForm(emptyForm);
};
return (
);
}
function EditSupplierModal({ open, onClose, supplier }) {
const app = useApp();
const [form, setForm] = useState(null);
useEffect(() => {
if (supplier) {
setForm({
name: supplier.name || '', contact: supplier.contact || '', email: supplier.email || '', phone: supplier.phone || '',
country: supplier.country || '', makes: supplier.makes || '', moq: supplier.moq || '', lead: supplier.lead ?? '',
terms: supplier.terms || '',
});
}
}, [supplier]);
if (!form) return null;
const submit = () => {
if (!form.name.trim()) { app.toast('Supplier name is required.', 'error'); return; }
app.updateSupplier(supplier.id, {
name: form.name.trim(), contact: form.contact, email: form.email, phone: form.phone,
country: form.country, makes: form.makes, moq: form.moq,
lead: form.lead === '' ? null : Number(form.lead), terms: form.terms,
});
app.microToast('Saved');
onClose();
};
return (
Supplier Name
Star rating is calculated automatically from production conversion rate — see the Performance tab.
Cancel Save Changes
);
}
function supplierStatusLabel(s) {
if (s.isPotential) return 'Potential';
if (s.active) return 'Active';
return 'Inactive';
}
const SUPPLIER_STATUS_TONE = { Active: 'sage', Potential: 'purple', Inactive: 'muted' };
// "Last Activity" must reflect something that actually happened - suppliers.updated_at
// is never bumped by any trigger, so it's frozen at creation and would be dishonest to
// show here. Instead derive the most recent real touchpoint from quotations and sample
// rounds tied to this supplier, the same signals supplierPerformanceRating already uses.
function supplierLastActivityISO(supplierId, quotations, sampleRounds) {
let latest = null;
const consider = iso => { if (iso && (!latest || iso > latest)) latest = iso; };
quotations.forEach(q => { if (q.supplierId === supplierId) consider(q.createdAt); });
sampleRounds.forEach(r => {
if (r.supplierId !== supplierId) return;
consider(r.dateRequested); consider(r.dateReceived); consider(r.dateReviewed);
(r.statusHistory || []).forEach(h => consider(h.updatedAt));
});
return latest;
}
function exportSuppliersCSV(list, quotations, samplingProjects, sampleRounds) {
const headers = ['Supplier', 'Serial No', 'Category', 'Country', 'Representative', 'Email', 'Phone', 'MOQ', 'Lead Time (days)', 'Terms', 'Rating', 'Status', 'Last Activity'];
const rows = list.map(s => {
const perf = supplierPerformanceRating(s.id, quotations, samplingProjects);
const lastActivity = supplierLastActivityISO(s.id, quotations, sampleRounds);
return [
s.name, s.serialNo != null ? formatSupplierSerial(s.serialNo) : '', s.makes || '', s.country || '',
s.contact || '', s.email || '', s.phone || '', s.moq || '', s.lead ?? '', s.terms || '',
perf ? `${perf.stars}/5` : '', supplierStatusLabel(s), lastActivity || '',
];
});
const csv = [headers, ...rows].map(r => r.map(v => `"${String(v ?? '').replace(/"/g, '""')}"`).join(',')).join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = `suppliers-${todayStr()}.csv`;
document.body.appendChild(a); a.click(); document.body.removeChild(a);
URL.revokeObjectURL(url);
}
const SUPPLIERS_PAGE_SIZE = 25;
function SuppliersView() {
const app = useApp();
const [search, setSearch] = useState('');
const [categoryFilter, setCategoryFilter] = useState('');
const [countryFilter, setCountryFilter] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [minRating, setMinRating] = useState('');
const [hasContactOnly, setHasContactOnly] = useState(false);
const [sortKey, setSortKey] = useState('name');
const [sortDir, setSortDir] = useState('asc');
const [page, setPage] = useState(1);
const [addOpen, setAddOpen] = useState(false);
const [editSupplier, setEditSupplier] = useState(null);
const categories = [...new Set(app.suppliers.map(s => s.makes).filter(Boolean))].sort();
const countries = [...new Set(app.suppliers.map(s => s.country).filter(Boolean))].sort();
const resetPage = fn => e => { fn(e); setPage(1); };
const enriched = app.suppliers.map(s => ({
...s,
perf: supplierPerformanceRating(s.id, app.quotations, app.samplingProjects),
statusLabel: supplierStatusLabel(s),
lastActivity: supplierLastActivityISO(s.id, app.quotations, app.sampleRounds),
}));
let filtered = enriched.filter(s => {
const q = search.trim().toLowerCase();
if (q && !(s.name.toLowerCase().includes(q) || (s.contact || '').toLowerCase().includes(q) || (s.makes || '').toLowerCase().includes(q))) return false;
if (categoryFilter && s.makes !== categoryFilter) return false;
if (countryFilter && s.country !== countryFilter) return false;
if (statusFilter && s.statusLabel !== statusFilter) return false;
if (minRating && (!s.perf || s.perf.stars < Number(minRating))) return false;
if (hasContactOnly && !s.email && !s.phone) return false;
return true;
});
filtered.sort((a, b) => {
let av, bv;
if (sortKey === 'name') { av = a.name.toLowerCase(); bv = b.name.toLowerCase(); }
else if (sortKey === 'rating') { av = a.perf?.stars ?? -1; bv = b.perf?.stars ?? -1; }
else if (sortKey === 'lastActivity') { av = a.lastActivity || ''; bv = b.lastActivity || ''; }
if (av < bv) return sortDir === 'asc' ? -1 : 1;
if (av > bv) return sortDir === 'asc' ? 1 : -1;
return 0;
});
const total = filtered.length;
const totalPages = Math.max(1, Math.ceil(total / SUPPLIERS_PAGE_SIZE));
const clampedPage = Math.min(page, totalPages);
const pageStart = (clampedPage - 1) * SUPPLIERS_PAGE_SIZE;
const shown = filtered.slice(pageStart, pageStart + SUPPLIERS_PAGE_SIZE);
const toggleSort = key => {
if (sortKey === key) setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
else { setSortKey(key); setSortDir('asc'); }
setPage(1);
};
const SortHeader = ({ label, k, className = '' }) => (
toggleSort(k)} className={`inline-flex items-center gap-1 hover:text-primary transition-colors ${sortKey === k ? 'text-primary' : ''}`}>
{label}
);
const hasFilters = search || categoryFilter || countryFilter || statusFilter || minRating || hasContactOnly;
const clearFilters = () => { setSearch(''); setCategoryFilter(''); setCountryFilter(''); setStatusFilter(''); setMinRating(''); setHasContactOnly(false); setPage(1); };
return (
Suppliers
{total === 0 ? (
setAddOpen(true)}
/>
) : (
Category
Country
Contact
MOQ
Lead Time
Terms
Status
Actions
{shown.map(s => (
app.navigate('supplierDetail', s.id)}>
{s.name}
{s.serialNo != null && {formatSupplierSerial(s.serialNo)}
}
{s.makes || '—'}
{s.country ?
{s.contact && {s.contact}
}
{s.email && {s.email}
}
{s.phone && {s.phone}
}
{!s.contact && !s.email && !s.phone && '—'}
{s.moq || '—'}
{s.lead != null ? `${s.lead}d` : '—'}
{s.terms || '—'}
{s.perf ? (
{[1, 2, 3, 4, 5].map(i =>
) : Unrated }
{s.statusLabel}
{fmtRelativeFromISO(s.lastActivity)}
e.stopPropagation()}>
app.navigate('supplierDetail', s.id)} className="w-full text-left px-3 py-1.5 text-sm text-primary hover:bg-surface">View Details
setEditSupplier(s)} className="w-full text-left px-3 py-1.5 text-sm text-primary hover:bg-surface">Edit Supplier
))}
Showing {pageStart + 1}–{Math.min(pageStart + SUPPLIERS_PAGE_SIZE, total)} of {total} supplier{total !== 1 ? 's' : ''}
setPage(p => Math.max(1, p - 1))}>Previous
Page {clampedPage} of {totalPages}
setPage(p => Math.min(totalPages, p + 1))} disabled={clampedPage >= totalPages}>Next
)}
setAddOpen(false)} />
setEditSupplier(null)} supplier={editSupplier} />
);
}
function SupplierDetail({ id }) {
const app = useApp();
const supplier = supplierById(app.suppliers, id);
const [tab, setTab] = useState('components');
const [editOpen, setEditOpen] = useState(false);
if (!supplier) return app.navigate('suppliers')} />;
const comps = app.components.filter(c => c.supplier === id);
const quotes = app.quotations.filter(q => q.supplierId === id);
const rounds = app.sampleRounds.filter(r => r.supplierId === id);
const attachments = app.attachments.filter(a => a.entityType === 'supplier' && a.entityId === id);
const approvedRounds = rounds.filter(r => r.status === 'Approved').length;
const onTimeRate = rounds.length ? Math.round((approvedRounds / rounds.length) * 100) : 0;
const perf = supplierPerformanceRating(id, app.quotations, app.samplingProjects);
return (
app.navigate('suppliers')} className="flex items-center gap-1.5 text-sm text-muted hover:text-primary">
setEditOpen(true)}>Edit Supplier
{supplier.name}
{supplier.serialNo != null &&
{formatSupplierSerial(supplier.serialNo)} }
{supplier.isPotential &&
Potential }
{perf ? (
{[1, 2, 3, 4, 5].map(i =>
({perf.produced}/{perf.quoted} produced)
) : (
Unrated — no quotes yet
)}
{supplier.country &&
Lead Time
{supplier.lead != null ? <>{supplier.lead} days : '—'}
MOQ
{supplier.moq || '—'}
Terms
{supplier.terms || '—'}
{[['components', 'Components'], ['quotations', 'Quotations'], ['samples', 'Sample History'], ['performance', 'Performance'], ['attachments', 'Attachments']].map(([key, label]) => (
setTab(key)} className={`px-4 py-1.5 text-sm ${tab === key ? 'bg-gold/15 text-gold' : 'text-muted hover:bg-elevated'}`}>{label}
))}
{tab === 'components' && (comps.length ? comps.map(c => (
{c.name}
)) : No components sourced yet.
)}
{tab === 'quotations' && (quotes.length ? quotes.map(q => (
{app.projects.find(p => p.id === q.projectId)?.name}
{q.lineItems?.length || 0} item{q.lineItems?.length !== 1 ? 's' : ''}
{q.referenceNo && Ref: {q.referenceNo} }
{fmtCurrency(q.lineItems?.[0]?.unitPrice, q.currency)}{q.lineItems?.length > 1 ? '+' : ''}
)) : No quotations yet.
)}
{tab === 'samples' && (rounds.length ? rounds.map(r => (
{r.version}
{r.resultNotes}
)) : No sample history yet.
)}
{tab === 'performance' && (
Sample Approval Rate
{onTimeRate}%
Total Sample Rounds
{rounds.length}
Production Conversion Rate
{perf ? `${Math.round((perf.produced / perf.quoted) * 100)}%` : '—'}
{perf &&
{perf.produced} of {perf.quoted} quoted items reached production — drives the star rating
}
)}
{tab === 'attachments' && (attachments.length ? : No attachments.
)}
setEditOpen(false)} supplier={supplier} />
);
}
/* ======================================================================
16. TEAM
====================================================================== */
function MultiUserSelect({ users, selected, onChange }) {
const [open, setOpen] = useState(false);
const [search, setSearch] = useState('');
const ref = useRef(null);
useEffect(() => {
function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, []);
const toggle = (id) => onChange(selected.includes(id) ? selected.filter(x => x !== id) : [...selected, id]);
const selectedUsers = users.filter(u => selected.includes(u.id));
const filtered = users.filter(u => u.name.toLowerCase().includes(search.toLowerCase()));
return (
setOpen(o => !o)}
className="w-full min-h-[38px] bg-surface border border-border rounded-lg px-3 py-1.5 text-sm text-left flex items-center justify-between gap-2 focus:outline-none focus:shadow-[0_0_0_3px_rgba(24,39,245,0.12)] focus:border-gold/50 transition-all"
>
{selectedUsers.length === 0 ? (
Select people...
) : selectedUsers.map(u => (
{u.name}
))}
{open && (
{filtered.length === 0 ? (
No matches.
) : filtered.map(u => (
{u.name}
))}
)}
);
}
function AssignTaskModal({ open, onClose, assigneeId }) {
const app = useApp();
const [mode, setMode] = useState('existing');
const [form, setForm] = useState({ assignedTo: assigneeId, dueDate: addDays(todayStr(), 7), project: '' });
const [newProject, setNewProject] = useState({ name: '', category: 'Perfume', target: addDays(todayStr(), 45), owner: assigneeId, priority: 'Normal', assignees: assigneeId ? [assigneeId] : [] });
useEffect(() => {
if (!open) return;
setMode('existing');
setForm({ assignedTo: assigneeId || app.users[0]?.id, dueDate: addDays(todayStr(), 7), project: '' });
setNewProject({ name: '', category: 'Perfume', target: addDays(todayStr(), 45), owner: assigneeId || app.currentUserId, priority: 'Normal', assignees: assigneeId ? [assigneeId] : [] });
}, [open, assigneeId]);
const selectProject = (projectId) => {
const proj = app.projects.find(p => p.id === projectId);
setForm(f => ({ ...f, project: projectId, dueDate: proj?.target || f.dueDate }));
};
const submit = () => {
if (mode === 'existing') {
const proj = app.projects.find(p => p.id === form.project);
if (!proj) { app.toast('Select a project first.', 'error'); return; }
app.addTask({ title: proj.name, description: '', assignedTo: form.assignedTo, dueDate: form.dueDate, linkedEntityType: 'project', linkedEntityId: proj.id });
// Assigning someone a task on this project makes them a full collaborator, not just a
// viewer — same edit rights as the owner (add/amend quotations, sampling, components, etc).
const currentEditableBy = proj.editableBy || [];
if (form.assignedTo !== proj.owner && !currentEditableBy.includes(form.assignedTo)) {
app.updateProjectEditableBy(proj.id, [...currentEditableBy, form.assignedTo]);
}
} else {
if (!newProject.name.trim()) { app.toast('Project name is required.', 'error'); return; }
if (!newProject.assignees.length) { app.toast('Select at least one person to assign.', 'error'); return; }
const editableBy = newProject.assignees.filter(userId => userId !== newProject.owner);
const projectId = app.createProject({ ...newProject, editableBy });
newProject.assignees.forEach(userId => {
app.addTask({ title: newProject.name, description: '', assignedTo: userId, dueDate: newProject.target, linkedEntityType: 'project', linkedEntityId: projectId });
});
}
onClose();
};
return (
setMode('existing')}>Link to Existing Project
setMode('new')}>Create New Project
{mode === 'existing' ? (
<>
Project
selectProject(e.target.value)}>
Select a project...
{app.projects.filter(p => !p.isArchived).map(p => {p.name} )}
) : (
<>
Project Name
Assign To
setNewProject(f => ({ ...f, assignees: next }))} />
)}
Cancel Assign Task
);
}
function InviteMemberModal({ open, onClose }) {
const app = useApp();
const emptyForm = { email: '', name: '', title: '', accessRole: 'Team', seesAllProjects: false };
const [form, setForm] = useState(emptyForm);
const [sending, setSending] = useState(false);
const submit = async () => {
if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) { app.toast('Enter a valid email address.', 'error'); return; }
if (!form.name.trim()) { app.toast('Name is required.', 'error'); return; }
setSending(true);
await app.inviteMember(form);
setSending(false);
setForm(emptyForm);
onClose();
};
return (
Email Address
Full Name
Job Title
Access Role
setForm(f => ({ ...f, accessRole: e.target.value }))}>
Team
Admin
{form.accessRole === 'Team' && (
Access Scope
setForm(f => ({ ...f, seesAllProjects: e.target.value === 'all' }))}>
Related Tasks — only projects they own or are added to
All Tasks — can see every project in the workspace
)}
They'll get an email with a link to set their password and sign in.
Cancel {sending ? 'Sending...' : 'Send Invite'}
);
}
function TeamView() {
const app = useApp();
const [taskModalUser, setTaskModalUser] = useState(null);
const [inviteOpen, setInviteOpen] = useState(false);
const isAdmin = app.currentUser.accessRole === 'Admin';
const adminCount = app.users.filter(u => u.accessRole === 'Admin').length;
const handleRoleChange = (userId, newRole) => {
if (userId === app.currentUser.id && newRole !== 'Admin' && adminCount <= 1) {
app.toast('You are the only admin — promote someone else first.', 'error');
return;
}
app.updateMemberRole(userId, newRole);
};
const handleRemove = async (u) => {
if (u.id === app.currentUser.id) { app.toast("You can't remove yourself.", 'error'); return; }
if (u.accessRole === 'Admin' && adminCount <= 1) { app.toast('Cannot remove the only remaining admin.', 'error'); return; }
const ok = await app.confirm({ title: `Remove ${u.name}?`, message: 'They will immediately lose access to this workspace. Their past activity and records stay intact.', confirmLabel: 'Remove' });
if (ok) app.removeMember(u.id);
};
const activeProjects = app.projects.filter(p => !p.isArchived);
const workloads = app.users.map(u => ({
user: u,
projectCount: activeProjects.filter(p => p.owner === u.id).length,
compCount: app.components.filter(c => c.owner === u.id && c.status !== 'Complete').length,
}));
const avgLoad = workloads.reduce((s, w) => s + w.projectCount + w.compCount, 0) / (workloads.length || 1);
const maxLoad = Math.max(...workloads.map(w => w.projectCount + w.compCount), 1);
const tasksCompletedCount = app.tasks.filter(t => t.status === 'Done').length;
return (
Team
{isAdmin && setInviteOpen(true)}>Invite Member }
{isAdmin && (
Manage Team
Name Email Title Role Scope
{app.users.map(u => (
{u.email}
{u.role || '—'}
handleRoleChange(u.id, e.target.value)} className="!py-1 !text-xs">
Team
Admin
{u.accessRole === 'Admin' ? (
All (Admin)
) : (
app.updateMemberScope(u.id, e.target.value === 'all')} className="!py-1 !text-xs">
Related Tasks
All Tasks
)}
handleRemove(u)} className="text-muted hover:text-oud transition-colors" title="Remove from workspace">
))}
)}
Tasks Completed
{tasksCompletedCount}all time
Shared Milestones
{app.projects.filter(p => p.isArchived).length}completed
Workload Balance
{workloads.map(w => {
const load = w.projectCount + w.compCount;
const pct = Math.min(100, (load / maxLoad) * 100);
const overloaded = load > avgLoad * 1.3;
return (
{w.user.name}
{w.projectCount}p · {w.compCount}c
{overloaded &&
Could use a hand }
);
})}
{workloads.map(w => {
const overloaded = (w.projectCount + w.compCount) > avgLoad * 1.3;
const myTasks = app.tasks.filter(t => t.assignedTo === w.user.id);
const doneTasks = myTasks.filter(t => t.status === 'Done').length;
// On-Time Rate is sourced from completed projects, not tasks -
// "Mark Complete" on a project is a real, already-used action with
// real target_date/completed_date data behind it; nothing in the
// app ever transitions a task to Done, so a task-based rate could
// never populate. A member counts as "part of" a project if they
// own it or are an editableBy collaborator - both share the
// outcome, on time or late. Dates are plain YYYY-MM-DD strings, so
// direct comparison is chronological with no timezone ambiguity.
const myCompletedProjects = app.projects.filter(p => p.isArchived && p.completedDate && (p.owner === w.user.id || (p.editableBy || []).includes(w.user.id)));
const onTimeCount = myCompletedProjects.filter(p => p.completedDate <= p.target).length;
const onTime = myCompletedProjects.length ? Math.round((onTimeCount / myCompletedProjects.length) * 100) : null;
return (
{w.user.name}
{w.user.role}
{overloaded && Could use a hand }
Projects Owned {w.projectCount}
Tasks Done {doneTasks}
On-Time Rate {onTime === null ? 'No data yet' : `${onTime}%`}
setTaskModalUser(w.user.id)}>Assign Task
);
})}
setTaskModalUser(null)} assigneeId={taskModalUser} />
setInviteOpen(false)} />
);
}
/* ======================================================================
17. ACCOMPLISHED PROJECTS
====================================================================== */
function AccomplishedProjects() {
const app = useApp();
const [search, setSearch] = useState('');
const done = app.projects.filter(p => p.isArchived && p.name.toLowerCase().includes(search.toLowerCase()));
return (
{done.length === 0 ? (
) : (
Name Category Start Date Completed Duration Owner Status
{done.map(p => (
app.navigate('projectDetail', p.id)} className="border-b border-border last:border-0 hover:bg-elevated/40 cursor-pointer">
{p.name}
{p.category}
{fmtDateShort(p.startDate)}
{fmtDateShort(p.completedDate)}
{daysBetween(p.startDate, p.completedDate)}d
))}
)}
);
}
/* ======================================================================
18. APP SHELL / ROOT
====================================================================== */
function PageRouter() {
const app = useApp();
switch (app.route.page) {
case 'dashboard': return
setScrolled(e.currentTarget.scrollTop > 10)}>
);
}
function LoginScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const submit = async (e) => {
e.preventDefault();
setError('');
setLoading(true);
const { error: signInError } = await supabase.auth.signInWithPassword({ email, password });
setLoading(false);
if (signInError) setError(signInError.message);
};
return (
S
SAKAN
Sign in to continue
);
}
function SetPasswordScreen({ onDone }) {
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const submit = async (e) => {
e.preventDefault();
setError('');
if (password.length < 8) { setError('Password must be at least 8 characters.'); return; }
if (password !== confirm) { setError('Passwords do not match.'); return; }
setLoading(true);
const { error: updateError } = await supabase.auth.updateUser({ password });
setLoading(false);
if (updateError) { setError(updateError.message); return; }
onDone();
};
return (
S
Welcome to SAKAN
Set a password to finish setting up your account.
);
}
function App() {
// undefined = still checking for an existing session, null = signed out,
// a Session object = signed in. Real Supabase Auth (Phase 4) - replaces
// the prototype's "switch user" dropdown entirely.
const [session, setSession] = useState(undefined);
// Supabase's invite/recovery links are magic sign-in links - clicking one
// establishes a real session via the URL hash (detectSessionInUrl,
// default true) without ever asking for a password. Read the raw hash
// once, synchronously, before Supabase's own async processing has a
// chance to touch it, so a just-invited person gets a set-password step
// instead of landing in the app with no way to ever sign back in once
// this session ends.
const [needsPassword, setNeedsPassword] = useState(() => /type=invite|type=recovery/.test(window.location.hash));
useEffect(() => {
supabase.auth.getSession().then(({ data }) => setSession(data.session));
const { data: subscription } = supabase.auth.onAuthStateChange((_event, nextSession) => setSession(nextSession));
return () => subscription.subscription.unsubscribe();
}, []);
if (session === undefined) {
return (
);
}
if (!session) {
return { window.history.replaceState(null, '', window.location.pathname); setNeedsPassword(false); }} />;
}
return (
);
}
const root = createRoot(document.getElementById('root'));
root.render(