{
  "id": "business-control-tower",
  "name": "Business Control Tower",
  "category": "agents",
  "tags": ["dashboard", "kpi", "executive", "overview"],
  "description": "Executive dashboard showing agent roster, task queues, and KPIs.",
  "triggers": ["control tower", "business dashboard", "kpi", "overview"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const BusinessControlTower = () => {\n  const [agents, setAgents] = React.useState([\n    { id: 1, name: 'Receptionist', status: 'active', tasksCompleted: 124, tasksPending: 3 },\n    { id: 2, name: 'SDR Alpha', status: 'active', tasksCompleted: 89, tasksPending: 7 },\n    { id: 3, name: 'Support Bot', status: 'active', tasksCompleted: 312, tasksPending: 12 },\n    { id: 4, name: 'Bookkeeper', status: 'idle', tasksCompleted: 45, tasksPending: 0 },\n    { id: 5, name: 'Researcher', status: 'busy', tasksCompleted: 67, tasksPending: 5 }\n  ]);\n  const [queues, setQueues] = React.useState([\n    { name: 'Inbound Messages', count: 23, trend: '+5%' },\n    { name: 'Sales Leads', count: 14, trend: '-2%' },\n    { name: 'Support Tickets', count: 8, trend: '+12%' },\n    { name: 'Research Tasks', count: 5, trend: '0%' }\n  ]);\n\n  const statusColor = (s) => ({ active: '#16a34a', idle: '#9ca3af', busy: '#ca8a04', error: '#dc2626' }[s] || '#6b7280');\n  const totalCompleted = agents.reduce((a, b) => a + b.tasksCompleted, 0);\n  const totalPending = agents.reduce((a, b) => a + b.tasksPending, 0);\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Business Control Tower'),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' } },\n      React.createElement('div', { style: { background: '#eff6ff', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#2563eb', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Active Agents'),\n        React.createElement('div', { style: { fontSize: '22px', fontWeight: 700, color: '#2563eb' } }, agents.filter(a => a.status === 'active').length)\n      ),\n      React.createElement('div', { style: { background: '#f0fdf4', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#16a34a', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Tasks Completed'),\n        React.createElement('div', { style: { fontSize: '22px', fontWeight: 700, color: '#16a34a' } }, totalCompleted)\n      ),\n      React.createElement('div', { style: { background: '#fefce8', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#ca8a04', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Pending Tasks'),\n        React.createElement('div', { style: { fontSize: '22px', fontWeight: 700, color: '#ca8a04' } }, totalPending)\n      ),\n      React.createElement('div', { style: { background: '#faf5ff', borderRadius: '8px', padding: '12px', textAlign: 'center' } },\n        React.createElement('div', { style: { fontSize: '11px', color: '#9333ea', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Avg Response'),\n        React.createElement('div', { style: { fontSize: '22px', fontWeight: 700, color: '#9333ea' } }, '1.2m')\n      )\n    ),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', flex: 1, minHeight: 0 } },\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px', overflow: 'auto' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Agent Roster'),\n        agents.map(a => React.createElement('div', { key: a.id, style: { background: '#fff', borderRadius: '6px', padding: '10px', border: '1px solid #e5e7eb', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n          React.createElement('div', null,\n            React.createElement('div', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, a.name),\n            React.createElement('div', { style: { fontSize: '11px', color: '#6b7280' } }, a.tasksCompleted, ' done / ', a.tasksPending, ' pending')\n          ),\n          React.createElement('span', { style: { fontSize: '11px', fontWeight: 700, color: statusColor(a.status), textTransform: 'uppercase', background: '#fff', padding: '3px 8px', borderRadius: '10px', border: '1px solid ' + statusColor(a.status) } }, a.status)\n        ))\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px', overflow: 'auto' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Task Queues'),\n        queues.map((q, i) => React.createElement('div', { key: i, style: { background: '#fff', borderRadius: '6px', padding: '10px', border: '1px solid #e5e7eb' } },\n          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' } },\n            React.createElement('span', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, q.name),\n            React.createElement('span', { style: { fontSize: '11px', fontWeight: 700, color: q.trend.startsWith('+') ? '#16a34a' : q.trend.startsWith('-') ? '#dc2626' : '#6b7280' } }, q.trend)\n          ),\n          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },\n            React.createElement('div', { style: { flex: 1, height: '6px', background: '#e5e7eb', borderRadius: '3px', overflow: 'hidden' } },\n              React.createElement('div', { style: { width: Math.min((q.count / 30) * 100, 100) + '%', height: '100%', background: '#2563eb', borderRadius: '3px' } })\n            ),\n            React.createElement('span', { style: { fontSize: '13px', fontWeight: 700, color: '#111827', minWidth: '24px', textAlign: 'right' } }, q.count)\n          )\n        ))\n      )\n    )\n  );\n};\nrender(<BusinessControlTower/>);",
  "placeholders": [{ "name": "REPLACE_WITH_BUSINESS_NAME", "description": "Business name displayed in the dashboard", "default": "Titan Operations" }]
}