[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69fa73e26b00819184f317f934ec9951","versionInt","title","Everything Dough Crm N8n Demo","type","code/react","content","import React, { useMemo, useState } from \"react\";\n\nconst LEADS = [\n { id: \"ED-1024\", name: \"Maya Rodriguez\", email: \"maya.r@example.com\", phone: \"203-555-0141\", source: \"Google Organic\", city: \"Stamford\", county: \"Fairfield\", eventType: \"Kids Birthday\", guests: 18, budget: 1450, eventDate: \"2026-05-28\", stage: \"New Inquiry\", status: \"Hot\", probability: 91, scoreReason: \"Strong fit: kids party, nearby, date selected, clear guest count.\", nextAction: \"Send package options and ask for preferred time window.\", lastTouch: \"Today\" },\n { id: \"ED-1025\", name: \"Jordan Lee\", email: \"jordan.lee@company.com\", phone: \"914-555-0188\", source: \"LinkedIn\", city: \"White Plains\", county: \"Westchester\", eventType: \"Corporate Team Building\", guests: 42, budget: 3800, eventDate: \"2026-06-12\", stage: \"Proposal Sent\", status: \"Hot\", probability: 86, scoreReason: \"High value corporate event with budget and guest count confirmed.\", nextAction: \"Follow up with corporate invoice and add-on options.\", lastTouch: \"1 day ago\" },\n { id: \"ED-1026\", name: \"Sofia Patel\", email: \"sofia.p@example.com\", phone: \"203-555-0119\", source: \"Instagram\", city: \"Darien\", county: \"Fairfield\", eventType: \"Intimate Workshop\", guests: 10, budget: 950, eventDate: \"2026-05-18\", stage: \"Needs Follow-Up\", status: \"Warm\", probability: 69, scoreReason: \"Good event fit, but budget is lower and client has not confirmed venue.\", nextAction: \"Offer CoCreate Stamford as venue option and send smaller package.\", lastTouch: \"3 days ago\" },\n { id: \"ED-1027\", name: \"Eric Thompson\", email: \"eric.t@example.com\", phone: \"914-555-0166\", source: \"Google Organic\", city: \"Rye\", county: \"Westchester\", eventType: \"Mixology + Pizza\", guests: 24, budget: 2300, eventDate: \"2026-07-02\", stage: \"Contract Pending\", status: \"Hot\", probability: 82, scoreReason: \"Add-on interest and date flexibility increase likelihood.\", nextAction: \"Send contract and deposit link.\", lastTouch: \"2 days ago\" },\n { id: \"ED-1028\", name: \"Nina Gomez\", email: \"nina.g@example.com\", phone: \"203-555-0128\", source: \"Facebook\", city: \"Norwalk\", county: \"Fairfield\", eventType: \"Coffee Tasting\", guests: 14, budget: 1200, eventDate: \"2026-06-01\", stage: \"Ghosted\", status: \"At Risk\", probability: 38, scoreReason: \"No response after quote. Could be revived with a value-based message.\", nextAction: \"Send gentle re-engagement message with limited dates.\", lastTouch: \"9 days ago\" },\n { id: \"ED-1029\", name: \"Chris Morgan\", email: \"chris.m@example.com\", phone: \"203-555-0173\", source: \"TikTok\", city: \"Greenwich\", county: \"Fairfield\", eventType: \"Wedding Catering\", guests: 75, budget: 5200, eventDate: \"2026-09-14\", stage: \"Qualified\", status: \"Hot\", probability: 78, scoreReason: \"Large event, strong budget, but needs menu consultation.\", nextAction: \"Schedule discovery call and collect venue constraints.\", lastTouch: \"Today\" },\n { id: \"ED-1030\", name: \"Priya Shah\", email: \"priya.s@example.com\", phone: \"914-555-0197\", source: \"Referral\", city: \"Scarsdale\", county: \"Westchester\", eventType: \"Kids Birthday\", guests: 16, budget: 1300, eventDate: \"2026-05-23\", stage: \"Booked\", status: \"Booked\", probability: 100, scoreReason: \"Deposit paid. Automation should move to event prep reminders.\", nextAction: \"Confirm guest count one week before and send day-before reminder.\", lastTouch: \"Today\" }\n];\n\nconst STAGES = [\"New Inquiry\", \"Qualified\", \"Proposal Sent\", \"Contract Pending\", \"Booked\", \"Needs Follow-Up\", \"Ghosted\"];\nconst TAB_NAMES = [\"crm\", \"agent\", \"workflow\", \"spreadsheet\", \"insights\", \"tests\"];\nconst NODE_NAMES = [\"Webhook/Form\", \"CRM Upsert\", \"AI Classifier\", \"Email/SMS\", \"Calendar\", \"Contract\", \"After-Event Follow-Up\", \"Owner Alert\"];\nconst MONTHLY_GROWTH = [\n { month: \"Jan\", inquiries: 18, booked: 5, revenue: 5800 },\n { month: \"Feb\", inquiries: 21, booked: 6, revenue: 6900 },\n { month: \"Mar\", inquiries: 24, booked: 8, revenue: 8100 },\n { month: \"Apr\", inquiries: 28, booked: 9, revenue: 9400 },\n { month: \"May\", inquiries: 33, booked: 12, revenue: 11800 }\n];\nconst SPREADSHEET_COLUMNS = [\"Name\", \"Email\", \"Phone\", \"Source\", \"Event Type\", \"City\", \"Guests\", \"Budget\", \"Stage\", \"AI Score\", \"Next Action\"];\nconst SPREADSHEET_ASSISTANT_PROMPTS = [\n { question: \"Which ghosted or at-risk leads should I contact first?\", answer: \"Start with Nina Gomez because she already requested a coffee tasting quote and has not responded in 9 days. Send a smaller package option and ask if the original quote needs revision.\", action: \"Draft re-engagement SMS\" },\n { question: \"Which event type creates the most revenue?\", answer: \"Wedding Catering is currently the highest revenue category in the demo pipeline, with $5,200 estimated revenue.\", action: \"Flag high-value event type\" },\n { question: \"Which leads are ready for contracts or deposits?\", answer: \"Eric Thompson is in Contract Pending. The assistant should prepare the contract and deposit link so the date can be secured.\", action: \"Prepare contract task\" },\n { question: \"What should I do this week?\", answer: \"Prioritize hot leads, follow up with ghosted leads, confirm booked event reminders, and review high-value corporate or wedding opportunities.\", action: \"Create weekly task list\" }\n];\nconst WORKFLOW_STEPS = [\n [\"01\", \"Capture Inquiry\", \"CRM\", \"Lead arrives from website form, Google search, Instagram, Facebook, TikTok, or referral.\"],\n [\"02\", \"Clean Data\", \"n8n\", \"Normalize name, email, phone, city, county, event type, guest count, budget, venue need, and date.\"],\n [\"03\", \"Score Lead\", \"AI Agent\", \"Predict Hot, Warm, At Risk, or Booked based on fit, urgency, event value, and response behavior.\"],\n [\"04\", \"Follow Up\", \"Email/SMS\", \"Generate a personalized message based on event type and stage.\"],\n [\"05\", \"Contract Step\", \"CRM Pipeline\", \"Move lead through proposal, contract, deposit, booked, ghosted, or declined.\"],\n [\"06\", \"Event Reminder\", \"n8n Scheduler\", \"Send one-week guest-count confirmation and day-before event reminder automatically.\"],\n [\"07\", \"Event Completed\", \"CRM\", \"After the class, mark the event as completed and trigger the retention workflow.\"],\n [\"08\", \"After-Event Follow-Up\", \"AI Agent + n8n\", \"Send thank-you message, review request, photo/social media request, future event offer, and referral opportunity.\"]\n];\nconst AFTER_EVENT_FOLLOW_UP = {\n thankYou: \"Hi {name}, thank you for choosing Everything Dough. We loved bringing the pizza-making experience to your event.\",\n reviewRequest: \"Would you be open to leaving us a quick review? It helps more families and teams discover our classes.\",\n socialContent: \"If you have photos from the event, we would love to see them. With your permission, we can feature a few on our social media.\",\n futureOffer: \"For a future celebration, team event, or seasonal workshop, we can create a custom pizza-making experience again.\",\n referralAsk: \"If you know another family, school, or company looking for a hands-on event, we would be grateful for a referral.\"\n};\nconst MESSAGES = {\n \"Kids Birthday\": { sms: \"Hi Maya, thanks for reaching out to Everything Dough. For a kids' birthday in Stamford with around 18 guests, we can bring the full pizza-making setup to you or help with a CoCreate Stamford option. Are you looking for afternoon or evening?\", email: \"Subject: Pizza-making birthday options\\n\\nHi Maya,\\n\\nThank you for your inquiry. Based on your guest count and location, this looks like a strong fit for our mobile kids' pizza-making class. We bring the ovens, ingredients, tools, and setup.\\n\\nNext step: confirm the preferred time window, venue address, and whether you want add-ons such as dessert making or apron decorating.\\n\\nBest,\\nEverything Dough\" },\n \"Corporate Team Building\": { sms: \"Hi Jordan, thanks for asking about a corporate pizza-making event. Your 42-person team-building request looks like a great fit. I can send package options and add-ons today.\", email: \"Subject: Corporate team-building pizza experience\\n\\nHi Jordan,\\n\\nThanks for reaching out. For a 42-person corporate event in White Plains, we can structure the session as a hands-on team-building experience with optional add-ons such as mixology or coffee tasting.\\n\\nNext step: confirm timing, venue logistics, and billing requirements so we can finalize the proposal.\\n\\nBest,\\nEverything Dough\" },\n \"Intimate Workshop\": { sms: \"Hi Sofia, following up on your intimate pizza workshop request. If you do not have a venue, CoCreate Stamford may be a good option. Would you like me to send that package?\", email: \"Subject: Intimate pizza workshop options\\n\\nHi Sofia,\\n\\nThank you for your inquiry. For a smaller workshop, we can keep the experience hands-on and flexible. Since your venue is not confirmed, CoCreate Stamford may be a useful option.\\n\\nNext step: confirm whether you prefer an at-home setup or a hosted location.\\n\\nBest,\\nEverything Dough\" },\n \"Mixology + Pizza\": { sms: \"Hi Eric, your pizza + mixology event is almost ready to finalize. I can send the contract and deposit link today so the date is secured.\", email: \"Subject: Contract for pizza + mixology event\\n\\nHi Eric,\\n\\nYour selected date and package are ready for the next step. I can send the contract and deposit link so we can hold the date and start event prep.\\n\\nBest,\\nEverything Dough\" },\n \"Coffee Tasting\": { sms: \"Hi Nina, just checking in on your coffee tasting inquiry. We still have a few upcoming dates available. Would you like me to revise the quote or send a smaller package?\", email: \"Subject: Checking in on your coffee tasting event\\n\\nHi Nina,\\n\\nI wanted to follow up on your coffee tasting inquiry. If the original quote was not the right fit, we can review a smaller package or adjust the experience.\\n\\nBest,\\nEverything Dough\" },\n \"Wedding Catering\": { sms: \"Hi Chris, your wedding catering inquiry looks like a strong fit. The next step is a quick discovery call to confirm venue rules, guest count, and menu preferences.\", email: \"Subject: Wedding pizza catering discovery call\\n\\nHi Chris,\\n\\nThank you for considering Everything Dough for your wedding. Since this is a larger event, the next step is to confirm venue logistics, service timing, menu preferences, and equipment constraints.\\n\\nBest,\\nEverything Dough\" }\n};\n\nfunction getStatusClass(status) {\n if (status === \"Hot\") return \"border-green-200 bg-green-50 text-green-800\";\n if (status === \"Warm\") return \"border-yellow-200 bg-yellow-50 text-yellow-800\";\n if (status === \"Booked\") return \"border-blue-200 bg-blue-50 text-blue-800\";\n if (status === \"At Risk\") return \"border-red-200 bg-red-50 text-red-800\";\n return \"border-orange-200 bg-orange-50 text-stone-800\";\n}\nfunction titleCase(value) { return value.charAt(0).toUpperCase() + value.slice(1); }\nfunction getSelectedLead(selectedId, items = LEADS) { return items.find((lead) => lead.id === selectedId) || items[0]; }\nfunction filterLeads({ items, query, stageFilter, channelFilter }) {\n const safeQuery = String(query || \"\").trim().toLowerCase();\n return items.filter((lead) => {\n const searchable = [lead.name, lead.email, lead.city, lead.county, lead.eventType, lead.source, lead.stage].join(\" \").toLowerCase();\n return (safeQuery === \"\" || searchable.includes(safeQuery)) && (stageFilter === \"All\" || lead.stage === stageFilter) && (channelFilter === \"All\" || lead.source === channelFilter);\n });\n}\nfunction summarizeLeads(items) {\n if (!items.length) return { totalPipeline: 0, avgProb: 0, hotLeads: 0, booked: 0 };\n return {\n totalPipeline: items.reduce((sum, lead) => sum + lead.budget, 0),\n avgProb: Math.round(items.reduce((sum, lead) => sum + lead.probability, 0) / items.length),\n hotLeads: items.filter((lead) => lead.status === \"Hot\").length,\n booked: items.filter((lead) => lead.stage === \"Booked\").length\n };\n}\nfunction groupByKey(items, key) {\n return items.reduce((acc, item) => { const value = item[key] || \"Unknown\"; acc[value] = (acc[value] || 0) + 1; return acc; }, {});\n}\nfunction revenueByEventType(items) {\n const grouped = items.reduce((acc, lead) => { acc[lead.eventType] = (acc[lead.eventType] || 0) + lead.budget; return acc; }, {});\n return Object.entries(grouped).map(([eventType, revenue]) => ({ eventType, revenue })).sort((a, b) => b.revenue - a.revenue);\n}\nfunction getTopRevenueEvent(items) { return revenueByEventType(items)[0] || { eventType: \"No events\", revenue: 0 }; }\nfunction isBusinessGrowing(data) { return data.length > 1 && data[data.length - 1].revenue > data[0].revenue && data[data.length - 1].booked > data[0].booked && data[data.length - 1].inquiries > data[0].inquiries; }\nfunction getRevenueGrowthPercent(data) { return data.length < 2 || data[0].revenue === 0 ? 0 : Math.round(((data[data.length - 1].revenue - data[0].revenue) / data[0].revenue) * 100); }\nfunction getSpreadsheetAssistantTasks(items) {\n return items.filter((lead) => lead.stage === \"Ghosted\" || lead.stage === \"Contract Pending\" || lead.status === \"Hot\").map((lead) => ({ lead: lead.name, stage: lead.stage, aiScore: lead.probability, recommendation: lead.nextAction }));\n}\nfunction getSpreadsheetSummary(items) {\n const summary = summarizeLeads(items);\n const topEvent = getTopRevenueEvent(items);\n return `Pipeline: $${summary.totalPipeline.toLocaleString()} | Hot prospects: ${summary.hotLeads} | Top revenue event: ${topEvent.eventType}`;\n}\nfunction createAgentSteps(lead) {\n return [\n `Lead selected: ${lead.name} | ${lead.eventType} | ${lead.city}`,\n `AI score: ${lead.probability}% conversion probability | ${lead.status}`,\n `CRM update: move or keep deal in ${lead.stage}.`,\n `n8n action: prepare SMS and email follow-up for ${lead.eventType}.`,\n lead.stage === \"Booked\" ? \"Scheduler: create one-week guest-count confirmation and day-before reminder.\" : \"Scheduler: wait 48 hours. If no response, send follow-up and alert owner.\",\n \"After-event workflow: send thank-you message, review request, photo/social media request, future event offer, and referral ask.\",\n \"Manual work replaced: data entry, message writing, reminder timing, follow-up, retention, and lead prioritization.\"\n ];\n}\nfunction getMessageForLead(lead) { return MESSAGES[lead.eventType] || MESSAGES[\"Kids Birthday\"]; }\nfunction getFirstName(fullName) { return String(fullName || \"there\").trim().split(\" \")[0] || \"there\"; }\nfunction buildAfterEventMessage(lead) {\n const firstName = getFirstName(lead.name);\n return [\n AFTER_EVENT_FOLLOW_UP.thankYou.replace(\"{name}\", firstName),\n AFTER_EVENT_FOLLOW_UP.reviewRequest,\n AFTER_EVENT_FOLLOW_UP.socialContent,\n AFTER_EVENT_FOLLOW_UP.futureOffer,\n AFTER_EVENT_FOLLOW_UP.referralAsk\n ].join(\"\\n\\n\");\n}\nfunction runDemoTests() {\n const results = [];\n const assert = (name, condition) => results.push({ name, passed: Boolean(condition) });\n assert(\"Lead dataset is loaded\", LEADS.length === 7);\n assert(\"Fallback lead works\", getSelectedLead(\"missing-id\").id === LEADS[0].id);\n assert(\"Search finds Stamford kids birthday lead\", filterLeads({ items: LEADS, query: \"stamford\", stageFilter: \"All\", channelFilter: \"All\" }).length === 1);\n assert(\"Stage filter finds booked event\", filterLeads({ items: LEADS, query: \"\", stageFilter: \"Booked\", channelFilter: \"All\" }).length === 1);\n assert(\"Channel filter finds Google Organic leads\", filterLeads({ items: LEADS, query: \"\", stageFilter: \"All\", channelFilter: \"Google Organic\" }).length === 2);\n assert(\"Summary pipeline total is correct\", summarizeLeads(LEADS).totalPipeline === 16100);\n assert(\"Average probability is correct\", summarizeLeads(LEADS).avgProb === 78);\n assert(\"Every event type has a generated message\", LEADS.every((lead) => Boolean(MESSAGES[lead.eventType])));\n assert(\"Workflow includes after-event follow-up\", WORKFLOW_STEPS.length === 8);\n assert(\"Empty summary does not divide by zero\", summarizeLeads([]).avgProb === 0);\n assert(\"Unknown query returns zero leads\", filterLeads({ items: LEADS, query: \"xyz-no-match\", stageFilter: \"All\", channelFilter: \"All\" }).length === 0);\n assert(\"Agent creates seven automation log steps\", createAgentSteps(LEADS[0]).length === 7);\n assert(\"Every lead has a valid conversion probability\", LEADS.every((lead) => lead.probability >= 0 && lead.probability <= 100));\n assert(\"Every lead has a valid stage\", LEADS.every((lead) => STAGES.includes(lead.stage)));\n assert(\"Every workflow step has four fields\", WORKFLOW_STEPS.every((step) => step.length === 4));\n assert(\"Message fallback returns an SMS\", Boolean(getMessageForLead({ eventType: \"Unknown\" }).sms));\n assert(\"Tabs include spreadsheet assistant\", TAB_NAMES.length === 6 && TAB_NAMES.includes(\"spreadsheet\"));\n assert(\"n8n blueprint includes after-event node\", NODE_NAMES.includes(\"After-Event Follow-Up\"));\n assert(\"Source grouping includes Google Organic\", groupByKey(LEADS, \"source\")[\"Google Organic\"] === 2);\n assert(\"Wedding catering is the highest revenue event\", getTopRevenueEvent(LEADS).eventType === \"Wedding Catering\");\n assert(\"Revenue by event type equals total pipeline\", revenueByEventType(LEADS).reduce((sum, item) => sum + item.revenue, 0) === summarizeLeads(LEADS).totalPipeline);\n assert(\"Business growth trend is positive\", isBusinessGrowing(MONTHLY_GROWTH) === true);\n assert(\"Revenue growth percent is positive\", getRevenueGrowthPercent(MONTHLY_GROWTH) > 0);\n assert(\"Status class fallback is safe\", getStatusClass(\"Unknown\").includes(\"stone\"));\n assert(\"After-event message includes review request\", buildAfterEventMessage(LEADS[0]).toLowerCase().includes(\"review\"));\n assert(\"After-event message includes referral ask\", buildAfterEventMessage(LEADS[0]).toLowerCase().includes(\"referral\"));\n assert(\"After-event message has paragraph breaks\", buildAfterEventMessage(LEADS[0]).includes(\"\\n\\n\"));\n assert(\"First name helper handles empty names\", getFirstName(\"\") === \"there\");\n assert(\"Spreadsheet assistant has prompt examples\", SPREADSHEET_ASSISTANT_PROMPTS.length === 4);\n assert(\"Spreadsheet assistant tasks include contract pending lead\", getSpreadsheetAssistantTasks(LEADS).some((task) => task.stage === \"Contract Pending\"));\n assert(\"Spreadsheet summary includes pipeline\", getSpreadsheetSummary(LEADS).includes(\"Pipeline\"));\n return results;\n}\n\nfunction CardBox({ children, className = \"\" }) { return

{children}

; }\nfunction BadgeBox({ children, className = \"\" }) { return {children}; }\nfunction MiniLabel({ children }) { return {children}; }\nfunction MetricCard({ label, value, subtext }) { return

{label}

{value}

{subtext}

; }\nfunction BarList({ data, labelKey, valueKey, valuePrefix = \"\" }) {\n const maxValue = Math.max(...data.map((item) => item[valueKey]), 1);\n return

{data.map((item) =>

{item[labelKey]}{valuePrefix}{typeof item[valueKey] === \"number\" ? item[valueKey].toLocaleString() : item[valueKey]}

)}

;\n}\nfunction LineTrend({ data }) {\n const maxInquiry = Math.max(...data.map((item) => item.inquiries), 1);\n return

{data.map((item) =>

{item.month}

{item.inquiries} / {item.booked}

)}

Top bar: inquiries. Bottom bar: booked events.

;\n}\nfunction RevenueGrowthChart({ data }) {\n const maxRevenue = Math.max(...data.map((item) => item.revenue), 1);\n const growthPercent = getRevenueGrowthPercent(data);\n return

{data.map((item) =>

{item.month}

${item.revenue.toLocaleString()}

)}

Synthetic growth signal: revenue increased {growthPercent}% from January to May, while booked events increased from {data[0].booked} to {data[data.length - 1].booked}.

;\n}\n\nexport default function EverythingDoughCrmN8nDemo() {\n const [selectedId, setSelectedId] = useState(LEADS[0].id);\n const [query, setQuery] = useState(\"\");\n const [stageFilter, setStageFilter] = useState(\"All\");\n const [channelFilter, setChannelFilter] = useState(\"All\");\n const [activeTab, setActiveTab] = useState(\"crm\");\n const [agentRunning, setAgentRunning] = useState(false);\n const [log, setLog] = useState([\"Ready: CRM connected to lead table, email, SMS, calendar, contracts, and n8n workflow.\"]);\n\n const selectedLead = getSelectedLead(selectedId);\n const filteredLeads = useMemo(() => filterLeads({ items: LEADS, query, stageFilter, channelFilter }), [query, stageFilter, channelFilter]);\n const summary = useMemo(() => summarizeLeads(LEADS), []);\n const testResults = useMemo(() => runDemoTests(), []);\n const testsPassed = testResults.every((result) => result.passed);\n const message = getMessageForLead(selectedLead);\n const afterEventMessage = buildAfterEventMessage(selectedLead);\n const sourceData = useMemo(() => Object.entries(groupByKey(LEADS, \"source\")).map(([source, count]) => ({ source, count })), []);\n const stageData = useMemo(() => { const grouped = groupByKey(LEADS, \"stage\"); return STAGES.map((stage) => ({ stage, count: grouped[stage] || 0 })); }, []);\n const revenueEventData = useMemo(() => revenueByEventType(LEADS), []);\n const topRevenueEvent = useMemo(() => getTopRevenueEvent(LEADS), []);\n const businessGrowing = useMemo(() => isBusinessGrowing(MONTHLY_GROWTH), []);\n const conversionTrend = MONTHLY_GROWTH;\n const runAgent = () => {\n setAgentRunning(true);\n setLog([\"Running Alexandra workflow simulation...\"]);\n createAgentSteps(selectedLead).forEach((step, index, steps) => {\n window.setTimeout(() => { setLog((previous) => [...previous, step]); if (index === steps.length - 1) setAgentRunning(false); }, 350 * (index + 1));\n });\n };\n\n return

Everything Dough demoCRM + n8n AI agent{testsPassed ? \"Tests passed\" : \"Tests failing\"}

Everything Dough

CRM and n8n workflow demo for pizza-making events

This prototype simulates Alexandra's manual workflow: capture inquiries, organize leads, classify high-value opportunities, personalize follow-up, send contracts, schedule reminders, and create a repeatable system for expansion.

Connected systems

{[\"CRM leads\", \"Email + SMS\", \"Calendar\", \"Contracts\", \"n8n agent\"].map((system) =>

{system}Live

)}

{TAB_NAMES.map((tab) => )}

\n\n {activeTab === \"crm\" &&

setQuery(event.target.value)} placeholder=\"Search by name, city, event type, source, or stage...\" className=\"rounded-2xl border border-orange-300 bg-white px-4 py-2 text-sm outline-none focus:border-red-600\" />

Lead pipeline

{filteredLeads.length === 0 ?

No leads match this filter.

: filteredLeads.map((lead) => )}

Selected lead

{selectedLead.name}

{selectedLead.email} | {selectedLead.phone}

Event

{selectedLead.eventType}

Guests

{selectedLead.guests}

Budget

${selectedLead.budget.toLocaleString()}

Event date

{selectedLead.eventDate}

AI score reason

{selectedLead.scoreReason}

Recommended next action

{selectedLead.nextAction}

}\n\n {activeTab === \"agent\" &&

AI agent simulation

{log.map((item, index) =>

[{String(index + 1).padStart(2, \"0\")}] {item}

)}

Generated SMS

{message.sms}

Generated email

{message.email}

After-event follow-up

{afterEventMessage}

}\n\n {activeTab === \"workflow\" &&

Manual workflow converted into n8n automation

{WORKFLOW_STEPS.map(([code, title, owner, detail]) =>

{code}

{title}

{owner}

{detail}

)}

n8n node blueprint

{NODE_NAMES.map((node) =>

{node}

)}

Trigger examples: new website form, new row in spreadsheet, new CRM contact, incoming email, or manual button. The agent writes back to CRM fields: lead score, stage, next action, follow-up date, message draft, and owner alert.

}\n\n {activeTab === \"spreadsheet\" &&

AI Spreadsheet Assistant

This assistant represents Alexandra's spreadsheet of inquiries, bookings, ghosted leads, and declined opportunities. It lets her ask questions in plain English instead of manually filtering rows.

Spreadsheet summary: {getSpreadsheetSummary(LEADS)}

Connected columns

{SPREADSHEET_COLUMNS.map((column) => {column})}

Ask the spreadsheet

{SPREADSHEET_ASSISTANT_PROMPTS.map((prompt) =>

{prompt.question}

{prompt.answer}

{prompt.action}

)}

Assistant-generated task list from spreadsheet rows

{getSpreadsheetAssistantTasks(LEADS).map((task) =>

{task.lead}

{task.aiScore}%

{task.stage}

{task.recommendation}

)}

}\n\n {activeTab === \"insights\" &&

Event with most revenue

Top event category

{topRevenueEvent.eventType}

${topRevenueEvent.revenue.toLocaleString()} estimated revenue

This tells Alexandra which event type is creating the strongest revenue opportunity in the current CRM pipeline.

Revenue by event type

Lead source mix

Pipeline by stage

Business growth graph

Growth status: {businessGrowing ? \"Growing\" : \"Not enough evidence of growth\"}. This uses synthetic monthly revenue, inquiries, and booked events for the demo.

Demand and bookings trend

}\n\n {activeTab === \"tests\" &&

Runtime validation tests

{testResults.map((result) =>

{result.name}{result.passed ? \"PASS\" : \"FAIL\"}

)}

}\n

Demo note: This is a prototype using synthetic CRM records. A production version would connect HubSpot or Google Sheets, Gmail, SMS, calendar, contracts, and n8n through authenticated APIs.

;\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","8197909766514656685","traceTime",1778702833801]