Scope ini bisa Anda akses saat tanya di Nalar Assistant · NalarX routing otomatis.
);
// ──────────────────────────────────────────────────────────────
// View modes per role
// ──────────────────────────────────────────────────────────────
const AdminView = () => {
const [selected, setSelected] = React.useState(null);
const depts = DEPT_AGENTS_MOCK;
return (
<>
{/* Master (root) */}
{/* Org-chart connector — Master branches down to Department Agents */}
{['16%', '50%', '84%'].map(l => (
))}
Department Agents · {depts.length}
{/* Department cards — each box holds its own Sub-Agent tree */}
{depts.map(dept => (
))}
{selected && setSelected(null)} />}
);
};
// ──────────────────────────────────────────────────────────────
// Mode 2 · Org-chart view — Master hero + connector tree + a row of
// Department cards, then an aligned row of their Sub-agent cards.
// Columns share one horizontal scroller so the tree stays aligned
// (and scrolls as a unit) when there are many departments.
// ──────────────────────────────────────────────────────────────
const ORG_COL_W = 240;
const ORG_COL_GAP = 14;
// Master trunk + horizontal bus + a drop to each department column.
// Pixel math against fixed column width keeps it aligned inside the scroller.
// Curved SVG connectors with arrowheads — fan out from under the master card
// to each department. SVG lives inside the transformed content, so it scales
// with the canvas pan/zoom.
const ARROW_MARKER = (id) => (
);
const OrgConnector = ({ count }) => {
if (count < 1) return null;
const w = ORG_COL_W, g = ORG_COL_GAP;
const center = (i) => i * (w + g) + w / 2;
const contentW = count * w + (count - 1) * g;
const H = 34;
const mid = contentW / 2;
return (
);
};
// Vertical drops bridging each Department card to its Sub-agent card below.
// Skips columns with no sub-agents. "Sub-agents" label rides at the left.
const OrgSubConnector = ({ depts }) => {
const w = ORG_COL_W, g = ORG_COL_GAP;
const center = (i) => i * (w + g) + w / 2;
const contentW = depts.length * w + (depts.length - 1) * g;
const H = 28;
return (
Ini bukan tempat chat. Halaman ini cuma kasih tahu data scope apa yang bisa Anda akses.
Untuk tanya, buka Nalar Assistant — NalarX otomatis pilih sub-agent yang tepat.
)}
Data scope yang bisa Anda akses · {filtered.length}
{filtered.map(sub => )}
);
};
// ──────────────────────────────────────────────────────────────
// Main screen
// ──────────────────────────────────────────────────────────────
const ScreenAgents = ({ persona = 'admin', setRoute = () => {} }) => {
const [viewMode, setViewMode] = React.useState('cards');
const totalAgents = persona === 'admin'
? 1 + DEPT_AGENTS_MOCK.length + DEPT_AGENTS_MOCK.reduce((s, a) => s + a.subAgents.length, 0)
: persona === 'head'
? DEPT_AGENTS_MOCK[0].subAgents.length + 1
: STAFF_ASSIGNED_MOCK.length;
const heading = persona === 'admin'
? { title: 'Agents', sub: 'Access Agent View' }
: persona === 'head'
? { title: 'Agents', sub: 'Access Agent View' }
: { title: 'My Access', sub: 'Access Agent View' };
// Canvas is a pan/zoom surface — let it use the full main area (no maxWidth
// cap, smaller padding). Cards / Org chart stay in the readable 1200 column.
const wide = persona === 'admin' && viewMode === 'canvas';
return (
{/* Header */}
{heading.title}
{heading.sub}
{persona === 'admin' && }
{totalAgents} active
{/* Role-aware view · ternary chain so unknown persona (e.g., stale "analyst") falls back to Staff */}
{persona === 'admin'? (viewMode === 'org'? : viewMode === 'canvas'? : )
: persona === 'head'?
: }