/* global React, Icon, UI, DATA */ const { useState: usePState } = React; // Reusable horizontal flow representation (input → processing → output) function FlowStrip({ steps, compact }) { const { NODE_TYPES } = UI; return (
{steps.map((s, i) => { const m = NODE_TYPES[s.type] || NODE_TYPES.processing; return (
{s.label}
{i < steps.length - 1 && } ); })}
); } // --------------------------- Projects list --------------------------- function ProjectsList({ navigate }) { const { Button, StatusBadge, CategoryChip, EmptyState } = UI; const [q, setQ] = usePState(""); const [status, setStatus] = usePState("all"); const [view, setView] = usePState("cards"); const D = DATA; let list = D.projects.filter((p) => (status === "all" || p.status === status) && p.name.toLowerCase().includes(q.toLowerCase())); const statuses = ["all", "active", "paused", "draft", "archived"]; return (
} />
setQ(e.target.value)} style={{ paddingLeft: 36 }} />
{statuses.map((s) => )}
{list.length === 0 ? (
) : view === "cards" ? (
{list.map((p) => (
navigate("project", { id: p.id })}>
{p.name}

{p.description}

{p.inputs.slice(0, 2).map((s) => {s})} {p.outputs.slice(0, 2).map((s) => {s})}
{p.executions.toLocaleString()} runs {p.lastStatus ? : Not run yet}
))}
) : (
{list.map((p) => ( navigate("project", { id: p.id })}> ))}
ProjectCategoryStatusTriggerRunsLast run
{p.name}
 {p.executions.toLocaleString()} {D.fmtAgo(p.lastRun)}
)}
); } function TriggerText({ t }) { const map = { file_uploaded: "On file upload", email_received: "On email", scheduled: "Scheduled", manual: "Manual", api_request: "Via API", webhook: "Via webhook" }; return {map[t] || t}; } // --------------------------- Create project wizard --------------------------- function CreateProjectWizard({ navigate, toast }) { const [step, setStep] = usePState(0); const [sub, setSub] = usePState(0); const t = window.useTemplateData(""); const [d, setD] = usePState({ name: "", description: "", category: "Manufacturing", start: "scratch", input: "File upload", processing: ["Extract fields", "Select fields", "Convert PDF to Excel"], output: "Google Drive", activate: "file_uploaded", }); const set = (k, v) => setD((s) => ({ ...s, [k]: v })); const steps = ["Basics", "Start method", "Input", "Processing", "Output", "Configuration", "Test run", "Activate"]; const last = step === steps.length - 1; const CONFIG_STEP = 5; const canNext = step === CONFIG_STEP ? window.templateCanNext(sub, t, false) : [d.name.trim().length > 1, !!d.start, !!d.input, d.processing.length > 0, !!d.output, true, true, true][step]; const goBack = () => { if (step === CONFIG_STEP && sub > 0) setSub((s) => s - 1); else setStep((s) => s - 1); }; const goNext = () => { if (step === CONFIG_STEP && sub < window.TEMPLATE_SUB_STEPS.length - 1) { setSub((s) => s + 1); return; } if (last) { toast("Project created", "success"); navigate("project", { id: "proj_po" }); return; } setStep((s) => s + 1); }; const Card = ({ active, onClick, icon, title, sub, soon }) => ( ); const Multi = ({ options, value, k }) => (
{options.map((o) => { const sel = value.includes(o); return ( ); })}
); return (
Create project
{step === 0 && (

Project basics

Give your project a clear name. Examples: Purchase order processing, Invoice automation, Bank statement analysis.

set("name", e.target.value)} style={{ height: 46 }} />