e.stopPropagation()}>
{template ? 'Edit template' : 'New task template'}
setF('name', e.target.value)} placeholder="e.g. New client onboarding" />
setF('description', e.target.value)} placeholder="What is this template for?" />
Tasks ({form.tasks.length})
{form.tasks.map((task, i) => (
setTask(i, 'title', e.target.value)} />
setTask(i, 'due_offset_days', e.target.value)} />
))}
);
}
// ── Webhook modal ─────────────────────────────────────────────────
function WebhookModal({ open, webhook, onClose, onSave }) {
const ALL_EVENTS = ['task.created','task.completed','task.assigned','invoice.paid','project.created','client.added'];
const [form, setForm] = React.useState({ name: '', url: '', events: [], secret: '', enabled: true });
const [saving, setSaving] = React.useState(false);
const [testing, setTesting] = React.useState(false);
const [testResult, setTestResult] = React.useState(null);
React.useEffect(() => {
if (open) setForm(webhook ? { name: webhook.name, url: webhook.url, events: webhook.events || [], secret: webhook.secret || '', enabled: webhook.enabled !== false } : { name: '', url: '', events: [], secret: '', enabled: true });
}, [open, webhook]);
function toggleEvent(e) { setForm(f => ({ ...f, events: f.events.includes(e) ? f.events.filter(x => x !== e) : [...f.events, e] })); }
async function handleSave() {
if (!form.url.trim()) return;
setSaving(true);
try { await onSave(form, webhook?.id); onClose(); } finally { setSaving(false); }
}
async function testWebhook() {
if (!form.url.trim()) return;
setTesting(true); setTestResult(null);
try {
const res = await fetch(form.url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ event: 'test', source: 'TechyFuel OS', timestamp: new Date().toISOString() }) });
setTestResult({ ok: res.ok, status: res.status });
} catch { setTestResult({ ok: false, status: 'Network error' }); }
setTesting(false);
}
if (!open) return null;
const inputS = { width: '100%', height: 36, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', outline: 'none', boxSizing: 'border-box' };
const labelS = { display: 'block', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.07em' };
return (
e.stopPropagation()}>
Apply template
This will create {template.tasks?.length || 0} tasks from "{template.name}".
{done !== null ? (
✅
{done} tasks created!
) : (
<>
)}
);
}
// ── Main Automations component ────────────────────────────────────
function Automations() {
useLucide();
const [tab, setTab] = React.useState('rules');
const [rules, setRules] = React.useState([]);
const [templates, setTemplates] = React.useState([]);
const [webhooks, setWebhooks] = React.useState([]);
const [approvals, setApprovals] = React.useState([]);
const [team, setTeam] = React.useState([]);
const [projects, setProjects] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [ruleModal, setRuleModal] = React.useState(null); // null | 'new' | rule object
const [tmplModal, setTmplModal] = React.useState(null);
const [whModal, setWhModal] = React.useState(null);
const [applyModal, setApplyModal] = React.useState(null); // template to apply
const [runLog, setRunLog] = React.useState([]);
const [running, setRunning] = React.useState(false);
const [approvalFilter, setApprovalFilter] = React.useState('pending');
const pendingCount = approvals.filter(a => a.status === 'pending').length;
React.useEffect(() => {
if (!window.API) { setLoading(false); return; }
(async () => {
try {
const [rr, tr, pr, wr, ar, tmr] = await Promise.all([
window.API.getRules(), window.API.getTeam(), window.API.getProjects(),
window.API.getWebhooks(), window.API.getTaskApprovals(), window.API.getTemplates(),
]);
if (rr.data) setRules(rr.data);
if (tr.data) setTeam(tr.data);
if (pr.data) setProjects(pr.data);
if (wr.data) setWebhooks(wr.data);
if (ar.data) setApprovals(ar.data);
if (tmr.data) setTemplates(tmr.data);
} catch {}
setLoading(false);
})();
}, []);
async function saveRule(form, id) {
const payload = { name: form.name, trigger_type: form.trigger_type, trigger_config: form.trigger_config, action_type: form.action_type, action_config: form.action_config, enabled: form.enabled };
if (id) {
const { data } = await window.API.updateRule(id, payload);
if (data) setRules(prev => prev.map(r => r.id === id ? { ...r, ...data } : r));
} else {
const { data } = await window.API.createRule(payload);
if (data) setRules(prev => [data, ...prev]);
}
}
async function saveTemplate(form, id) {
if (id) {
const { data } = await window.API.updateTemplate(id, form);
if (data) setTemplates(prev => prev.map(t => t.id === id ? { ...t, ...data } : t));
} else {
const { data } = await window.API.createTemplate(form);
if (data) setTemplates(prev => [data, ...prev]);
}
}
async function saveWebhook(form, id) {
if (id) {
const { data } = await window.API.updateWebhook(id, form);
if (data) setWebhooks(prev => prev.map(w => w.id === id ? { ...w, ...data } : w));
} else {
const { data } = await window.API.createWebhook(form);
if (data) setWebhooks(prev => [data, ...prev]);
}
}
async function toggleRule(id, enabled) {
await window.API.updateRule(id, { enabled });
setRules(prev => prev.map(r => r.id === id ? { ...r, enabled } : r));
}
async function deleteRule(id) {
await window.API.deleteRule(id);
setRules(prev => prev.filter(r => r.id !== id));
}
async function handleRunEngine() {
setRunning(true);
setRunLog([]);
const logs = [];
await runAutomationEngine(rules, team, msg => { logs.push(msg); setRunLog([...logs]); });
if (!logs.length) setRunLog(['ℹ️ No rules matched current conditions.']);
// Refresh rules (run counts)
const { data } = await window.API.getRules();
if (data) setRules(data);
setRunning(false);
}
async function resolveApproval(id, status, taskId, comment) {
const nextStatus = status === 'approved' ? 'in_progress' : 'todo';
await window.API.resolveApproval(id, status, comment || null, taskId, status === 'approved' ? nextStatus : null);
setApprovals(prev => prev.map(a => a.id === id ? { ...a, status, comment: comment || null, resolved_at: new Date().toISOString() } : a));
}
const TABS = [
{ id: 'rules', label: 'Automation rules', icon: 'zap', count: rules.filter(r => r.enabled).length },
{ id: 'templates', label: 'Task templates', icon: 'layout-list', count: templates.length },
{ id: 'webhooks', label: 'Webhooks', icon: 'webhook', count: webhooks.length },
{ id: 'approvals', label: 'Approvals', icon: 'shield-check', count: pendingCount },
];
const btnS = { display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-brand)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' };
const outS = { display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--slate-0)', color: 'var(--text-body)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' };
return (
{/* Header */}
Automations
{rules.filter(r => r.enabled).length} active rules · {webhooks.filter(w => w.enabled).length} webhooks
{tab === 'rules' && <>
}
{tab === 'templates' && }
{tab === 'webhooks' && }
{/* Tab nav */}
{TABS.map(t => (
))}
{loading &&
Loading…
}
{/* ── Rules tab ── */}
{!loading && tab === 'rules' && (
{runLog.length > 0 && (
{runLog.map((l, i) =>
{l}
)}
)}
{rules.length === 0 && (
⚡
No automation rules yet
Create rules like "When task is Done → notify client" or "Every Monday → create standup task"
)}
{rules.map(rule => {
const trig = TRIGGER_TYPES.find(t => t.id === rule.trigger_type);
const act = ACTION_TYPES.find(a => a.id === rule.action_type);
return (
{rule.name}
{describeRule(rule)}
{rule.run_count > 0 &&
Ran {rule.run_count}×{rule.last_run_at ? ` · ${fmtTime(rule.last_run_at)}` : ''}}
{rule.enabled ? 'On' : 'Off'}
{/* Visual IF/THEN chips */}
IF
{trig?.label || rule.trigger_type}
THEN
{act?.label || rule.action_type}
);
})}
)}
{/* ── Templates tab ── */}
{!loading && tab === 'templates' && (
{templates.length === 0 && (
📋
No templates yet
Create reusable task lists for recurring projects like "Client onboarding" or "Monthly reporting"
)}
{templates.map(tmpl => (
{tmpl.name}
{tmpl.description &&
{tmpl.description}
}
{tmpl.tasks?.length || 0} tasks
{(tmpl.tasks || []).slice(0, 3).map((t, i) => (
{t.title}
{t.due_offset_days && · day {t.due_offset_days}}
))}
{(tmpl.tasks?.length || 0) > 3 &&
+{tmpl.tasks.length - 3} more…
}
))}
)}
{/* ── Webhooks tab ── */}
{!loading && tab === 'webhooks' && (
Webhooks fire a POST request to your URL with JSON payload when events occur in TechyFuel OS.
{webhooks.length === 0 && (
🔗
No webhooks configured
Connect TechyFuel OS to Slack, Zapier, or your own backend
)}
{webhooks.map(wh => (
{wh.last_status && = 200 && wh.last_status < 300 ? 'success' : 'danger'} size="sm">{wh.last_status}}
{wh.last_triggered_at && {fmtTime(wh.last_triggered_at)}}
{wh.events?.length > 0 && (
{wh.events.map(e => {e})}
)}
))}
)}
{/* ── Approvals tab ── */}
{!loading && tab === 'approvals' && (
{['pending','approved','rejected'].map(s => (
))}
{approvals.filter(a => a.status === approvalFilter).length === 0 && (
No {approvalFilter} approvals
)}
{approvals.filter(a => a.status === approvalFilter).map(appr => (
{appr.tasks?.title || 'Task approval'}
{appr.status}
Requested by {appr.team_members?.name || '—'} · {fmtDate(appr.created_at)}
{appr.resolved_at && ` · Resolved ${fmtDate(appr.resolved_at)}`}
{appr.comment &&
"{appr.comment}"
}
{appr.status === 'pending' && (
)}
))}
)}
{/* Modals */}
setRuleModal(null)} onSave={saveRule} />
setTmplModal(null)} onSave={saveTemplate} />
setWhModal(null)} onSave={saveWebhook} />
setApplyModal(null)} />