[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_332":333,"_334":335},"routes/_app.x.$handle.$name",{"_115":114,"_33":55,"_124":101,"_28":125,"_13":14,"_126":-5,"_11":127,"_128":129,"_130":131,"_132":133,"_134":135,"_21":-5,"_136":137,"_138":139,"_140":26,"_141":142,"_143":70,"_144":-5,"_145":-5,"_146":147},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_53":54,"_33":55,"_40":56,"_57":-5,"_58":26,"_59":60,"_61":60,"_62":63,"_64":65,"_18":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":26},"version",118,"changes",[19,20],"aiChatInfo","userId",{"_21":45,"_23":46,"_25":26,"_27":26,"_28":47,"_30":47},{"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_25":26},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","frontend/components/GrowthSuite.tsx","latestPath","fileId","17224988-9756-11f1-bd2f-1607ee4eb77e","name","GrowthSuite.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.7\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.2.4\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n name: string;\n role: string;\n permissions: Record;\n};\n\nasync function api(path: string, options: RequestInit = {}) {\n const headers = { ...(options.body ? { \"Content-Type\": \"application/json\" } : {}), ...(options.headers || {}) };\n const response = await fetch(path, { ...options, headers, cache: \"no-store\" });\n const type = response.headers.get(\"content-type\") || \"\";\n const data = type.includes(\"application/json\") ? await response.json() : await response.text();\n if (!response.ok) throw new Error(data?.error || data || \"Request failed\");\n return data;\n}\nconst post = (path: string, data: any) => api(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any) => api(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string) => api(path, { method: \"DELETE\" });\nconst formData = (form: HTMLFormElement) => Object.fromEntries(new FormData(form));\nconst titleCase = (value: unknown) => String(value || \"\").replaceAll(\"-\", \" \").replace(/\\b\\w/g, (letter) => letter.toUpperCase());\nconst shortDate = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(value)) : \"Not set\";\nconst shortDateTime = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", hour: \"numeric\", minute: \"2-digit\" }).format(new Date(value)) : \"Not set\";\nconst money = (value: unknown, currency = \"INR\") => new Intl.NumberFormat(\"en-IN\", { style: \"currency\", currency, maximumFractionDigits: 2 }).format(Number(value) || 0);\nconst pct = (value: number, total: number) => total > 0 ? Math.min(100, Math.round(value / total * 100)) : 0;\n\nfunction Field({ label, hint, children, className = \"\" }: any) {\n return {label}{children}{hint && {hint}};\n}\nfunction Button({ children, variant = \"\", className = \"\", ...props }: any) {\n return ;\n}\nfunction Empty({ title, text }: any) {\n return

{title}

{text}

;\n}\nfunction Loading() {\n return

Loading content

;\n}\nfunction GrowthDialog({ open, close, label, children }: any) {\n const ref = useRef(null);\n useEffect(() => {\n const node = ref.current;\n if (!node) return;\n if (open && !node.open) node.showModal();\n if (!open && node.open) node.close();\n }, [open]);\n return { event.preventDefault(); close(); }} onClick={(event) => { if (event.target === ref.current) close(); }}>{children};\n}\nfunction Progress({ value, total, label }: any) {\n const percent = pct(Number(value), Number(total));\n return
{label}{value} / {total}
{percent}% achieved
;\n}\n\nexport function MarkdownBlock({ value, empty = \"No detailed notes yet.\" }: { value?: string; empty?: string }) {\n const html = useMemo(() => DOMPurify.sanitize(String(marked.parse(value || \"\", { async: false }))), [value]);\n if (!value) return
{empty}
;\n return
;\n}\n\nexport function CommercialPreview({ partnerId, regularCost, partnerCost, currency, taxRate, taxInclusive }: any) {\n const regular = Math.max(0, Number(regularCost) || 0);\n const managed = partnerId ? Math.max(0, Number(partnerCost) || 0) : regular;\n const rate = Math.max(0, Number(taxRate) || 0);\n const tax = taxInclusive ? managed - managed / (1 + rate / 100 || 1) : managed * rate / 100;\n const clientTotal = taxInclusive ? managed : managed + tax;\n const partnerMargin = partnerId ? Math.max(0, managed - regular) : 0;\n return
\n
Commercial preview{money(clientTotal, currency)}
\n
Regular delivery cost{money(regular, currency)}
\n {partnerId &&
Partner-managed client cost{money(managed, currency)}
}\n {partnerId &&
Partner commercial spread{money(partnerMargin, currency)}
}\n
{taxInclusive ? \"Tax included in cost\" : \"Tax added\"} · {rate}%{money(tax, currency)}
\n
Client invoice total{money(clientTotal, currency)}
\n
;\n}\n\nexport function InvoiceComposer({ project, detail, onDone, notify }: any) {\n const [items, setItems] = useState([{ description: \"\", quantity: 1, unit_price: 0 }]);\n const [discount, setDiscount] = useState(0);\n const [arrears, setArrears] = useState(0);\n const [taxRate, setTaxRate] = useState(Number(project.tax_rate) || 0);\n const [busy, setBusy] = useState(false);\n const subtotal = items.reduce((sum, item) => sum + (Number(item.quantity) || 0) * (Number(item.unit_price) || 0), 0);\n const taxable = Math.max(0, subtotal - discount + arrears);\n const tax = taxable * taxRate / 100;\n const total = taxable + tax;\n const update = (index: number, key: string, value: any) => setItems((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [key]: value } : item));\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n const data: any = formData(event.currentTarget);\n data.milestone_ids = new FormData(event.currentTarget).getAll(\"milestone_ids\");\n data.items = items;\n data.discount = discount;\n data.arrears = arrears;\n data.tax_rate = taxRate;\n await post(\"/api/projects/\" + project.id + \"/invoices\", data);\n notify(\"Itemized invoice created\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return
\n
\n
Create invoice
Build a clear, itemized document for {project.title}.
\n {project.currency}\n
\n
\n
Line items
Add each deliverable or charge separately.
\n
DescriptionQtyUnit priceAmount
\n
{items.map((item, index) =>
\n Description update(index, \"description\", event.target.value)} required/>\n Quantity update(index, \"quantity\", event.target.value)} required/>\n Unit price update(index, \"unit_price\", event.target.value)} required/>\n {money(Number(item.quantity) * Number(item.unit_price), project.currency)}\n {items.length > 1 ? : }\n
)}
\n
\n
\n
Invoice details
Set timing, adjustments, and tax treatment.
\n
\n \n \n setDiscount(Number(event.target.value))}/>\n setArrears(Number(event.target.value))}/>\n \n setTaxRate(Number(event.target.value))}/>\n
\n
\n {detail.milestones?.length > 0 &&
Covered milestones
{detail.milestones.map((milestone: any) => {milestone.title})}
}\n </Field>\n <footer className=\"invoice-composer-footer\">\n <div className=\"invoice-totals\"><div><span>Subtotal</span><b>{money(subtotal, project.currency)}</b></div><div><span>Discount</span><b>− {money(discount, project.currency)}</b></div><div><span>Arrears</span><b>+ {money(arrears, project.currency)}</b></div><div><span>Tax</span><b>+ {money(tax, project.currency)}</b></div><div className=\"total\"><span>Total</span><strong>{money(total, project.currency)}</strong></div></div>\n <Button disabled={busy || !items.some((item) => item.description && Number(item.quantity) > 0)}>{busy ? \"Creating invoice…\" : \"Create invoice PDF\"}</Button>\n </footer>\n </form>;\n}\n\nexport function PartnerProjectEditor({ project, onDone, notify }: any) {\n const [busy, setBusy] = useState(false);\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n await patch(\"/api/projects/\" + project.id, formData(event.currentTarget));\n notify(\"Project details updated\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return <form className=\"growth-partner-editor\" onSubmit={submit}>\n <header><div><h3>Edit project details</h3><p>Update the delivery summary and working notes your AFLABS team will use.</p></div><span>Partner access</span></header>\n <div className=\"growth-form-grid\">\n <Field label=\"Project title\"><input name=\"title\" defaultValue={project.title} required/></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={project.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line summary\" className=\"growth-span-2\" hint=\"Keep this concise; use the notes field for full context.\"><input name=\"description\" defaultValue={project.description || \"\"} maxLength={240}/></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={project.start_date || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\" defaultValue={project.end_date || \"\"}/></Field>\n <Field label=\"Project email\" className=\"growth-span-2\"><input name=\"contact_email\" type=\"email\" defaultValue={project.contact_email || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"growth-span-2 project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, and code.\"><textarea name=\"markdown_details\" rows={12} defaultValue={project.markdown_details || \"\"} placeholder={\"# Context\\n\\n## Requirements\\n- Add working notes here\"}/></Field>\n </div>\n <footer><Button disabled={busy}>{busy ? \"Saving changes…\" : \"Save project details\"}</Button></footer>\n </form>;\n}\n\nexport function GrowthDashboard({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { api(\"/api/growth/dashboard\").then(setData).catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n return <section className=\"growth-dashboard\">\n <div className=\"growth-metrics\">\n <article><span>Open pipeline</span><b>{money(data.pipeline_value, data.pipeline_currency)}</b><small>{data.leads_total} leads · {data.conversion_rate}% converted</small></article>\n <article className={data.overdue_projects ? \"risk\" : \"\"}><span>Delivery health</span><b>{data.active_projects}</b><small>{data.overdue_projects} overdue projects</small></article>\n <article><span>Upcoming meetings</span><b>{data.upcoming_meetings}</b><small>Booked or confirmed</small></article>\n <article className={data.unread_conversations ? \"attention\" : \"\"}><span>Unread threads</span><b>{data.unread_conversations}</b><small>Scoped partner conversations</small></article>\n </div>\n {actor.actorType === \"partner\" && data.target?.target && <div className=\"partner-target-strip\">\n <header><div><span>Monthly trajectory</span><h3>{data.target.month}</h3></div><small>Stay ahead of the gap before month-end.</small></header>\n <Progress label=\"Leads\" value={data.target.achieved.leads} total={data.target.target.leads_target}/>\n <Progress label=\"Projects\" value={data.target.achieved.projects} total={data.target.target.projects_target}/>\n <Progress label={\"Revenue · \" + data.target.target.revenue_currency} value={data.target.achieved.revenue} total={data.target.target.revenue_target}/>\n <Progress label=\"Meetings used\" value={data.target.achieved.meetings} total={data.target.target.meetings_allowed}/>\n </div>}\n </section>;\n}\n\nfunction LeadWorkspace({ actor, notify, onOpenProject }: any) {\n const [data, setData] = useState<any>(null);\n const [selectedId, setSelectedId] = useState(\"\");\n const [detail, setDetail] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [stage, setStage] = useState(\"\");\n const [partner, setPartner] = useState(\"\");\n const [due, setDue] = useState(\"\");\n const [creating, setCreating] = useState(false);\n const load = async () => setData(await api(\"/api/leads\"));\n const loadDetail = async (id: string) => { setSelectedId(id); setDetail(await api(\"/api/leads/\" + id)); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const visible = data.leads.filter((lead: any) => {\n const haystack = [lead.title, lead.company_name, lead.contact_name, lead.category, lead.partner_name].join(\" \").toLowerCase();\n if (search && !haystack.includes(search.toLowerCase())) return false;\n if (stage && lead.stage !== stage) return false;\n if (partner && String(lead.partner_id || \"\") !== partner) return false;\n if (due === \"overdue\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now())) return false;\n if (due === \"upcoming\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) >= Date.now())) return false;\n if (due === \"none\" && lead.next_follow_up_at) return false;\n return true;\n });\n const activeFilterCount = [search, stage, partner, due].filter(Boolean).length;\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setCreating(true);\n try {\n const result = await post(\"/api/leads\", formData(form));\n form.reset();\n setCreateOpen(false);\n await load();\n await loadDetail(result.id);\n notify(\"Lead created\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setCreating(false); }\n };\n const refreshDetail = async () => { await load(); if (selectedId) await loadDetail(selectedId); };\n return <div className=\"growth-page\">\n <header className=\"growth-page-head\"><div><h1>Leads</h1><span>Qualify opportunities, preserve every interaction, and move requirements into delivery.</span></div>{(actor.actorType === \"internal\" || actor.permissions.create_leads) && <Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"New lead\"}</Button>}</header>\n {createOpen && <section className=\"growth-panel lead-create\"><header className=\"growth-section-title\"><div><h2>Create lead</h2><p>Capture the commercial context now; refine requirements as discovery progresses.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={creating}>\n <Field label=\"Lead title\"><input name=\"title\" required placeholder=\"Retail automation opportunity\"/></Field>\n <Field label=\"Customer / brand\"><input name=\"company_name\" required/></Field>\n <Field label=\"Contact name\"><input name=\"contact_name\"/></Field>\n <Field label=\"Contact email\"><input name=\"contact_email\" type=\"email\"/></Field>\n <Field label=\"Contact phone\"><input name=\"contact_phone\"/></Field>\n <Field label=\"Source\"><input name=\"source\" placeholder=\"Referral, event, inbound…\"/></Field>\n <Field label=\"Category\"><input name=\"category\" placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" placeholder=\"B2B, D2C, services…\"/></Field>\n <Field label=\"Expected budget\"><input name=\"expected_budget\" type=\"number\" min=\"0\"/></Field>\n <Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"internal\" && <Field label=\"Owner\"><select name=\"owner_user_id\"><option value=\"\">Me / default</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4}/></Field>\n <Field label=\"Initial use-case hint\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" rows={3}/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={creating}>{creating ? \"Creating lead…\" : \"Create lead\"}</Button></div>\n </form></section>}\n <section className=\"pipeline-eagle\">\n <header><div><h2>Pipeline overview</h2><p>Stage distribution and connected delivery health at a glance.</p></div><b>{data.leads.length} leads</b></header>\n <div className=\"pipeline-track\">{data.stage_order.map((name: string) => <div className={\"pipeline-stage stage-\" + name} key={name}><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b><i/></div>)}</div>\n <div className=\"pipeline-columns\">{data.stage_order.map((name: string) => <section key={name}><header><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b></header>{data.leads.filter((lead: any) => lead.stage === name).slice(0, 5).map((lead: any) => <button key={lead.id} onClick={() => loadDetail(lead.id)}><strong>{lead.company_name || lead.title}</strong><small>{money(lead.expected_budget, lead.currency)} · {lead.project_count} project{Number(lead.project_count) === 1 ? \"\" : \"s\"}</small></button>)}</section>)}</div>\n </section>\n <section className=\"lead-filter-panel\">\n <header><div><h2>Lead directory</h2><p>{visible.length} of {data.leads.length} leads shown</p></div>{activeFilterCount > 0 && <button type=\"button\" onClick={() => { setSearch(\"\"); setStage(\"\"); setPartner(\"\"); setDue(\"\"); }}>Clear filters</button>}</header>\n <div className=\"growth-filters\">\n <label className=\"growth-filter-search\"><span>Search</span><input aria-label=\"Search leads\" value={search} onChange={(event) => setSearch(event.target.value)} placeholder=\"Company, contact, or category\"/></label>\n <label><span>Stage</span><select aria-label=\"Filter leads by stage\" value={stage} onChange={(event) => setStage(event.target.value)}><option value=\"\">All stages</option>{data.stage_order.map((item: string) => <option key={item} value={item}>{titleCase(item)}</option>)}</select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter leads by partner\" value={partner} onChange={(event) => setPartner(event.target.value)}><option value=\"\">All partners</option>{data.options.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}\n <label><span>Follow-up</span><select aria-label=\"Filter leads by follow-up\" value={due} onChange={(event) => setDue(event.target.value)}><option value=\"\">Any follow-up</option><option value=\"overdue\">Overdue</option><option value=\"upcoming\">Upcoming</option><option value=\"none\">Not scheduled</option></select></label>\n </div>\n </section>\n <div className=\"lead-grid\">{visible.map((lead: any) => <button className=\"lead-card\" key={lead.id} onClick={() => loadDetail(lead.id)}>\n <header><span className={\"lead-priority priority-\" + lead.priority}>{lead.priority}</span><em>{titleCase(lead.stage)}</em></header>\n <h3>{lead.company_name || lead.title}</h3><p>{lead.title}</p>\n <dl><div><dt>Potential</dt><dd>{money(lead.expected_budget, lead.currency)}</dd></div><div><dt>Projects</dt><dd>{lead.project_count}</dd></div></dl>\n <footer><span>{lead.partner_name || \"Direct AFLABS\"}</span><b className={lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now() ? \"overdue\" : \"\"}>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"No follow-up\"}</b></footer>\n </button>)}</div>\n {!visible.length && <Empty title=\"No leads match\" text=\"Change the filters or capture a new lead.\"/>}\n <GrowthDialog open={Boolean(selectedId)} label={detail ? \"Lead details for \" + (detail.lead.company_name || detail.lead.title) : \"Loading lead details\"} close={() => { setSelectedId(\"\"); setDetail(null); }}><article className=\"lead-dialog-shell\">\n <header className=\"growth-drawer-head\"><div><span>{detail ? titleCase(detail.lead.stage) : \"Loading\"}</span><h2>{detail?.lead.company_name || detail?.lead.title || \"Lead details\"}</h2></div><button type=\"button\" aria-label=\"Close lead details\" onClick={() => { setSelectedId(\"\"); setDetail(null); }}>Close</button></header>\n {!detail ? <Loading/> : <LeadDetail detail={detail} actor={actor} notify={notify} refresh={refreshDetail} onOpenProject={onOpenProject}/>}\n </article></GrowthDialog>\n </div>;\n}\n\nfunction LeadDetail({ detail, actor, notify, refresh, onOpenProject }: any) {\n const lead = detail.lead;\n const editable = actor.actorType === \"internal\" || actor.permissions.edit_leads;\n const convertible = actor.actorType === \"internal\" || (actor.permissions.convert_leads && actor.permissions.create_projects);\n const update = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/leads/\" + lead.id, formData(event.currentTarget)); await refresh(); notify(\"Lead updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const addFollowup = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/leads/\" + lead.id + \"/followups\", formData(form)); form.reset(); await refresh(); notify(\"Follow-up scheduled\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const createProject = async (event: any) => {\n event.preventDefault();\n try {\n const result = await post(\"/api/leads/\" + lead.id + \"/projects\", { ...formData(event.currentTarget), copy_stakeholder: true });\n await refresh();\n notify(\"Project created from lead\");\n onOpenProject(result.id);\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const attach = async (event: any) => {\n event.preventDefault();\n try { await post(\"/api/leads/\" + lead.id + \"/attach-project\", { ...formData(event.currentTarget), copy_stakeholder: true }); await refresh(); notify(\"Project attached to lead\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"lead-detail\">\n <section className=\"lead-contact-strip\"><div><span>Contact</span><b>{lead.contact_name || \"Not set\"}</b><small>{lead.contact_email || lead.contact_phone || \"No contact details\"}</small></div><div><span>Potential</span><b>{money(lead.expected_budget, lead.currency)}</b><small>{lead.partner_name || \"Direct AFLABS\"}</small></div><div><span>Next action</span><b>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"Not scheduled\"}</b><small>{lead.owner_name || \"No owner\"}</small></div></section>\n {editable && <details className=\"growth-accordion\" open><summary>Lead & requirement details</summary><form className=\"growth-form-grid\" onSubmit={update}>\n <Field label=\"Title\"><input name=\"title\" defaultValue={lead.title} required/></Field>\n <Field label=\"Stage\"><select name=\"stage\" defaultValue={lead.stage}>{[\"new\",\"contacted\",\"qualified\",\"discovery\",\"proposal\",\"negotiation\",\"won\",\"lost\"].map((item) => <option value={item}>{titleCase(item)}</option>)}</select></Field>\n <Field label=\"Priority\"><select name=\"priority\" defaultValue={lead.priority}><option>low</option><option>medium</option><option>high</option><option>urgent</option></select></Field>\n <Field label=\"Budget\"><input name=\"expected_budget\" type=\"number\" defaultValue={lead.expected_budget}/></Field>\n <Field label=\"Next follow-up\"><input name=\"next_follow_up_at\" type=\"datetime-local\" defaultValue={lead.next_follow_up_at?.slice(0,16) || \"\"}/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" defaultValue={lead.partner_id || \"\"}><option value=\"\">Direct AFLABS</option>{detail.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4} defaultValue={lead.pain_points || \"\"}/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={3} defaultValue={lead.inside_info || \"\"}/></Field>\n <Field label=\"Requirements · Markdown\" className=\"growth-span-2\"><textarea name=\"requirements_markdown\" rows={12} defaultValue={lead.requirements_markdown || \"\"} placeholder=\"# Requirements - Current workflow - Constraints - Success metrics\"/></Field>\n <div className=\"growth-span-2\"><Button>Save lead</Button></div>\n </form></details>}\n <div className=\"lead-two-col\">\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Follow-ups & reminders</h3><p>Keep the next commitment visible.</p></div><b>{detail.followups.filter((item: any) => item.status === \"open\").length} open</b></header>\n {editable && <form className=\"followup-form\" onSubmit={addFollowup}><Field label=\"Follow-up note\"><input name=\"note\" required placeholder=\"Call after budget review\"/></Field><Field label=\"Due date and time\"><input name=\"due_at\" type=\"datetime-local\" required/></Field><Button>Schedule follow-up</Button></form>}\n <div className=\"followup-list\">{detail.followups.map((item: any) => <article key={item.id} className={item.overdue ? \"overdue\" : \"\"}><span className=\"followup-status\" aria-hidden=\"true\"/><div><b>{item.note}</b><small><time>{shortDateTime(item.due_at)}</time><em>{titleCase(item.status)}</em></small></div>{editable && item.status === \"open\" && <button type=\"button\" onClick={async () => { await patch(\"/api/lead-followups/\" + item.id, { completed: true }); await refresh(); }}>Mark complete</button>}</article>)}</div>\n </section>\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Connected delivery</h3><p>One lead can create several projects.</p></div><b>{detail.projects.length}</b></header>\n <div className=\"lead-projects\">{detail.projects.map((project: any) => <button onClick={() => onOpenProject(project.id)}><span className={\"project-state state-\" + project.status}/><div><b>{project.title}</b><small>{titleCase(project.status)} · {project.progress}% · {project.end_date ? shortDate(project.end_date) : \"No due date\"}</small></div><em>Open ↗</em></button>)}</div>\n {convertible && <details className=\"growth-accordion\"><summary>Create a project from requirements</summary><form className=\"growth-form-grid\" onSubmit={createProject}>\n <Field label=\"Project title\"><input name=\"title\" required defaultValue={lead.company_name ? lead.company_name + \" solution\" : lead.title}/></Field>\n <Field label=\"Type\"><select name=\"project_type\"><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line description\"><input name=\"description\" defaultValue={lead.pain_points?.split(\"\\n\")[0] || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\"/></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" defaultValue={lead.expected_budget || 0}/></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={lead.currency}><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n <Field label=\"Markdown working notes\" className=\"growth-span-2\"><textarea name=\"markdown_details\" rows={8} defaultValue={lead.requirements_markdown || \"\"}/></Field>\n <div className=\"growth-span-2\"><Button>Create linked project</Button></div>\n </form></details>}\n {editable && <details className=\"growth-accordion\"><summary>Attach an existing project</summary><form className=\"attach-form\" onSubmit={attach}><select name=\"project_id\" required><option value=\"\">Select unattached project</option>{detail.options.projects.filter((project: any) => !project.lead_id).map((project: any) => <option value={project.id}>{project.title}</option>)}</select><Button>Attach & copy stakeholder</Button></form></details>}\n </section>\n </div>\n <section className=\"growth-panel timeline-panel\"><header className=\"growth-section-title\"><div><h3>Complete history</h3><p>What happened, when, and how long the lead waited between events.</p></div></header>\n <div className=\"lead-timeline\">{detail.events.map((event: any) => <article key={event.id}><div className=\"timeline-node\"/><div><header><span>{titleCase(event.event_type)}</span><time>{shortDateTime(event.occurred_at)}</time></header><h4>{event.title}</h4>{event.details && <p>{event.details}</p>}<footer><span>{event.actor_name}</span><b>{event.days_ago === 0 ? \"Today\" : event.days_ago + \" days ago\"}</b>{event.days_since_previous > 0 && <em>+{event.days_since_previous} days since prior event</em>}</footer></div></article>)}</div>\n </section>\n </div>;\n}\n\nfunction ChatWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [activeId, setActiveId] = useState(\"\");\n const [thread, setThread] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [contextType, setContextType] = useState(\"lead\");\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\r\n const [threadFilter, setThreadFilter] = useState(\"all\");\n const [actionBusy, setActionBusy] = useState<\"\" | \"create\" | \"send\">(\"\");\n const load = async () => setData(await api(\"/api/conversations\"));\n const open = async (id: string) => { setActiveId(id); setThread(await api(\"/api/conversations/\" + id + \"/messages\")); await load(); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const contexts = contextType === \"lead\" ? data.options.leads : data.options.projects;\n const filteredContexts = partnerId ? contexts.filter((item: any) => String(item.partner_id || \"\") === partnerId) : contexts;\r\n const visibleThreads = threadFilter === \"all\" ? data.conversations : data.conversations.filter((item: any) => item.context_type === threadFilter);\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"create\");\n try {\n const payload: any = formData(form);\n payload.context_type = contextType;\n payload.partner_id = partnerId;\n const result = await post(\"/api/conversations\", payload);\n form.reset();\n setCreateOpen(false);\n await load();\n await open(result.id);\n notify(\"Conversation thread started\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const send = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"send\");\n try { await post(\"/api/conversations/\" + activeId + \"/messages\", formData(form)); form.reset(); await open(activeId); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page chat-page\"><header className=\"growth-page-head\"><div><h1>Conversations</h1><span>Focused one-to-one threads attached to a lead or project.</span></div><Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"Start conversation\"}</Button></header>\n {createOpen && <section className=\"growth-panel chat-create-panel\"><header className=\"growth-section-title\"><div><h2>Start a conversation</h2><p>Choose one partner, one business context, and a clear subject.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={actionBusy === \"create\"}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select value={partnerId} onChange={(event) => setPartnerId(event.target.value)} required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" && <Field label=\"AFLABS person\"><select name=\"internal_user_id\" required><option value=\"\">Select person</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name} · {titleCase(item.role)}</option>)}</select></Field>}\n <Field label=\"Context type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n <Field label=\"Lead / project\"><select name=\"context_id\" required><option value=\"\">Select context</option>{filteredContexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>\n <Field label=\"Thread subject\"><input name=\"subject\" required placeholder=\"Budget approval questions\"/></Field>\n <Field label=\"Opening message\" className=\"growth-span-2\"><textarea name=\"message\" rows={4} required/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"create\" ? \"Starting conversation…\" : \"Start conversation\"}</Button></div>\n </form></section>}\n <div className=\"chat-layout\"><aside className=\"thread-list\"><header className=\"thread-list-head\"><div><h2>Threads</h2><p>{visibleThreads.length} of {data.conversations.length}</p></div><div className=\"thread-context-filter\" role=\"group\" aria-label=\"Filter conversations by context\">{[[\"all\",\"All\"],[\"lead\",\"Leads\"],[\"project\",\"Projects\"]].map(([value,label]) => <button type=\"button\" key={value} className={threadFilter === value ? \"active\" : \"\"} aria-pressed={threadFilter === value} onClick={() => setThreadFilter(value)}>{label}</button>)}</div></header>{visibleThreads.map((item: any) => <button key={item.id} className={(activeId === item.id ? \"active \" : \"\") + (item.unread ? \"unread\" : \"\")} onClick={() => open(item.id)}><span>{titleCase(item.context_type)} · {item.context_title}</span><h3>{item.subject}</h3><p>{actor.actorType === \"partner\" ? item.internal_name : item.partner_name}{item.last_message ? \" · \" + item.last_message.slice(0, 72) : \"\"}</p><small>{item.updated_at ? shortDateTime(item.updated_at) : \"\"}</small>{item.unread && <i aria-label=\"Unread\"/>}</button>)}{!visibleThreads.length && <Empty title={threadFilter === \"all\" ? \"No conversations yet\" : \"No \" + threadFilter + \" threads\"} text={threadFilter === \"all\" ? \"Start a focused thread for a lead or project.\" : \"Choose another filter or start a conversation for this context.\"}/>}</aside>\n <section className=\"chat-thread\">{!thread ? <Empty title=\"Select a conversation\" text=\"Choose a thread from the list to see its full context and replies.\"/> : <><header><div><span>{titleCase(thread.conversation.context_type)} conversation</span><h2>{thread.conversation.subject}</h2><p>{thread.conversation.context_title || \"Scoped business context\"}</p></div><b>Private · 1 to 1</b></header><div className=\"message-list\">{thread.messages.map((message: any) => <article key={message.id} className={message.sender_type === actor.actorType && message.sender_id === actor.actorId ? \"mine\" : \"\"}><div><b>{message.sender_name}</b><time>{shortDateTime(message.created_at)}</time></div><p>{message.body}</p></article>)}</div><form className=\"message-form\" onSubmit={send} aria-busy={actionBusy === \"send\"}><label><span>Reply</span><textarea name=\"body\" rows={3} required placeholder=\"Write a focused reply…\"/></label><Button disabled={Boolean(actionBusy)}>{actionBusy === \"send\" ? \"Sending…\" : \"Send reply\"}</Button></form></>}</section>\n </div>\n </div>;\n}\n\nfunction MeetingWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [slot, setSlot] = useState(\"\");\n const [contextType, setContextType] = useState(\"other\");\n const load = async () => setData(await api(\"/api/meetings\"));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const createSlot = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/admin/meeting-slots\", formData(form)); form.reset(); await load(); notify(\"Availability updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const book = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload: any = formData(form);\n if (slot) [payload.starts_at, payload.ends_at] = slot.split(\"|\");\n payload.context_type = contextType;\n await post(\"/api/meetings\", payload);\n form.reset();\n setSlot(\"\");\n await load();\n notify(\"Meeting booked\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const available = data.slots.filter((item: any) => item.slot_type === \"available\");\n const contexts = contextType === \"lead\" ? data.options.leads : contextType === \"project\" ? data.options.projects : [];\n return <div className=\"growth-page\"><header className=\"growth-page-head\"><div><h1>Meeting booking</h1><span>Book within shared availability without collisions or exceeding the monthly allowance.</span></div>{actor.actorType === \"partner\" && data.target?.target && <div className=\"meeting-quota\"><b>{data.target.achieved.meetings} / {data.target.target.meetings_allowed}</b><span>meetings used this month</span></div>}</header>\n {actor.role === \"admin\" && <section className=\"growth-panel availability-manager\"><header className=\"growth-section-title\"><div><h2>Manage meeting time</h2><p>Publish bookable hours or block time that must stay unavailable.</p></div></header><div className=\"availability-mode\" role=\"group\" aria-label=\"Availability type\"><button type=\"button\" className={slotType === \"available\" ? \"active\" : \"\"} aria-pressed={slotType === \"available\"} onClick={() => setSlotType(\"available\")}><b>Make available</b><span>Partners can book this window</span></button><button type=\"button\" className={slotType === \"blocked\" ? \"active blocked\" : \"\"} aria-pressed={slotType === \"blocked\"} onClick={() => setSlotType(\"blocked\")}><b>Block time</b><span>Prevent bookings in this window</span></button></div><form className=\"availability-form\" onSubmit={createSlot}><input type=\"hidden\" name=\"slot_type\" value={slotType}/><Field label=\"Starts\"><input name=\"starts_at\" type=\"datetime-local\" required/></Field><Field label=\"Ends\"><input name=\"ends_at\" type=\"datetime-local\" required/></Field><Field label={slotType === \"blocked\" ? \"Reason (optional)\" : \"Label (optional)\"}><input name=\"note\" placeholder={slotType === \"blocked\" ? \"Travel, internal meeting…\" : \"Office hours, discovery calls…\"}/></Field><Button>{slotType === \"blocked\" ? \"Block this time\" : \"Publish availability\"}</Button></form><div className=\"availability-list\"><header><h3>Scheduled windows</h3><span>{data.slots.length} total</span></header>{data.slots.map((item: any) => <article key={item.id} className={item.slot_type}><div><b>{titleCase(item.slot_type)}</b><time>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}</time>{item.note && <small>{item.note}</small>}</div><button type=\"button\" aria-label={\"Remove \" + item.slot_type + \" window\"} onClick={async () => { await remove(\"/api/admin/meeting-slots/\" + item.id); await load(); }}>Remove</button></article>)}</div></section>}\n <div className=\"meeting-layout\"><section className=\"growth-panel\"><h2>{actor.actorType === \"partner\" ? \"Book an eligible time\" : \"Book for a partner\"}</h2><form className=\"growth-form-grid\" onSubmit={book}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" ? <Field label=\"Available time\"><select value={slot} onChange={(event) => setSlot(event.target.value)} required><option value=\"\">Select a slot</option>{available.map((item: any) => <option value={item.starts_at + \"|\" + item.ends_at}>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}</option>)}</select></Field> : <><Field label=\"Starts\"><input name=\"starts_at\" type=\"datetime-local\" required/></Field><Field label=\"Ends\"><input name=\"ends_at\" type=\"datetime-local\" required/></Field></>}\n <Field label=\"Agenda type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"other\">Other agenda</option><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n {contextType !== \"other\" && <Field label={titleCase(contextType)}><select name=\"context_id\" required><option value=\"\">Select {contextType}</option>{contexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>}\n <Field label=\"Agenda\" className=\"growth-span-2\"><textarea name=\"agenda\" required rows={3}/></Field>\n <Field label=\"Meet / Zoom / Teams link\"><input name=\"join_url\" type=\"url\" placeholder=\"https://…\"/></Field>\n <Field label=\"Place\"><input name=\"place\" placeholder=\"Office, client site…\"/></Field>\n <div className=\"growth-span-2\"><Button>Book meeting</Button></div>\n </form></section>\n <section className=\"growth-panel\"><h2>Upcoming bookings</h2><div className=\"booking-list\">{data.meetings.map((meeting: any) => <article><header><span>{titleCase(meeting.status)}</span><time>{shortDateTime(meeting.starts_at)}</time></header><h3>{meeting.agenda}</h3><p>{meeting.partner_name}{meeting.internal_name ? \" ↔ \" + meeting.internal_name : \"\"}</p><footer>{meeting.join_url ? <a href={meeting.join_url} target=\"_blank\">Join online ↗</a> : <span>{meeting.place || \"Location pending\"}</span>}{actor.role === \"admin\" && <select value={meeting.status} onChange={async (event) => { await patch(\"/api/meetings/\" + meeting.id, { status: event.target.value }); await load(); }}><option>booked</option><option>confirmed</option><option>completed</option><option>cancelled</option></select>}</footer></article>)}</div>{!data.meetings.length && <Empty title=\"No upcoming meetings\" text=\"Available windows remain open until a partner books them.\"/>}</section></div>\n </div>;\n}\n\nfunction MouWorkspace({ actor, notify }: any) {\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\n const [data, setData] = useState<any>(null);\n const [actionBusy, setActionBusy] = useState(\"\");\n const load = async (id = partnerId) => setData(await api(\"/api/mou\" + (id ? \"?partner_id=\" + encodeURIComponent(id) : \"\")));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, [partnerId]);\n if (!data) return <Loading/>;\n const assign = async (event: any) => {\n event.preventDefault();\n setActionBusy(\"mou\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/mou\", formData(event.currentTarget)); await load(); notify(\"Partner MoU published\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const target = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"target\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/targets\", formData(form)); form.reset(); await load(); notify(\"New target version saved\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const template = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"template\");\n try { await post(\"/api/admin/mou-templates\", formData(form)); form.reset(); await load(); notify(\"MoU template created\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page mou-page\"><header className=\"growth-page-head\"><div><h1>MoU & targets</h1><span>Published terms, monthly commitments, achievement, and version history in one record.</span></div>{actor.role === \"admin\" && <label className=\"partner-picker-field\"><span>Partner</span><select className=\"partner-picker\" value={partnerId} onChange={(event) => setPartnerId(event.target.value)}><option value=\"\">Select partner</option>{data.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}</header>\n {!partnerId ? <Empty title=\"Choose a partner\" text=\"Select a partner to publish their agreement and monthly targets.\"/> : <>\n {data.mou ? <article className=\"mou-document\"><header><div><span>Memorandum of Understanding</span><h2>{data.partner?.name}</h2><p>AFLABS partnership agreement</p></div><b>Effective {shortDate(data.mou.effective_from)}</b></header><section><h3>Partner commitments</h3><MarkdownBlock value={data.mou.terms_markdown}/></section><section><h3>What AFLABS provides</h3><MarkdownBlock value={data.mou.benefits_markdown}/></section></article> : <Empty title=\"MoU not published\" text={actor.role === \"admin\" ? \"Use the form below to publish the first agreement.\" : \"Your administrator has not published an agreement yet.\"}/>}\n {data.snapshot?.target && <section className=\"growth-panel target-board\"><header className=\"growth-section-title\"><div><h2>{data.snapshot.month} targets</h2><p>Live achievement against the latest target version.</p></div></header><div className=\"target-grid\"><Progress label=\"Leads\" value={data.snapshot.achieved.leads} total={data.snapshot.target.leads_target}/><Progress label=\"Expected Project Conversions\" value={data.snapshot.achieved.projects} total={data.snapshot.target.projects_target}/><Progress label={\"Revenue · \" + data.snapshot.target.revenue_currency} value={data.snapshot.achieved.revenue} total={data.snapshot.target.revenue_target}/><Progress label=\"Meeting allowance\" value={data.snapshot.achieved.meetings} total={data.snapshot.target.meetings_allowed}/></div></section>}\n {actor.role === \"admin\" && <div className=\"mou-admin-grid\"><section className=\"growth-panel\"><h2>Publish agreement</h2><form className=\"growth-stack\" onSubmit={assign} aria-busy={actionBusy === \"mou\"}><Field label=\"Use template\"><select name=\"template_id\"><option value=\"\">Write custom terms</option>{data.templates.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field><Field label=\"Effective from\"><input name=\"effective_from\" type=\"date\" required/></Field><Field label=\"Partner commitments · Markdown\"><textarea name=\"terms_markdown\" rows={10}/></Field><Field label=\"AFLABS commitments · Markdown\"><textarea name=\"benefits_markdown\" rows={7}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"mou\" ? \"Publishing…\" : \"Publish new MoU version\"}</Button></form></section>\n <section className=\"growth-panel\"><h2>Set monthly targets</h2><form className=\"growth-form-grid\" onSubmit={target} aria-busy={actionBusy === \"target\"}><Field label=\"Month\"><input name=\"target_month\" type=\"month\" required/></Field><Field label=\"Lead target\"><input name=\"leads_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Expected Project Conversions\"><input name=\"projects_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Revenue target\"><input name=\"revenue_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Currency\"><select name=\"revenue_currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field><Field label=\"Meetings allowed\"><input name=\"meetings_allowed\" type=\"number\" min=\"0\" required/></Field><Field label=\"Note\" className=\"growth-span-2\"><textarea name=\"note\" rows={3}/></Field><div className=\"growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"target\" ? \"Saving target…\" : \"Save as new target version\"}</Button></div></form></section>\n <section className=\"growth-panel\"><h2>Create MoU template</h2><form className=\"growth-stack\" onSubmit={template} aria-busy={actionBusy === \"template\"}><Field label=\"Template name\"><input name=\"name\" required/></Field><Field label=\"Terms · Markdown\"><textarea name=\"terms_markdown\" rows={8} required/></Field><Field label=\"Benefits · Markdown\"><textarea name=\"benefits_markdown\" rows={6}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"template\" ? \"Saving template…\" : \"Save template\"}</Button></form></section></div>}\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h2>Target history</h2><p>Every adjustment remains visible; newer rows do not overwrite older commitments.</p></div></header><div className=\"target-history\">{data.targets.map((item: any) => <article><span>{item.target_month}</span><b>{item.leads_target} leads · {item.projects_target} projects</b><p>{money(item.revenue_target, item.revenue_currency)} · {item.meetings_allowed} meetings</p><small>Set {shortDateTime(item.created_at)}{item.note ? \" · \" + item.note : \"\"}</small></article>)}</div></section>\n </>}\n </div>;\n}\n\nfunction IdeaWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [busy, setBusy] = useState(false);\n const [openId, setOpenId] = useState(\"\");\n const [prompts, setPrompts] = useState<any>(null);\n const load = async () => {\n setData(await api(\"/api/business-ideas\"));\n if (actor.role === \"admin\") setPrompts(await api(\"/api/admin/ai-prompts\"));\n };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const generate = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setBusy(true);\n try {\n const result = await post(\"/api/business-ideas\", formData(form));\n form.reset();\n await load();\n setOpenId(result.id);\n notify(\"Business idea pitch generated\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n const savePrompts = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/admin/ai-prompts\", formData(event.currentTarget)); await load(); notify(\"AI prompts updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"growth-page idea-page\"><header className=\"growth-page-head\"><div><h1>Business idea pitch</h1><span>Turn grounded discovery into a practical, ROI-focused software or automation opportunity.</span></div></header>\n <div className=\"idea-layout\"><section className=\"growth-panel idea-builder\"><header className=\"growth-section-title\"><div><h2>Discovery brief</h2><p>Specific business context produces a stronger, more credible pitch.</p></div></header><form className=\"growth-form-grid\" onSubmit={generate}>\n <Field label=\"Customer / brand\"><input name=\"customer_name\" required placeholder=\"Acme Retail\"/></Field>\n <Field label=\"Pitch title\"><input name=\"title\" placeholder=\"Optional\"/></Field>\n <Field label=\"Category\"><input name=\"category\" required placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" required placeholder=\"D2C, B2B distribution, services…\"/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Budget\"><div className=\"budget-input\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select><input name=\"budget\" type=\"number\" min=\"0\" placeholder=\"Possible range anchor\"/></div></Field>\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" required rows={5} placeholder=\"Where time, revenue, customer experience, or control is being lost…\"/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={4} placeholder=\"Current systems, team behavior, constraints, politics, seasonal patterns…\"/></Field>\n <Field label=\"Possible business use case\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" required rows={5} placeholder=\"Your hunch about software, AI, Voice AI, WhatsApp, automation, or a custom workflow…\"/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={busy}>{busy ? \"Building the pitch…\" : \"Generate pitch\"}</Button></div>\n </form></section>\n <section className=\"growth-panel idea-list\"><header className=\"growth-section-title\"><div><h2>Generated pitches</h2><p>{data.ideas.length} saved idea{data.ideas.length === 1 ? \"\" : \"s\"}</p></div></header>{data.ideas.map((idea: any) => <article className=\"idea-card\" key={idea.id}><button onClick={() => setOpenId(idea.id)}><div><span>{idea.partner_name || \"Direct AFLABS\"}</span><h3>{idea.title}</h3><small>{shortDateTime(idea.created_at)}</small></div><b>View pitch</b></button></article>)}{!data.ideas.length && <Empty title=\"No ideas yet\" text=\"Complete the discovery form to create the first pitch.\"/></section></div>\n <GrowthDialog open={Boolean(openId)} label={data.ideas.find((idea: any) => idea.id === openId)?.title || \"Generated business pitch\"} close={() => setOpenId(\"\")}><article className=\"idea-dialog\">{(() => { const idea = data.ideas.find((item: any) => item.id === openId); return idea ? <><header><div><span>{idea.partner_name || \"Direct AFLABS\"}</span><h2>{idea.title}</h2><p>Generated {shortDateTime(idea.created_at)}</p></div><button type=\"button\" onClick={() => setOpenId(\"\")}>Close</button></header><div className=\"idea-dialog-content\"><MarkdownBlock value={idea.generated_markdown}/></div><footer>{idea.proposal_id ? <span>Proposal draft created</span> : <Button onClick={async () => { await post(\"/api/business-ideas/\" + idea.id + \"/proposal\", {}); await load(); notify(\"Proposal generated and saved\"); }}>Turn into proposal</Button>}</footer></> : <Loading/>; })()}</article></GrowthDialog>\r\n {actor.role === \"admin\" && prompts && <details className=\"growth-panel prompt-settings\"><summary><span><b>AI prompt settings</b><small>Admin only · stored in application settings</small></span><em>Configure</em></summary><form className=\"growth-form-grid\" onSubmit={savePrompts}><Field label=\"Business pitch system prompt\" className=\"growth-span-2\"><textarea name=\"business_pitch_prompt\" rows={12} defaultValue={prompts.business_pitch_prompt}/></Field><Field label=\"Proposal generator system prompt\" className=\"growth-span-2\"><textarea name=\"proposal_prompt\" rows={12} defaultValue={prompts.proposal_prompt}/></Field><div className=\"growth-span-2\"><Button>Save AI prompts</Button></div></form></details>}\n </div>;\n}\n\nexport function GrowthSuite({ section, actor, notify, onOpenProject }: any) {\n if (section === \"leads\") return <LeadWorkspace actor={actor} notify={notify} onOpenProject={onOpenProject}/>;\n if (section === \"conversations\") return <ChatWorkspace actor={actor} notify={notify}/>;\n if (section === \"meetings\") return <MeetingWorkspace actor={actor} notify={notify}/>;\n if (section === \"mou\") return <MouWorkspace actor={actor} notify={notify}/>;\n if (section === \"ideas\") return <IdeaWorkspace actor={actor} notify={notify}/>;\n return null;\n}\n\r\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.7\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.2.4\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n};\n\nasync function api(path: string, options: RequestInit = {}) {\n const headers = { ...(options.body ? { \"Content-Type\": \"application/json\" } : {}), ...(options.headers || {}) };\n const response = await fetch(path, { ...options, headers, cache: \"no-store\" });\n const type = response.headers.get(\"content-type\") || \"\";\n const data = type.includes(\"application/json\") ? await response.json() : await response.text();\n if (!response.ok) throw new Error(data?.error || data || \"Request failed\");\n return data;\n}\nconst post = (path: string, data: any) => api(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any) => api(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string) => api(path, { method: \"DELETE\" });\nconst formData = (form: HTMLFormElement) => Object.fromEntries(new FormData(form));\nconst titleCase = (value: unknown) => String(value || \"\").replaceAll(\"-\", \" \").replace(/\\b\\w/g, (letter) => letter.toUpperCase());\nconst shortDate = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(value)) : \"Not set\";\nconst shortDateTime = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", hour: \"numeric\", minute: \"2-digit\" }).format(new Date(value)) : \"Not set\";\nconst money = (value: unknown, currency = \"INR\") => new Intl.NumberFormat(\"en-IN\", { style: \"currency\", currency, maximumFractionDigits: 2 }).format(Number(value) || 0);\nconst pct = (value: number, total: number) => total > 0 ? Math.min(100, Math.round(value / total * 100)) : 0;\n\nfunction Field({ label, hint, children, className = \"\" }: any) {\n return <label className={\"growth-field \" + className}><span>{label}</span>{children}{hint && <small>{hint}</small>}</label>;\n}\nfunction Button({ children, variant = \"\", className = \"\", ...props }: any) {\n return <button {...props} className={\"growth-button \" + (variant ? \"growth-button-\" + variant + \" \" : \"\") + className}>{children}</button>;\n}\nfunction Empty({ title, text }: any) {\n return <div className=\"growth-empty\"><h3>{title}</h3><p>{text}</p></div>;\n}\nfunction Loading() {\n return <div className=\"growth-loading\" role=\"status\" aria-live=\"polite\"><span className=\"growth-visually-hidden\">Loading content</span><i/><i/><i/></div>;\n}\nfunction GrowthDialog({ open, close, label, children }: any) {\n const ref = useRef<HTMLDialogElement>(null);\n useEffect(() => {\n const node = ref.current;\n if (!node) return;\n if (open && !node.open) node.showModal();\n if (!open && node.open) node.close();\n }, [open]);\n return <dialog ref={ref} className=\"growth-dialog\" aria-label={label} onCancel={(event) => { event.preventDefault(); close(); }} onClick={(event) => { if (event.target === ref.current) close(); }}>{children}</dialog>;\n}\nfunction Progress({ value, total, label }: any) {\n const percent = pct(Number(value), Number(total));\n return <div className=\"target-progress\"><div><span>{label}</span><b>{value} / {total}</b></div><div><i style={{ width: percent + \"%\" }}/></div><small>{percent}% achieved</small></div>;\n}\n\nexport function MarkdownBlock({ value, empty = \"No detailed notes yet.\" }: { value?: string; empty?: string }) {\n const html = useMemo(() => DOMPurify.sanitize(String(marked.parse(value || \"\", { async: false }))), [value]);\n if (!value) return <p className=\"growth-muted\">{empty}</p>;\n return <div className=\"markdown-block\" dangerouslySetInnerHTML={{ __html: html }}/>;\n}\n\nexport function CommercialPreview({ partnerId, regularCost, partnerCost, currency, taxRate, taxInclusive }: any) {\n const regular = Math.max(0, Number(regularCost) || 0);\n const managed = partnerId ? Math.max(0, Number(partnerCost) || 0) : regular;\n const rate = Math.max(0, Number(taxRate) || 0);\n const tax = taxInclusive ? managed - managed / (1 + rate / 100 || 1) : managed * rate / 100;\n const clientTotal = taxInclusive ? managed : managed + tax;\n const partnerMargin = partnerId ? Math.max(0, managed - regular) : 0;\n return <section className=\"commercial-preview\">\n <header><span>Commercial preview</span><b>{money(clientTotal, currency)}</b></header>\n <div><span>Regular delivery cost</span><b>{money(regular, currency)}</b></div>\n {partnerId && <div><span>Partner-managed client cost</span><b>{money(managed, currency)}</b></div>}\n {partnerId && <div><span>Partner commercial spread</span><b>{money(partnerMargin, currency)}</b></div>}\n <div><span>{taxInclusive ? \"Tax included in cost\" : \"Tax added\"} · {rate}%</span><b>{money(tax, currency)}</b></div>\n <footer><span>Client invoice total</span><strong>{money(clientTotal, currency)}</strong></footer>\n </section>;\n}\n\nexport function InvoiceComposer({ project, detail, onDone, notify }: any) {\n const [items, setItems] = useState([{ description: \"\", quantity: 1, unit_price: 0 }]);\n const [discount, setDiscount] = useState(0);\n const [arrears, setArrears] = useState(0);\n const [taxRate, setTaxRate] = useState(Number(project.tax_rate) || 0);\n const [busy, setBusy] = useState(false);\n const subtotal = items.reduce((sum, item) => sum + (Number(item.quantity) || 0) * (Number(item.unit_price) || 0), 0);\n const taxable = Math.max(0, subtotal - discount + arrears);\n const tax = taxable * taxRate / 100;\n const total = taxable + tax;\n const update = (index: number, key: string, value: any) => setItems((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [key]: value } : item));\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n const data: any = formData(event.currentTarget);\n data.milestone_ids = new FormData(event.currentTarget).getAll(\"milestone_ids\");\n data.items = items;\n data.discount = discount;\n data.arrears = arrears;\n data.tax_rate = taxRate;\n await post(\"/api/projects/\" + project.id + \"/invoices\", data);\n notify(\"Itemized invoice created\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return <form className=\"invoice-composer\" onSubmit={submit}>\n <header className=\"invoice-composer-head\">\n <div><h3>Create invoice</h3><p>Build a clear, itemized document for {project.title}.</p></div>\n <span>{project.currency}</span>\n </header>\n <section className=\"invoice-line-section\">\n <div className=\"invoice-section-head\"><div><h4>Line items</h4><p>Add each deliverable or charge separately.</p></div><Button type=\"button\" variant=\"secondary\" onClick={() => setItems((current) => [...current, { description: \"\", quantity: 1, unit_price: 0 }])}>Add line item</Button></div>\n <div className=\"invoice-item-head\" aria-hidden=\"true\"><span>Description</span><span>Qty</span><span>Unit price</span><span>Amount</span><span/></div>\n <div className=\"invoice-items\">{items.map((item, index) => <div className=\"invoice-item\" key={index}>\n <label><span>Description</span><input aria-label={\"Item \" + (index + 1) + \" description\"} placeholder=\"Discovery workshop\" value={item.description} onChange={(event) => update(index, \"description\", event.target.value)} required/></label>\n <label><span>Quantity</span><input aria-label={\"Item \" + (index + 1) + \" quantity\"} type=\"number\" min=\"0.01\" step=\"0.01\" value={item.quantity} onChange={(event) => update(index, \"quantity\", event.target.value)} required/></label>\n <label><span>Unit price</span><input aria-label={\"Item \" + (index + 1) + \" unit price\"} type=\"number\" min=\"0\" step=\"0.01\" value={item.unit_price} onChange={(event) => update(index, \"unit_price\", event.target.value)} required/></label>\n <b>{money(Number(item.quantity) * Number(item.unit_price), project.currency)}</b>\n {items.length > 1 ? <button type=\"button\" className=\"growth-icon-danger\" aria-label={\"Remove item \" + (index + 1)} onClick={() => setItems((current) => current.filter((_, itemIndex) => itemIndex !== index))}>Remove</button> : <span/>}\n </div>)}</div>\n </section>\n <section className=\"invoice-settings\">\n <header><h4>Invoice details</h4><p>Set timing, adjustments, and tax treatment.</p></header>\n <div className=\"growth-form-grid\">\n <Field label=\"Invoice type\"><select name=\"invoice_type\"><option value=\"milestone\">Milestone payment</option><option value=\"final\">Final invoice</option><option value=\"custom\">Custom</option></select></Field>\n <Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field>\n <Field label=\"Discount\"><input type=\"number\" min=\"0\" step=\"0.01\" value={discount} onChange={(event) => setDiscount(Number(event.target.value))}/></Field>\n <Field label=\"Arrears / prior balance\"><input type=\"number\" min=\"0\" step=\"0.01\" value={arrears} onChange={(event) => setArrears(Number(event.target.value))}/></Field>\n <Field label=\"Tax label\"><input name=\"tax_label\" defaultValue={project.tax_label || \"GST\"}/></Field>\n <Field label=\"Tax rate (%)\"><input type=\"number\" min=\"0\" step=\"0.01\" value={taxRate} onChange={(event) => setTaxRate(Number(event.target.value))}/></Field>\n </div>\n </section>\n {detail.milestones?.length > 0 && <fieldset className=\"invoice-milestones\"><legend>Covered milestones</legend><div>{detail.milestones.map((milestone: any) => <label className=\"growth-check\" key={milestone.id}><input type=\"checkbox\" name=\"milestone_ids\" value={milestone.id}/><span>{milestone.title}</span></label>)}</div></fieldset>}\n <Field label=\"Invoice notes\" hint=\"Optional payment terms, references, or delivery context.\"><textarea name=\"notes\" rows={3} placeholder=\"Payment due within 14 days.\"/></Field>\n <footer className=\"invoice-composer-footer\">\n <div className=\"invoice-totals\"><div><span>Subtotal</span><b>{money(subtotal, project.currency)}</b></div><div><span>Discount</span><b>− {money(discount, project.currency)}</b></div><div><span>Arrears</span><b>+ {money(arrears, project.currency)}</b></div><div><span>Tax</span><b>+ {money(tax, project.currency)}</b></div><div className=\"total\"><span>Total</span><strong>{money(total, project.currency)}</strong></div></div>\n <Button disabled={busy || !items.some((item) => item.description && Number(item.quantity) > 0)}>{busy ? \"Creating invoice…\" : \"Create invoice PDF\"}</Button>\n </footer>\n </form>;\n}\n\nexport function PartnerProjectEditor({ project, onDone, notify }: any) {\n const [busy, setBusy] = useState(false);\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n await patch(\"/api/projects/\" + project.id, formData(event.currentTarget));\n notify(\"Project details updated\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return <form className=\"growth-partner-editor\" onSubmit={submit}>\n <header><div><h3>Edit project details</h3><p>Update the delivery summary and working notes your AFLABS team will use.</p></div><span>Partner access</span></header>\n <div className=\"growth-form-grid\">\n <Field label=\"Project title\"><input name=\"title\" defaultValue={project.title} required/></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={project.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line summary\" className=\"growth-span-2\" hint=\"Keep this concise; use the notes field for full context.\"><input name=\"description\" defaultValue={project.description || \"\"} maxLength={240}/></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={project.start_date || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\" defaultValue={project.end_date || \"\"}/></Field>\n <Field label=\"Project email\" className=\"growth-span-2\"><input name=\"contact_email\" type=\"email\" defaultValue={project.contact_email || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"growth-span-2 project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, and code.\"><textarea name=\"markdown_details\" rows={12} defaultValue={project.markdown_details || \"\"} placeholder={\"# Context\\n\\n## Requirements\\n- Add working notes here\"}/></Field>\n </div>\n <footer><Button disabled={busy}>{busy ? \"Saving changes…\" : \"Save project details\"}</Button></footer>\n </form>;\n}\n\nexport function GrowthDashboard({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { api(\"/api/growth/dashboard\").then(setData).catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n return <section className=\"growth-dashboard\">\n <div className=\"growth-metrics\">\n <article><span>Open pipeline</span><b>{money(data.pipeline_value, data.pipeline_currency)}</b><small>{data.leads_total} leads · {data.conversion_rate}% converted</small></article>\n <article className={data.overdue_projects ? \"risk\" : \"\"}><span>Delivery health</span><b>{data.active_projects}</b><small>{data.overdue_projects} overdue projects</small></article>\n <article><span>Upcoming meetings</span><b>{data.upcoming_meetings}</b><small>Booked or confirmed</small></article>\n <article className={data.unread_conversations ? \"attention\" : \"\"}><span>Unread threads</span><b>{data.unread_conversations}</b><small>Scoped partner conversations</small></article>\n </div>\n {actor.actorType === \"partner\" && data.target?.target && <div className=\"partner-target-strip\">\n <header><div><span>Monthly trajectory</span><h3>{data.target.month}</h3></div><small>Stay ahead of the gap before month-end.</small></header>\n <Progress label=\"Leads\" value={data.target.achieved.leads} total={data.target.target.leads_target}/>\n <Progress label=\"Projects\" value={data.target.achieved.projects} total={data.target.target.projects_target}/>\n <Progress label={\"Revenue · \" + data.target.target.revenue_currency} value={data.target.achieved.revenue} total={data.target.target.revenue_target}/>\n <Progress label=\"Meetings used\" value={data.target.achieved.meetings} total={data.target.target.meetings_allowed}/>\n </div>}\n </section>;\n}\n\nfunction LeadWorkspace({ actor, notify, onOpenProject }: any) {\n const [data, setData] = useState<any>(null);\n const [selectedId, setSelectedId] = useState(\"\");\n const [detail, setDetail] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [stage, setStage] = useState(\"\");\n const [partner, setPartner] = useState(\"\");\n const [due, setDue] = useState(\"\");\n const [creating, setCreating] = useState(false);\n const load = async () => setData(await api(\"/api/leads\"));\n const loadDetail = async (id: string) => { setSelectedId(id); setDetail(await api(\"/api/leads/\" + id)); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const visible = data.leads.filter((lead: any) => {\n const haystack = [lead.title, lead.company_name, lead.contact_name, lead.category, lead.partner_name].join(\" \").toLowerCase();\n if (search && !haystack.includes(search.toLowerCase())) return false;\n if (stage && lead.stage !== stage) return false;\n if (partner && String(lead.partner_id || \"\") !== partner) return false;\n if (due === \"overdue\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now())) return false;\n if (due === \"upcoming\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) >= Date.now())) return false;\n if (due === \"none\" && lead.next_follow_up_at) return false;\n return true;\n });\n const activeFilterCount = [search, stage, partner, due].filter(Boolean).length;\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setCreating(true);\n try {\n const result = await post(\"/api/leads\", formData(form));\n form.reset();\n setCreateOpen(false);\n await load();\n await loadDetail(result.id);\n notify(\"Lead created\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setCreating(false); }\n };\n const refreshDetail = async () => { await load(); if (selectedId) await loadDetail(selectedId); };\n return <div className=\"growth-page\">\n <header className=\"growth-page-head\"><div><h1>Leads</h1><span>Qualify opportunities, preserve every interaction, and move requirements into delivery.</span></div>{(actor.actorType === \"internal\" || actor.permissions.create_leads) && <Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"New lead\"}</Button>}</header>\n {createOpen && <section className=\"growth-panel lead-create\"><header className=\"growth-section-title\"><div><h2>Create lead</h2><p>Capture the commercial context now; refine requirements as discovery progresses.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={creating}>\n <Field label=\"Lead title\"><input name=\"title\" required placeholder=\"Retail automation opportunity\"/></Field>\n <Field label=\"Customer / brand\"><input name=\"company_name\" required/></Field>\n <Field label=\"Contact name\"><input name=\"contact_name\"/></Field>\n <Field label=\"Contact email\"><input name=\"contact_email\" type=\"email\"/></Field>\n <Field label=\"Contact phone\"><input name=\"contact_phone\"/></Field>\n <Field label=\"Source\"><input name=\"source\" placeholder=\"Referral, event, inbound…\"/></Field>\n <Field label=\"Category\"><input name=\"category\" placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" placeholder=\"B2B, D2C, services…\"/></Field>\n <Field label=\"Expected budget\"><input name=\"expected_budget\" type=\"number\" min=\"0\"/></Field>\n <Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"internal\" && <Field label=\"Owner\"><select name=\"owner_user_id\"><option value=\"\">Me / default</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4}/></Field>\n <Field label=\"Initial use-case hint\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" rows={3}/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={creating}>{creating ? \"Creating lead…\" : \"Create lead\"}</Button></div>\n </form></section>}\n <section className=\"pipeline-eagle\">\n <header><div><h2>Pipeline overview</h2><p>Stage distribution and connected delivery health at a glance.</p></div><b>{data.leads.length} leads</b></header>\n <div className=\"pipeline-track\">{data.stage_order.map((name: string) => <div className={\"pipeline-stage stage-\" + name} key={name}><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b><i/></div>)}</div>\n <div className=\"pipeline-columns\">{data.stage_order.map((name: string) => <section key={name}><header><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b></header>{data.leads.filter((lead: any) => lead.stage === name).slice(0, 5).map((lead: any) => <button key={lead.id} onClick={() => loadDetail(lead.id)}><strong>{lead.company_name || lead.title}</strong><small>{money(lead.expected_budget, lead.currency)} · {lead.project_count} project{Number(lead.project_count) === 1 ? \"\" : \"s\"}</small></button>)}</section>)}</div>\n </section>\n <section className=\"lead-filter-panel\">\n <header><div><h2>Lead directory</h2><p>{visible.length} of {data.leads.length} leads shown</p></div>{activeFilterCount > 0 && <button type=\"button\" onClick={() => { setSearch(\"\"); setStage(\"\"); setPartner(\"\"); setDue(\"\"); }}>Clear filters</button>}</header>\n <div className=\"growth-filters\">\n <label className=\"growth-filter-search\"><span>Search</span><input aria-label=\"Search leads\" value={search} onChange={(event) => setSearch(event.target.value)} placeholder=\"Company, contact, or category\"/></label>\n <label><span>Stage</span><select aria-label=\"Filter leads by stage\" value={stage} onChange={(event) => setStage(event.target.value)}><option value=\"\">All stages</option>{data.stage_order.map((item: string) => <option key={item} value={item}>{titleCase(item)}</option>)}</select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter leads by partner\" value={partner} onChange={(event) => setPartner(event.target.value)}><option value=\"\">All partners</option>{data.options.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}\n <label><span>Follow-up</span><select aria-label=\"Filter leads by follow-up\" value={due} onChange={(event) => setDue(event.target.value)}><option value=\"\">Any follow-up</option><option value=\"overdue\">Overdue</option><option value=\"upcoming\">Upcoming</option><option value=\"none\">Not scheduled</option></select></label>\n </div>\n </section>\n <div className=\"lead-grid\">{visible.map((lead: any) => <button className=\"lead-card\" key={lead.id} onClick={() => loadDetail(lead.id)}>\n <header><span className={\"lead-priority priority-\" + lead.priority}>{lead.priority}</span><em>{titleCase(lead.stage)}</em></header>\n <h3>{lead.company_name || lead.title}</h3><p>{lead.title}</p>\n <dl><div><dt>Potential</dt><dd>{money(lead.expected_budget, lead.currency)}</dd></div><div><dt>Projects</dt><dd>{lead.project_count}</dd></div></dl>\n <footer><span>{lead.partner_name || \"Direct AFLABS\"}</span><b className={lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now() ? \"overdue\" : \"\"}>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"No follow-up\"}</b></footer>\n </button>)}</div>\n {!visible.length && <Empty title=\"No leads match\" text=\"Change the filters or capture a new lead.\"/>}\n <GrowthDialog open={Boolean(selectedId)} label={detail ? \"Lead details for \" + (detail.lead.company_name || detail.lead.title) : \"Loading lead details\"} close={() => { setSelectedId(\"\"); setDetail(null); }}><article className=\"lead-dialog-shell\">\n <header className=\"growth-drawer-head\"><div><span>{detail ? titleCase(detail.lead.stage) : \"Loading\"}</span><h2>{detail?.lead.company_name || detail?.lead.title || \"Lead details\"}</h2></div><button type=\"button\" aria-label=\"Close lead details\" onClick={() => { setSelectedId(\"\"); setDetail(null); }}>Close</button></header>\n {!detail ? <Loading/> : <LeadDetail detail={detail} actor={actor} notify={notify} refresh={refreshDetail} onOpenProject={onOpenProject}/>}\n </article></GrowthDialog>\n </div>;\n}\n\nfunction LeadDetail({ detail, actor, notify, refresh, onOpenProject }: any) {\n const lead = detail.lead;\n const editable = actor.actorType === \"internal\" || actor.permissions.edit_leads;\n const convertible = actor.actorType === \"internal\" || (actor.permissions.convert_leads && actor.permissions.create_projects);\n const update = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/leads/\" + lead.id, formData(event.currentTarget)); await refresh(); notify(\"Lead updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const addFollowup = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/leads/\" + lead.id + \"/followups\", formData(form)); form.reset(); await refresh(); notify(\"Follow-up scheduled\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const createProject = async (event: any) => {\n event.preventDefault();\n try {\n const result = await post(\"/api/leads/\" + lead.id + \"/projects\", { ...formData(event.currentTarget), copy_stakeholder: true });\n await refresh();\n notify(\"Project created from lead\");\n onOpenProject(result.id);\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const attach = async (event: any) => {\n event.preventDefault();\n try { await post(\"/api/leads/\" + lead.id + \"/attach-project\", { ...formData(event.currentTarget), copy_stakeholder: true }); await refresh(); notify(\"Project attached to lead\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"lead-detail\">\n <section className=\"lead-contact-strip\"><div><span>Contact</span><b>{lead.contact_name || \"Not set\"}</b><small>{lead.contact_email || lead.contact_phone || \"No contact details\"}</small></div><div><span>Potential</span><b>{money(lead.expected_budget, lead.currency)}</b><small>{lead.partner_name || \"Direct AFLABS\"}</small></div><div><span>Next action</span><b>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"Not scheduled\"}</b><small>{lead.owner_name || \"No owner\"}</small></div></section>\n {editable && <details className=\"growth-accordion\" open><summary>Lead & requirement details</summary><form className=\"growth-form-grid\" onSubmit={update}>\n <Field label=\"Title\"><input name=\"title\" defaultValue={lead.title} required/></Field>\n <Field label=\"Stage\"><select name=\"stage\" defaultValue={lead.stage}>{[\"new\",\"contacted\",\"qualified\",\"discovery\",\"proposal\",\"negotiation\",\"won\",\"lost\"].map((item) => <option value={item}>{titleCase(item)}</option>)}</select></Field>\n <Field label=\"Priority\"><select name=\"priority\" defaultValue={lead.priority}><option>low</option><option>medium</option><option>high</option><option>urgent</option></select></Field>\n <Field label=\"Budget\"><input name=\"expected_budget\" type=\"number\" defaultValue={lead.expected_budget}/></Field>\n <Field label=\"Next follow-up\"><input name=\"next_follow_up_at\" type=\"datetime-local\" defaultValue={lead.next_follow_up_at?.slice(0,16) || \"\"}/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" defaultValue={lead.partner_id || \"\"}><option value=\"\">Direct AFLABS</option>{detail.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4} defaultValue={lead.pain_points || \"\"}/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={3} defaultValue={lead.inside_info || \"\"}/></Field>\n <Field label=\"Requirements · Markdown\" className=\"growth-span-2\"><textarea name=\"requirements_markdown\" rows={12} defaultValue={lead.requirements_markdown || \"\"} placeholder=\"# Requirements - Current workflow - Constraints - Success metrics\"/></Field>\n <div className=\"growth-span-2\"><Button>Save lead</Button></div>\n </form></details>}\n <div className=\"lead-two-col\">\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Follow-ups & reminders</h3><p>Keep the next commitment visible.</p></div><b>{detail.followups.filter((item: any) => item.status === \"open\").length} open</b></header>\n {editable && <form className=\"followup-form\" onSubmit={addFollowup}><Field label=\"Follow-up note\"><input name=\"note\" required placeholder=\"Call after budget review\"/></Field><Field label=\"Due date and time\"><input name=\"due_at\" type=\"datetime-local\" required/></Field><Button>Schedule follow-up</Button></form>}\n <div className=\"followup-list\">{detail.followups.map((item: any) => <article key={item.id} className={item.overdue ? \"overdue\" : \"\"}><span className=\"followup-status\" aria-hidden=\"true\"/><div><b>{item.note}</b><small><time>{shortDateTime(item.due_at)}</time><em>{titleCase(item.status)}</em></small></div>{editable && item.status === \"open\" && <button type=\"button\" onClick={async () => { await patch(\"/api/lead-followups/\" + item.id, { completed: true }); await refresh(); }}>Mark complete</button>}</article>)}</div>\n </section>\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Connected delivery</h3><p>One lead can create several projects.</p></div><b>{detail.projects.length}</b></header>\n <div className=\"lead-projects\">{detail.projects.map((project: any) => <button onClick={() => onOpenProject(project.id)}><span className={\"project-state state-\" + project.status}/><div><b>{project.title}</b><small>{titleCase(project.status)} · {project.progress}% · {project.end_date ? shortDate(project.end_date) : \"No due date\"}</small></div><em>Open ↗</em></button>)}</div>\n {convertible && <details className=\"growth-accordion\"><summary>Create a project from requirements</summary><form className=\"growth-form-grid\" onSubmit={createProject}>\n <Field label=\"Project title\"><input name=\"title\" required defaultValue={lead.company_name ? lead.company_name + \" solution\" : lead.title}/></Field>\n <Field label=\"Type\"><select name=\"project_type\"><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line description\"><input name=\"description\" defaultValue={lead.pain_points?.split(\"\\n\")[0] || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\"/></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" defaultValue={lead.expected_budget || 0}/></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={lead.currency}><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n <Field label=\"Markdown working notes\" className=\"growth-span-2\"><textarea name=\"markdown_details\" rows={8} defaultValue={lead.requirements_markdown || \"\"}/></Field>\n <div className=\"growth-span-2\"><Button>Create linked project</Button></div>\n </form></details>}\n {editable && <details className=\"growth-accordion\"><summary>Attach an existing project</summary><form className=\"attach-form\" onSubmit={attach}><select name=\"project_id\" required><option value=\"\">Select unattached project</option>{detail.options.projects.filter((project: any) => !project.lead_id).map((project: any) => <option value={project.id}>{project.title}</option>)}</select><Button>Attach & copy stakeholder</Button></form></details>}\n </section>\n </div>\n <section className=\"growth-panel timeline-panel\"><header className=\"growth-section-title\"><div><h3>Complete history</h3><p>What happened, when, and how long the lead waited between events.</p></div></header>\n <div className=\"lead-timeline\">{detail.events.map((event: any) => <article key={event.id}><div className=\"timeline-node\"/><div><header><span>{titleCase(event.event_type)}</span><time>{shortDateTime(event.occurred_at)}</time></header><h4>{event.title}</h4>{event.details && <p>{event.details}</p>}<footer><span>{event.actor_name}</span><b>{event.days_ago === 0 ? \"Today\" : event.days_ago + \" days ago\"}</b>{event.days_since_previous > 0 && <em>+{event.days_since_previous} days since prior event</em>}</footer></div></article>)}</div>\n </section>\n </div>;\n}\n\nfunction ChatWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [activeId, setActiveId] = useState(\"\");\n const [thread, setThread] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [contextType, setContextType] = useState(\"lead\");\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\r\n const [threadFilter, setThreadFilter] = useState(\"all\");\n const [actionBusy, setActionBusy] = useState<\"\" | \"create\" | \"send\">(\"\");\n const load = async () => setData(await api(\"/api/conversations\"));\n const open = async (id: string) => { setActiveId(id); setThread(await api(\"/api/conversations/\" + id + \"/messages\")); await load(); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const contexts = contextType === \"lead\" ? data.options.leads : data.options.projects;\n const filteredContexts = partnerId ? contexts.filter((item: any) => String(item.partner_id || \"\") === partnerId) : contexts;\r\n const visibleThreads = threadFilter === \"all\" ? data.conversations : data.conversations.filter((item: any) => item.context_type === threadFilter);\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"create\");\n try {\n const payload: any = formData(form);\n payload.context_type = contextType;\n payload.partner_id = partnerId;\n const result = await post(\"/api/conversations\", payload);\n form.reset();\n setCreateOpen(false);\n await load();\n await open(result.id);\n notify(\"Conversation thread started\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const send = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"send\");\n try { await post(\"/api/conversations/\" + activeId + \"/messages\", formData(form)); form.reset(); await open(activeId); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page chat-page\"><header className=\"growth-page-head\"><div><h1>Conversations</h1><span>Focused one-to-one threads attached to a lead or project.</span></div><Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"Start conversation\"}</Button></header>\n {createOpen && <section className=\"growth-panel chat-create-panel\"><header className=\"growth-section-title\"><div><h2>Start a conversation</h2><p>Choose one partner, one business context, and a clear subject.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={actionBusy === \"create\"}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select value={partnerId} onChange={(event) => setPartnerId(event.target.value)} required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" && <Field label=\"AFLABS person\"><select name=\"internal_user_id\" required><option value=\"\">Select person</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name} · {titleCase(item.role)}</option>)}</select></Field>}\n <Field label=\"Context type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n <Field label=\"Lead / project\"><select name=\"context_id\" required><option value=\"\">Select context</option>{filteredContexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>\n <Field label=\"Thread subject\"><input name=\"subject\" required placeholder=\"Budget approval questions\"/></Field>\n <Field label=\"Opening message\" className=\"growth-span-2\"><textarea name=\"message\" rows={4} required/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"create\" ? \"Starting conversation…\" : \"Start conversation\"}</Button></div>\n </form></section>}\n <div className=\"chat-layout\"><aside className=\"thread-list\"><header className=\"thread-list-head\"><div><h2>Threads</h2><p>{visibleThreads.length} of {data.conversations.length}</p></div><div className=\"thread-context-filter\" role=\"group\" aria-label=\"Filter conversations by context\">{[[\"all\",\"All\"],[\"lead\",\"Leads\"],[\"project\",\"Projects\"]].map(([value,label]) => <button type=\"button\" key={value} className={threadFilter === value ? \"active\" : \"\"} aria-pressed={threadFilter === value} onClick={() => setThreadFilter(value)}>{label}</button>)}</div></header>{visibleThreads.map((item: any) => <button key={item.id} className={(activeId === item.id ? \"active \" : \"\") + (item.unread ? \"unread\" : \"\")} onClick={() => open(item.id)}><span>{titleCase(item.context_type)} · {item.context_title}</span><h3>{item.subject}</h3><p>{actor.actorType === \"partner\" ? item.internal_name : item.partner_name}{item.last_message ? \" · \" + item.last_message.slice(0, 72) : \"\"}</p><small>{item.updated_at ? shortDateTime(item.updated_at) : \"\"}</small>{item.unread && <i aria-label=\"Unread\"/>}</button>)}{!visibleThreads.length && <Empty title={threadFilter === \"all\" ? \"No conversations yet\" : \"No \" + threadFilter + \" threads\"} text={threadFilter === \"all\" ? \"Start a focused thread for a lead or project.\" : \"Choose another filter or start a conversation for this context.\"}/>}</aside>\n <section className=\"chat-thread\">{!thread ? <Empty title=\"Select a conversation\" text=\"Choose a thread from the list to see its full context and replies.\"/> : <><header><div><span>{titleCase(thread.conversation.context_type)} conversation</span><h2>{thread.conversation.subject}</h2><p>{thread.conversation.context_title || \"Scoped business context\"}</p></div><b>Private · 1 to 1</b></header><div className=\"message-list\">{thread.messages.map((message: any) => <article key={message.id} className={message.sender_type === actor.actorType && message.sender_id === actor.actorId ? \"mine\" : \"\"}><div><b>{message.sender_name}</b><time>{shortDateTime(message.created_at)}</time></div><p>{message.body}</p></article>)}</div><form className=\"message-form\" onSubmit={send} aria-busy={actionBusy === \"send\"}><label><span>Reply</span><textarea name=\"body\" rows={3} required placeholder=\"Write a focused reply…\"/></label><Button disabled={Boolean(actionBusy)}>{actionBusy === \"send\" ? \"Sending…\" : \"Send reply\"}</Button></form></>}</section>\n </div>\n </div>;\n}\n\nfunction MeetingWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [slot, setSlot] = useState(\"\");\n const [contextType, setContextType] = useState(\"other\");\n const load = async () => setData(await api(\"/api/meetings\"));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const createSlot = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/admin/meeting-slots\", formData(form)); form.reset(); await load(); notify(\"Availability updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const book = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload: any = formData(form);\n if (slot) [payload.starts_at, payload.ends_at] = slot.split(\"|\");\n payload.context_type = contextType;\n await post(\"/api/meetings\", payload);\n form.reset();\n setSlot(\"\");\n await load();\n notify(\"Meeting booked\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const available = data.slots.filter((item: any) => item.slot_type === \"available\");\n const contexts = contextType === \"lead\" ? data.options.leads : contextType === \"project\" ? data.options.projects : [];\n return <div className=\"growth-page\"><header className=\"growth-page-head\"><div><h1>Meeting booking</h1><span>Book within shared availability without collisions or exceeding the monthly allowance.</span></div>{actor.actorType === \"partner\" && data.target?.target && <div className=\"meeting-quota\"><b>{data.target.achieved.meetings} / {data.target.target.meetings_allowed}</b><span>meetings used this month</span></div>}</header>\n {actor.role === \"admin\" && <section className=\"growth-panel availability-manager\"><header className=\"growth-section-title\"><div><h2>Manage meeting time</h2><p>Publish bookable hours or block time that must stay unavailable.</p></div></header><div className=\"availability-mode\" role=\"group\" aria-label=\"Availability type\"><button type=\"button\" className={slotType === \"available\" ? \"active\" : \"\"} aria-pressed={slotType === \"available\"} onClick={() => setSlotType(\"available\")}><b>Make available</b><span>Partners can book this window</span></button><button type=\"button\" className={slotType === \"blocked\" ? \"active blocked\" : \"\"} aria-pressed={slotType === \"blocked\"} onClick={() => setSlotType(\"blocked\")}><b>Block time</b><span>Prevent bookings in this window</span></button></div><form className=\"availability-form\" onSubmit={createSlot}><input type=\"hidden\" name=\"slot_type\" value={slotType}/><Field label=\"Starts\"><input name=\"starts_at\" type=\"datetime-local\" required/></Field><Field label=\"Ends\"><input name=\"ends_at\" type=\"datetime-local\" required/></Field><Field label={slotType === \"blocked\" ? \"Reason (optional)\" : \"Label (optional)\"}><input name=\"note\" placeholder={slotType === \"blocked\" ? \"Travel, internal meeting…\" : \"Office hours, discovery calls…\"}/></Field><Button>{slotType === \"blocked\" ? \"Block this time\" : \"Publish availability\"}</Button></form><div className=\"availability-list\"><header><h3>Scheduled windows</h3><span>{data.slots.length} total</span></header>{data.slots.map((item: any) => <article key={item.id} className={item.slot_type}><div><b>{titleCase(item.slot_type)}</b><time>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}</time>{item.note && <small>{item.note}</small>}</div><button type=\"button\" aria-label={\"Remove \" + item.slot_type + \" window\"} onClick={async () => { await remove(\"/api/admin/meeting-slots/\" + item.id); await load(); }}>Remove</button></article>)}</div></section>}\n <div className=\"meeting-layout\"><section className=\"growth-panel\"><h2>{actor.actorType === \"partner\" ? \"Book an eligible time\" : \"Book for a partner\"}</h2><form className=\"growth-form-grid\" onSubmit={book}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" ? <Field label=\"Available time\"><select value={slot} onChange={(event) => setSlot(event.target.value)} required><option value=\"\">Select a slot</option>{available.map((item: any) => <option value={item.starts_at + \"|\" + item.ends_at}>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}</option>)}</select></Field> : <><Field label=\"Starts\"><input name=\"starts_at\" type=\"datetime-local\" required/></Field><Field label=\"Ends\"><input name=\"ends_at\" type=\"datetime-local\" required/></Field></>}\n <Field label=\"Agenda type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"other\">Other agenda</option><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n {contextType !== \"other\" && <Field label={titleCase(contextType)}><select name=\"context_id\" required><option value=\"\">Select {contextType}</option>{contexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>}\n <Field label=\"Agenda\" className=\"growth-span-2\"><textarea name=\"agenda\" required rows={3}/></Field>\n <Field label=\"Meet / Zoom / Teams link\"><input name=\"join_url\" type=\"url\" placeholder=\"https://…\"/></Field>\n <Field label=\"Place\"><input name=\"place\" placeholder=\"Office, client site…\"/></Field>\n <div className=\"growth-span-2\"><Button>Book meeting</Button></div>\n </form></section>\n <section className=\"growth-panel\"><h2>Upcoming bookings</h2><div className=\"booking-list\">{data.meetings.map((meeting: any) => <article><header><span>{titleCase(meeting.status)}</span><time>{shortDateTime(meeting.starts_at)}</time></header><h3>{meeting.agenda}</h3><p>{meeting.partner_name}{meeting.internal_name ? \" ↔ \" + meeting.internal_name : \"\"}</p><footer>{meeting.join_url ? <a href={meeting.join_url} target=\"_blank\">Join online ↗</a> : <span>{meeting.place || \"Location pending\"}</span>}{actor.role === \"admin\" && <select value={meeting.status} onChange={async (event) => { await patch(\"/api/meetings/\" + meeting.id, { status: event.target.value }); await load(); }}><option>booked</option><option>confirmed</option><option>completed</option><option>cancelled</option></select>}</footer></article>)}</div>{!data.meetings.length && <Empty title=\"No upcoming meetings\" text=\"Available windows remain open until a partner books them.\"/>}</section></div>\n </div>;\n}\n\nfunction MouWorkspace({ actor, notify }: any) {\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\n const [data, setData] = useState<any>(null);\n const [actionBusy, setActionBusy] = useState(\"\");\n const load = async (id = partnerId) => setData(await api(\"/api/mou\" + (id ? \"?partner_id=\" + encodeURIComponent(id) : \"\")));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, [partnerId]);\n if (!data) return <Loading/>;\n const assign = async (event: any) => {\n event.preventDefault();\n setActionBusy(\"mou\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/mou\", formData(event.currentTarget)); await load(); notify(\"Partner MoU published\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const target = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"target\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/targets\", formData(form)); form.reset(); await load(); notify(\"New target version saved\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const template = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"template\");\n try { await post(\"/api/admin/mou-templates\", formData(form)); form.reset(); await load(); notify(\"MoU template created\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page mou-page\"><header className=\"growth-page-head\"><div><h1>MoU & targets</h1><span>Published terms, monthly commitments, achievement, and version history in one record.</span></div>{actor.role === \"admin\" && <label className=\"partner-picker-field\"><span>Partner</span><select className=\"partner-picker\" value={partnerId} onChange={(event) => setPartnerId(event.target.value)}><option value=\"\">Select partner</option>{data.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}</header>\n {!partnerId ? <Empty title=\"Choose a partner\" text=\"Select a partner to publish their agreement and monthly targets.\"/> : <>\n {data.mou ? <article className=\"mou-document\"><header><div><span>Memorandum of Understanding</span><h2>{data.partner?.name}</h2><p>AFLABS partnership agreement</p></div><b>Effective {shortDate(data.mou.effective_from)}</b></header><section><h3>Partner commitments</h3><MarkdownBlock value={data.mou.terms_markdown}/></section><section><h3>What AFLABS provides</h3><MarkdownBlock value={data.mou.benefits_markdown}/></section></article> : <Empty title=\"MoU not published\" text={actor.role === \"admin\" ? \"Use the form below to publish the first agreement.\" : \"Your administrator has not published an agreement yet.\"}/>}\n {data.snapshot?.target && <section className=\"growth-panel target-board\"><header className=\"growth-section-title\"><div><h2>{data.snapshot.month} targets</h2><p>Live achievement against the latest target version.</p></div></header><div className=\"target-grid\"><Progress label=\"Leads\" value={data.snapshot.achieved.leads} total={data.snapshot.target.leads_target}/><Progress label=\"Expected Project Conversions\" value={data.snapshot.achieved.projects} total={data.snapshot.target.projects_target}/><Progress label={\"Revenue · \" + data.snapshot.target.revenue_currency} value={data.snapshot.achieved.revenue} total={data.snapshot.target.revenue_target}/><Progress label=\"Meeting allowance\" value={data.snapshot.achieved.meetings} total={data.snapshot.target.meetings_allowed}/></div></section>}\n {actor.role === \"admin\" && <div className=\"mou-admin-grid\"><section className=\"growth-panel\"><h2>Publish agreement</h2><form className=\"growth-stack\" onSubmit={assign} aria-busy={actionBusy === \"mou\"}><Field label=\"Use template\"><select name=\"template_id\"><option value=\"\">Write custom terms</option>{data.templates.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field><Field label=\"Effective from\"><input name=\"effective_from\" type=\"date\" required/></Field><Field label=\"Partner commitments · Markdown\"><textarea name=\"terms_markdown\" rows={10}/></Field><Field label=\"AFLABS commitments · Markdown\"><textarea name=\"benefits_markdown\" rows={7}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"mou\" ? \"Publishing…\" : \"Publish new MoU version\"}</Button></form></section>\n <section className=\"growth-panel\"><h2>Set monthly targets</h2><form className=\"growth-form-grid\" onSubmit={target} aria-busy={actionBusy === \"target\"}><Field label=\"Month\"><input name=\"target_month\" type=\"month\" required/></Field><Field label=\"Lead target\"><input name=\"leads_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Expected Project Conversions\"><input name=\"projects_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Revenue target\"><input name=\"revenue_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Currency\"><select name=\"revenue_currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field><Field label=\"Meetings allowed\"><input name=\"meetings_allowed\" type=\"number\" min=\"0\" required/></Field><Field label=\"Note\" className=\"growth-span-2\"><textarea name=\"note\" rows={3}/></Field><div className=\"growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"target\" ? \"Saving target…\" : \"Save as new target version\"}</Button></div></form></section>\n <section className=\"growth-panel\"><h2>Create MoU template</h2><form className=\"growth-stack\" onSubmit={template} aria-busy={actionBusy === \"template\"}><Field label=\"Template name\"><input name=\"name\" required/></Field><Field label=\"Terms · Markdown\"><textarea name=\"terms_markdown\" rows={8} required/></Field><Field label=\"Benefits · Markdown\"><textarea name=\"benefits_markdown\" rows={6}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"template\" ? \"Saving template…\" : \"Save template\"}</Button></form></section></div>}\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h2>Target history</h2><p>Every adjustment remains visible; newer rows do not overwrite older commitments.</p></div></header><div className=\"target-history\">{data.targets.map((item: any) => <article><span>{item.target_month}</span><b>{item.leads_target} leads · {item.projects_target} projects</b><p>{money(item.revenue_target, item.revenue_currency)} · {item.meetings_allowed} meetings</p><small>Set {shortDateTime(item.created_at)}{item.note ? \" · \" + item.note : \"\"}</small></article>)}</div></section>\n </>}\n </div>;\n}\n\nfunction IdeaWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [busy, setBusy] = useState(false);\n const [openId, setOpenId] = useState(\"\");\n const [prompts, setPrompts] = useState<any>(null);\n const load = async () => {\n setData(await api(\"/api/business-ideas\"));\n if (actor.role === \"admin\") setPrompts(await api(\"/api/admin/ai-prompts\"));\n };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const generate = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setBusy(true);\n try {\n const result = await post(\"/api/business-ideas\", formData(form));\n form.reset();\n await load();\n setOpenId(result.id);\n notify(\"Business idea pitch generated\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n const savePrompts = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/admin/ai-prompts\", formData(event.currentTarget)); await load(); notify(\"AI prompts updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"growth-page idea-page\"><header className=\"growth-page-head\"><div><h1>Business idea pitch</h1><span>Turn grounded discovery into a practical, ROI-focused software or automation opportunity.</span></div></header>\n <div className=\"idea-layout\"><section className=\"growth-panel idea-builder\"><header className=\"growth-section-title\"><div><h2>Discovery brief</h2><p>Specific business context produces a stronger, more credible pitch.</p></div></header><form className=\"growth-form-grid\" onSubmit={generate}>\n <Field label=\"Customer / brand\"><input name=\"customer_name\" required placeholder=\"Acme Retail\"/></Field>\n <Field label=\"Pitch title\"><input name=\"title\" placeholder=\"Optional\"/></Field>\n <Field label=\"Category\"><input name=\"category\" required placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" required placeholder=\"D2C, B2B distribution, services…\"/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Budget\"><div className=\"budget-input\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select><input name=\"budget\" type=\"number\" min=\"0\" placeholder=\"Possible range anchor\"/></div></Field>\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" required rows={5} placeholder=\"Where time, revenue, customer experience, or control is being lost…\"/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={4} placeholder=\"Current systems, team behavior, constraints, politics, seasonal patterns…\"/></Field>\n <Field label=\"Possible business use case\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" required rows={5} placeholder=\"Your hunch about software, AI, Voice AI, WhatsApp, automation, or a custom workflow…\"/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={busy}>{busy ? \"Building the pitch…\" : \"Generate pitch\"}</Button></div>\n </form></section>\n <section className=\"growth-panel idea-list\"><header className=\"growth-section-title\"><div><h2>Generated pitches</h2><p>{data.ideas.length} saved idea{data.ideas.length === 1 ? \"\" : \"s\"}</p></div></header>{data.ideas.map((idea: any) => <article className=\"idea-card\" key={idea.id}><button onClick={() => setOpenId(idea.id)}><div><span>{idea.partner_name || \"Direct AFLABS\"}</span><h3>{idea.title}</h3><small>{shortDateTime(idea.created_at)}</small></div><b>View pitch</b></button></article>)}{!data.ideas.length && <Empty title=\"No ideas yet\" text=\"Complete the discovery form to create the first pitch.\"/></section></div>\n <GrowthDialog open={Boolean(openId)} label={data.ideas.find((idea: any) => idea.id === openId)?.title || \"Generated business pitch\"} close={() => setOpenId(\"\")}><article className=\"idea-dialog\">{(() => { const idea = data.ideas.find((item: any) => item.id === openId); return idea ? <><header><div><span>{idea.partner_name || \"Direct AFLABS\"}</span><h2>{idea.title}</h2><p>Generated {shortDateTime(idea.created_at)}</p></div><button type=\"button\" onClick={() => setOpenId(\"\")}>Close</button></header><div className=\"idea-dialog-content\"><MarkdownBlock value={idea.generated_markdown}/></div><footer>{idea.proposal_id ? <span>Proposal draft created</span> : <Button onClick={async () => { await post(\"/api/business-ideas/\" + idea.id + \"/proposal\", {}); await load(); notify(\"Proposal generated and saved\"); }}>Turn into proposal</Button>}</footer></> : <Loading/>; })()}</article></GrowthDialog>\r\n {actor.role === \"admin\" && prompts && <details className=\"growth-panel prompt-settings\"><summary><span><b>Business pitch prompt settings</b><small>Admin only · controls AI Pitch generation</small></span><em>Configure</em></summary><form className=\"growth-form-grid\" onSubmit={savePrompts}><Field label=\"Business pitch system prompt\" className=\"growth-span-2\"><textarea name=\"business_pitch_prompt\" rows={12} defaultValue={prompts.business_pitch_prompt}/></Field><div className=\"growth-span-2\"><Button>Save business pitch prompt</Button></div></form></details>}\n </div>;\n}\n\nexport function GrowthSuite({ section, actor, notify, onOpenProject }: any) {\n if (section === \"leads\") return <LeadWorkspace actor={actor} notify={notify} onOpenProject={onOpenProject}/>;\n if (section === \"conversations\") return <ChatWorkspace actor={actor} notify={notify}/>;\n if (section === \"meetings\") return <MeetingWorkspace actor={actor} notify={notify}/>;\n if (section === \"mou\") return <MouWorkspace actor={actor} notify={notify}/>;\n if (section === \"ideas\") return <IdeaWorkspace actor={actor} notify={notify}/>;\n return null;\n}\n\r\n","createdAt",["D",1786658319884],"branchVersion","branchId","ec297ab1-9bec-46a6-a3e9-7163c0e2fcfa",{"_31":48,"_33":49,"_35":36,"_37":51,"_40":52,"_42":14,"_43":44,"_25":26},{"_31":48,"_33":49,"_35":36,"_37":50},"frontend/components/App.tsx","019fada5-614d-738d-bbb2-6e31626896ea","App.tsx","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CommercialPreview, GrowthDashboard, GrowthSuite, InvoiceComposer, MarkdownBlock, PartnerProjectEditor } from \"./GrowthSuite.tsx\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n};\ntype Project = Record<string, any>;\n\nconst statusMeta: Record<string, { label: string; note: string }> = {\n backlog: { label: \"Backlog\", note: \"Ideas and incoming work\" },\n todo: { label: \"To do\", note: \"Ready to begin\" },\n \"in-progress\": { label: \"In progress\", note: \"Actively moving\" },\n blocked: { label: \"Blocked\", note: \"Needs attention\" },\n done: { label: \"Done\", note: \"Admin-approved delivery\" },\n};\nconst typeLabels: Record<string, string> = {\n update: \"Update\", meeting: \"Meeting\", blocker: \"Blocker\", \"major-work\": \"Major work\",\n \"mail-sent\": \"Mail sent\", \"mail-received\": \"Mail received\", payment: \"Payment\",\n question: \"Client question\", note: \"Note\", milestone: \"Milestone\", \"schedule-extension\": \"Schedule extension\",\n};\nconst eventIcons: Record<string, string> = {\n update: \"update\", meeting: \"meeting\", blocker: \"blocker\", \"major-work\": \"work\",\n \"mail-sent\": \"mail-out\", \"mail-received\": \"mail-in\", payment: \"payment\",\n question: \"question\", note: \"note\", milestone: \"milestone\", \"schedule-extension\": \"clock\",\n};\nconst countries = [\n { code: \"+91\", label: \"India\", flag: \"🇮🇳\", placeholder: \"98765 43210\" },\n { code: \"+966\", label: \"Saudi Arabia\", flag: \"🇸🇦\", placeholder: \"50 123 4567\" },\n { code: \"+971\", label: \"UAE\", flag: \"🇦🇪\", placeholder: \"50 123 4567\" },\n];\nconst userDefaults: Record<string, boolean> = {\n view_projects: true,\n create_projects: false,\n edit_projects: true,\n move_projects: true,\n archive_projects: false,\n manage_links: true,\n view_credentials: false,\n manage_credentials: false,\n manage_comments: true,\n manage_milestones: true,\n manage_stakeholders: true,\n manage_payments: false,\n};\n\nconst apiCache = new Map<string, { expires: number; value?: any; pending?: Promise<any> }>();\nlet clientCacheEnabled = true;\nfunction clientCacheTtl(path: string) {\n if (path === \"/api/config\") return 60_000;\n if (path.startsWith(\"/api/projects\")) return /^\\/api\\/projects\\/[^/?]+$/.test(path) ? 60_000 : 45_000;\n if (path === \"/api/dashboard\") return 45_000;\n if (path === \"/api/recurring\" || path === \"/api/admin/proposals\") return 60_000;\n if ([\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\"].includes(path)) return 90_000;\n if (path === \"/api/milestone-templates\" || path === \"/api/quick-notes\" || path === \"/api/holidays\") return 120_000;\n if (path === \"/api/questions\") return 30_000;\n return 15_000;\n}\nfunction invalidateClientCache(path: string) {\n if (/^\\/api\\/projects\\/[^/]+\\/read$/.test(path)) {\n for (const key of apiCache.keys()) {\n if (key === \"/api/projects\" || key.startsWith(\"/api/projects?\")) apiCache.delete(key);\n }\n return;\n }\n const prefixes = new Set<string>();\n if (path.startsWith(\"/api/projects\") || /^\\/api\\/(comments|links|credentials|stakeholders|milestones|payments|invoices)/.test(path)) {\n [\"/api/projects\", \"/api/dashboard\", \"/api/questions\"].forEach((x) => prefixes.add(x));\n }\n if (/^\\/api\\/admin\\/(users|partners|settings|branding|cc-recipients)/.test(path) || path === \"/api/partner/branding\") {\n [\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\", \"/api/projects\", \"/api/dashboard\", \"/api/config\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/admin/proposals\")) {\n [\"/api/admin/proposals\", \"/api/projects\", \"/api/dashboard\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/recurring\")) prefixes.add(\"/api/recurring\");\n if (path.startsWith(\"/api/admin/holidays\")) {\n prefixes.add(\"/api/holidays\");\n prefixes.add(\"/api/projects/\");\n }\n if (path.includes(\"milestone-template\")) prefixes.add(\"/api/milestone-templates\");\n if (path.includes(\"quick-notes\")) prefixes.add(\"/api/quick-notes\");\n if (path.startsWith(\"/api/auth/\") || path === \"/api/bootstrap\") {\n apiCache.clear();\n return;\n }\n for (const key of apiCache.keys()) if ([...prefixes].some((prefix) => key.startsWith(prefix))) apiCache.delete(key);\n}\nlet activeRequests = 0;\nfunction signalRequestActivity(delta: number) {\n activeRequests = Math.max(0, activeRequests + delta);\n if (typeof window !== \"undefined\") window.dispatchEvent(new CustomEvent(\"aflabs:requests\", { detail: activeRequests }));\n}\nasync function request(path: string, options: RequestInit = {}) {\n const method = String(options.method || \"GET\").toUpperCase();\n const cacheable = method === \"GET\" && clientCacheEnabled;\n const ttl = clientCacheTtl(path);\n if (cacheable) {\n const cached = apiCache.get(path);\n if (cached && cached.expires > Date.now()) {\n if (cached.pending) return cached.pending;\n return cached.value;\n }\n apiCache.delete(path);\n }\n signalRequestActivity(1);\n const pending = (async () => {\n try {\n const response = await fetch(path, {\n ...options,\n headers: { \"Content-Type\": \"application/json\", ...(options.headers ?? {}) },\n });\n const payload = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(payload.error || `Request failed (${response.status})`);\n return payload;\n } finally {\n signalRequestActivity(-1);\n }\n })();\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, pending });\n try {\n const payload = await pending;\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, value: payload });\n else invalidateClientCache(path);\n return payload;\n } catch (error) {\n if (cacheable) apiCache.delete(path);\n throw error;\n }\n}\nconst post = (path: string, data: any = {}) => request(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any = {}) => request(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string, data: any = {}) => request(path, { method: \"DELETE\", body: JSON.stringify(data) });\nconst money = (amount: number, currency = \"INR\") => new Intl.NumberFormat(\"en\", {\n style: \"currency\", currency, maximumFractionDigits: 2,\n}).format(Number(amount || 0));\nconst prettyDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst timelineDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { weekday: \"long\", day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\n};\nfunction daysFromToday(value?: string) {\n if (!value) return null;\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n return Math.round((target.getTime() - today.getTime()) / 86_400_000);\n}\nfunction futureDaysLabel(value?: string) {\n const days = daysFromToday(value);\n if (days === null || days <= 0) return \"\";\n return `${days} ${days === 1 ? \"day\" : \"days\"} to go`;\n}\nfunction projectDateFootnote(value: string | undefined, kind: \"start\" | \"end\") {\n const days = daysFromToday(value);\n if (days === null) return \"\";\n if (days === 0) return kind === \"start\" ? \"Starts today\" : \"Target date is today\";\n if (kind === \"start\") return days > 0\n ? `Starts in ${days} ${days === 1 ? \"day\" : \"days\"}`\n : `Started ${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} ago`;\n return days > 0\n ? `${days} ${days === 1 ? \"day\" : \"days\"} remaining`\n : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} past target`;\n}\nfunction deadlineLabel(value?: string, status?: string) {\n if (!value) return \"\";\n if (status === \"done\") return \"Completed\";\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);\n if (days === 0) return \"Due today\";\n return days > 0 ? `${days} ${days === 1 ? \"day\" : \"days\"} to go` : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} overdue`;\n}\nconst initials = (name = \"AFLABS\") => name.split(/\\s+/).slice(0, 2).map((part) => part[0]).join(\"\").toUpperCase();\nconst titleCase = (value = \"\") => value.replaceAll(\"-\", \" \").replace(/\\b\\w/g, (x) => x.toUpperCase());\n\nfunction BrandMark({ large = false }: { large?: boolean }) {\n return <span className={`brand-mark ${large ? \"brand-mark-large\" : \"\"}`}>\n <img src=\"/frontend/logo.png\" alt=\"\"/>\n </span>;\n}\n\nfunction Icon({ name, size = 18 }: { name: string; size?: number }) {\n const paths: Record<string, React.ReactNode> = {\n board: <><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M9 4v16M15 4v16\"/></>,\n plus: <path d=\"M12 5v14M5 12h14\"/>,\n archive: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M5 9v10h14V9M9 13h6\"/></>,\n users: <><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"/></>,\n partner: <><path d=\"M8 12h8M12 8v8\"/><circle cx=\"12\" cy=\"12\" r=\"9\"/></>,\n logout: <><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><path d=\"m16 17 5-5-5-5M21 12H9\"/></>,\n search: <><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-4-4\"/></>,\n close: <path d=\"M6 6l12 12M18 6 6 18\"/>,\n link: <><path d=\"M10 13a5 5 0 0 0 7.07.07l2-2A5 5 0 0 0 12 4\"/><path d=\"M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20\"/></>,\n copy: <><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2\"/></>,\n more: <><circle cx=\"5\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/></>,\n check: <path d=\"m5 12 4 4L19 6\"/>,\n clock: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/></>,\n message: <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"/>,\n rupee: <><path d=\"M6 4h12M6 8h12M7 4c6 0 6 8 0 8h-1l9 8\"/></>,\n chevron: <path d=\"m9 18 6-6-6-6\"/>,\n settings: <><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1V21H9.6v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1-.4H3V9.6h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.17.38.38.72.6 1 .29.37.64.55 1 .6h.09v4H21c-.36.05-.71.23-1 .4-.22.28-.43.62-.6 1Z\"/></>,\n update: <><path d=\"M4 19h16\"/><path d=\"M6 15l4-4 3 3 5-6\"/></>,\n meeting: <><circle cx=\"8\" cy=\"8\" r=\"3\"/><circle cx=\"16\" cy=\"8\" r=\"3\"/><path d=\"M3 19c.6-3 2.2-5 5-5s4.4 2 5 5M11 19c.5-2.6 2.2-4.5 5-4.5s4.5 1.9 5 4.5\"/></>,\n blocker: <><path d=\"M12 3 2.8 19h18.4L12 3Z\"/><path d=\"M12 9v4M12 16h.01\"/></>,\n work: <><path d=\"m14.7 6.3 3 3M4 20l4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Z\"/></>,\n \"mail-out\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 4h6M18 1l3 3-3 3\"/></>,\n \"mail-in\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 1v6M12 4l3 3 3-3\"/></>,\n payment: <><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M3 10h18M7 15h3\"/></>,\n question: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M9.7 9a2.5 2.5 0 1 1 3.4 2.3c-.8.35-1.1.9-1.1 1.7M12 17h.01\"/></>,\n note: <><path d=\"M5 3h11l3 3v15H5V3Z\"/><path d=\"M9 11h6M9 15h6M15 3v4h4\"/></>,\n milestone: <><path d=\"m12 3 3 6 6 .8-4.5 4.4 1.1 6.3-5.6-3-5.6 3 1.1-6.3L3 9.8 9 9l3-6Z\"/></>,\n sun: <><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"/></>,\n moon: <path d=\"M20.5 14.4A8 8 0 0 1 9.6 3.5 9 9 0 1 0 20.5 14.4Z\"/>,\n globe: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3c3 3.3 3 14.7 0 18M12 3c-3 3.3-3 14.7 0 18\"/></>,\n mail: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6\"/></>,\n eye: <><path d=\"M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z\"/><circle cx=\"12\" cy=\"12\" r=\"2.5\"/></>,\n key: <><circle cx=\"8\" cy=\"15\" r=\"4\"/><path d=\"m11 12 9-9M16 4l3 3M14 6l3 3\"/></>,\n };\n return <svg className=\"icon\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">{paths[name] ?? paths.more}</svg>;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return <button className={`button button-${variant} ${className}`} {...props}>\n {icon && <Icon name={icon} size={16}/>}<span>{children}</span>\n </button>;\n}\nfunction NetworkActivity() {\n const [count, setCount] = useState(activeRequests);\n useEffect(() => {\n const update = (event: any) => setCount(Number(event.detail) || 0);\n window.addEventListener(\"aflabs:requests\", update);\n return () => window.removeEventListener(\"aflabs:requests\", update);\n }, []);\n return count > 0 ? <div className=\"network-activity\" role=\"status\" aria-live=\"polite\"><i/><span>Working…</span></div> : null;\n}\nfunction PageSkeleton({ rows = 3, chart = false }: { rows?: number; chart?: boolean }) {\n return <div className=\"page-skeleton\" aria-label=\"Loading content\">\n <div className=\"skeleton skeleton-title\"/>\n {chart && <div className=\"skeleton skeleton-chart\"/>}\n {Array.from({ length: rows }).map((_, index) => <div className=\"skeleton skeleton-row\" key={index}/>)}\n </div>;\n}\nfunction BoardSkeleton() {\n return <div className=\"kanban board-skeleton\" aria-label=\"Loading project board\">\n {Array.from({ length: 5 }).map((_, column) => <section className=\"kanban-column\" key={column}><div className=\"skeleton skeleton-column-title\"/>{Array.from({ length: 2 }).map((_, card) => <div className=\"skeleton skeleton-card\" key={card}/>)}</section>)}\n </div>;\n}\nfunction Field({ label, hint, children }: any) {\n return <label className=\"field\"><span>{label}</span>{children}{hint && <small>{hint}</small>}</label>;\n}\nfunction PhoneField({ label = \"Mobile number\", name = \"phone\", defaultValue = \"\", autoFocus = false }: any) {\n const detected = countries.find((x) => String(defaultValue).startsWith(x.code));\n const [country, setCountry] = useState(() => detected?.code || localStorage.getItem(\"aflabs_phone_country\") || \"+91\");\n const [number, setNumber] = useState(() => detected ? String(defaultValue).slice(detected.code.length) : String(defaultValue).replace(/^\\+\\d+/, \"\"));\n const selected = countries.find((x) => x.code === country) || countries[0];\n const changeCountry = (value: string) => { setCountry(value); localStorage.setItem(\"aflabs_phone_country\", value); };\n return <label className=\"field phone-field\"><span>{label}</span>\n <div className=\"phone-control\">\n <select aria-label=\"Country\" value={country} onChange={(e) => changeCountry(e.target.value)}>\n {countries.map((x) => <option value={x.code}>{x.flag} {x.code}</option>)}\n </select>\n <input value={number} onChange={(e) => setNumber(e.target.value)} required autoFocus={autoFocus} placeholder={selected.placeholder} inputMode=\"tel\"/>\n <input type=\"hidden\" name={name} value={`${country}${number.replace(/\\D/g, \"\")}`}/>\n </div>\n </label>;\n}\nfunction ThemeToggle({ theme, toggle }: any) {\n return <button type=\"button\" className=\"theme-toggle\" onClick={toggle} aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}>\n <Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={16}/><span>{theme === \"dark\" ? \"Light\" : \"Dark\"} mode</span>\n </button>;\n}\nfunction Empty({ title, text, action }: any) {\n return <div className=\"empty\"><div className=\"empty-mark\"><Icon name=\"board\" size={21}/></div><h3>{title}</h3><p>{text}</p>{action}</div>;\n}\nfunction Toast({ value, clear }: { value: { message: string; kind: string } | null; clear: () => void }) {\n useEffect(() => { if (!value) return; const timer = setTimeout(clear, 3600); return () => clearTimeout(timer); }, [value]);\n return value ? <div className={`toast toast-${value.kind}`} role={value.kind === \"error\" ? \"alert\" : \"status\"} aria-live={value.kind === \"error\" ? \"assertive\" : \"polite\"}><span>{value.message}</span><button type=\"button\" aria-label=\"Dismiss notification\" onClick={clear}><Icon name=\"close\" size={15}/></button></div> : null;\n}\n\nfunction AuthShell({ children, title, subtitle, theme, toggleTheme }: any) {\n return <main className=\"auth-page\">\n <section className=\"auth-brand\">\n <a className=\"brand brand-large\" href=\"/\"><BrandMark large/><span>AFLABS <b>PM</b></span></a>\n <div className=\"auth-statement\">\n <span className=\"signal\"><i/> Project delivery, made visible.</span>\n <h1>One calm place for every moving part.</h1>\n <p>Run the work internally. Keep partners aligned. Give clients a clear sense of momentum.</p>\n </div>\n <div className=\"auth-foot\">Built for focused teams, not process theatre.</div>\n </section>\n <section className=\"auth-panel\"><div className=\"auth-theme\"><ThemeToggle theme={theme} toggle={toggleTheme}/></div><div className=\"auth-card\"><div className=\"auth-heading\"><h2>{title}</h2><p>{subtitle}</p></div>{children}</div></section>\n </main>;\n}\n\nfunction Bootstrap({ onDone, theme, toggleTheme }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try { await post(\"/api/bootstrap\", data); onDone(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell title=\"Set up AFLABS PM\" subtitle=\"Create the first administrator. This setup closes permanently after completion.\" theme={theme} toggleTheme={toggleTheme}>\n <form onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n <Field label=\"Private bootstrap token\"><input name=\"token\" type=\"password\" required autoFocus/></Field>\n <Field label=\"Your name\"><input name=\"name\" required placeholder=\"Administrator name\"/></Field>\n <PhoneField/>\n <Field label=\"Choose a PIN\" hint=\"4–8 digits\"><input name=\"pin\" type=\"password\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Creating administrator…\" : \"Create administrator\"}</Button>\n </form>\n </AuthShell>;\n}\n\nfunction Login({ clientToken, onDone, theme, toggleTheme }: any) {\n const initial = clientToken ? \"client\" : \"internal\";\n const [mode, setMode] = useState(initial), [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const rememberedPhone = localStorage.getItem(\"aflabs_login_phone\") || \"\";\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try {\n await post(mode === \"partner\" ? \"/api/auth/partner\" : mode === \"client\" ? \"/api/auth/client\" : \"/api/auth/login\", {\n ...data, token: clientToken,\n });\n if (mode !== \"client\" && data.phone) localStorage.setItem(\"aflabs_login_phone\", String(data.phone));\n onDone();\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell\n title={mode === \"client\" ? \"View project\" : mode === \"partner\" ? \"Partner access\" : \"Welcome back\"}\n subtitle={mode === \"client\" ? \"Enter the project PIN shared with you.\" : \"Use your registered mobile number and PIN.\"}\n theme={theme}\n toggleTheme={toggleTheme}\n >\n {!clientToken && <div className=\"segmented\">\n <button className={mode === \"internal\" ? \"active\" : \"\"} onClick={() => { setMode(\"internal\"); setError(\"\"); }}>Team</button>\n <button className={mode === \"partner\" ? \"active\" : \"\"} onClick={() => { setMode(\"partner\"); setError(\"\"); }}>Partner</button>\n </div>}\n <form key={mode} onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n {mode !== \"client\" && <PhoneField autoFocus defaultValue={rememberedPhone}/>}\n <Field label={mode === \"client\" ? \"Project PIN\" : \"PIN\"}><input name=\"pin\" type=\"password\" required autoFocus={mode === \"client\"} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Checking…\" : mode === \"client\" ? \"Open project\" : \"Sign in\"}</Button>\n </form>\n {!clientToken && <p className=\"auth-note\">Access is provisioned by an AFLABS administrator. There is no public signup or password recovery.</p>}\n </AuthShell>;\n}\n\nfunction ProjectForm({ actor, config, partners, leads = [], owners = [], ccRecipients = [], initial = {}, onSave, compact = false }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const [selectedPartner, setSelectedPartner] = useState(initial.partner_id || \"\");\n const [regularCost, setRegularCost] = useState(Number(initial.regular_cost) || 0);\n const [partnerCost, setPartnerCost] = useState(Number(initial.partner_cost) || 0);\n const [currency, setCurrency] = useState(initial.currency || \"INR\");\n const [taxRate, setTaxRate] = useState(Number(initial.tax_rate) || 0);\n const [taxInclusive, setTaxInclusive] = useState(Boolean(initial.tax_inclusive));\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const form = e.currentTarget, formData = new FormData(form), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n try { await onSave(data); form.reset(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n const partner = actor.actorType === \"partner\";\n return <form className=\"form-grid\" onSubmit={submit}>\n {error && <div className=\"alert alert-error full\">{error}</div>}\n <Field label=\"Project title\"><input name=\"title\" required autoFocus placeholder=\"What are we delivering?\" defaultValue={initial.title || \"\"}/></Field>\n <Field label=\"Originating lead\" hint=\"Every new project stays linked to its commercial origin\"><select name=\"lead_id\" required defaultValue={initial.lead_id || \"\"}><option value=\"\">Select lead</option>{leads.filter((lead: any) => !selectedPartner || !lead.partner_id || String(lead.partner_id) === selectedPartner).map((lead: any) => <option value={lead.id}>{lead.company_name || lead.title} · {titleCase(lead.stage)}</option>)}</select></Field>\n {!compact && <Field label=\"Type\"><select name=\"project_type\" defaultValue={initial.project_type || \"Billable\"}>{config.projectTypes.map((x: string) => <option>{x}</option>)}</select></Field>}\n <Field label=\"One-line description\" hint=\"Keep this short for project cards and client headers\"><input name=\"description\" maxLength={240} placeholder=\"The outcome in one clear sentence\" defaultValue={initial.description || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, tables, and code.\"><textarea name=\"markdown_details\" rows={12} placeholder={\"# Context\\n\\n## Scope\\n- Requirement\\n\\n## Decisions\"} defaultValue={initial.markdown_details || \"\"}/></Field>\n <Field label=\"Project email\" hint=\"Main POC for optional email updates\"><input name=\"contact_email\" type=\"email\" placeholder=\"project@example.com\" defaultValue={initial.contact_email || \"\"}/></Field>\n <Field label=\"CC emails\" hint=\"Comma-separated additional recipients\"><input name=\"cc_emails\" type=\"text\" placeholder=\"finance@example.com, poc@example.com\" defaultValue={(initial.cc_emails || []).join?.(\", \") || initial.cc_emails || \"\"}/></Field>\n {!partner && !compact && <>\n <Field label=\"Status\"><select name=\"status\" defaultValue={initial.status || \"backlog\"}>{config.statuses.filter((x: string) => x !== \"done\" || actor.role === \"admin\").map((x: string) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={initial.owner_user_id || actor.actorId}><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={initial.start_date || \"\"}/></Field>\n <Field label=\"Target end date\"><input name=\"end_date\" type=\"date\" defaultValue={initial.end_date || \"\"}/></Field>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" value={currency} onChange={(e) => setCurrency(e.target.value)}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular project cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={regularCost} onChange={(e) => setRegularCost(Number(e.target.value))}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={partnerCost} onChange={(e) => setPartnerCost(Number(e.target.value))}/></Field>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={initial.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" checked={taxInclusive} onChange={(e) => setTaxInclusive(e.target.checked)}/> Project cost already includes tax</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={regularCost} partnerCost={partnerCost} currency={currency} taxRate={taxRate} taxInclusive={taxInclusive}/>\n {actor.role === \"admin\" && ccRecipients.length > 0 && <fieldset className=\"full\"><legend>Mandatory email CC</legend><p className=\"field-note\">Choose the default company recipients copied on project updates.</p><div className=\"permission-grid\">{ccRecipients.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(initial.notification_cc_ids || []).includes?.(x.id) || (!initial.notification_cc_ids && x.default_selected)}/>{x.label}</label>)}</div></fieldset>}\n <Field label=\"Client portal PIN\" hint=\"Leave empty to generate a 6-digit PIN\"><input name=\"client_pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n {selectedPartner && <Field label=\"Commission document URL\"><input name=\"commission_document_url\" type=\"url\" placeholder=\"https://…\" defaultValue={initial.commission_document_url || \"\"}/></Field>}\n </>}\n <div className=\"form-actions full\"><Button disabled={busy} icon=\"plus\">{busy ? \"Adding…\" : \"Add project\"}</Button></div>\n </form>;\n}\n\nfunction KanbanCard({ project, actor, open }: any) {\n const range = project.end_date ? `Due ${prettyDate(project.end_date)}` : project.start_date ? `Started ${prettyDate(project.start_date)}` : \"Dates not set\";\n const countdown = deadlineLabel(project.end_date, project.status);\n return <button\n className=\"kanban-card\"\n draggable={actor.actorType === \"internal\" && actor.permissions.move_projects}\n onDragStart={(e) => e.dataTransfer.setData(\"text/project-id\", project.id)}\n onClick={open}\n >\n <div className=\"card-top\"><span className={`type-dot type-${project.project_type?.toLowerCase().replace(/[^a-z]/g, \"\")}`}/><span className=\"project-type\">{project.project_type}</span>{project.unanswered_count > 0 && <span className=\"question-attention\" title={`${project.unanswered_count} unanswered client question${project.unanswered_count === 1 ? \"\" : \"s\"}`}><Icon name=\"question\" size={12}/>{project.unanswered_count}</span>}{project.unread_count > 0 && <span className=\"unread\">{project.unread_count}</span>}</div>\n <h3>{project.title}</h3>\n <p>{project.description || \"No description yet.\"}</p>\n <div className=\"card-progress\"><span style={{ width: `${project.progress}%` }}/></div>\n <div className=\"card-meta\"><span><Icon name=\"clock\" size={14}/>{range}</span><b>{project.progress}%</b></div>\n {countdown && <div className={`deadline-countdown ${countdown.includes(\"overdue\") ? \"overdue\" : \"\"}`}>{countdown}</div>}\n {project.partner_name && <div className=\"partner-chip\"><span>{initials(project.partner_name)}</span>{project.partner_name}</div>}\n </button>;\n}\n\nfunction Kanban({ projects, actor, onOpen, onMove }: any) {\n return <div className=\"kanban\">\n {Object.entries(statusMeta).map(([status, meta]) => {\n const items = projects.filter((p: any) => p.status === status);\n return <section className={`kanban-column column-${status}`} key={status}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => { e.preventDefault(); const id = e.dataTransfer.getData(\"text/project-id\"); if (id) onMove(id, status); }}\n >\n <header><div><span className=\"status-symbol\"/><h2>{meta.label}</h2><b>{items.length}</b></div><p>{meta.note}</p></header>\n <div className=\"kanban-list\">\n {items.map((project: any) => <KanbanCard key={project.id} project={project} actor={actor} open={() => onOpen(project.id)}/>)}\n {!items.length && <div className=\"column-empty\">Drop a project here</div>}\n </div>\n </section>;\n })}\n </div>;\n}\n\nfunction Modal({ open, close, children, wide = false }: any) {\n const ref = useRef<HTMLDialogElement>(null);\n useEffect(() => { const node = ref.current; if (!node) return; if (open && !node.open) node.showModal(); if (!open && node.open) node.close(); }, [open]);\n return <dialog ref={ref} className={wide ? \"modal modal-wide\" : \"modal\"} onCancel={(e) => { e.preventDefault(); close(); }} onClick={(e) => { if (e.target === ref.current) close(); }}>\n <NetworkActivity/><div className=\"modal-inner\">{children}</div>\n </dialog>;\n}\n\nfunction QuickForm({ kind, projectId, detail, done }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\"), [feedback, setFeedback] = useState(\"\");\n const [commentText, setCommentText] = useState(\"\");\n const [quickNotes, setQuickNotes] = useState<any[]>([]);\n const [slash, setSlash] = useState<{ start: number; query: string; index: number } | null>(null);\n const commentRef = useRef<HTMLTextAreaElement>(null);\n useEffect(() => {\n if (kind !== \"comment\") return;\n request(\"/api/quick-notes\").then((result) => setQuickNotes(result.quick_notes || [])).catch(() => {});\n }, [kind]);\n const matchingNotes = useMemo(() => {\n const query = slash?.query.toLowerCase().trim() || \"\";\n return quickNotes.filter((note) => !query || `${note.title} ${note.shortcut} ${note.body}`.toLowerCase().includes(query)).slice(0, 8);\n }, [quickNotes, slash?.query]);\n const updateSlash = (value: string, cursor: number) => {\n const before = value.slice(0, cursor);\n const match = /(?:^|\\s)\\/([^/\\n]*)$/.exec(before);\n setSlash(match ? { start: before.lastIndexOf(\"/\"), query: match[1], index: 0 } : null);\n };\n const selectPlaceholder = (value: string, from: number, insertedStart?: number, insertedEnd?: number) => {\n requestAnimationFrame(() => {\n const textarea = commentRef.current;\n if (!textarea) return;\n const matches = [...value.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)];\n const placeholder = matches.find((match) => {\n const start = match.index ?? 0;\n return start >= from && (insertedStart === undefined || (start >= insertedStart && start < (insertedEnd ?? value.length)));\n });\n if (!placeholder || placeholder.index === undefined) return;\n textarea.focus();\n textarea.setSelectionRange(placeholder.index, placeholder.index + placeholder[0].length);\n });\n };\n const insertQuickNote = (note: any) => {\n const textarea = commentRef.current;\n if (!textarea || !slash) return;\n const cursor = textarea.selectionEnd;\n const next = `${commentText.slice(0, slash.start)}${note.body}${commentText.slice(cursor)}`;\n const insertedEnd = slash.start + note.body.length;\n setCommentText(next);\n setSlash(null);\n selectPlaceholder(next, slash.start, slash.start, insertedEnd);\n if (!/\\{\\{[^{}\\n]+\\}\\}/.test(note.body)) {\n requestAnimationFrame(() => {\n textarea.focus();\n textarea.setSelectionRange(insertedEnd, insertedEnd);\n });\n }\n };\n const commentKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (slash) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (matchingNotes.length) setSlash((current) => current ? {\n ...current,\n index: (current.index + (event.key === \"ArrowDown\" ? 1 : -1) + matchingNotes.length) % matchingNotes.length,\n } : null);\n return;\n }\n if ((event.key === \"Enter\" || event.key === \"Tab\") && matchingNotes.length) {\n event.preventDefault();\n insertQuickNote(matchingNotes[Math.min(slash.index, matchingNotes.length - 1)]);\n return;\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n setSlash(null);\n return;\n }\n }\n if (event.key === \"Tab\") {\n const textarea = event.currentTarget;\n const next = [...commentText.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)]\n .find((match) => (match.index ?? -1) >= textarea.selectionEnd);\n if (next && next.index !== undefined) {\n event.preventDefault();\n textarea.setSelectionRange(next.index, next.index + next[0].length);\n }\n }\n };\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\"); setFeedback(\"\");\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.client_visible = data.client_visible === \"on\";\n data.send_email = data.send_email === \"on\";\n data.is_main_poc = data.is_main_poc === \"on\";\n data.email_cc = data.email_cc === \"on\";\n try {\n const paths: any = {\n link: \"links\", credential: \"credentials\", stakeholder: \"stakeholders\",\n milestone: \"milestones\", payment: \"payments\", comment: \"comments\",\n };\n const result = await post(`/api/projects/${projectId}/${paths[kind]}`, data);\n form.reset(); setCommentText(\"\"); setSlash(null); await done();\n if (data.send_email && !result.email?.sent) {\n setFeedback(`Update saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`);\n }\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <form className=\"quick-form\" onSubmit={submit}>\n {error && <div className=\"alert alert-error\">{error}</div>}\n {feedback && <div className=\"alert alert-warning\">{feedback}</div>}\n {kind === \"comment\" && <>\n <div className=\"form-row\"><Field label=\"Update type\"><select name=\"comment_type\">{Object.entries(typeLabels).filter(([x]) => x !== \"milestone\").map(([value, label]) => <option value={value}>{label}</option>)}</select></Field>\n <Field label=\"Visible to\"><select name=\"visibility\"><option value=\"both\">Admin + client</option><option value=\"admin\">Admin only</option><option value=\"client\">Client timeline</option></select></Field>\n <Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field></div>\n <Field label=\"Update\"><div className=\"quick-note-composer\"><textarea ref={commentRef} name=\"body\" required rows={4} value={commentText} placeholder=\"Share what changed and what comes next. Type / for a quick note.\" onChange={(event) => { setCommentText(event.target.value); updateSlash(event.target.value, event.target.selectionStart); }} onClick={(event) => updateSlash(event.currentTarget.value, event.currentTarget.selectionStart)} onKeyDown={commentKeyDown}/>{slash && <div className=\"quick-note-menu\" role=\"listbox\" aria-label=\"Quick notes\">{matchingNotes.length ? matchingNotes.map((note, index) => <button type=\"button\" role=\"option\" aria-selected={index === slash.index} className={index === slash.index ? \"active\" : \"\"} key={note.id} onMouseDown={(event) => { event.preventDefault(); insertQuickNote(note); }}><span><b>{note.title}</b><small>/{note.shortcut}</small></span><p>{note.body}</p></button>) : <div className=\"quick-note-empty\">No matching quick notes</div>}</div>}<small className=\"quick-note-hint\">Type / to insert a quick note · press Tab to replace each {\"{{VARIABLE}}\"}</small></div></Field>\n {detail.project.contact_email && <label className=\"check notify-check\"><input name=\"send_email\" type=\"checkbox\"/> Email the project POC and CC list</label>}\n </>}\n {kind === \"link\" && <div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required placeholder=\"Contract\"/></Field><Field label=\"URL\"><input name=\"url\" type=\"url\" required placeholder=\"https://…\"/></Field><Field label=\"Type\"><select name=\"link_type\"><option value=\"reference\">Reference</option><option value=\"document\">Document</option><option value=\"contract\">Contract</option><option value=\"mou\">MOU</option><option value=\"github\">GitHub</option></select></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div>}\n {kind === \"credential\" && <><div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required/></Field><Field label=\"Username\"><input name=\"username\"/></Field><Field label=\"Secret\"><input name=\"secret\" type=\"password\"/></Field></div><div className=\"form-row\"><Field label=\"Login URL\"><input name=\"url\" type=\"url\"/></Field><Field label=\"Notes\"><input name=\"notes\"/></Field></div></>}\n {kind === \"stakeholder\" && <><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/><Field label=\"Role\"><input name=\"role\" placeholder=\"Founder, SPOC…\"/></Field></div><Field label=\"Email address\"><input name=\"email\" type=\"email\" required placeholder=\"poc@example.com\"/></Field><div className=\"form-row stakeholder-email-options\"><label className=\"check\"><input name=\"is_main_poc\" type=\"checkbox\"/> Main POC and project email</label><label className=\"check\"><input name=\"email_cc\" type=\"checkbox\"/> Include in project email CC</label></div></>}\n {kind === \"milestone\" && <><div className=\"form-row\"><Field label=\"Milestone\"><input name=\"title\" required/></Field><Field label=\"Tag\"><input name=\"tag\" defaultValue=\"Milestone\"/></Field><Field label=\"Status\"><select name=\"status\"><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field></div><div className=\"form-row\"><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field><Field label=\"Completed date\"><input name=\"completed_date\" type=\"date\"/></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div><Field label=\"Description\"><textarea name=\"description\" rows={2}/></Field></>}\n {kind === \"payment\" && <div className=\"form-row\"><Field label={`Amount (${detail.project.currency})`}><input name=\"amount\" type=\"number\" min=\"0.01\" step=\"0.01\" required/></Field><Field label=\"Payment date\"><input name=\"paid_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)} required/></Field><Field label=\"Note\"><input name=\"note\" placeholder=\"Milestone payment\"/></Field></div>}\n <Button disabled={busy} variant=\"secondary\" icon=\"plus\">{busy ? \"Saving…\" : `Add ${kind}`}</Button>\n </form>;\n}\n\nfunction Timeline({ detail, actor, reload, notify }: any) {\n const [replying, setReplying] = useState<string | null>(null), [reply, setReply] = useState(\"\"), [sendReply, setSendReply] = useState(false), [adding, setAdding] = useState(false);\n const events = useMemo(() => [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, timelineType: x.comment_type, date: x.event_date })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, timelineType: \"milestone\", body: x.description, author_name: x.tag, date: x.completed_date || x.due_date, milestone: true })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date) || String(b.created_at).localeCompare(String(a.created_at))), [detail]);\n const canComment = actor.actorType === \"partner\"\n ? detail.project.status !== \"backlog\"\n : actor.actorType === \"internal\" && canActor(actor, \"manage_comments\");\n const resolve = async (item: any) => {\n try {\n const result = await post(`/api/comments/${item.id}/resolve`, { reply, send_email: sendReply });\n setReply(\"\"); setReplying(null); setSendReply(false); await reload();\n if (sendReply && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Question answered\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n return <div className=\"timeline-wrap\">\n <div className=\"section-toolbar\">\n <div><h3>Project timeline</h3><p>{events.length} dated {events.length === 1 ? \"entry\" : \"entries\"} across updates and milestones.</p></div>\n {canComment && <Button variant={adding ? \"secondary\" : \"primary\"} icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"Add update\"}</Button>}\n </div>\n {adding && <div className=\"composer\"><QuickForm kind=\"comment\" projectId={detail.project.id} detail={detail} done={async () => { await reload(); setAdding(false); }}/></div>}\n {events.length ? <div className=\"timeline\">\n {events.map((item: any) => <article className={`timeline-item timeline-${item.timelineType}`} key={`${item.milestone ? \"m\" : \"c\"}-${item.id}`}>\n {futureDaysLabel(item.date) && <span className=\"timeline-future-gap\">{futureDaysLabel(item.date)}</span>}\n <div className=\"timeline-node\"><Icon name={eventIcons[item.timelineType] || \"note\"} size={16}/></div>\n <div className=\"timeline-content\">\n <div className=\"timeline-head\"><span className=\"event-type\">{typeLabels[item.timelineType] || titleCase(item.timelineType)}</span><time>{timelineDate(item.date)}</time>{item.visibility && <span className=\"visibility-label\">{item.visibility === \"both\" ? \"Team + client\" : titleCase(item.visibility)}</span>}{item.resolved_at && <span className=\"resolved\">Resolved</span>}</div>\n <h4>{item.milestone ? item.title : item.author_name}</h4>\n {item.body && <p>{item.body}</p>}\n {item.timelineType === \"question\" && detail.comments.filter((x: any) => x.parent_id === item.id).map((x: any) => <div className=\"timeline-reply\"><b>{x.author_name}</b><p>{x.body}</p></div>)}\n {item.timelineType === \"question\" && !item.resolved_at && canComment && <>\n {replying === item.id ? <div className=\"reply-box\"><textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder=\"Answer the client and resolve this question\"/>{detail.project.contact_email && <label className=\"check\"><input type=\"checkbox\" checked={sendReply} onChange={(e) => setSendReply(e.target.checked)}/>Email this answer to the client POC</label>}<Button variant=\"secondary\" onClick={() => resolve(item)}>Reply & resolve</Button></div> : <button className=\"text-action\" onClick={() => setReplying(item.id)}>Answer question</button>}\n </>}\n </div>\n </article>)}\n </div> : <Empty title=\"No timeline entries yet\" text=\"Updates and milestones will build the project story here.\"/>}\n </div>;\n}\nfunction canActor(actor: Actor, key: string) {\n return actor.role === \"admin\" || actor.permissions?.[key] === true;\n}\nfunction CredentialCard({ item, canRemove, removeItem }: any) {\n const [revealed, setRevealed] = useState(false);\n const copy = async (value: string) => { if (value) await navigator.clipboard.writeText(value); };\n return <article className=\"credential-card\">\n <header><span><Icon name=\"key\" size={16}/></span><div><h4>{item.label}</h4><p>{item.username || \"No username\"}</p></div></header>\n <div className=\"secret-row\"><code>{revealed ? item.secret || \"—\" : item.secret ? \"••••••••••••\" : \"No secret\"}</code><button type=\"button\" onClick={() => setRevealed(!revealed)} aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}><Icon name=\"eye\" size={15}/></button></div>\n {item.notes && <p className=\"credential-note\">{item.notes}</p>}\n <footer>{item.url && <a href={item.url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={14}/>Open login</a>}{item.username && <button type=\"button\" onClick={() => copy(item.username)}><Icon name=\"copy\" size={14}/>Copy username</button>}{canRemove && <button type=\"button\" className=\"danger-link\" onClick={() => removeItem(`/api/credentials/${item.id}`)}>Remove</button>}</footer>\n </article>;\n}\nfunction StakeholderCard({ item, canManage, onUpdate, onRemove }: any) {\n return <article className={`person ${item.is_main_poc ? \"person-main\" : \"\"}`}>\n <span>{initials(item.name)}</span>\n <div>\n <header><b>{item.name}</b>{Boolean(item.is_main_poc) && <em>Main POC</em>}{Boolean(item.email_cc) && <em>CC</em>}</header>\n <p>{item.role || \"Stakeholder\"}</p>\n <a href={`mailto:${item.email}`}>{item.email || \"Email required\"}</a>\n <a href={`tel:${item.phone}`}>{item.phone}</a>\n {canManage && <>\n <div className=\"person-actions\">\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { is_main_poc: true })}>Make main POC</button>}\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { email_cc: !Boolean(item.email_cc) })}>{Boolean(item.email_cc) ? \"Remove from CC\" : \"Add to CC\"}</button>}\n <button type=\"button\" className=\"danger-link\" onClick={() => onRemove(`/api/stakeholders/${item.id}`)}>Remove</button>\n </div>\n <details className=\"person-editor\">\n <summary>Edit contact details</summary>\n <form className=\"stack\" onSubmit={async (e: any) => {\n e.preventDefault();\n const data: any = Object.fromEntries(new FormData(e.currentTarget));\n data.email_cc = data.email_cc === \"on\";\n await onUpdate(item, data);\n }}>\n <Field label=\"Name\"><input name=\"name\" required defaultValue={item.name}/></Field>\n <PhoneField defaultValue={item.phone}/>\n <Field label=\"Email\"><input name=\"email\" type=\"email\" required defaultValue={item.email || \"\"}/></Field>\n <Field label=\"Role\"><input name=\"role\" defaultValue={item.role || \"\"}/></Field>\n {!Boolean(item.is_main_poc) && <label className=\"check\"><input name=\"email_cc\" type=\"checkbox\" defaultChecked={Boolean(item.email_cc)}/>Include in project email CC</label>}\n <Button variant=\"secondary\">Save contact</Button>\n </form>\n </details>\n </>}\n </div>\n </article>;\n}\n\nfunction DetailPanel({ projectId, actor, owners = [], partners = [], close, refreshList, notify }: any) {\n const [detail, setDetail] = useState<any>(null), [templates, setTemplates] = useState<any[]>([]), [tab, setTab] = useState(\"overview\"), [busy, setBusy] = useState(false), [invoiceOpen, setInvoiceOpen] = useState(false), [progressDraft, setProgressDraft] = useState(0), [selectedPartner, setSelectedPartner] = useState(\"\"), [editingMilestoneId, setEditingMilestoneId] = useState(\"\"), [savingMilestoneId, setSavingMilestoneId] = useState(\"\");\n const load = async () => {\n const value = await request(`/api/projects/${projectId}`);\n setDetail(value); setProgressDraft(Number(value.project.progress)); setSelectedPartner(value.project.partner_id || \"\"); post(`/api/projects/${projectId}/read`).catch(() => {});\n };\n useEffect(() => { load().catch((e) => notify(e.message, \"error\")); }, [projectId]);\n useEffect(() => { if (actor.actorType === \"internal\") request(\"/api/milestone-templates\").then((x) => setTemplates(x.templates)).catch(() => {}); }, [projectId]);\n if (!detail) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/><div className=\"skeleton\"/></div>;\n const p = detail.project, internal = actor.actorType === \"internal\";\n const saveOverview = async (e: any) => {\n e.preventDefault(); setBusy(true);\n try {\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n await patch(`/api/projects/${p.id}`, data); notify(\"Project updated\"); await load(); refreshList();\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const archive = async () => {\n try { await patch(`/api/projects/${p.id}`, { archived: !p.archived }); notify(p.archived ? \"Project restored\" : \"Project archived\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteProject = async () => {\n const left = Math.floor(Math.random() * 9) + 2, right = Math.floor(Math.random() * 9) + 2;\n const answer = prompt(`Permanently delete “${p.title}” and its full history?\\n\\nTo confirm, what is ${left} + ${right}?`);\n if (answer === null) return;\n try { await remove(`/api/projects/${p.id}`, { left, right, answer }); notify(\"Project permanently deleted\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const copyPortal = async () => {\n const url = `${location.origin}/client/${p.client_token}`;\n await navigator.clipboard.writeText(url); notify(\"Client link copied\");\n };\n const saveProgress = async () => {\n setBusy(true);\n try { await patch(`/api/projects/${p.id}`, { progress: progressDraft }); await load(); refreshList(); notify(\"Completion updated\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const removeItem = async (path: string) => {\n if (!confirm(\"Remove this item?\")) return;\n try { await remove(path); load(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const updateMilestone = async (item: any, status: string) => {\n try {\n await patch(`/api/milestones/${item.id}`, {\n status,\n completed_date: status === \"complete\" ? item.completed_date || new Date().toISOString().slice(0, 10) : \"\",\n });\n await load(); notify(`Milestone marked ${titleCase(status)}`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveMilestone = async (e: any, item: any) => {\n e.preventDefault(); setSavingMilestoneId(item.id);\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.client_visible = formData.has(\"client_visible\");\n data.completed_date = data.status === \"complete\"\n ? data.completed_date || item.completed_date || new Date().toISOString().slice(0, 10)\n : \"\";\n try {\n await patch(`/api/milestones/${item.id}`, data);\n setEditingMilestoneId(\"\"); await load(); notify(\"Milestone updated\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setSavingMilestoneId(\"\"); }\n };\n const extendSchedule = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const result = await post(`/api/projects/${p.id}/extensions`, Object.fromEntries(new FormData(form)));\n form.reset(); await load(); await refreshList();\n notify(`Schedule extended by ${result.days} ${result.days === 1 ? \"day\" : \"days\"}`);\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const updateStakeholder = async (item: any, changes: any) => {\n try {\n await patch(`/api/stakeholders/${item.id}`, changes);\n await load(); await refreshList(); notify(\"Project email recipients updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const collaborationReady = actor.actorType !== \"partner\" || p.status !== \"backlog\";\n const tabs = [\n { key: \"overview\", label: \"Overview\", icon: \"board\" },\n { key: \"timeline\", label: \"Timeline\", icon: \"update\", count: detail.comments.length + detail.milestones.filter((x: any) => x.status !== \"upcoming\").length },\n { key: \"milestones\", label: \"Milestones\", icon: \"milestone\", count: detail.milestones.length },\n { key: \"resources\", label: \"Resources\", icon: \"link\", count: detail.links.length + detail.credentials.length },\n { key: \"people\", label: \"People\", icon: \"users\", count: detail.stakeholders.length },\n { key: \"payments\", label: \"Payments\", icon: \"payment\", count: detail.payments.length },\n ...((internal || collaborationReady) ? [{ key: \"access\", label: \"Client access\", icon: \"key\" }] : []),\n ];\n return <div className=\"detail\">\n <header className=\"detail-header\">\n <div className=\"detail-title\"><div className=\"detail-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <span className=\"delay-badge\">Forecast +{p.delivery_delay_days}d</span>}{p.end_date && <span className={`delay-badge deadline-badge ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</span>}</div><h2>{p.title}</h2><div className=\"detail-meta\"><span>{p.partner_name ? `Partner · ${p.partner_name}` : \"Direct AFLABS project\"}</span><span>{p.project_type}</span>{p.contact_email && <a href={`mailto:${p.contact_email}`}><Icon name=\"mail\" size={13}/>{p.contact_email}</a>}</div></div>\n <div className={`detail-progress ${actor.role === \"admin\" ? \"detail-progress-editable\" : \"\"}`}>\n <div><span>Completion</span><b>{actor.role === \"admin\" ? progressDraft : p.progress}%</b></div>\n {actor.role === \"admin\" ? <div className=\"progress-controls\"><input aria-label=\"Project completion\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={progressDraft} onChange={(e) => setProgressDraft(Number(e.target.value))}/><Button type=\"button\" variant=\"secondary\" disabled={busy || progressDraft === p.progress} onClick={saveProgress}>Save</Button></div> : <div className=\"progress\"><i style={{ width: `${p.progress}%` }}/></div>}\n </div>\n <button className=\"icon-button\" onClick={close} aria-label=\"Close\"><Icon name=\"close\"/></button>\n </header>\n <nav className=\"detail-tabs\">{tabs.map((item) => <button className={tab === item.key ? \"active\" : \"\"} onClick={() => setTab(item.key)}><Icon name={item.icon} size={15}/><span>{item.label}</span>{item.count !== undefined && <b>{item.count}</b>}</button>)}</nav>\n <div className=\"detail-body\">\n {tab === \"overview\" && <div className=\"detail-section\">\n <div className=\"overview-layout\">\n {internal && canActor(actor, \"edit_projects\") ? <form className=\"form-grid overview-form\" onSubmit={saveOverview}>\n <div className=\"form-section-title full\"><h3>Project definition</h3><p>Scope, ownership, and delivery window.</p></div>\n <Field label=\"Title\"><input name=\"title\" defaultValue={p.title} required/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={p.status}>{Object.keys(statusMeta).filter((x) => x !== \"done\" || actor.role === \"admin\").map((x) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"One-line description\"><input name=\"description\" maxLength={240} defaultValue={p.description}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for structured project context.\"><textarea name=\"markdown_details\" rows={14} defaultValue={p.markdown_details || \"\"}/></Field>\n {detail.stakeholders.length ? <div className=\"recipient-source full\"><Icon name=\"users\" size={16}/><div><b>Email recipients come from stakeholders</b><p>Use the People tab to mark the main POC and choose CC recipients.</p></div></div> : <><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={p.contact_email || \"\"} placeholder=\"project@example.com\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(p.cc_emails || []).join(\", \")} placeholder=\"finance@example.com, poc@example.com\"/></Field></>}\n {actor.role === \"admin\" && detail.notificationCcOptions?.length > 0 && <fieldset className=\"full project-cc-settings\"><legend>Company CC recipients</legend><p className=\"field-note\">These recipients are added alongside stakeholder CCs whenever you choose to email an update.</p><div className=\"permission-grid\">{detail.notificationCcOptions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(p.notification_cc_ids || []).includes(x.id)}/><span><b>{x.label}</b><small>{x.email || \"Mapped internal user\"}</small></span></label>)}</div></fieldset>}\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={p.owner_user_id || \"\"} required><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={p.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"Start date\" hint={p.start_date ? `${prettyDate(p.start_date)} · ${projectDateFootnote(p.start_date, \"start\")}` : \"\"}><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\" hint={p.end_date ? `${prettyDate(p.end_date)} · ${projectDateFootnote(p.end_date, \"end\")}` : \"\"}><input name=\"end_date\" type=\"date\" defaultValue={p.end_date || \"\"}/></Field>\n <div className=\"form-section-title full\"><h3>Commercial details</h3><p>Internal pricing and partner documentation.</p></div>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={p.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.regular_cost}/></Field>\n {selectedPartner && <><Field label=\"Partner-managed cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.partner_cost}/></Field><Field label=\"Commission document\"><input name=\"commission_document_url\" type=\"url\" defaultValue={p.commission_document_url || \"\"}/></Field></>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={p.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(p.tax_inclusive)}/> Cost already includes {p.tax_label || \"tax\"}</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={p.regular_cost} partnerCost={p.partner_cost} currency={p.currency} taxRate={p.tax_rate} taxInclusive={p.tax_inclusive}/>\n <div className=\"form-actions full\"><Button disabled={busy}>{busy ? \"Saving…\" : \"Save project\"}</Button>{canActor(actor, \"archive_projects\") && <Button type=\"button\" variant=\"secondary\" icon=\"archive\" onClick={archive}>{p.archived ? \"Restore\" : \"Archive\"}</Button>}{actor.role === \"admin\" && <Button type=\"button\" variant=\"danger\" onClick={deleteProject}>Delete permanently</Button>}</div>\n </form> : <div className=\"read-overview\"><div className=\"overview-description\"><h3>Project summary</h3><p>{p.description || \"No summary yet.\"}</p>{p.markdown_details && <section className=\"project-markdown-notes\"><header><div><h4>Detailed working notes</h4><p>Structured project context</p></div><span>Markdown</span></header><MarkdownBlock value={p.markdown_details}/></section>}</div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}{p.start_date && <small>{projectDateFootnote(p.start_date, \"start\")}</small>}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}{p.end_date && <small>{projectDateFootnote(p.end_date, \"end\")}</small>}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d{p.forecast_end_date && <small>{projectDateFootnote(p.forecast_end_date, \"end\")}</small>}</dd></div>}<div><dt>Type</dt><dd>{p.project_type}</dd></div>{p.contact_email && <div><dt>Project email</dt><dd><a href={`mailto:${p.contact_email}`}>{p.contact_email}</a></dd></div>}</dl></div>}\n <aside className=\"overview-summary\"><h3>Delivery snapshot</h3><dl><div><dt>Status</dt><dd>{statusMeta[p.status]?.label}</dd></div><div><dt>Primary owner</dt><dd>{p.owner_name || \"Not assigned\"}</dd></div><div><dt>Completion</dt><dd>{p.progress}%</dd></div><div><dt>Timeline</dt><dd>{detail.comments.length + detail.milestones.length} entries</dd></div><div><dt>Stakeholders</dt><dd>{detail.stakeholders.length}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Expected delay</dt><dd>+{p.delivery_delay_days} days</dd></div>}</dl>{actor.actorType === \"partner\" && !collaborationReady && <p className=\"notice\"><Icon name=\"clock\" size={15}/>Collaboration tools unlock when AFLABS moves this project to To do.</p>}</aside>\n </div>\n {actor.actorType === \"partner\" && actor.permissions.edit_owned_projects && <PartnerProjectEditor project={p} onDone={async () => { await load(); await refreshList(); }} notify={notify}/>}\n {internal && canActor(actor, \"edit_projects\") && p.end_date && <details className=\"schedule-extension\"><summary><span><Icon name=\"clock\" size={16}/><b>Extend target date</b></span><Icon name=\"chevron\" size={15}/></summary><form className=\"form-row\" onSubmit={extendSchedule}><Field label=\"New target date\"><input name=\"new_end_date\" type=\"date\" min={p.end_date} required/></Field><Field label=\"External reason\"><input name=\"reason\" required placeholder=\"Client dependency, approval delay…\"/></Field><Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field><Button disabled={busy}>Record extension</Button></form></details>}\n </div>}\n {tab === \"timeline\" && <Timeline detail={detail} actor={actor} reload={load} notify={notify}/>}\n {tab === \"milestones\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Delivery milestones</h3><p>Concrete checkpoints that also shape the client journey.</p></div>{internal && canActor(actor, \"manage_milestones\") && <div className=\"toolbar-actions\">{templates.length > 0 && <form className=\"template-apply\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const result = await post(`/api/projects/${p.id}/apply-milestone-template`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(`${result.count || 0} milestones added. Set their project due dates below.`); }}><select name=\"template_id\" required defaultValue=\"\"><option value=\"\">Use template…</option>{templates.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select><Button variant=\"secondary\">Apply</Button></form>}<details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add milestone</summary><div className=\"popover-form\"><QuickForm kind=\"milestone\" projectId={p.id} detail={detail} done={load}/></div></details></div>}</div>\n {internal && canActor(actor, \"manage_milestones\") && detail.milestones.some((x: any) => !x.due_date && x.status !== \"complete\") && <div className=\"milestone-date-notice\"><span><Icon name=\"clock\" size={16}/></span><div><b>Schedule your imported milestones</b><p>Template milestones use project-specific dates. Select Edit to set each due date and adjust its details.</p></div></div>}\n <div className=\"milestone-list\">{detail.milestones.map((x: any) => <article key={x.id} className={`milestone-row state-${x.status}`}>\n <span className=\"milestone-state\"><Icon name={x.status === \"complete\" ? \"check\" : x.status === \"active\" ? \"update\" : \"clock\"} size={15}/></span>\n <div className=\"milestone-copy\"><header><h4>{x.title}</h4><span>{titleCase(x.status)}</span>{!x.due_date && x.status !== \"complete\" && <span className=\"milestone-undated\">Date needed</span>}</header><p>{x.tag} · {x.completed_date ? `Completed ${prettyDate(x.completed_date)}` : x.due_date ? `Due ${prettyDate(x.due_date)}` : \"Due date not set\"}</p>{x.description && <small>{x.description}</small>}</div>\n {internal && canActor(actor, \"manage_milestones\") && <div className=\"milestone-actions\"><select aria-label={`Status for ${x.title}`} value={x.status} onChange={(e) => updateMilestone(x, e.target.value)}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select><button type=\"button\" className=\"text-action\" aria-expanded={editingMilestoneId === x.id} onClick={() => setEditingMilestoneId(editingMilestoneId === x.id ? \"\" : x.id)}>{editingMilestoneId === x.id ? \"Close\" : \"Edit\"}</button><button type=\"button\" className=\"text-danger\" onClick={() => removeItem(`/api/milestones/${x.id}`)}>Remove</button></div>}\n {editingMilestoneId === x.id && <form className=\"milestone-editor\" onSubmit={(e) => saveMilestone(e, x)}>\n <Field label=\"Milestone title\"><input name=\"title\" required defaultValue={x.title}/></Field>\n <Field label=\"Tag\"><input name=\"tag\" defaultValue={x.tag || \"Milestone\"}/></Field>\n <Field label=\"Due date\"><input name=\"due_date\" type=\"date\" defaultValue={x.due_date || \"\"}/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={x.status}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field>\n <Field label=\"Completed date\" hint=\"Filled automatically when marked complete\"><input name=\"completed_date\" type=\"date\" defaultValue={x.completed_date || \"\"}/></Field>\n <label className=\"check milestone-visibility\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked={Boolean(x.client_visible)}/> Visible on the client portal</label>\n <div className=\"milestone-description\"><Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description || \"\"} placeholder=\"What will be delivered at this checkpoint?\"/></Field></div>\n <div className=\"form-actions\"><Button disabled={savingMilestoneId === x.id}>{savingMilestoneId === x.id ? \"Saving…\" : \"Save milestone\"}</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingMilestoneId(\"\")}>Cancel</Button></div>\n </form>}\n </article>)}</div>\n {!detail.milestones.length && <Empty title=\"No milestones yet\" text=\"Add milestone tags to make delivery checkpoints visible.\"/>}\n </div>}\n {tab === \"resources\" && <div className=\"detail-section split-section\">\n <section><div className=\"section-toolbar\"><div><h3>Shared resources</h3><p>Documents, contracts, references, and repositories.</p></div>{((internal && canActor(actor, \"manage_links\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add resource</summary><div className=\"popover-form\"><QuickForm kind=\"link\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"resource-list\">{detail.links.map((x: any) => <article className=\"resource-row\"><span className=\"resource-icon\"><Icon name={x.link_type === \"github\" ? \"work\" : \"link\"}/></span><div><a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a><p>{titleCase(x.link_type)} · {x.client_visible ? \"Client visible\" : \"Team only\"}</p></div>{internal && canActor(actor, \"manage_links\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/links/${x.id}`)}>Remove</button>}</article>)}</div>{!detail.links.length && <Empty title=\"No shared resources\" text=\"Add the first document, contract, repository, or reference link.\"/>}</section>\n {((internal && canActor(actor, \"view_credentials\")) || (actor.actorType === \"partner\" && collaborationReady)) && <section><div className=\"section-toolbar\"><div><h3>Credentials</h3><p>Project access details. Credentials remain hidden from the client portal.</p></div>{((internal && canActor(actor, \"manage_credentials\")) || actor.actorType === \"partner\") && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add credential</summary><div className=\"popover-form\"><QuickForm kind=\"credential\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"credential-list\">{detail.credentials.map((x: any) => <CredentialCard item={x} canRemove={internal && canActor(actor, \"manage_credentials\")} removeItem={removeItem}/>)}</div>{!detail.credentials.length && <Empty title=\"No credentials saved\" text=\"Add basic project access details when the delivery team needs them.\"/>}</section>}\n </div>}\n {tab === \"people\" && <div className=\"detail-section\"><div className=\"section-toolbar\"><div><h3>Client stakeholders</h3><p>One contact is always the main POC. Other stakeholder emails can receive project updates by CC.</p></div>{((internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add stakeholder</summary><div className=\"popover-form\"><QuickForm kind=\"stakeholder\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"people-grid\">{detail.stakeholders.map((x: any) => <StakeholderCard key={x.id} item={x} canManage={(internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)} onUpdate={updateStakeholder} onRemove={removeItem}/>)}</div>{!detail.stakeholders.length && <Empty title=\"No stakeholders\" text=\"Add a client contact; the first becomes the main POC automatically.\"/>}</div>}\n {tab === \"payments\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Payment fulfillment</h3><p>Track receipts and generate branded invoices against the agreed client cost.</p></div>{(actor.actorType === \"partner\" || canActor(actor, \"manage_payments\")) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Record payment</summary><div className=\"popover-form\"><QuickForm kind=\"payment\" projectId={p.id} detail={detail} done={load}/></div></details>}</div>\n <div className=\"payment-summary\"><div><span>Project cost</span><b>{money(detail.paymentSummary.total, p.currency)}</b></div><div><span>Received</span><b>{money(detail.paymentSummary.paid, p.currency)}</b></div><div className=\"pending\"><span>Pending</span><b>{money(detail.paymentSummary.pending, p.currency)}</b></div></div>\n <div className=\"payments-layout\"><section><h4 className=\"subsection-title\">Receipts</h4><div className=\"item-list\">{detail.payments.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"payment\"/></span><div><b>{money(x.amount, x.currency)}</b><p>{prettyDate(x.paid_date)} · {x.note || \"Payment received\"}</p><a className=\"receipt-link\" href={`/api/payments/${x.id}/receipt.pdf`} target=\"_blank\" rel=\"noreferrer\">Receipt PDF ↗</a></div>{internal && canActor(actor, \"manage_payments\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/payments/${x.id}`)}>Remove</button>}</div>)}</div>{!detail.payments.length && <p className=\"muted\">No payments recorded yet.</p>}</section>\n <section>\n <div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <Button variant=\"secondary\" icon=\"plus\" onClick={() => setInvoiceOpen(true)}>Create invoice</Button>}</div>\n <Modal open={invoiceOpen} close={() => setInvoiceOpen(false)} wide><div className=\"modal-head\"><div><h2>New invoice</h2><p>Review line items, adjustments, tax, and the final total before creating the PDF.</p></div><button className=\"icon-button\" aria-label=\"Close invoice composer\" onClick={() => setInvoiceOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><InvoiceComposer project={p} detail={detail} onDone={async () => { await load(); setInvoiceOpen(false); }} notify={notify}/></div></Modal>\n <div className=\"invoice-list\">{(detail.invoices || []).map((x: any) => <a className=\"invoice-row\" href={\"/api/invoices/\" + x.id + \"/pdf\"} target=\"_blank\"><span><Icon name=\"note\"/></span><div><b>{x.invoice_number}</b><p>{titleCase(x.invoice_type)} · {money(x.total || x.amount, x.currency)} · {x.items?.length || 0} items</p></div><em>PDF ↗</em></a>)}</div>\n {!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}\n </section></div>\n </div>}\n {tab === \"access\" && <div className=\"detail-section access-grid\"><section><div className=\"section-heading\"><h3>Client portal access</h3><p>Share the private project link and PIN together with the client.</p></div><div className=\"portal-access-card\"><div><span>Private project link</span><code>{location.origin}/client/{p.client_token}</code></div><Button variant=\"secondary\" icon=\"copy\" onClick={copyPortal}>Copy link</Button><div><span>Project PIN</span><strong>{p.client_pin}</strong></div></div>{internal && <form className=\"inline-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await patch(`/api/projects/${p.id}`, Object.fromEntries(new FormData(form))); notify(\"Client PIN updated\"); await load(); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Change client PIN\"><input name=\"client_pin\" defaultValue={p.client_pin} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Button>Update PIN</Button></form>}</section><section className=\"privacy-note\"><h3>Client-safe sharing</h3><ul><li>Only client-visible links, milestones, and timeline entries appear.</li><li>Credentials, internal comments, and commission documents remain private.</li><li>Project completion and payment fulfillment update automatically.</li></ul></section></div>}\n </div>\n </div>;\n}\n\nfunction BrandingEditor({ value, fallback = {}, title, description, partner = false, onSave }: any) {\n const [draft, setDraft] = useState<any>(value || {});\n useEffect(() => { setDraft(value || {}); }, [JSON.stringify(value)]);\n const update = (key: string, next: string) => setDraft((current: any) => ({ ...current, [key]: next }));\n const effective = {\n name: draft.name || fallback.name || \"AFLABS\",\n logo_url: draft.logo_url || fallback.logo_url || \"/frontend/logo.png\",\n accent_color: draft.accent_color || fallback.accent_color || \"#8edb11\",\n contact_info: draft.contact_info || fallback.contact_info || \"\",\n website_url: draft.website_url || fallback.website_url || \"\",\n portal_label: draft.portal_label || fallback.portal_label || \"Project delivery\",\n welcome_message: draft.welcome_message || fallback.welcome_message || \"Every meaningful update, in one clear timeline.\",\n document_header: draft.document_header || fallback.document_header || \"AFLABS PM\\nProject delivery, made visible.\",\n document_footer: draft.document_footer || fallback.document_footer || \"Thank you for your business.\",\n };\n return <div className=\"branding-layout\">\n <section className=\"branding-form\">\n <h2>{title}</h2><p>{description}</p>\n <form className=\"stack\" onSubmit={async (e) => { e.preventDefault(); await onSave(draft); }}>\n <div className=\"form-row\"><Field label=\"Brand name\"><input value={draft.name || \"\"} onChange={(e) => update(\"name\", e.target.value)} placeholder={partner ? fallback.name || \"Use AFLABS default\" : \"AFLABS\"} required={!partner}/></Field>{!partner && <Field label=\"Portal label\"><input value={draft.portal_label || \"\"} onChange={(e) => update(\"portal_label\", e.target.value)} required/></Field>}</div>\n <Field label=\"Logo URL\" hint={partner ? \"Leave blank to use the AFLABS logo\" : \"The supplied AFLABS logo is available at /frontend/logo.png\"}><input value={draft.logo_url || \"\"} onChange={(e) => update(\"logo_url\", e.target.value)} placeholder={partner ? fallback.logo_url || \"/frontend/logo.png\" : \"/frontend/logo.png\"} required={!partner}/></Field>\n <div className=\"form-row\">\n <Field label=\"Accent color\"><div className=\"color-control\"><input type=\"color\" value={effective.accent_color.startsWith(\"#\") ? effective.accent_color : \"#8edb11\"} onChange={(e) => update(\"accent_color\", e.target.value)}/><input value={draft.accent_color || \"\"} onChange={(e) => update(\"accent_color\", e.target.value)} placeholder={fallback.accent_color || \"#8edb11\"}/></div></Field>\n <Field label=\"Contact information\"><input value={draft.contact_info || \"\"} onChange={(e) => update(\"contact_info\", e.target.value)} placeholder={partner ? fallback.contact_info || \"Email or support line\" : \"Email or support line\"}/></Field>\n </div>\n <Field label=\"Website\"><input type=\"url\" value={draft.website_url || \"\"} onChange={(e) => update(\"website_url\", e.target.value)} placeholder={fallback.website_url || \"https://example.com\"}/></Field>\n {!partner && <Field label=\"Timeline introduction\"><textarea rows={3} value={draft.welcome_message || \"\"} onChange={(e) => update(\"welcome_message\", e.target.value)}/></Field>}\n <div className=\"document-branding-fields\">\n <div className=\"form-section-title\"><h3>PDF document details</h3><p>Used consistently on proposals, invoices, and payment receipts.</p></div>\n <Field label=\"Document header\" hint={partner ? \"Leave blank to use the AFLABS document header\" : \"Business name, address, or a short legal line\"}><textarea rows={3} value={draft.document_header || \"\"} onChange={(e) => update(\"document_header\", e.target.value)} placeholder={fallback.document_header || \"Business name\\nAddress or legal details\"}/></Field>\n <Field label=\"Document footer\" hint={partner ? \"Leave blank to use the AFLABS document footer\" : \"Payment, contact, registration, or thank-you details\"}><textarea rows={3} value={draft.document_footer || \"\"} onChange={(e) => update(\"document_footer\", e.target.value)} placeholder={fallback.document_footer || \"Contact and payment details\"}/></Field>\n </div>\n {partner && <p className=\"fallback-note\">Any blank partner field automatically uses the direct AFLABS branding.</p>}\n <div className=\"form-actions\"><Button>Save branding</Button></div>\n </form>\n </section>\n <aside className=\"branding-preview\" style={{ \"--preview-accent\": effective.accent_color } as any}>\n <span className=\"preview-label\">Client preview</span>\n <div className=\"preview-brand\"><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><small>{effective.portal_label}</small></div></div>\n <div className=\"preview-project\"><span>In progress</span><h3>Your project title</h3><p>{effective.welcome_message}</p><div><i/></div></div>\n {(effective.contact_info || effective.website_url) && <small className=\"preview-contact\">{effective.contact_info}{effective.contact_info && effective.website_url ? \" · \" : \"\"}{effective.website_url && \"Visit website\"}</small>}\n <div className=\"document-preview\"><small>Document preview</small><header><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><span>{effective.document_header}</span></div></header><section><i/><strong>Proposal · Invoice · Receipt</strong><p>Professional documents automatically use this logo, accent, header, and footer.</p></section><footer>{effective.document_footer}</footer></div>\n </aside>\n </div>;\n}\n\nfunction AdminDirectory({ actor, config, projects, notify }: any) {\n const [tab, setTab] = useState(\"users\");\n const [users, setUsers] = useState<any[]>([]);\n const [partners, setPartners] = useState<any[]>([]);\n const [branding, setBranding] = useState<any>(null);\n const [loaded, setLoaded] = useState(false);\n const [userRole, setUserRole] = useState(\"user\");\n const [editingUser, setEditingUser] = useState<any>(null);\n const [editingPartner, setEditingPartner] = useState<any>(null);\n const [partnerPermissionLevel, setPartnerPermissionLevel] = useState(\"basic\");\n const [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\n const [ccUserId, setCcUserId] = useState(\"\");\n\n const load = async () => {\n const [userData, partnerData, brandData, ccData] = await Promise.all([\n request(\"/api/admin/users\"),\n request(\"/api/admin/partners\"),\n request(\"/api/admin/branding\"),\n request(\"/api/admin/cc-recipients\"),\n ]);\n setUsers(userData.users);\n setPartners(partnerData.partners);\n setBranding(brandData.branding);\n setProjectOptions(userData.projects || projects);\n setCcRecipients(ccData.recipients || []);\n setCcUsers(ccData.users || []);\n setLoaded(true);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n\n const addUser = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n const formData = new FormData(form);\n const data: any = Object.fromEntries(formData);\n data.permissions = Object.fromEntries(config.permissions.map((x: any) => [x.key, formData.has(`perm_${x.key}`)]));\n data.all_project_access = formData.has(\"all_project_access\");\n data.project_ids = formData.getAll(\"project_ids\");\n try {\n await post(\"/api/admin/users\", data);\n form.reset();\n setUserRole(\"user\");\n await load();\n notify(\"Team member added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addPartner = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n try {\n const values = new FormData(form), data: any = Object.fromEntries(values);\n data.permission_level = partnerPermissionLevel;\n data.permissions = Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"partner_perm_\" + item.key)]));\n await post(\"/api/admin/partners\", data);\n form.reset();\n setPartnerPermissionLevel(\"basic\");\n await load();\n notify(\"Partner added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const toggle = async (type: string, item: any) => {\n try {\n await patch(`/api/admin/${type}/${item.id}`, { active: !item.active });\n await load();\n notify(item.active ? \"Access revoked\" : \"Access restored\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveUserVisibility = async (e: any) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n try {\n await patch(`/api/admin/users/${editingUser.id}`, {\n name: formData.get(\"name\"),\n email: formData.get(\"email\"),\n pin: formData.get(\"pin\"),\n all_project_access: formData.has(\"all_project_access\"),\n project_ids: formData.getAll(\"project_ids\"),\n });\n await load(); setEditingUser(null); notify(\"Project visibility updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const destroy = async (type: string, item: any) => {\n if (!confirm(`Permanently remove ${item.name}? This cannot be undone.`)) return;\n try {\n await remove(`/api/admin/${type}/${item.id}`);\n await load();\n notify(`${item.name} removed`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerPermissions = async (e: any) => {\n e.preventDefault();\n const values = new FormData(e.currentTarget);\n try {\n await patch(\"/api/admin/partners/\" + editingPartner.id, {\n permission_level: editingPartner.permission_level || \"basic\",\n permissions: Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"edit_partner_perm_\" + item.key)])),\n });\n await load(); setEditingPartner(null); notify(\"Partner permissions updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerBranding = async (data: any) => {\n try {\n await patch(`/api/admin/partners/${editingPartner.id}`, {\n brand_name: data.name, logo_url: data.logo_url, accent_color: data.accent_color,\n contact_info: data.contact_info, website_url: data.website_url,\n document_header: data.document_header, document_footer: data.document_footer,\n });\n await load(); setEditingPartner(null); notify(\"Partner branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveBranding = async (data: any) => {\n try {\n const result = await patch(\"/api/admin/branding\", data);\n setBranding(result.branding);\n notify(\"Client portal branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveCcRecipients = async (next: any[], message = \"Email CC settings updated\") => {\n try {\n const result = await patch(\"/api/admin/cc-recipients\", { recipients: next });\n setCcRecipients(result.recipients);\n notify(message);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addCcRecipient = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget, formData = new FormData(form);\n await saveCcRecipients([...ccRecipients, {\n id: crypto.randomUUID(), label: formData.get(\"label\"),\n email: ccUserId ? \"\" : formData.get(\"email\"), user_id: ccUserId,\n default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\n setCcUserId(\"\");\n };\n\n if (!loaded) return <PageSkeleton rows={5}/>;\n return <div className=\"directory\">\n <header className=\"page-heading\">\n <div>\n <p>Administration</p>\n <h1>Access & branding</h1>\n <span>Manage who can enter the workspace and how direct client portals present AFLABS.</span>\n </div>\n </header>\n <div className=\"directory-tabs\">\n <button className={tab === \"users\" ? \"active\" : \"\"} onClick={() => setTab(\"users\")}>Internal team <b>{users.length}</b></button>\n <button className={tab === \"partners\" ? \"active\" : \"\"} onClick={() => setTab(\"partners\")}>Partners <b>{partners.length}</b></button>\n <button className={tab === \"branding\" ? \"active\" : \"\"} onClick={() => setTab(\"branding\")}>Client branding</button>\n <button className={tab === \"email\" ? \"active\" : \"\"} onClick={() => setTab(\"email\")}>Email CC <b>{ccRecipients.length}</b></button>\n </div>\n\n {tab === \"users\" && <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add internal user</h2>\n <p>Admins receive full access. For users, choose each permitted action and project scope.</p>\n <form className=\"stack\" onSubmit={addUser}>\n <div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"Work email\" hint=\"Used when this user is mapped to a project CC recipient\"><input name=\"email\" type=\"email\" placeholder=\"name@company.com\"/></Field>\n <div className=\"form-row\"><Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Field label=\"Role\"><select name=\"role\" value={userRole} onChange={(e) => setUserRole(e.target.value)}><option value=\"user\">User</option><option value=\"admin\">Admin</option></select></Field></div>\n <fieldset key={userRole}><legend>Allowed actions</legend><div className=\"permission-grid\">{config.permissions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name={`perm_${x.key}`} defaultChecked={userRole === \"admin\" || userDefaults[x.key]} disabled={userRole === \"admin\"}/>{x.label}</label>)}</div>{userRole === \"admin\" && <small className=\"field-note\">Administrators always receive every action. Project visibility remains configurable below.</small>}</fieldset>\n <fieldset><legend>Project visibility</legend><label className=\"check\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked/> All projects</label><div className=\"project-checks\">{projectOptions.map((p: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={p.id}/>{p.title}{p.archived ? \" · Archived\" : \"\"}</label>)}</div></fieldset>\n <Button icon=\"plus\">Add user</Button>\n </form>\n </section>\n <section className=\"directory-list\">{users.map((u) => {\n const isSelf = u.id === actor.actorId;\n return <article className=\"directory-row\" key={u.id}>\n <span className=\"avatar\">{initials(u.name)}</span>\n <div><h3>{u.name}<em>{isSelf ? \"you\" : u.role}</em></h3><p>{u.phone}{u.email ? ` · ${u.email}` : \"\"}</p><small>{u.role === \"admin\" ? \"All actions\" : `${Object.values(u.permissions).filter(Boolean).length} actions`} · {u.all_project_access ? \"all projects\" : `${u.project_ids.length} assigned`}</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" icon=\"eye\" onClick={() => setEditingUser(u)}>Manage</Button>{isSelf ? <span className=\"self-label\">Protected current account</span> : <><Button variant=\"secondary\" onClick={() => toggle(\"users\", u)}>{u.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"users\", u)}>Remove</button></>}</div>\n </article>;\n })}</section>\n </div>}\n <Modal open={Boolean(editingUser)} close={() => setEditingUser(null)}>{editingUser && <><div className=\"modal-head\"><div><h2>Manage {editingUser.name}</h2><p>Update account access, login PIN, and project visibility.</p></div><button className=\"icon-button\" onClick={() => setEditingUser(null)}><Icon name=\"close\"/></button></div><form className=\"modal-content stack visibility-editor\" onSubmit={saveUserVisibility}><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" defaultValue={editingUser.name} required/></Field><Field label=\"Work email\"><input name=\"email\" type=\"email\" defaultValue={editingUser.email || \"\"}/></Field></div><Field label=\"New login PIN\" hint=\"Leave blank to keep the current PIN\"><input name=\"pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\" placeholder=\"4–8 digits\"/></Field><label className=\"scope-toggle\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked={editingUser.all_project_access}/><span><b>All projects</b><small>Automatically include current and future projects.</small></span></label><fieldset><legend>Selected projects</legend><p className=\"field-note\">Used when “All projects” is unchecked.</p><div className=\"project-visibility-list\">{projectOptions.map((project: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={project.id} defaultChecked={editingUser.project_ids.includes(project.id)}/><span><b>{project.title}</b><small>{statusMeta[project.status]?.label}{project.archived ? \" · Archived\" : \"\"}</small></span></label>)}</div></fieldset><div className=\"form-actions\"><Button>Save account</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingUser(null)}>Cancel</Button></div></form></>}</Modal>\n\n {tab === \"partners\" && <>\n <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add partner</h2>\n <p>Each partner has one account. New partners inherit the default AFLABS client branding until customized.</p>\n <form className=\"stack\" onSubmit={addPartner}>\n <div className=\"form-row\"><Field label=\"Partner name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n <label className={partnerPermissionLevel === \"basic\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"basic\" checked={partnerPermissionLevel === \"basic\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Basic</b><small>Capture leads, view owned work, chat, meetings, and AI tools.</small></span></label>\n <label className={partnerPermissionLevel === \"advanced\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"advanced\" checked={partnerPermissionLevel === \"advanced\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Advanced</b><small>Manage and convert owned leads, and edit owned projects.</small></span></label>\n <label className={partnerPermissionLevel === \"custom\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"custom\" checked={partnerPermissionLevel === \"custom\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Custom</b><small>Choose each action individually.</small></span></label>\n </div></fieldset>\n {partnerPermissionLevel === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions apply only to leads and projects owned by this partner.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"partner_perm_\" + item.key}/><span>{item.label}</span></label>)}</div></fieldset>}\n <Button icon=\"plus\">Add partner</Button>\n </form>\n </section>\n <section className=\"directory-list\">{partners.map((p) => <article className=\"directory-row\" key={p.id}>\n <span className=\"avatar partner-avatar\" style={{ background: p.accent_color || undefined }}>{initials(p.brand_name || p.name)}</span>\n <div><h3>{p.name}<em>{p.active ? \"active\" : \"revoked\"}</em></h3><p>{p.phone}</p><small>{titleCase(p.permission_level || \"basic\")} permissions · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Manage</Button><Button variant=\"secondary\" onClick={() => toggle(\"partners\", p)}>{p.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"partners\", p)}>Remove</button></div>\n </article>)}</section>\n </div>\n <Modal open={Boolean(editingPartner)} close={() => setEditingPartner(null)} wide>{editingPartner && <><div className=\"modal-head\"><div><h2>Manage {editingPartner.name}</h2><p>Control access level and partner-facing branding.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">\n <form className=\"growth-stack partner-permission-editor\" onSubmit={savePartnerPermissions}>\n <header><div><h3>Access permissions</h3><p>Choose a predictable package or specify each allowed action.</p></div><span>{titleCase(editingPartner.permission_level || \"basic\")} access</span></header>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n {[\n { value: \"basic\", title: \"Basic\", text: \"Capture leads, view owned work, chat, meetings, and AI tools.\" },\n { value: \"advanced\", title: \"Advanced\", text: \"Manage and convert owned leads, and edit owned projects.\" },\n { value: \"custom\", title: \"Custom\", text: \"Choose each action individually.\" },\n ].map((option) => <label key={option.value} className={(editingPartner.permission_level || \"basic\") === option.value ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value={option.value} checked={(editingPartner.permission_level || \"basic\") === option.value} onChange={(e) => setEditingPartner({ ...editingPartner, permission_level: e.target.value })}/><span><b>{option.title}</b><small>{option.text}</small></span></label>)}\n </div></fieldset>\n {editingPartner.permission_level === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions remain limited to this partner's own leads and projects.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"edit_partner_perm_\" + item.key} defaultChecked={editingPartner.permissions?.[item.key] === true}/><span>{item.label}</span></label>)}</div></fieldset>}\n <footer><Button>Save permissions</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingPartner(null)}>Cancel</Button></footer>\n </form>\n <BrandingEditor\n value={{ name: editingPartner.brand_name || \"\", logo_url: editingPartner.logo_url || \"\", accent_color: editingPartner.accent_color || \"\", contact_info: editingPartner.contact_info || \"\", website_url: editingPartner.website_url || \"\", document_header: editingPartner.document_header || \"\", document_footer: editingPartner.document_footer || \"\" }}\n fallback={branding || {}} partner title=\"Partner branding\"\n description=\"Blank fields inherit the direct AFLABS brand.\"\n onSave={savePartnerBranding}\n /></div></>}</Modal>\n </>}\n\n {tab === \"branding\" && branding && <BrandingEditor value={branding} fallback={branding} title=\"Direct client portal\" description=\"These defaults apply to direct projects and fill any blank fields in partner branding.\" onSave={saveBranding}/>}\n {tab === \"email\" && <div className=\"directory-layout cc-directory\">\n <section className=\"directory-form\"><h2>Add a default CC recipient</h2><p>Map an internal user to always use their current work email, or add a standalone company address.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Recipient source\"><select name=\"user_id\" value={ccUserId} onChange={(e) => setCcUserId(e.target.value)}><option value=\"\">Standalone email address</option>{ccUsers.filter((x: any) => x.active && x.email).map((x: any) => <option key={x.id} value={x.id}>{x.name} · {x.email}</option>)}</select></Field>{ccUserId ? <p className=\"recipient-source\"><Icon name=\"mail\" size={16}/><span><b>Uses the internal user’s current email</b><small>Update the user’s work email under Internal team whenever it changes.</small></span></p> : <Field label=\"Recipient email\"><input name=\"email\" type=\"email\" required placeholder=\"finance@company.com\"/></Field>}<p className=\"field-note\">Internal users without a work email can be updated under Internal team before mapping them.</p><label className=\"check\"><input name=\"default_selected\" type=\"checkbox\"/> Select automatically on new projects</label><Button icon=\"plus\">Add recipient</Button></form></section>\n <section className=\"directory-list\">{ccRecipients.map((recipient: any) => { const mapped = ccUsers.find((x: any) => x.id === recipient.user_id); return <article className=\"directory-row\" key={recipient.id}><span className=\"avatar\"><Icon name=\"mail\" size={17}/></span><div><h3>{recipient.label}<em>{recipient.default_selected ? \"new project default\" : \"optional\"}</em></h3><p>{mapped?.email || recipient.email || \"Update this internal user’s work email\"}</p><small>{mapped ? `Uses ${mapped.name}’s current work email` : \"Standalone email recipient\"}</small></div><div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => saveCcRecipients(ccRecipients.map((x: any) => x.id === recipient.id ? { ...x, default_selected: !x.default_selected } : x))}>{recipient.default_selected ? \"Make optional\" : \"Use by default\"}</Button><button className=\"text-danger\" onClick={() => saveCcRecipients(ccRecipients.filter((x: any) => x.id !== recipient.id), \"CC recipient removed\")}>Remove</button></div></article>; })}{!ccRecipients.length && <Empty title=\"No company CC recipients\" text=\"Add finance, operations, or account contacts that should be available across projects.\"/>}</section>\n </div>}\n </div>;\n}\n\nfunction PartnerBranding({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const load = () => request(\"/api/partner/branding\").then(setData);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/></div>;\n return <div className=\"directory\">\n <header className=\"page-heading\"><div><p>Partner workspace</p><h1>Client branding</h1><span>Customize how your linked project portals appear to your clients.</span></div></header>\n <BrandingEditor value={data.overrides} fallback={data.branding} partner title=\"Your client portal brand\" description=\"Your logo, name, accent, contact details, and website appear on projects attributed to you.\" onSave={async (branding: any) => {\n const result = await patch(\"/api/partner/branding\", branding);\n setData((current: any) => ({ ...current, branding: result.branding, overrides: branding }));\n notify(\"Partner branding updated\");\n }}/>\n </div>;\n}\n\nfunction Dashboard({ actor, notify, onQuestions }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { request(\"/api/dashboard\").then(setData).catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4} chart/>;\n const totalProjects = Object.values(data.status_counts).reduce((sum: number, count: any) => sum + Number(count), 0);\n const maxStatus = Math.max(1, ...Object.values(data.status_counts).map(Number));\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Delivery intelligence</p><h1>Dashboard</h1><span>A lightweight view of momentum, cash received, and the work ahead.</span></div></header>\n <div className=\"dashboard-overview\">\n <section className=\"momentum-panel\">\n <div className=\"momentum-gauge\" style={{ \"--gauge-value\": data.north_star } as any}><div><b>{data.north_star}%</b><span>momentum</span></div></div>\n <div className=\"momentum-copy\"><h2>Delivery pulse</h2><p>Projects with meaningful activity in the last 14 days.</p><dl><div><dt>Active projects</dt><dd>{data.active_count}</dd></div><div><dt>Average completion</dt><dd>{data.average_completion}%</dd></div></dl></div>\n </section>\n <section className=\"portfolio-chart\">\n <div className=\"section-heading\"><h2>Portfolio distribution</h2><p>{totalProjects} current projects across delivery stages.</p></div>\n <div className=\"status-stack\" aria-label=\"Projects by status\">{Object.entries(statusMeta).map(([key]) => <i className={`chart-${key}`} style={{ width: `${totalProjects ? (Number(data.status_counts[key] || 0) / totalProjects) * 100 : 0}%` }}/>)}</div>\n <div className=\"status-chart-rows\">{Object.entries(statusMeta).map(([key, meta]) => <div><span><i className={`status-dot status-${key}`}/>{meta.label}</span><div><i className={`chart-${key}`} style={{ width: `${Number(data.status_counts[key] || 0) / maxStatus * 100}%` }}/></div><b>{data.status_counts[key] || 0}</b></div>)}</div>\n </section>\n </div>\n {data.unanswered_count > 0 && <section className=\"dashboard-questions\">\n <div className=\"question-signal\"><Icon name=\"question\" size={22}/><b>{data.unanswered_count}</b></div>\n <div className=\"question-summary\"><h2>Clients are waiting for an answer</h2><p>Unanswered questions should be handled before routine project updates.</p><div>{data.unanswered_questions.slice(0, 3).map((question: any) => <span><b>{question.project_title}</b><small>{question.author_name} · {prettyDate(question.event_date)}</small></span>)}</div></div>\n <Button onClick={onQuestions}>Open question inbox</Button>\n </section>}\n <div className=\"financial-overview\">\n <section><div className=\"section-heading\"><h2>Earnings received</h2><p>Recorded payments, kept separate by currency.</p></div><div className=\"money-metrics\">{data.earnings.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.earnings.length && <p className=\"muted\">No receipts recorded.</p>}</section>\n <section><div className=\"section-heading\"><h2>Estimated next month</h2><p>Pending value for projects due next month.</p></div><div className=\"money-metrics\">{data.next_month.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.next_month.length && <p className=\"muted\">No active projects currently due next month.</p>}</section>\n </div>\n <GrowthDashboard actor={actor} notify={notify}/>\n </div>;\n}\n\nfunction QuestionInbox({ notify, onOpen, onResolved }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busyId, setBusyId] = useState(\"\");\n const load = () => request(\"/api/questions\").then((result) => setItems(result.questions));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const answer = async (e: any, question: any) => {\n e.preventDefault(); setBusyId(question.id);\n const form = e.currentTarget, formData = new FormData(form);\n try {\n const sendEmail = formData.has(\"send_email\");\n const result = await post(`/api/comments/${question.id}/resolve`, {\n reply: formData.get(\"reply\"),\n send_email: sendEmail,\n });\n await load(); await onResolved();\n if (sendEmail && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Client question answered\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusyId(\"\"); }\n };\n if (!items) return <PageSkeleton rows={5}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client communication</p><h1>Question inbox</h1><span>Answer outstanding client questions across every project without hunting through timelines.</span></div><strong className={items.length ? \"inbox-count has-items\" : \"inbox-count\"}>{items.length} open</strong></header>\n <div className=\"question-inbox\">{items.map((question) => <article className=\"inbox-question\" key={question.id}>\n <header><span className={`status-dot status-${question.project_status}`}/><div><button type=\"button\" onClick={() => onOpen(question.project_id)}>{question.project_title}</button><p>{question.author_name}{question.stakeholder_role ? ` · ${question.stakeholder_role}` : \"\"}</p></div><time>{prettyDate(question.event_date)}</time></header>\n <blockquote>{question.body}</blockquote>\n <form onSubmit={(e) => answer(e, question)}><Field label=\"Your answer\"><textarea name=\"reply\" rows={3} required placeholder=\"Answer clearly and share the next step.\"/></Field><div className=\"inbox-answer-actions\"><label className=\"check notify-check\"><input type=\"checkbox\" name=\"send_email\"/>Email this answer to the project POC</label><Button disabled={busyId === question.id} icon=\"message\">{busyId === question.id ? \"Sending…\" : \"Reply & resolve\"}</Button></div></form>\n </article>)}</div>\n {!items.length && <Empty title=\"All client questions are answered\" text=\"New questions will appear here and on the related project card.\"/>}\n </div>;\n}\n\nfunction ProposalWorkspace({ partners, owners, notify, onProjectCreated }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busy, setBusy] = useState(false), [openId, setOpenId] = useState(\"\"), [convertOwnerId, setConvertOwnerId] = useState(\"\");\n const load = () => request(\"/api/admin/proposals\").then((x) => setItems(x.proposals));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => {\n e.preventDefault(); const form = e.currentTarget; setBusy(true);\n try { const data: any = Object.fromEntries(new FormData(form)); data.use_ai = true; await post(\"/api/admin/proposals\", data); form.reset(); await load(); notify(\"AI quotation created\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page proposal-workspace\">\n <header className=\"page-heading\"><div><h1>Proposals</h1><span>Turn discovery notes into a structured quotation, branded PDF, and ready-to-run project.</span></div></header>\n <div className=\"proposal-layout\">\n <aside className=\"proposal-builder\">\n <header><h2>Build a proposal</h2><p>Use known facts only. Missing commercial or delivery details remain explicit.</p></header>\n <form className=\"stack\" onSubmit={create}>\n <Field label=\"Proposal title\" hint=\"Optional — the generator can suggest one.\"><input name=\"title\" placeholder=\"Retail workflow automation\"/></Field>\n <div className=\"form-row\"><Field label=\"Brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{partners.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field></div>\n <Field label=\"Discovery notes\" hint=\"Include the problem, users, workflow, constraints, scope, timing, pricing, and terms you know.\"><textarea name=\"notes\" rows={16} required placeholder={\"Customer and problem\\n\\nCurrent workflow\\n\\nProposed scope\\n\\nCommercial details\"}/></Field>\n <Button disabled={busy}>{busy ? \"Building proposal…\" : \"Generate proposal\"}</Button>\n </form>\n </aside>\n <section className=\"proposal-library\">\n <header><div><h2>Saved proposals</h2><p>{items.length} proposal{items.length === 1 ? \"\" : \"s\"}</p></div></header>\n <div className=\"proposal-list\">{items.map((x) => <article className={\"proposal-row \" + (openId === x.id ? \"open\" : \"\")} key={x.id}>\n <button className=\"proposal-main\" onClick={() => { setOpenId(openId === x.id ? \"\" : x.id); setConvertOwnerId(\"\"); }} aria-expanded={openId === x.id}>\n <div><span>{titleCase(x.status)}</span><h3>{x.title}</h3><p>{x.partner_name || \"Direct AFLABS\"} · {money(x.total, x.currency)}</p></div><Icon name=\"chevron\"/>\n </button>\n {openId === x.id && <div className=\"proposal-detail\"><div className=\"proposal-document\"><MarkdownBlock value={x.markdown_content}/></div><footer><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open PDF</span></a>{!x.project_id ? <div className=\"proposal-convert\"><label><span>Project owner</span><select value={convertOwnerId} onChange={(event) => setConvertOwnerId(event.target.value)} required><option value=\"\">Select owner</option>{owners.map((owner: any) => <option key={owner.id} value={owner.id}>{owner.name}</option>)}</select></label><Button disabled={!convertOwnerId} onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: convertOwnerId }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button></div> : <span className=\"proposal-converted\">Project created</span>}</footer></div>}\n </article>)}</div>\n {!items.length && <Empty title=\"No proposals yet\" text=\"Create a proposal from the discovery form. It will remain editable and available as a branded PDF.\"/>}\n </section>\n </div>\n </div>;\n}\n\nfunction RecurringWorkspace({ actor, partners, owners, notify }: any) {\n const [items, setItems] = useState<any[] | null>(null), [adding, setAdding] = useState(false);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/recurring\").then((x) => setItems(x.recurring));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/recurring\", Object.fromEntries(new FormData(form))); form.reset(); setAdding(false); await load(); notify(\"Recurring project added\"); } catch (x: any) { notify(x.message, \"error\"); } };\n const update = async (e: any, id: string) => {\n e.preventDefault();\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.active = new FormData(form).has(\"active\");\n try { await patch(`/api/recurring/${id}`, data); setEditingId(\"\"); await load(); notify(\"Recurring project updated\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteRecurring = async (item: any) => {\n if (!confirm(`Delete “${item.title}” and its time logs? This cannot be undone.`)) return;\n try { await remove(`/api/recurring/${item.id}`); await load(); notify(\"Recurring project deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Ongoing support</p><h1>Recurring projects</h1><span>Run monthly commitments and hourly retainers without turning them into one-off delivery cards.</span></div><Button icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"New recurring project\"}</Button></header>\n {adding && <section className=\"inline-builder\"><form className=\"form-grid\" onSubmit={create}><Field label=\"Name\"><input name=\"title\" required/></Field><Field label=\"Billing model\"><select name=\"billing_type\"><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field><Field label=\"Description\"><textarea name=\"description\" rows={3}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" placeholder=\"Comma-separated\"/></Field>{actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={actor.actorId}>{owners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field></>}<Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\"/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\"/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\"/></Field><div className=\"form-actions full\"><Button>Add recurring project</Button></div></form></section>}\n <div className=\"recurring-grid\">{items.map((x) => {\n const value = x.billing_type === \"hourly\" ? Number(x.period_hours) * Number(x.hourly_rate) : Number(x.monthly_amount);\n return <article className={`recurring-card ${x.active ? \"\" : \"inactive\"}`} key={x.id}>\n <header><div><span>{x.billing_type === \"hourly\" ? \"Hourly / month\" : \"Monthly commitment\"}{!x.active ? \" · Paused\" : \"\"}</span><h2>{x.title}</h2><p>{x.description || \"Ongoing project support\"}</p></div><b>{money(value, x.currency)}</b></header>\n <div className=\"recurring-dates\"><span><small>Starts</small><b>{prettyDate(x.start_date)}</b></span><span><small>Ends</small><b>{prettyDate(x.end_date)}</b></span></div>\n <dl><div><dt>Owner</dt><dd>{x.owner_name || \"AFLABS team\"}</dd></div>{x.partner_name && <div><dt>Partner</dt><dd>{x.partner_name}</dd></div>}<div><dt>This month</dt><dd>{x.period_hours} hours{x.billing_type === \"hourly\" && x.included_hours ? ` / ${x.included_hours} included` : \"\"}</dd></div></dl>\n <div className=\"recurring-actions\"><Button variant=\"secondary\" onClick={() => setEditingId(editingId === x.id ? \"\" : x.id)}>{editingId === x.id ? \"Close editor\" : \"Edit\"}</Button><button type=\"button\" className=\"text-danger\" onClick={() => deleteRecurring(x)}>Delete</button></div>\n {editingId === x.id && <form className=\"recurring-edit form-grid\" onSubmit={(e) => update(e, x.id)}>\n <Field label=\"Name\"><input name=\"title\" defaultValue={x.title} required/></Field><Field label=\"Billing model\"><select name=\"billing_type\" defaultValue={x.billing_type}><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field>\n <Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={x.contact_email || \"\"}/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(x.cc_emails || []).join(\", \")}/></Field>\n {actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={x.owner_user_id || \"\"}>{owners.map((owner: any) => <option value={owner.id}>{owner.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\" defaultValue={x.partner_id || \"\"}><option value=\"\">Direct</option>{partners.map((partner: any) => <option value={partner.id}>{partner.name}</option>)}</select></Field></>}\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={x.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.monthly_amount}/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.hourly_rate}/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\" defaultValue={x.included_hours}/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={x.start_date || \"\"}/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\" defaultValue={x.end_date || \"\"}/></Field>\n <label className=\"check full\"><input name=\"active\" type=\"checkbox\" defaultChecked={x.active}/> Active recurring project</label><div className=\"form-actions full\"><Button>Save changes</Button></div>\n </form>}\n <details className=\"recurring-details\"><summary>View details and time log</summary><div className=\"recurring-detail-copy\"><p>{x.contact_email || \"No project email\"}{x.cc_emails?.length ? ` · CC: ${x.cc_emails.join(\", \")}` : \"\"}</p><p>{x.billing_type === \"hourly\" ? `${money(x.hourly_rate, x.currency)} per hour · ${x.included_hours || 0} included hours` : `${money(x.monthly_amount, x.currency)} each month`}</p></div>\n <form className=\"hour-log\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(`/api/recurring/${x.id}/logs`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Hours logged\"); } catch (error: any) { notify(error.message, \"error\"); } }}><input name=\"work_date\" type=\"date\" defaultValue={todayValue()} required/><input name=\"hours\" type=\"number\" min=\".25\" step=\".25\" placeholder=\"Hours\" required/><input name=\"note\" placeholder=\"Work completed\"/><Button variant=\"secondary\">Log time</Button></form>\n {x.logs?.length > 0 && <div className=\"log-history\"><h3>Recent logs</h3>{x.logs.slice(0, 10).map((l: any) => <div key={l.id}><b>{l.hours}h</b><span>{prettyDate(l.work_date || `${l.period}-01`)} · {l.note || \"Support work\"}</span></div>)}</div>}\n </details>\n </article>;\n })}</div>{!items.length && <Empty title=\"No recurring projects\" text=\"Create a monthly commitment or hourly support project.\"/>}\n </div>;\n}\n\nfunction HolidayWorkspace({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const [weeklyDays, setWeeklyDays] = useState<number[]>([5, 6]);\n const dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n const load = async () => {\n const result = await request(\"/api/holidays\");\n setData(result);\n setWeeklyDays(result.weekly_days || [5, 6]);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client availability</p><h1>Holidays</h1><span>Set weekly non-working days and one-off holidays shown gently in every client portal.</span></div></header>\n <div className=\"holiday-layout\">\n <section className=\"builder-form\"><h2>Weekly holidays</h2><p>Friday and Saturday are selected by default. Clients can still send questions on these days.</p><div className=\"weekday-picker\">{dayNames.map((name, day) => <label className={weeklyDays.includes(day) ? \"selected\" : \"\"} key={name}><input type=\"checkbox\" checked={weeklyDays.includes(day)} onChange={() => setWeeklyDays((current) => current.includes(day) ? current.filter((x) => x !== day) : [...current, day])}/><span>{name.slice(0, 3)}</span></label>)}</div><Button onClick={async () => { try { await patch(\"/api/admin/holidays/settings\", { weekly_days: weeklyDays }); await load(); notify(\"Weekly holidays saved\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Save weekly schedule</Button></section>\n <section className=\"builder-form\"><h2>Add a one-off holiday</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/admin/holidays\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Holiday added\"); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Holiday name\"><input name=\"name\" required placeholder=\"Eid al-Fitr\"/></Field><Field label=\"Date\"><input name=\"holiday_date\" type=\"date\" required/></Field><Button icon=\"plus\">Add holiday</Button></form></section>\n </div>\n <section className=\"holiday-list\"><header><div><h2>Configured dates</h2><p>{data.today?.is_holiday ? `Today is marked as ${data.today.name}.` : \"Today is a working day.\"}</p></div></header>{data.holidays.map((holiday: any) => <article key={holiday.id}><div className=\"holiday-date\"><b>{new Date(`${holiday.holiday_date}T12:00:00`).getDate()}</b><span>{new Intl.DateTimeFormat(\"en\", { month: \"short\" }).format(new Date(`${holiday.holiday_date}T12:00:00`))}</span></div><div><h3>{holiday.name}</h3><p>{prettyDate(holiday.holiday_date)}</p></div><button className=\"text-danger\" onClick={async () => { if (!confirm(`Delete ${holiday.name}?`)) return; try { await remove(`/api/admin/holidays/${holiday.id}`); await load(); notify(\"Holiday deleted\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Delete</button></article>)}{!data.holidays.length && <Empty title=\"No one-off holidays\" text=\"Add public holidays or company-wide non-working dates.\"/>}</section>\n </div>;\n}\n\nfunction QuickNoteWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/quick-notes\").then((result) => setItems(result.quick_notes));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n const variables = (value: string) => [...new Set([...String(value || \"\").matchAll(/\\{\\{([^{}\\n]+)\\}\\}/g)].map((match) => match[1].trim()))];\n const save = async (event: any, id?: string) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload = Object.fromEntries(new FormData(form));\n if (id) await patch(`/api/admin/quick-notes/${id}`, payload);\n else await post(\"/api/admin/quick-notes\", payload);\n form.reset();\n setEditingId(\"\");\n await load();\n notify(id ? \"Quick note updated\" : \"Quick note created\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const deleteNote = async (item: any) => {\n if (!confirm(`Delete the “${item.title}” quick note?`)) return;\n try {\n await remove(`/api/admin/quick-notes/${item.id}`);\n await load();\n notify(\"Quick note deleted\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Reusable timeline copy</p><h1>Quick notes</h1><span>Create polished updates once, then insert them from any timeline composer by typing /.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>New quick note</h2><p>Use Liquid-style placeholders such as {\"{{CLIENT_NAME}}\"} or {\"{{DELIVERY_DATE}}\"}. After insertion, Tab moves through each placeholder.</p><form className=\"stack\" onSubmit={(event) => save(event)}><Field label=\"Note name\"><input name=\"title\" required placeholder=\"Weekly progress update\"/></Field><Field label=\"Slash shortcut\" hint=\"Letters, numbers, and hyphens\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required placeholder=\"weekly-update\"/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={9} required placeholder={\"Hi {{NAME}},\\n\\nWe completed {{WORK_DONE}}. Next, we will focus on {{NEXT_STEP}} by {{DATE}}.\"}/></Field><Button icon=\"plus\">Create quick note</Button></form></section>\n <section className=\"quick-note-library\">{items.map((item) => {\n const noteVariables = variables(item.body);\n return <article key={item.id}><header><div><span>/{item.shortcut}</span><h3>{item.title}</h3></div><button className=\"text-danger\" type=\"button\" onClick={() => deleteNote(item)}>Delete</button></header><p className=\"quick-note-copy\">{item.body}</p>{noteVariables.length > 0 && <div className=\"quick-note-variables\">{noteVariables.map((name) => <span key={name}>{\"{{\"}{name}{\"}}\"}</span>)}</div>}<button className=\"text-action\" type=\"button\" onClick={() => setEditingId(editingId === item.id ? \"\" : item.id)}>{editingId === item.id ? \"Close editor\" : \"Edit quick note\"}</button>{editingId === item.id && <form className=\"quick-note-edit stack\" onSubmit={(event) => save(event, item.id)}><Field label=\"Note name\"><input name=\"title\" required defaultValue={item.title}/></Field><Field label=\"Slash shortcut\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required defaultValue={item.shortcut}/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={7} required defaultValue={item.body}/></Field><Button variant=\"secondary\">Save changes</Button></form>}</article>;\n })}{!items.length && <Empty title=\"No quick notes yet\" text=\"Create a reusable update with placeholders, then type / in a project timeline.\"/>}</section>\n </div>\n </div>;\n}\n\nfunction TemplateWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const load = () => request(\"/api/milestone-templates\").then((x) => setItems(x.templates));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const deleteTemplate = async (item: any) => {\n if (!confirm(`Delete the “${item.name}” milestone template? Existing project milestones will not be affected.`)) return;\n try { await remove(`/api/admin/milestone-templates/${item.id}`); await load(); notify(\"Milestone template deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\"><header className=\"page-heading\"><div><p>Reusable delivery</p><h1>Milestone templates</h1><span>Create repeatable checkpoint sets and apply them inside any project.</span></div></header><div className=\"builder-layout\"><section className=\"builder-form\"><h2>New template</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; await post(\"/api/admin/milestone-templates\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Milestone template created\"); }}><Field label=\"Template name\"><input name=\"name\" required placeholder=\"Website delivery\"/></Field><Field label=\"Description\"><input name=\"description\" placeholder=\"Optional context\"/></Field><Field label=\"Milestones\" hint=\"One milestone per line\"><textarea name=\"items\" rows={9} required placeholder={\"Discovery\\nDesign approval\\nDevelopment\\nQuality assurance\\nLaunch\"}/></Field><Button>Create template</Button></form></section><section className=\"template-list\">{items.map((x) => <article key={x.id}><header><span>{x.items.length} milestones</span><button className=\"text-danger\" type=\"button\" onClick={() => deleteTemplate(x)}>Delete</button></header><h3>{x.name}</h3><p>{x.description || \"Reusable milestone set\"}</p><ol>{x.items.map((m: any, index: number) => <li key={`${x.id}-${index}`}>{m.title}</li>)}</ol></article>)}{!items.length && <Empty title=\"No templates yet\" text=\"Add your first repeatable milestone sequence.\"/>}</section></div></div>;\n}\n\nfunction Workspace({ actor, config, refreshActor, notify, theme, toggleTheme }: any) {\n const [projects, setProjects] = useState<Project[]>([]), [partners, setPartners] = useState<any[]>([]), [owners, setOwners] = useState<any[]>([]);\n const [leads, setLeads] = useState<any[]>([]), [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\n const [projectFilters, setProjectFilters] = useState({ type: \"\", due: \"\", partner: \"\", status: \"\" });\n const [selected, setSelected] = useState<string | null>(null), [addOpen, setAddOpen] = useState(false);\n const [aiDraft, setAiDraft] = useState<any>(null), [aiNotes, setAiNotes] = useState(\"\"), [aiBusy, setAiBusy] = useState(false);\n const [projectsLoading, setProjectsLoading] = useState(true), [questionCount, setQuestionCount] = useState(0);\n const load = async (showSkeleton = false) => {\n if (showSkeleton) setProjectsLoading(true);\n try {\n const p = await request(`/api/projects?archived=${archived ? 1 : 0}`);\n setProjects(p.projects);\n if (actor.role === \"admin\") {\n request(\"/api/admin/partners\").then((x) => setPartners(x.partners)).catch(() => {});\n request(\"/api/admin/cc-recipients\").then((x) => setCcRecipients(x.recipients)).catch(() => {});\n }\n if (actor.actorType === \"internal\") request(\"/api/user-options\").then((x) => setOwners(x.users)).catch(() => {});\n if (actor.actorType === \"internal\" || actor.permissions.view_leads) request(\"/api/leads\").then((x) => setLeads(x.leads)).catch(() => {});\n if (actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) request(\"/api/questions\").then((x) => setQuestionCount(x.questions.length)).catch(() => {});\n } finally {\n if (showSkeleton) setProjectsLoading(false);\n }\n };\n useEffect(() => { load(true).catch((x) => notify(x.message, \"error\")); }, [archived]);\n const visible = projects.filter((p) => {\n if (!(`${p.title} ${p.description} ${p.partner_name}`).toLowerCase().includes(search.toLowerCase())) return false;\n if (projectFilters.type && p.project_type !== projectFilters.type) return false;\n if (projectFilters.partner && String(p.partner_id || \"\") !== projectFilters.partner) return false;\n if (projectFilters.status && p.status !== projectFilters.status) return false;\n if (projectFilters.due === \"overdue\" && !(p.end_date && p.status !== \"done\" && Date.parse(p.end_date) < Date.now())) return false;\n if (projectFilters.due === \"7days\" && !(p.end_date && Date.parse(p.end_date) >= Date.now() && Date.parse(p.end_date) <= Date.now() + 7 * 86400000)) return false;\n if (projectFilters.due === \"nodate\" && p.end_date) return false;\n return true;\n });\n const activeProjectFilterCount = Object.values(projectFilters).filter(Boolean).length;\n const unansweredCount = questionCount;\n const move = async (id: string, status: string) => {\n const item = projects.find((p) => p.id === id);\n if (!item || item.status === status) return;\n try {\n setProjects((all) => all.map((p) => p.id === id ? { ...p, status } : p));\n await patch(`/api/projects/${id}`, { status }); notify(`Moved to ${statusMeta[status].label}`);\n } catch (x: any) { notify(x.message, \"error\"); load(); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); refreshActor(); };\n const mayCreate = actor.actorType === \"partner\" ? actor.permissions.create_projects === true : canActor(actor, \"create_projects\");\n const canLeads = actor.actorType === \"internal\" || actor.permissions.view_leads;\n const canChat = actor.actorType === \"internal\" || actor.permissions.chat;\n const canMeet = actor.actorType === \"internal\" || actor.permissions.book_meetings;\n const canIdeas = actor.actorType === \"internal\" || actor.permissions.use_ai;\n return <div className=\"app-shell\">\n <aside className=\"sidebar\">\n <a className=\"brand\" href=\"/\"><BrandMark/><span>AFLABS <b>PM</b></span></a>\n <nav>\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}><Icon name=\"work\"/>Leads</button>}\n <button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}><Icon name=\"message\"/>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}><Icon name=\"clock\"/>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}><Icon name=\"note\"/>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}><Icon name=\"milestone\"/>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active attention-nav\" : \"attention-nav\"} onClick={() => setView(\"questions\")}><Icon name=\"question\"/>Questions{unansweredCount > 0 && <b>{unansweredCount}</b>}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}><Icon name=\"note\"/>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}><Icon name=\"milestone\"/>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}><Icon name=\"message\"/>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}\n </nav>\n <div className=\"sidebar-foot\"><ThemeToggle theme={theme} toggle={toggleTheme}/><div className=\"account\"><span>{initials(actor.name)}</span><div><b>{actor.name}</b><small>{actor.role}</small></div><button onClick={logout} aria-label=\"Sign out\"><Icon name=\"logout\" size={17}/></button></div></div>\n </aside>\n <main className=\"workspace\">\n <div className=\"mobile-nav\" aria-label=\"Workspace navigation\">\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}>Leads</button>}\n <button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` (${unansweredCount})` : \"\"}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Client branding</button>}\n <button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button>\n </div>\n {view === \"dashboard\" ? <Dashboard actor={actor} notify={notify} onQuestions={() => setView(\"questions\")}/> : [\"leads\", \"conversations\", \"meetings\", \"mou\", \"ideas\"].includes(view) ? <GrowthSuite section={view} actor={actor} notify={notify} onOpenProject={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"questions\" ? <QuestionInbox notify={notify} onOpen={setSelected} onResolved={load}/> : view === \"recurring\" ? <RecurringWorkspace actor={actor} partners={partners} owners={owners} notify={notify}/> : view === \"proposals\" ? <ProposalWorkspace partners={partners} owners={owners} notify={notify} onProjectCreated={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"templates\" ? <TemplateWorkspace notify={notify}/> : view === \"quick-notes\" ? <QuickNoteWorkspace notify={notify}/> : view === \"holidays\" ? <HolidayWorkspace notify={notify}/> : view === \"directory\" ? <AdminDirectory actor={actor} config={config} projects={projects} notify={notify}/> : view === \"branding\" ? <PartnerBranding notify={notify}/> : <>\n <header className=\"workspace-head\"><div><p>{actor.actorType === \"partner\" ? \"Partner workspace\" : \"Delivery workspace\"}</p><h1>{archived ? \"Archived projects\" : \"Project board\"}</h1><span>{archived ? \"A complete record of work moved out of active delivery.\" : \"Move work forward, keep context close, and make progress visible.\"}</span></div><div className=\"head-actions\"><div className=\"search\"><Icon name=\"search\" size={17}/><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder=\"Search projects\"/></div>{mayCreate && !archived && <Button className=\"new-project-button\" icon=\"plus\" onClick={() => setAddOpen(true)}>New project</Button>}</div></header>\n <section className=\"project-filter-panel\" aria-label=\"Project filters\">\n <header className=\"project-filter-panel-head\">\n <div className=\"project-filter-panel-title\">\n <span>Filter projects</span>\n <strong>{visible.length}<small> of {projects.length} shown</small></strong>\n {activeProjectFilterCount > 0 && <b>{activeProjectFilterCount} active</b>}\n </div>\n {activeProjectFilterCount > 0 && <button className=\"project-filter-clear\" type=\"button\" onClick={() => setProjectFilters({ type: \"\", due: \"\", partner: \"\", status: \"\" })}>Clear all</button>}\n </header>\n <div className=\"project-filter-controls\">\n <label><span>Project type</span><select aria-label=\"Filter by project type\" value={projectFilters.type} onChange={(e) => setProjectFilters((current) => ({ ...current, type: e.target.value }))}><option value=\"\">All types</option>{config.projectTypes.map((type: string) => <option key={type} value={type}>{type}</option>)}</select></label>\n <label><span>Stage</span><select aria-label=\"Filter by project stage\" value={projectFilters.status} onChange={(e) => setProjectFilters((current) => ({ ...current, status: e.target.value }))}><option value=\"\">All stages</option>{config.statuses.map((status: string) => <option key={status} value={status}>{statusMeta[status]?.label || titleCase(status)}</option>)}</select></label>\n <label><span>Due date</span><select aria-label=\"Filter by due date\" value={projectFilters.due} onChange={(e) => setProjectFilters((current) => ({ ...current, due: e.target.value }))}><option value=\"\">Any due date</option><option value=\"overdue\">Overdue</option><option value=\"7days\">Due in 7 days</option><option value=\"nodate\">No due date</option></select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter by partner\" value={projectFilters.partner} onChange={(e) => setProjectFilters((current) => ({ ...current, partner: e.target.value }))}><option value=\"\">All partners</option>{Array.from(new Map(projects.filter((project) => project.partner_id).map((project) => [project.partner_id, project.partner_name])).entries()).map(([id, name]) => <option key={String(id)} value={String(id)}>{String(name)}</option>)}</select></label>}\n </div>\n </section>\n {projectsLoading ? <BoardSkeleton/> : visible.length ? <Kanban projects={visible} actor={actor} onOpen={setSelected} onMove={move}/> : <Empty title={archived ? \"Archive is empty\" : \"No projects found\"} text={search ? \"Try a different search term.\" : mayCreate ? \"Add the first project to begin the delivery board.\" : \"No projects are assigned to this account.\"} action={mayCreate && !search && !archived ? <Button icon=\"plus\" onClick={() => setAddOpen(true)}>Add project</Button> : null}/>}\n </>}\n </main>\n <Modal open={addOpen} close={() => { setAddOpen(false); setAiDraft(null); }} wide><div className=\"modal-head\"><div><h2>Add a project</h2><p>{actor.actorType === \"partner\" ? \"Submit basic project details. AFLABS will manage delivery status.\" : \"Create manually, or let AI extract a draft from rough notes.\"}</p></div><button className=\"icon-button\" onClick={() => setAddOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">{actor.role === \"admin\" && <details className=\"ai-project-builder\"><summary><span><Icon name=\"work\"/>Draft this project with AI</span><Icon name=\"chevron\"/></summary><div><Field label=\"Rough project details\"><textarea value={aiNotes} onChange={(e) => setAiNotes(e.target.value)} rows={6} placeholder=\"Paste scope, dates, POC details, pricing, links, credentials and milestones. Timeline entries are intentionally excluded.\"/></Field><Button type=\"button\" variant=\"secondary\" disabled={aiBusy || aiNotes.trim().length < 10} onClick={async () => { setAiBusy(true); try { const result = await post(\"/api/admin/ai/project-draft\", { notes: aiNotes }); setAiDraft(result.draft); notify(\"AI project draft is ready\"); } catch (x: any) { notify(x.message, \"error\"); } finally { setAiBusy(false); } }}>{aiBusy ? \"Extracting…\" : \"Extract details\"}</Button>{aiDraft && <p className=\"ai-result\">Draft populated · {(aiDraft.resources || []).length} resources · {(aiDraft.credentials || []).length} credentials · {(aiDraft.stakeholders || []).length} stakeholders</p>}</div></details>}<ProjectForm key={JSON.stringify(aiDraft || {})} actor={actor} config={config} partners={partners} leads={leads} owners={owners} ccRecipients={ccRecipients} initial={aiDraft || {}} onSave={async (data: any) => { const result = await post(\"/api/projects\", { ...aiDraft, ...data }); setAddOpen(false); setAiDraft(null); setAiNotes(\"\"); await load(); setSelected(result.id); notify(\"Project added\"); }}/></div></Modal>\n <Modal open={Boolean(selected)} close={() => setSelected(null)} wide>{selected && <DetailPanel projectId={selected} actor={actor} owners={owners} partners={partners} close={() => setSelected(null)} refreshList={load} notify={notify}/>}</Modal>\n </div>;\n}\n\nfunction ClientPortal({ actor, notify, theme, setTheme, toggleTheme }: any) {\n const [detail, setDetail] = useState<any>(null), [linksOpen, setLinksOpen] = useState(false), [busy, setBusy] = useState(false);\n const load = () => request(`/api/projects/${actor.projectId}`).then(setDetail);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n useEffect(() => {\n const projectTheme = detail?.project?.branding?.theme;\n if (projectTheme === \"light\" || projectTheme === \"dark\") setTheme(projectTheme);\n }, [detail?.project?.branding?.theme]);\n if (!detail) return <div className=\"client-loading\"><div className=\"brand\"><BrandMark/><span>AFLABS <b>PM</b></span></div><div className=\"skeleton client-skeleton\"/></div>;\n const p = detail.project, brand = p.branding;\n const nextMilestone = [...detail.milestones]\n .filter((x: any) => x.status === \"upcoming\" && x.due_date)\n .sort((a: any, b: any) => a.due_date.localeCompare(b.due_date))[0];\n const timeline = [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, date: x.event_date, timelineType: x.comment_type })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, date: x.completed_date || x.due_date, timelineType: \"milestone\", body: x.description })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date));\n const submitQuestion = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const data: any = Object.fromEntries(new FormData(form));\n await post(`/api/projects/${p.id}/comments`, data);\n form.reset(); await load();\n notify(\"Your question was added\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); location.reload(); };\n return <main className={`client-portal ${p.status === \"blocked\" ? \"client-blocked\" : \"\"}`} style={{ \"--partner-accent\": brand?.accent_color || \"var(--blue)\" } as any}>\n <header className=\"client-nav\"><div className=\"client-brand\">{brand?.logo_url ? <img src={brand.logo_url} alt={`${brand?.name || \"AFLABS\"} logo`}/> : <span className=\"client-logo\">{initials(brand?.name || \"AFLABS\")}</span>}<div><b>{brand?.name || \"AFLABS\"}</b><small>{brand?.portal_label || \"Project delivery\"}</small></div></div><div className=\"client-nav-actions\"><ThemeToggle theme={theme} toggle={toggleTheme}/><button onClick={logout}>Close project <Icon name=\"logout\" size={15}/></button></div></header>\n <section className=\"client-hero\">{detail.holiday?.is_holiday && <div className=\"client-holiday-banner\"><Icon name=\"sun\" size={18}/><div><b>{detail.holiday.name}</b><span>Today is a non-working day. You can still review the project and send questions.</span></div></div>}<div className=\"client-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <em>Forecast +{p.delivery_delay_days} days</em>}</div>{p.status === \"blocked\" && <div className=\"client-blocked-notice\"><Icon name=\"blocker\" size={18}/><div><b>Delivery is currently blocked</b><span>The team is working through an external dependency. The expected delivery date is moving by {p.delivery_delay_days || 1} {p.delivery_delay_days === 1 ? \"day\" : \"days\"}.</span></div></div>}<h1>{p.title}</h1><p>{p.description}</p><div className=\"client-dates\"><span><small>Started</small><b>{prettyDate(p.start_date)}</b>{p.start_date && <em>{projectDateFootnote(p.start_date, \"start\")}</em>}</span><Icon name=\"chevron\"/><span><small>{p.delivery_delay_days > 0 ? \"Forecast\" : \"Target\"}</small><b>{prettyDate(p.forecast_end_date || p.end_date)}</b>{p.delivery_delay_days > 0 && <em>Original {prettyDate(p.end_date)}</em>}{(p.forecast_end_date || p.end_date) && <em>{projectDateFootnote(p.forecast_end_date || p.end_date, \"end\")}</em>}<strong className={`client-deadline ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</strong></span></div></section>\n <section className=\"client-progress-block\"><div className=\"client-progress-copy\"><span>Overall completion</span><b>{p.progress}%</b></div><div className=\"client-progress\"><i style={{ width: `${p.progress}%` }}/><span style={{ left: `${Math.max(2, Math.min(96, p.progress))}%` }}/></div><div className=\"client-stages\"><span className=\"passed\">Project started</span><span className={p.progress >= 50 ? \"passed\" : \"\"}>Core delivery</span><span className={p.progress === 100 ? \"passed\" : \"\"}>Complete</span></div>{nextMilestone && <div className=\"client-next-milestone\"><span><Icon name=\"milestone\" size={16}/></span><div><small>Next milestone</small><b>{nextMilestone.title}</b>{nextMilestone.description && <p>{nextMilestone.description}</p>}</div><time><b>{prettyDate(nextMilestone.due_date)}</b><small>{deadlineLabel(nextMilestone.due_date)}</small></time></div>}</section>\n <div className=\"client-grid\">\n <section className=\"client-main\"><div className=\"client-section-head\"><div><h2>Project journey</h2><p>{brand?.welcome_message || \"Every meaningful update, in one clear timeline.\"}</p></div></div>\n <div className=\"client-timeline\">{timeline.map((x: any) => {\n const replies = detail.comments.filter((reply: any) => reply.parent_id === x.id);\n const daysToGo = futureDaysLabel(x.date);\n if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{timelineDate(x.date)}</time></header><div className=\"milestone-callout\"><small>{titleCase(x.status)}</small><h3>{x.title}</h3>{x.body && <p>{x.body}</p>}</div></div></article>;\n if (x.timelineType === \"question\") return <article className=\"client-question-event\" key={`question-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{timelineDate(x.date)}</time></header><div className=\"chat-bubble chat-client\"><small>{x.author_name}</small><p>{x.body}</p></div>{replies.map((reply: any) => <div className=\"chat-bubble chat-team\"><small>{reply.author_name} · Project team</small><p>{reply.body}</p></div>)}<span className={x.resolved_at ? \"chat-status resolved\" : \"chat-status\"}>{x.resolved_at ? \"Answered\" : \"Awaiting a response\"}</span></div></article>;\n return <article key={`${x.timelineType}-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className={`client-node node-${x.timelineType}`}><Icon name={eventIcons[x.timelineType] || \"note\"} size={16}/></div><div><header><span>{typeLabels[x.timelineType] || titleCase(x.timelineType)}</span><time>{timelineDate(x.date)}</time></header><h3>{x.author_name}</h3>{x.body && <p>{x.body}</p>}</div></article>;\n })}</div>\n {!timeline.length && <Empty title=\"The journey starts here\" text=\"Project updates will appear as the team moves delivery forward.\"/>}\n </section>\n <aside className=\"client-aside\">\n <section className=\"client-panel\"><h2>Milestones</h2><div className=\"client-milestones\">{detail.milestones.map((x: any) => <div className={x.status}><span>{x.status === \"complete\" ? \"✓\" : \"\"}</span><div><b>{x.title}</b><small>{x.status === \"complete\" ? `Completed ${prettyDate(x.completed_date)}` : `Target ${prettyDate(x.due_date)}`}</small></div></div>)}</div>{!detail.milestones.length && <p className=\"muted\">Milestones will appear as they are scheduled.</p>}</section>\n <section className=\"client-panel payment-panel\"><div><span>Payment fulfilled</span><b>{detail.paymentSummary.total ? Math.round(detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%</b></div><div className=\"mini-progress\"><i style={{ width: `${detail.paymentSummary.total ? Math.min(100, detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%` }}/></div><dl><div><dt>Received</dt><dd>{money(detail.paymentSummary.paid, p.currency)}</dd></div><div><dt>Pending</dt><dd>{money(detail.paymentSummary.pending, p.currency)}</dd></div></dl></section>\n {detail.links.length > 0 && <section className=\"client-panel links-panel\"><button onClick={() => setLinksOpen(!linksOpen)}><div><Icon name=\"link\"/><span><b>Project links</b><small>{detail.links.length} shared resources</small></span></div><Icon name=\"chevron\"/></button>{linksOpen && <div className=\"client-links\">{detail.links.map((x: any) => <a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a>)}</div>}</section>}\n <section className=\"client-panel question-panel\"><h2>Ask the project team</h2><p>Select who you are so the team can answer in context.</p>{detail.holiday?.is_holiday && <div className=\"holiday-question-note\"><Icon name=\"clock\" size={16}/><span>You can send this now. The team may reply on the next working day.</span></div>}<form onSubmit={submitQuestion} className=\"stack\"><Field label=\"I am\"><select name=\"stakeholder_id\" required><option value=\"\">Select stakeholder</option>{detail.stakeholders.map((x: any) => <option value={x.id}>{x.name} · {x.role}</option>)}</select></Field><Field label=\"Question or comment\"><textarea name=\"body\" required rows={3} placeholder=\"What would you like to clarify?\"/></Field><Button disabled={busy} icon=\"message\">{busy ? \"Sending…\" : \"Send to team\"}</Button></form></section>\n {brand?.contact_info && <p className=\"partner-contact\">Managed by {brand.name} · {brand.contact_info}</p>}\n </aside>\n </div>\n <footer className=\"client-footer\"><span>{brand?.name || \"AFLABS\"} PM</span>{brand?.website_url ? <a href={brand.website_url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={13}/> Visit website</a> : <span>Project delivery, made visible.</span>}</footer>\n </main>;\n}\n\nexport function App() {\n const clientToken = location.pathname.match(/^\\/client\\/([^/]+)/)?.[1];\n const [config, setConfig] = useState<any>(null), [actor, setActor] = useState<Actor | null | undefined>(undefined), [toast, setToast] = useState<any>(null);\n const [theme, setTheme] = useState(() => {\n const saved = localStorage.getItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\");\n return saved === \"dark\" || saved === \"light\" ? saved : clientToken ? \"light\" : matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n });\n const notify = (message: string, kind = \"success\") => setToast({ message, kind });\n const refresh = async () => {\n const cfg = await request(\"/api/config\");\n clientCacheEnabled = cfg.cacheEnabled !== false;\n if (!clientCacheEnabled) apiCache.clear();\n setConfig(cfg); setActor(cfg.actor ?? null);\n };\n useEffect(() => {\n document.documentElement.dataset.theme = theme;\n localStorage.setItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\", theme);\n }, [theme, clientToken]);\n useEffect(() => { refresh().catch((x) => { setConfig({ initialized: true }); setActor(null); notify(x.message, \"error\"); }); }, []);\n if (!config || actor === undefined) return <div className=\"app-loading\"><div className=\"brand brand-large\"><BrandMark large/><span>AFLABS <b>PM</b></span></div><div className=\"loading-line\"><i/></div></div>;\n const toggleTheme = () => setTheme((current) => current === \"dark\" ? \"light\" : \"dark\");\n return <><NetworkActivity/><Toast value={toast} clear={() => setToast(null)}/>{!config.initialized ? <Bootstrap onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : !actor ? <Login clientToken={clientToken} onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : actor.actorType === \"client\" ? <ClientPortal actor={actor} notify={notify} theme={theme} setTheme={setTheme} toggleTheme={toggleTheme}/> : <Workspace actor={actor} config={config} refreshActor={refresh} notify={notify} theme={theme} toggleTheme={toggleTheme}/>}</>;\n}\n\r\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CommercialPreview, GrowthDashboard, GrowthSuite, InvoiceComposer, MarkdownBlock, PartnerProjectEditor } from \"./GrowthSuite.tsx\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n};\ntype Project = Record<string, any>;\n\nconst statusMeta: Record<string, { label: string; note: string }> = {\n backlog: { label: \"Backlog\", note: \"Ideas and incoming work\" },\n todo: { label: \"To do\", note: \"Ready to begin\" },\n \"in-progress\": { label: \"In progress\", note: \"Actively moving\" },\n blocked: { label: \"Blocked\", note: \"Needs attention\" },\n done: { label: \"Done\", note: \"Admin-approved delivery\" },\n};\nconst typeLabels: Record<string, string> = {\n update: \"Update\", meeting: \"Meeting\", blocker: \"Blocker\", \"major-work\": \"Major work\",\n \"mail-sent\": \"Mail sent\", \"mail-received\": \"Mail received\", payment: \"Payment\",\n question: \"Client question\", note: \"Note\", milestone: \"Milestone\", \"schedule-extension\": \"Schedule extension\",\n};\nconst eventIcons: Record<string, string> = {\n update: \"update\", meeting: \"meeting\", blocker: \"blocker\", \"major-work\": \"work\",\n \"mail-sent\": \"mail-out\", \"mail-received\": \"mail-in\", payment: \"payment\",\n question: \"question\", note: \"note\", milestone: \"milestone\", \"schedule-extension\": \"clock\",\n};\nconst countries = [\n { code: \"+91\", label: \"India\", flag: \"🇮🇳\", placeholder: \"98765 43210\" },\n { code: \"+966\", label: \"Saudi Arabia\", flag: \"🇸🇦\", placeholder: \"50 123 4567\" },\n { code: \"+971\", label: \"UAE\", flag: \"🇦🇪\", placeholder: \"50 123 4567\" },\n];\nconst userDefaults: Record<string, boolean> = {\n view_projects: true,\n create_projects: false,\n edit_projects: true,\n move_projects: true,\n archive_projects: false,\n manage_links: true,\n view_credentials: false,\n manage_credentials: false,\n manage_comments: true,\n manage_milestones: true,\n manage_stakeholders: true,\n manage_payments: false,\n};\n\nconst apiCache = new Map<string, { expires: number; value?: any; pending?: Promise<any> }>();\nlet clientCacheEnabled = true;\nfunction clientCacheTtl(path: string) {\n if (path === \"/api/config\") return 60_000;\n if (path.startsWith(\"/api/projects\")) return /^\\/api\\/projects\\/[^/?]+$/.test(path) ? 60_000 : 45_000;\n if (path === \"/api/dashboard\") return 45_000;\n if (path === \"/api/recurring\" || path === \"/api/admin/proposals\") return 60_000;\n if ([\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\"].includes(path)) return 90_000;\n if (path === \"/api/milestone-templates\" || path === \"/api/quick-notes\" || path === \"/api/holidays\") return 120_000;\n if (path === \"/api/questions\") return 30_000;\n return 15_000;\n}\nfunction invalidateClientCache(path: string) {\n if (/^\\/api\\/projects\\/[^/]+\\/read$/.test(path)) {\n for (const key of apiCache.keys()) {\n if (key === \"/api/projects\" || key.startsWith(\"/api/projects?\")) apiCache.delete(key);\n }\n return;\n }\n const prefixes = new Set<string>();\n if (path.startsWith(\"/api/projects\") || /^\\/api\\/(comments|links|credentials|stakeholders|milestones|payments|invoices)/.test(path)) {\n [\"/api/projects\", \"/api/dashboard\", \"/api/questions\"].forEach((x) => prefixes.add(x));\n }\n if (/^\\/api\\/admin\\/(users|partners|settings|branding|cc-recipients)/.test(path) || path === \"/api/partner/branding\") {\n [\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\", \"/api/projects\", \"/api/dashboard\", \"/api/config\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/admin/proposals\")) {\n [\"/api/admin/proposals\", \"/api/projects\", \"/api/dashboard\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/recurring\")) prefixes.add(\"/api/recurring\");\n if (path.startsWith(\"/api/admin/holidays\")) {\n prefixes.add(\"/api/holidays\");\n prefixes.add(\"/api/projects/\");\n }\n if (path.includes(\"milestone-template\")) prefixes.add(\"/api/milestone-templates\");\n if (path.includes(\"quick-notes\")) prefixes.add(\"/api/quick-notes\");\n if (path.startsWith(\"/api/auth/\") || path === \"/api/bootstrap\") {\n apiCache.clear();\n return;\n }\n for (const key of apiCache.keys()) if ([...prefixes].some((prefix) => key.startsWith(prefix))) apiCache.delete(key);\n}\nlet activeRequests = 0;\nfunction signalRequestActivity(delta: number) {\n activeRequests = Math.max(0, activeRequests + delta);\n if (typeof window !== \"undefined\") window.dispatchEvent(new CustomEvent(\"aflabs:requests\", { detail: activeRequests }));\n}\nasync function request(path: string, options: RequestInit = {}) {\n const method = String(options.method || \"GET\").toUpperCase();\n const cacheable = method === \"GET\" && clientCacheEnabled;\n const ttl = clientCacheTtl(path);\n if (cacheable) {\n const cached = apiCache.get(path);\n if (cached && cached.expires > Date.now()) {\n if (cached.pending) return cached.pending;\n return cached.value;\n }\n apiCache.delete(path);\n }\n signalRequestActivity(1);\n const pending = (async () => {\n try {\n const response = await fetch(path, {\n ...options,\n headers: { \"Content-Type\": \"application/json\", ...(options.headers ?? {}) },\n });\n const payload = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(payload.error || `Request failed (${response.status})`);\n return payload;\n } finally {\n signalRequestActivity(-1);\n }\n })();\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, pending });\n try {\n const payload = await pending;\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, value: payload });\n else invalidateClientCache(path);\n return payload;\n } catch (error) {\n if (cacheable) apiCache.delete(path);\n throw error;\n }\n}\nconst post = (path: string, data: any = {}) => request(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any = {}) => request(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string, data: any = {}) => request(path, { method: \"DELETE\", body: JSON.stringify(data) });\nconst money = (amount: number, currency = \"INR\") => new Intl.NumberFormat(\"en\", {\n style: \"currency\", currency, maximumFractionDigits: 2,\n}).format(Number(amount || 0));\nconst prettyDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst timelineDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { weekday: \"long\", day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\n};\nfunction daysFromToday(value?: string) {\n if (!value) return null;\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n return Math.round((target.getTime() - today.getTime()) / 86_400_000);\n}\nfunction futureDaysLabel(value?: string) {\n const days = daysFromToday(value);\n if (days === null || days <= 0) return \"\";\n return `${days} ${days === 1 ? \"day\" : \"days\"} to go`;\n}\nfunction projectDateFootnote(value: string | undefined, kind: \"start\" | \"end\") {\n const days = daysFromToday(value);\n if (days === null) return \"\";\n if (days === 0) return kind === \"start\" ? \"Starts today\" : \"Target date is today\";\n if (kind === \"start\") return days > 0\n ? `Starts in ${days} ${days === 1 ? \"day\" : \"days\"}`\n : `Started ${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} ago`;\n return days > 0\n ? `${days} ${days === 1 ? \"day\" : \"days\"} remaining`\n : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} past target`;\n}\nfunction deadlineLabel(value?: string, status?: string) {\n if (!value) return \"\";\n if (status === \"done\") return \"Completed\";\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);\n if (days === 0) return \"Due today\";\n return days > 0 ? `${days} ${days === 1 ? \"day\" : \"days\"} to go` : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} overdue`;\n}\nconst initials = (name = \"AFLABS\") => name.split(/\\s+/).slice(0, 2).map((part) => part[0]).join(\"\").toUpperCase();\nconst titleCase = (value = \"\") => value.replaceAll(\"-\", \" \").replace(/\\b\\w/g, (x) => x.toUpperCase());\n\nfunction BrandMark({ large = false }: { large?: boolean }) {\n return <span className={`brand-mark ${large ? \"brand-mark-large\" : \"\"}`}>\n <img src=\"/frontend/logo.png\" alt=\"\"/>\n </span>;\n}\n\nfunction Icon({ name, size = 18 }: { name: string; size?: number }) {\n const paths: Record<string, React.ReactNode> = {\n board: <><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M9 4v16M15 4v16\"/></>,\n plus: <path d=\"M12 5v14M5 12h14\"/>,\n archive: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M5 9v10h14V9M9 13h6\"/></>,\n users: <><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"/></>,\n partner: <><path d=\"M8 12h8M12 8v8\"/><circle cx=\"12\" cy=\"12\" r=\"9\"/></>,\n logout: <><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><path d=\"m16 17 5-5-5-5M21 12H9\"/></>,\n search: <><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-4-4\"/></>,\n close: <path d=\"M6 6l12 12M18 6 6 18\"/>,\n link: <><path d=\"M10 13a5 5 0 0 0 7.07.07l2-2A5 5 0 0 0 12 4\"/><path d=\"M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20\"/></>,\n copy: <><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2\"/></>,\n more: <><circle cx=\"5\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/></>,\n check: <path d=\"m5 12 4 4L19 6\"/>,\n clock: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/></>,\n message: <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"/>,\n rupee: <><path d=\"M6 4h12M6 8h12M7 4c6 0 6 8 0 8h-1l9 8\"/></>,\n chevron: <path d=\"m9 18 6-6-6-6\"/>,\n settings: <><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1V21H9.6v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1-.4H3V9.6h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.17.38.38.72.6 1 .29.37.64.55 1 .6h.09v4H21c-.36.05-.71.23-1 .4-.22.28-.43.62-.6 1Z\"/></>,\n update: <><path d=\"M4 19h16\"/><path d=\"M6 15l4-4 3 3 5-6\"/></>,\n meeting: <><circle cx=\"8\" cy=\"8\" r=\"3\"/><circle cx=\"16\" cy=\"8\" r=\"3\"/><path d=\"M3 19c.6-3 2.2-5 5-5s4.4 2 5 5M11 19c.5-2.6 2.2-4.5 5-4.5s4.5 1.9 5 4.5\"/></>,\n blocker: <><path d=\"M12 3 2.8 19h18.4L12 3Z\"/><path d=\"M12 9v4M12 16h.01\"/></>,\n work: <><path d=\"m14.7 6.3 3 3M4 20l4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Z\"/></>,\n \"mail-out\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 4h6M18 1l3 3-3 3\"/></>,\n \"mail-in\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 1v6M12 4l3 3 3-3\"/></>,\n payment: <><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M3 10h18M7 15h3\"/></>,\n question: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M9.7 9a2.5 2.5 0 1 1 3.4 2.3c-.8.35-1.1.9-1.1 1.7M12 17h.01\"/></>,\n note: <><path d=\"M5 3h11l3 3v15H5V3Z\"/><path d=\"M9 11h6M9 15h6M15 3v4h4\"/></>,\n milestone: <><path d=\"m12 3 3 6 6 .8-4.5 4.4 1.1 6.3-5.6-3-5.6 3 1.1-6.3L3 9.8 9 9l3-6Z\"/></>,\n sun: <><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"/></>,\n moon: <path d=\"M20.5 14.4A8 8 0 0 1 9.6 3.5 9 9 0 1 0 20.5 14.4Z\"/>,\n globe: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3c3 3.3 3 14.7 0 18M12 3c-3 3.3-3 14.7 0 18\"/></>,\n mail: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6\"/></>,\n eye: <><path d=\"M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z\"/><circle cx=\"12\" cy=\"12\" r=\"2.5\"/></>,\n key: <><circle cx=\"8\" cy=\"15\" r=\"4\"/><path d=\"m11 12 9-9M16 4l3 3M14 6l3 3\"/></>,\n };\n return <svg className=\"icon\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">{paths[name] ?? paths.more}</svg>;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return <button className={`button button-${variant} ${className}`} {...props}>\n {icon && <Icon name={icon} size={16}/>}<span>{children}</span>\n </button>;\n}\nfunction NetworkActivity() {\n const [count, setCount] = useState(activeRequests);\n useEffect(() => {\n const update = (event: any) => setCount(Number(event.detail) || 0);\n window.addEventListener(\"aflabs:requests\", update);\n return () => window.removeEventListener(\"aflabs:requests\", update);\n }, []);\n return count > 0 ? <div className=\"network-activity\" role=\"status\" aria-live=\"polite\"><i/><span>Working…</span></div> : null;\n}\nfunction PageSkeleton({ rows = 3, chart = false }: { rows?: number; chart?: boolean }) {\n return <div className=\"page-skeleton\" aria-label=\"Loading content\">\n <div className=\"skeleton skeleton-title\"/>\n {chart && <div className=\"skeleton skeleton-chart\"/>}\n {Array.from({ length: rows }).map((_, index) => <div className=\"skeleton skeleton-row\" key={index}/>)}\n </div>;\n}\nfunction BoardSkeleton() {\n return <div className=\"kanban board-skeleton\" aria-label=\"Loading project board\">\n {Array.from({ length: 5 }).map((_, column) => <section className=\"kanban-column\" key={column}><div className=\"skeleton skeleton-column-title\"/>{Array.from({ length: 2 }).map((_, card) => <div className=\"skeleton skeleton-card\" key={card}/>)}</section>)}\n </div>;\n}\nfunction Field({ label, hint, children }: any) {\n return <label className=\"field\"><span>{label}</span>{children}{hint && <small>{hint}</small>}</label>;\n}\nfunction PhoneField({ label = \"Mobile number\", name = \"phone\", defaultValue = \"\", autoFocus = false }: any) {\n const detected = countries.find((x) => String(defaultValue).startsWith(x.code));\n const [country, setCountry] = useState(() => detected?.code || localStorage.getItem(\"aflabs_phone_country\") || \"+91\");\n const [number, setNumber] = useState(() => detected ? String(defaultValue).slice(detected.code.length) : String(defaultValue).replace(/^\\+\\d+/, \"\"));\n const selected = countries.find((x) => x.code === country) || countries[0];\n const changeCountry = (value: string) => { setCountry(value); localStorage.setItem(\"aflabs_phone_country\", value); };\n return <label className=\"field phone-field\"><span>{label}</span>\n <div className=\"phone-control\">\n <select aria-label=\"Country\" value={country} onChange={(e) => changeCountry(e.target.value)}>\n {countries.map((x) => <option value={x.code}>{x.flag} {x.code}</option>)}\n </select>\n <input value={number} onChange={(e) => setNumber(e.target.value)} required autoFocus={autoFocus} placeholder={selected.placeholder} inputMode=\"tel\"/>\n <input type=\"hidden\" name={name} value={`${country}${number.replace(/\\D/g, \"\")}`}/>\n </div>\n </label>;\n}\nfunction ThemeToggle({ theme, toggle }: any) {\n return <button type=\"button\" className=\"theme-toggle\" onClick={toggle} aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}>\n <Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={16}/><span>{theme === \"dark\" ? \"Light\" : \"Dark\"} mode</span>\n </button>;\n}\nfunction Empty({ title, text, action }: any) {\n return <div className=\"empty\"><div className=\"empty-mark\"><Icon name=\"board\" size={21}/></div><h3>{title}</h3><p>{text}</p>{action}</div>;\n}\nfunction Toast({ value, clear }: { value: { message: string; kind: string } | null; clear: () => void }) {\n useEffect(() => { if (!value) return; const timer = setTimeout(clear, 3600); return () => clearTimeout(timer); }, [value]);\n return value ? <div className={`toast toast-${value.kind}`} role={value.kind === \"error\" ? \"alert\" : \"status\"} aria-live={value.kind === \"error\" ? \"assertive\" : \"polite\"}><span>{value.message}</span><button type=\"button\" aria-label=\"Dismiss notification\" onClick={clear}><Icon name=\"close\" size={15}/></button></div> : null;\n}\n\nfunction AuthShell({ children, title, subtitle, theme, toggleTheme }: any) {\n return <main className=\"auth-page\">\n <section className=\"auth-brand\">\n <a className=\"brand brand-large\" href=\"/\"><BrandMark large/><span>AFLABS <b>PM</b></span></a>\n <div className=\"auth-statement\">\n <span className=\"signal\"><i/> Project delivery, made visible.</span>\n <h1>One calm place for every moving part.</h1>\n <p>Run the work internally. Keep partners aligned. Give clients a clear sense of momentum.</p>\n </div>\n <div className=\"auth-foot\">Built for focused teams, not process theatre.</div>\n </section>\n <section className=\"auth-panel\"><div className=\"auth-theme\"><ThemeToggle theme={theme} toggle={toggleTheme}/></div><div className=\"auth-card\"><div className=\"auth-heading\"><h2>{title}</h2><p>{subtitle}</p></div>{children}</div></section>\n </main>;\n}\n\nfunction Bootstrap({ onDone, theme, toggleTheme }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try { await post(\"/api/bootstrap\", data); onDone(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell title=\"Set up AFLABS PM\" subtitle=\"Create the first administrator. This setup closes permanently after completion.\" theme={theme} toggleTheme={toggleTheme}>\n <form onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n <Field label=\"Private bootstrap token\"><input name=\"token\" type=\"password\" required autoFocus/></Field>\n <Field label=\"Your name\"><input name=\"name\" required placeholder=\"Administrator name\"/></Field>\n <PhoneField/>\n <Field label=\"Choose a PIN\" hint=\"4–8 digits\"><input name=\"pin\" type=\"password\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Creating administrator…\" : \"Create administrator\"}</Button>\n </form>\n </AuthShell>;\n}\n\nfunction Login({ clientToken, onDone, theme, toggleTheme }: any) {\n const initial = clientToken ? \"client\" : \"internal\";\n const [mode, setMode] = useState(initial), [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const rememberedPhone = localStorage.getItem(\"aflabs_login_phone\") || \"\";\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try {\n await post(mode === \"partner\" ? \"/api/auth/partner\" : mode === \"client\" ? \"/api/auth/client\" : \"/api/auth/login\", {\n ...data, token: clientToken,\n });\n if (mode !== \"client\" && data.phone) localStorage.setItem(\"aflabs_login_phone\", String(data.phone));\n onDone();\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell\n title={mode === \"client\" ? \"View project\" : mode === \"partner\" ? \"Partner access\" : \"Welcome back\"}\n subtitle={mode === \"client\" ? \"Enter the project PIN shared with you.\" : \"Use your registered mobile number and PIN.\"}\n theme={theme}\n toggleTheme={toggleTheme}\n >\n {!clientToken && <div className=\"segmented\">\n <button className={mode === \"internal\" ? \"active\" : \"\"} onClick={() => { setMode(\"internal\"); setError(\"\"); }}>Team</button>\n <button className={mode === \"partner\" ? \"active\" : \"\"} onClick={() => { setMode(\"partner\"); setError(\"\"); }}>Partner</button>\n </div>}\n <form key={mode} onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n {mode !== \"client\" && <PhoneField autoFocus defaultValue={rememberedPhone}/>}\n <Field label={mode === \"client\" ? \"Project PIN\" : \"PIN\"}><input name=\"pin\" type=\"password\" required autoFocus={mode === \"client\"} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Checking…\" : mode === \"client\" ? \"Open project\" : \"Sign in\"}</Button>\n </form>\n {!clientToken && <p className=\"auth-note\">Access is provisioned by an AFLABS administrator. There is no public signup or password recovery.</p>}\n </AuthShell>;\n}\n\nfunction ProjectForm({ actor, config, partners, leads = [], owners = [], ccRecipients = [], initial = {}, onSave, compact = false }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const [selectedPartner, setSelectedPartner] = useState(initial.partner_id || \"\");\n const [regularCost, setRegularCost] = useState(Number(initial.regular_cost) || 0);\n const [partnerCost, setPartnerCost] = useState(Number(initial.partner_cost) || 0);\n const [currency, setCurrency] = useState(initial.currency || \"INR\");\n const [taxRate, setTaxRate] = useState(Number(initial.tax_rate) || 0);\n const [taxInclusive, setTaxInclusive] = useState(Boolean(initial.tax_inclusive));\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const form = e.currentTarget, formData = new FormData(form), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n try { await onSave(data); form.reset(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n const partner = actor.actorType === \"partner\";\n return <form className=\"form-grid\" onSubmit={submit}>\n {error && <div className=\"alert alert-error full\">{error}</div>}\n <Field label=\"Project title\"><input name=\"title\" required autoFocus placeholder=\"What are we delivering?\" defaultValue={initial.title || \"\"}/></Field>\n <Field label=\"Originating lead\" hint=\"Every new project stays linked to its commercial origin\"><select name=\"lead_id\" required defaultValue={initial.lead_id || \"\"}><option value=\"\">Select lead</option>{leads.filter((lead: any) => !selectedPartner || !lead.partner_id || String(lead.partner_id) === selectedPartner).map((lead: any) => <option value={lead.id}>{lead.company_name || lead.title} · {titleCase(lead.stage)}</option>)}</select></Field>\n {!compact && <Field label=\"Type\"><select name=\"project_type\" defaultValue={initial.project_type || \"Billable\"}>{config.projectTypes.map((x: string) => <option>{x}</option>)}</select></Field>}\n <Field label=\"One-line description\" hint=\"Keep this short for project cards and client headers\"><input name=\"description\" maxLength={240} placeholder=\"The outcome in one clear sentence\" defaultValue={initial.description || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, tables, and code.\"><textarea name=\"markdown_details\" rows={12} placeholder={\"# Context\\n\\n## Scope\\n- Requirement\\n\\n## Decisions\"} defaultValue={initial.markdown_details || \"\"}/></Field>\n <Field label=\"Project email\" hint=\"Main POC for optional email updates\"><input name=\"contact_email\" type=\"email\" placeholder=\"project@example.com\" defaultValue={initial.contact_email || \"\"}/></Field>\n <Field label=\"CC emails\" hint=\"Comma-separated additional recipients\"><input name=\"cc_emails\" type=\"text\" placeholder=\"finance@example.com, poc@example.com\" defaultValue={(initial.cc_emails || []).join?.(\", \") || initial.cc_emails || \"\"}/></Field>\n {!partner && !compact && <>\n <Field label=\"Status\"><select name=\"status\" defaultValue={initial.status || \"backlog\"}>{config.statuses.filter((x: string) => x !== \"done\" || actor.role === \"admin\").map((x: string) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={initial.owner_user_id || actor.actorId}><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={initial.start_date || \"\"}/></Field>\n <Field label=\"Target end date\"><input name=\"end_date\" type=\"date\" defaultValue={initial.end_date || \"\"}/></Field>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" value={currency} onChange={(e) => setCurrency(e.target.value)}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular project cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={regularCost} onChange={(e) => setRegularCost(Number(e.target.value))}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={partnerCost} onChange={(e) => setPartnerCost(Number(e.target.value))}/></Field>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={initial.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" checked={taxInclusive} onChange={(e) => setTaxInclusive(e.target.checked)}/> Project cost already includes tax</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={regularCost} partnerCost={partnerCost} currency={currency} taxRate={taxRate} taxInclusive={taxInclusive}/>\n {actor.role === \"admin\" && ccRecipients.length > 0 && <fieldset className=\"full\"><legend>Mandatory email CC</legend><p className=\"field-note\">Choose the default company recipients copied on project updates.</p><div className=\"permission-grid\">{ccRecipients.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(initial.notification_cc_ids || []).includes?.(x.id) || (!initial.notification_cc_ids && x.default_selected)}/>{x.label}</label>)}</div></fieldset>}\n <Field label=\"Client portal PIN\" hint=\"Leave empty to generate a 6-digit PIN\"><input name=\"client_pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n {selectedPartner && <Field label=\"Commission document URL\"><input name=\"commission_document_url\" type=\"url\" placeholder=\"https://…\" defaultValue={initial.commission_document_url || \"\"}/></Field>}\n </>}\n <div className=\"form-actions full\"><Button disabled={busy} icon=\"plus\">{busy ? \"Adding…\" : \"Add project\"}</Button></div>\n </form>;\n}\n\nfunction KanbanCard({ project, actor, open }: any) {\n const range = project.end_date ? `Due ${prettyDate(project.end_date)}` : project.start_date ? `Started ${prettyDate(project.start_date)}` : \"Dates not set\";\n const countdown = deadlineLabel(project.end_date, project.status);\n return <button\n className=\"kanban-card\"\n draggable={actor.actorType === \"internal\" && actor.permissions.move_projects}\n onDragStart={(e) => e.dataTransfer.setData(\"text/project-id\", project.id)}\n onClick={open}\n >\n <div className=\"card-top\"><span className={`type-dot type-${project.project_type?.toLowerCase().replace(/[^a-z]/g, \"\")}`}/><span className=\"project-type\">{project.project_type}</span>{project.unanswered_count > 0 && <span className=\"question-attention\" title={`${project.unanswered_count} unanswered client question${project.unanswered_count === 1 ? \"\" : \"s\"}`}><Icon name=\"question\" size={12}/>{project.unanswered_count}</span>}{project.unread_count > 0 && <span className=\"unread\">{project.unread_count}</span>}</div>\n <h3>{project.title}</h3>\n <p>{project.description || \"No description yet.\"}</p>\n <div className=\"card-progress\"><span style={{ width: `${project.progress}%` }}/></div>\n <div className=\"card-meta\"><span><Icon name=\"clock\" size={14}/>{range}</span><b>{project.progress}%</b></div>\n {countdown && <div className={`deadline-countdown ${countdown.includes(\"overdue\") ? \"overdue\" : \"\"}`}>{countdown}</div>}\n {project.partner_name && <div className=\"partner-chip\"><span>{initials(project.partner_name)}</span>{project.partner_name}</div>}\n </button>;\n}\n\nfunction Kanban({ projects, actor, onOpen, onMove }: any) {\n return <div className=\"kanban\">\n {Object.entries(statusMeta).map(([status, meta]) => {\n const items = projects.filter((p: any) => p.status === status);\n return <section className={`kanban-column column-${status}`} key={status}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => { e.preventDefault(); const id = e.dataTransfer.getData(\"text/project-id\"); if (id) onMove(id, status); }}\n >\n <header><div><span className=\"status-symbol\"/><h2>{meta.label}</h2><b>{items.length}</b></div><p>{meta.note}</p></header>\n <div className=\"kanban-list\">\n {items.map((project: any) => <KanbanCard key={project.id} project={project} actor={actor} open={() => onOpen(project.id)}/>)}\n {!items.length && <div className=\"column-empty\">Drop a project here</div>}\n </div>\n </section>;\n })}\n </div>;\n}\n\nfunction Modal({ open, close, children, wide = false }: any) {\n const ref = useRef<HTMLDialogElement>(null);\n useEffect(() => { const node = ref.current; if (!node) return; if (open && !node.open) node.showModal(); if (!open && node.open) node.close(); }, [open]);\n return <dialog ref={ref} className={wide ? \"modal modal-wide\" : \"modal\"} onCancel={(e) => { e.preventDefault(); close(); }} onClick={(e) => { if (e.target === ref.current) close(); }}>\n <NetworkActivity/><div className=\"modal-inner\">{children}</div>\n </dialog>;\n}\n\nfunction QuickForm({ kind, projectId, detail, done }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\"), [feedback, setFeedback] = useState(\"\");\n const [commentText, setCommentText] = useState(\"\");\n const [quickNotes, setQuickNotes] = useState<any[]>([]);\n const [slash, setSlash] = useState<{ start: number; query: string; index: number } | null>(null);\n const commentRef = useRef<HTMLTextAreaElement>(null);\n useEffect(() => {\n if (kind !== \"comment\") return;\n request(\"/api/quick-notes\").then((result) => setQuickNotes(result.quick_notes || [])).catch(() => {});\n }, [kind]);\n const matchingNotes = useMemo(() => {\n const query = slash?.query.toLowerCase().trim() || \"\";\n return quickNotes.filter((note) => !query || `${note.title} ${note.shortcut} ${note.body}`.toLowerCase().includes(query)).slice(0, 8);\n }, [quickNotes, slash?.query]);\n const updateSlash = (value: string, cursor: number) => {\n const before = value.slice(0, cursor);\n const match = /(?:^|\\s)\\/([^/\\n]*)$/.exec(before);\n setSlash(match ? { start: before.lastIndexOf(\"/\"), query: match[1], index: 0 } : null);\n };\n const selectPlaceholder = (value: string, from: number, insertedStart?: number, insertedEnd?: number) => {\n requestAnimationFrame(() => {\n const textarea = commentRef.current;\n if (!textarea) return;\n const matches = [...value.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)];\n const placeholder = matches.find((match) => {\n const start = match.index ?? 0;\n return start >= from && (insertedStart === undefined || (start >= insertedStart && start < (insertedEnd ?? value.length)));\n });\n if (!placeholder || placeholder.index === undefined) return;\n textarea.focus();\n textarea.setSelectionRange(placeholder.index, placeholder.index + placeholder[0].length);\n });\n };\n const insertQuickNote = (note: any) => {\n const textarea = commentRef.current;\n if (!textarea || !slash) return;\n const cursor = textarea.selectionEnd;\n const next = `${commentText.slice(0, slash.start)}${note.body}${commentText.slice(cursor)}`;\n const insertedEnd = slash.start + note.body.length;\n setCommentText(next);\n setSlash(null);\n selectPlaceholder(next, slash.start, slash.start, insertedEnd);\n if (!/\\{\\{[^{}\\n]+\\}\\}/.test(note.body)) {\n requestAnimationFrame(() => {\n textarea.focus();\n textarea.setSelectionRange(insertedEnd, insertedEnd);\n });\n }\n };\n const commentKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (slash) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (matchingNotes.length) setSlash((current) => current ? {\n ...current,\n index: (current.index + (event.key === \"ArrowDown\" ? 1 : -1) + matchingNotes.length) % matchingNotes.length,\n } : null);\n return;\n }\n if ((event.key === \"Enter\" || event.key === \"Tab\") && matchingNotes.length) {\n event.preventDefault();\n insertQuickNote(matchingNotes[Math.min(slash.index, matchingNotes.length - 1)]);\n return;\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n setSlash(null);\n return;\n }\n }\n if (event.key === \"Tab\") {\n const textarea = event.currentTarget;\n const next = [...commentText.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)]\n .find((match) => (match.index ?? -1) >= textarea.selectionEnd);\n if (next && next.index !== undefined) {\n event.preventDefault();\n textarea.setSelectionRange(next.index, next.index + next[0].length);\n }\n }\n };\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\"); setFeedback(\"\");\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.client_visible = data.client_visible === \"on\";\n data.send_email = data.send_email === \"on\";\n data.is_main_poc = data.is_main_poc === \"on\";\n data.email_cc = data.email_cc === \"on\";\n try {\n const paths: any = {\n link: \"links\", credential: \"credentials\", stakeholder: \"stakeholders\",\n milestone: \"milestones\", payment: \"payments\", comment: \"comments\",\n };\n const result = await post(`/api/projects/${projectId}/${paths[kind]}`, data);\n form.reset(); setCommentText(\"\"); setSlash(null); await done();\n if (data.send_email && !result.email?.sent) {\n setFeedback(`Update saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`);\n }\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <form className=\"quick-form\" onSubmit={submit}>\n {error && <div className=\"alert alert-error\">{error}</div>}\n {feedback && <div className=\"alert alert-warning\">{feedback}</div>}\n {kind === \"comment\" && <>\n <div className=\"form-row\"><Field label=\"Update type\"><select name=\"comment_type\">{Object.entries(typeLabels).filter(([x]) => x !== \"milestone\").map(([value, label]) => <option value={value}>{label}</option>)}</select></Field>\n <Field label=\"Visible to\"><select name=\"visibility\"><option value=\"both\">Admin + client</option><option value=\"admin\">Admin only</option><option value=\"client\">Client timeline</option></select></Field>\n <Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field></div>\n <Field label=\"Update\"><div className=\"quick-note-composer\"><textarea ref={commentRef} name=\"body\" required rows={4} value={commentText} placeholder=\"Share what changed and what comes next. Type / for a quick note.\" onChange={(event) => { setCommentText(event.target.value); updateSlash(event.target.value, event.target.selectionStart); }} onClick={(event) => updateSlash(event.currentTarget.value, event.currentTarget.selectionStart)} onKeyDown={commentKeyDown}/>{slash && <div className=\"quick-note-menu\" role=\"listbox\" aria-label=\"Quick notes\">{matchingNotes.length ? matchingNotes.map((note, index) => <button type=\"button\" role=\"option\" aria-selected={index === slash.index} className={index === slash.index ? \"active\" : \"\"} key={note.id} onMouseDown={(event) => { event.preventDefault(); insertQuickNote(note); }}><span><b>{note.title}</b><small>/{note.shortcut}</small></span><p>{note.body}</p></button>) : <div className=\"quick-note-empty\">No matching quick notes</div>}</div>}<small className=\"quick-note-hint\">Type / to insert a quick note · press Tab to replace each {\"{{VARIABLE}}\"}</small></div></Field>\n {detail.project.contact_email && <label className=\"check notify-check\"><input name=\"send_email\" type=\"checkbox\"/> Email the project POC and CC list</label>}\n </>}\n {kind === \"link\" && <div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required placeholder=\"Contract\"/></Field><Field label=\"URL\"><input name=\"url\" type=\"url\" required placeholder=\"https://…\"/></Field><Field label=\"Type\"><select name=\"link_type\"><option value=\"reference\">Reference</option><option value=\"document\">Document</option><option value=\"contract\">Contract</option><option value=\"mou\">MOU</option><option value=\"github\">GitHub</option></select></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div>}\n {kind === \"credential\" && <><div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required/></Field><Field label=\"Username\"><input name=\"username\"/></Field><Field label=\"Secret\"><input name=\"secret\" type=\"password\"/></Field></div><div className=\"form-row\"><Field label=\"Login URL\"><input name=\"url\" type=\"url\"/></Field><Field label=\"Notes\"><input name=\"notes\"/></Field></div></>}\n {kind === \"stakeholder\" && <><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/><Field label=\"Role\"><input name=\"role\" placeholder=\"Founder, SPOC…\"/></Field></div><Field label=\"Email address\"><input name=\"email\" type=\"email\" required placeholder=\"poc@example.com\"/></Field><div className=\"form-row stakeholder-email-options\"><label className=\"check\"><input name=\"is_main_poc\" type=\"checkbox\"/> Main POC and project email</label><label className=\"check\"><input name=\"email_cc\" type=\"checkbox\"/> Include in project email CC</label></div></>}\n {kind === \"milestone\" && <><div className=\"form-row\"><Field label=\"Milestone\"><input name=\"title\" required/></Field><Field label=\"Tag\"><input name=\"tag\" defaultValue=\"Milestone\"/></Field><Field label=\"Status\"><select name=\"status\"><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field></div><div className=\"form-row\"><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field><Field label=\"Completed date\"><input name=\"completed_date\" type=\"date\"/></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div><Field label=\"Description\"><textarea name=\"description\" rows={2}/></Field></>}\n {kind === \"payment\" && <div className=\"form-row\"><Field label={`Amount (${detail.project.currency})`}><input name=\"amount\" type=\"number\" min=\"0.01\" step=\"0.01\" required/></Field><Field label=\"Payment date\"><input name=\"paid_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)} required/></Field><Field label=\"Note\"><input name=\"note\" placeholder=\"Milestone payment\"/></Field></div>}\n <Button disabled={busy} variant=\"secondary\" icon=\"plus\">{busy ? \"Saving…\" : `Add ${kind}`}</Button>\n </form>;\n}\n\nfunction Timeline({ detail, actor, reload, notify }: any) {\n const [replying, setReplying] = useState<string | null>(null), [reply, setReply] = useState(\"\"), [sendReply, setSendReply] = useState(false), [adding, setAdding] = useState(false);\n const events = useMemo(() => [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, timelineType: x.comment_type, date: x.event_date })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, timelineType: \"milestone\", body: x.description, author_name: x.tag, date: x.completed_date || x.due_date, milestone: true })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date) || String(b.created_at).localeCompare(String(a.created_at))), [detail]);\n const canComment = actor.actorType === \"partner\"\n ? detail.project.status !== \"backlog\"\n : actor.actorType === \"internal\" && canActor(actor, \"manage_comments\");\n const resolve = async (item: any) => {\n try {\n const result = await post(`/api/comments/${item.id}/resolve`, { reply, send_email: sendReply });\n setReply(\"\"); setReplying(null); setSendReply(false); await reload();\n if (sendReply && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Question answered\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n return <div className=\"timeline-wrap\">\n <div className=\"section-toolbar\">\n <div><h3>Project timeline</h3><p>{events.length} dated {events.length === 1 ? \"entry\" : \"entries\"} across updates and milestones.</p></div>\n {canComment && <Button variant={adding ? \"secondary\" : \"primary\"} icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"Add update\"}</Button>}\n </div>\n {adding && <div className=\"composer\"><QuickForm kind=\"comment\" projectId={detail.project.id} detail={detail} done={async () => { await reload(); setAdding(false); }}/></div>}\n {events.length ? <div className=\"timeline\">\n {events.map((item: any) => <article className={`timeline-item timeline-${item.timelineType}`} key={`${item.milestone ? \"m\" : \"c\"}-${item.id}`}>\n {futureDaysLabel(item.date) && <span className=\"timeline-future-gap\">{futureDaysLabel(item.date)}</span>}\n <div className=\"timeline-node\"><Icon name={eventIcons[item.timelineType] || \"note\"} size={16}/></div>\n <div className=\"timeline-content\">\n <div className=\"timeline-head\"><span className=\"event-type\">{typeLabels[item.timelineType] || titleCase(item.timelineType)}</span><time>{timelineDate(item.date)}</time>{item.visibility && <span className=\"visibility-label\">{item.visibility === \"both\" ? \"Team + client\" : titleCase(item.visibility)}</span>}{item.resolved_at && <span className=\"resolved\">Resolved</span>}</div>\n <h4>{item.milestone ? item.title : item.author_name}</h4>\n {item.body && <p>{item.body}</p>}\n {item.timelineType === \"question\" && detail.comments.filter((x: any) => x.parent_id === item.id).map((x: any) => <div className=\"timeline-reply\"><b>{x.author_name}</b><p>{x.body}</p></div>)}\n {item.timelineType === \"question\" && !item.resolved_at && canComment && <>\n {replying === item.id ? <div className=\"reply-box\"><textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder=\"Answer the client and resolve this question\"/>{detail.project.contact_email && <label className=\"check\"><input type=\"checkbox\" checked={sendReply} onChange={(e) => setSendReply(e.target.checked)}/>Email this answer to the client POC</label>}<Button variant=\"secondary\" onClick={() => resolve(item)}>Reply & resolve</Button></div> : <button className=\"text-action\" onClick={() => setReplying(item.id)}>Answer question</button>}\n </>}\n </div>\n </article>)}\n </div> : <Empty title=\"No timeline entries yet\" text=\"Updates and milestones will build the project story here.\"/>}\n </div>;\n}\nfunction canActor(actor: Actor, key: string) {\n return actor.role === \"admin\" || actor.permissions?.[key] === true;\n}\nfunction CredentialCard({ item, canRemove, removeItem }: any) {\n const [revealed, setRevealed] = useState(false);\n const copy = async (value: string) => { if (value) await navigator.clipboard.writeText(value); };\n return <article className=\"credential-card\">\n <header><span><Icon name=\"key\" size={16}/></span><div><h4>{item.label}</h4><p>{item.username || \"No username\"}</p></div></header>\n <div className=\"secret-row\"><code>{revealed ? item.secret || \"—\" : item.secret ? \"••••••••••••\" : \"No secret\"}</code><button type=\"button\" onClick={() => setRevealed(!revealed)} aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}><Icon name=\"eye\" size={15}/></button></div>\n {item.notes && <p className=\"credential-note\">{item.notes}</p>}\n <footer>{item.url && <a href={item.url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={14}/>Open login</a>}{item.username && <button type=\"button\" onClick={() => copy(item.username)}><Icon name=\"copy\" size={14}/>Copy username</button>}{canRemove && <button type=\"button\" className=\"danger-link\" onClick={() => removeItem(`/api/credentials/${item.id}`)}>Remove</button>}</footer>\n </article>;\n}\nfunction StakeholderCard({ item, canManage, onUpdate, onRemove }: any) {\n return <article className={`person ${item.is_main_poc ? \"person-main\" : \"\"}`}>\n <span>{initials(item.name)}</span>\n <div>\n <header><b>{item.name}</b>{Boolean(item.is_main_poc) && <em>Main POC</em>}{Boolean(item.email_cc) && <em>CC</em>}</header>\n <p>{item.role || \"Stakeholder\"}</p>\n <a href={`mailto:${item.email}`}>{item.email || \"Email required\"}</a>\n <a href={`tel:${item.phone}`}>{item.phone}</a>\n {canManage && <>\n <div className=\"person-actions\">\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { is_main_poc: true })}>Make main POC</button>}\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { email_cc: !Boolean(item.email_cc) })}>{Boolean(item.email_cc) ? \"Remove from CC\" : \"Add to CC\"}</button>}\n <button type=\"button\" className=\"danger-link\" onClick={() => onRemove(`/api/stakeholders/${item.id}`)}>Remove</button>\n </div>\n <details className=\"person-editor\">\n <summary>Edit contact details</summary>\n <form className=\"stack\" onSubmit={async (e: any) => {\n e.preventDefault();\n const data: any = Object.fromEntries(new FormData(e.currentTarget));\n data.email_cc = data.email_cc === \"on\";\n await onUpdate(item, data);\n }}>\n <Field label=\"Name\"><input name=\"name\" required defaultValue={item.name}/></Field>\n <PhoneField defaultValue={item.phone}/>\n <Field label=\"Email\"><input name=\"email\" type=\"email\" required defaultValue={item.email || \"\"}/></Field>\n <Field label=\"Role\"><input name=\"role\" defaultValue={item.role || \"\"}/></Field>\n {!Boolean(item.is_main_poc) && <label className=\"check\"><input name=\"email_cc\" type=\"checkbox\" defaultChecked={Boolean(item.email_cc)}/>Include in project email CC</label>}\n <Button variant=\"secondary\">Save contact</Button>\n </form>\n </details>\n </>}\n </div>\n </article>;\n}\n\nfunction DetailPanel({ projectId, actor, owners = [], partners = [], close, refreshList, notify }: any) {\n const [detail, setDetail] = useState<any>(null), [templates, setTemplates] = useState<any[]>([]), [tab, setTab] = useState(\"overview\"), [busy, setBusy] = useState(false), [invoiceOpen, setInvoiceOpen] = useState(false), [progressDraft, setProgressDraft] = useState(0), [selectedPartner, setSelectedPartner] = useState(\"\"), [editingMilestoneId, setEditingMilestoneId] = useState(\"\"), [savingMilestoneId, setSavingMilestoneId] = useState(\"\");\n const load = async () => {\n const value = await request(`/api/projects/${projectId}`);\n setDetail(value); setProgressDraft(Number(value.project.progress)); setSelectedPartner(value.project.partner_id || \"\"); post(`/api/projects/${projectId}/read`).catch(() => {});\n };\n useEffect(() => { load().catch((e) => notify(e.message, \"error\")); }, [projectId]);\n useEffect(() => { if (actor.actorType === \"internal\") request(\"/api/milestone-templates\").then((x) => setTemplates(x.templates)).catch(() => {}); }, [projectId]);\n if (!detail) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/><div className=\"skeleton\"/></div>;\n const p = detail.project, internal = actor.actorType === \"internal\";\n const saveOverview = async (e: any) => {\n e.preventDefault(); setBusy(true);\n try {\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n await patch(`/api/projects/${p.id}`, data); notify(\"Project updated\"); await load(); refreshList();\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const archive = async () => {\n try { await patch(`/api/projects/${p.id}`, { archived: !p.archived }); notify(p.archived ? \"Project restored\" : \"Project archived\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteProject = async () => {\n const left = Math.floor(Math.random() * 9) + 2, right = Math.floor(Math.random() * 9) + 2;\n const answer = prompt(`Permanently delete “${p.title}” and its full history?\\n\\nTo confirm, what is ${left} + ${right}?`);\n if (answer === null) return;\n try { await remove(`/api/projects/${p.id}`, { left, right, answer }); notify(\"Project permanently deleted\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const copyPortal = async () => {\n const url = `${location.origin}/client/${p.client_token}`;\n await navigator.clipboard.writeText(url); notify(\"Client link copied\");\n };\n const saveProgress = async () => {\n setBusy(true);\n try { await patch(`/api/projects/${p.id}`, { progress: progressDraft }); await load(); refreshList(); notify(\"Completion updated\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const removeItem = async (path: string) => {\n if (!confirm(\"Remove this item?\")) return;\n try { await remove(path); load(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const updateMilestone = async (item: any, status: string) => {\n try {\n await patch(`/api/milestones/${item.id}`, {\n status,\n completed_date: status === \"complete\" ? item.completed_date || new Date().toISOString().slice(0, 10) : \"\",\n });\n await load(); notify(`Milestone marked ${titleCase(status)}`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveMilestone = async (e: any, item: any) => {\n e.preventDefault(); setSavingMilestoneId(item.id);\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.client_visible = formData.has(\"client_visible\");\n data.completed_date = data.status === \"complete\"\n ? data.completed_date || item.completed_date || new Date().toISOString().slice(0, 10)\n : \"\";\n try {\n await patch(`/api/milestones/${item.id}`, data);\n setEditingMilestoneId(\"\"); await load(); notify(\"Milestone updated\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setSavingMilestoneId(\"\"); }\n };\n const extendSchedule = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const result = await post(`/api/projects/${p.id}/extensions`, Object.fromEntries(new FormData(form)));\n form.reset(); await load(); await refreshList();\n notify(`Schedule extended by ${result.days} ${result.days === 1 ? \"day\" : \"days\"}`);\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const updateStakeholder = async (item: any, changes: any) => {\n try {\n await patch(`/api/stakeholders/${item.id}`, changes);\n await load(); await refreshList(); notify(\"Project email recipients updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const collaborationReady = actor.actorType !== \"partner\" || p.status !== \"backlog\";\n const tabs = [\n { key: \"overview\", label: \"Overview\", icon: \"board\" },\n { key: \"timeline\", label: \"Timeline\", icon: \"update\", count: detail.comments.length + detail.milestones.filter((x: any) => x.status !== \"upcoming\").length },\n { key: \"milestones\", label: \"Milestones\", icon: \"milestone\", count: detail.milestones.length },\n { key: \"resources\", label: \"Resources\", icon: \"link\", count: detail.links.length + detail.credentials.length },\n { key: \"people\", label: \"People\", icon: \"users\", count: detail.stakeholders.length },\n { key: \"payments\", label: \"Payments\", icon: \"payment\", count: detail.payments.length },\n ...((internal || collaborationReady) ? [{ key: \"access\", label: \"Client access\", icon: \"key\" }] : []),\n ];\n return <div className=\"detail\">\n <header className=\"detail-header\">\n <div className=\"detail-title\"><div className=\"detail-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <span className=\"delay-badge\">Forecast +{p.delivery_delay_days}d</span>}{p.end_date && <span className={`delay-badge deadline-badge ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</span>}</div><h2>{p.title}</h2><div className=\"detail-meta\"><span>{p.partner_name ? `Partner · ${p.partner_name}` : \"Direct AFLABS project\"}</span><span>{p.project_type}</span>{p.contact_email && <a href={`mailto:${p.contact_email}`}><Icon name=\"mail\" size={13}/>{p.contact_email}</a>}</div></div>\n <div className={`detail-progress ${actor.role === \"admin\" ? \"detail-progress-editable\" : \"\"}`}>\n <div><span>Completion</span><b>{actor.role === \"admin\" ? progressDraft : p.progress}%</b></div>\n {actor.role === \"admin\" ? <div className=\"progress-controls\"><input aria-label=\"Project completion\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={progressDraft} onChange={(e) => setProgressDraft(Number(e.target.value))}/><Button type=\"button\" variant=\"secondary\" disabled={busy || progressDraft === p.progress} onClick={saveProgress}>Save</Button></div> : <div className=\"progress\"><i style={{ width: `${p.progress}%` }}/></div>}\n </div>\n <button className=\"icon-button\" onClick={close} aria-label=\"Close\"><Icon name=\"close\"/></button>\n </header>\n <nav className=\"detail-tabs\">{tabs.map((item) => <button className={tab === item.key ? \"active\" : \"\"} onClick={() => setTab(item.key)}><Icon name={item.icon} size={15}/><span>{item.label}</span>{item.count !== undefined && <b>{item.count}</b>}</button>)}</nav>\n <div className=\"detail-body\">\n {tab === \"overview\" && <div className=\"detail-section\">\n <div className=\"overview-layout\">\n {internal && canActor(actor, \"edit_projects\") ? <form className=\"form-grid overview-form\" onSubmit={saveOverview}>\n <div className=\"form-section-title full\"><h3>Project definition</h3><p>Scope, ownership, and delivery window.</p></div>\n <Field label=\"Title\"><input name=\"title\" defaultValue={p.title} required/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={p.status}>{Object.keys(statusMeta).filter((x) => x !== \"done\" || actor.role === \"admin\").map((x) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"One-line description\"><input name=\"description\" maxLength={240} defaultValue={p.description}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for structured project context.\"><textarea name=\"markdown_details\" rows={14} defaultValue={p.markdown_details || \"\"}/></Field>\n {detail.stakeholders.length ? <div className=\"recipient-source full\"><Icon name=\"users\" size={16}/><div><b>Email recipients come from stakeholders</b><p>Use the People tab to mark the main POC and choose CC recipients.</p></div></div> : <><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={p.contact_email || \"\"} placeholder=\"project@example.com\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(p.cc_emails || []).join(\", \")} placeholder=\"finance@example.com, poc@example.com\"/></Field></>}\n {actor.role === \"admin\" && detail.notificationCcOptions?.length > 0 && <fieldset className=\"full project-cc-settings\"><legend>Company CC recipients</legend><p className=\"field-note\">These recipients are added alongside stakeholder CCs whenever you choose to email an update.</p><div className=\"permission-grid\">{detail.notificationCcOptions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(p.notification_cc_ids || []).includes(x.id)}/><span><b>{x.label}</b><small>{x.email || \"Mapped internal user\"}</small></span></label>)}</div></fieldset>}\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={p.owner_user_id || \"\"} required><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={p.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"Start date\" hint={p.start_date ? `${prettyDate(p.start_date)} · ${projectDateFootnote(p.start_date, \"start\")}` : \"\"}><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\" hint={p.end_date ? `${prettyDate(p.end_date)} · ${projectDateFootnote(p.end_date, \"end\")}` : \"\"}><input name=\"end_date\" type=\"date\" defaultValue={p.end_date || \"\"}/></Field>\n <div className=\"form-section-title full\"><h3>Commercial details</h3><p>Internal pricing and partner documentation.</p></div>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={p.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.regular_cost}/></Field>\n {selectedPartner && <><Field label=\"Partner-managed cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.partner_cost}/></Field><Field label=\"Commission document\"><input name=\"commission_document_url\" type=\"url\" defaultValue={p.commission_document_url || \"\"}/></Field></>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={p.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(p.tax_inclusive)}/> Cost already includes {p.tax_label || \"tax\"}</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={p.regular_cost} partnerCost={p.partner_cost} currency={p.currency} taxRate={p.tax_rate} taxInclusive={p.tax_inclusive}/>\n <div className=\"form-actions full\"><Button disabled={busy}>{busy ? \"Saving…\" : \"Save project\"}</Button>{canActor(actor, \"archive_projects\") && <Button type=\"button\" variant=\"secondary\" icon=\"archive\" onClick={archive}>{p.archived ? \"Restore\" : \"Archive\"}</Button>}{actor.role === \"admin\" && <Button type=\"button\" variant=\"danger\" onClick={deleteProject}>Delete permanently</Button>}</div>\n </form> : <div className=\"read-overview\"><div className=\"overview-description\"><h3>Project summary</h3><p>{p.description || \"No summary yet.\"}</p>{p.markdown_details && <section className=\"project-markdown-notes\"><header><div><h4>Detailed working notes</h4><p>Structured project context</p></div><span>Markdown</span></header><MarkdownBlock value={p.markdown_details}/></section>}</div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}{p.start_date && <small>{projectDateFootnote(p.start_date, \"start\")}</small>}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}{p.end_date && <small>{projectDateFootnote(p.end_date, \"end\")}</small>}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d{p.forecast_end_date && <small>{projectDateFootnote(p.forecast_end_date, \"end\")}</small>}</dd></div>}<div><dt>Type</dt><dd>{p.project_type}</dd></div>{p.contact_email && <div><dt>Project email</dt><dd><a href={`mailto:${p.contact_email}`}>{p.contact_email}</a></dd></div>}</dl></div>}\n <aside className=\"overview-summary\"><h3>Delivery snapshot</h3><dl><div><dt>Status</dt><dd>{statusMeta[p.status]?.label}</dd></div><div><dt>Primary owner</dt><dd>{p.owner_name || \"Not assigned\"}</dd></div><div><dt>Completion</dt><dd>{p.progress}%</dd></div><div><dt>Timeline</dt><dd>{detail.comments.length + detail.milestones.length} entries</dd></div><div><dt>Stakeholders</dt><dd>{detail.stakeholders.length}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Expected delay</dt><dd>+{p.delivery_delay_days} days</dd></div>}</dl>{actor.actorType === \"partner\" && !collaborationReady && <p className=\"notice\"><Icon name=\"clock\" size={15}/>Collaboration tools unlock when AFLABS moves this project to To do.</p>}</aside>\n </div>\n {actor.actorType === \"partner\" && actor.permissions.edit_owned_projects && <PartnerProjectEditor project={p} onDone={async () => { await load(); await refreshList(); }} notify={notify}/>}\n {internal && canActor(actor, \"edit_projects\") && p.end_date && <details className=\"schedule-extension\"><summary><span><Icon name=\"clock\" size={16}/><b>Extend target date</b></span><Icon name=\"chevron\" size={15}/></summary><form className=\"form-row\" onSubmit={extendSchedule}><Field label=\"New target date\"><input name=\"new_end_date\" type=\"date\" min={p.end_date} required/></Field><Field label=\"External reason\"><input name=\"reason\" required placeholder=\"Client dependency, approval delay…\"/></Field><Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field><Button disabled={busy}>Record extension</Button></form></details>}\n </div>}\n {tab === \"timeline\" && <Timeline detail={detail} actor={actor} reload={load} notify={notify}/>}\n {tab === \"milestones\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Delivery milestones</h3><p>Concrete checkpoints that also shape the client journey.</p></div>{internal && canActor(actor, \"manage_milestones\") && <div className=\"toolbar-actions\">{templates.length > 0 && <form className=\"template-apply\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const result = await post(`/api/projects/${p.id}/apply-milestone-template`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(`${result.count || 0} milestones added. Set their project due dates below.`); }}><select name=\"template_id\" required defaultValue=\"\"><option value=\"\">Use template…</option>{templates.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select><Button variant=\"secondary\">Apply</Button></form>}<details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add milestone</summary><div className=\"popover-form\"><QuickForm kind=\"milestone\" projectId={p.id} detail={detail} done={load}/></div></details></div>}</div>\n {internal && canActor(actor, \"manage_milestones\") && detail.milestones.some((x: any) => !x.due_date && x.status !== \"complete\") && <div className=\"milestone-date-notice\"><span><Icon name=\"clock\" size={16}/></span><div><b>Schedule your imported milestones</b><p>Template milestones use project-specific dates. Select Edit to set each due date and adjust its details.</p></div></div>}\n <div className=\"milestone-list\">{detail.milestones.map((x: any) => <article key={x.id} className={`milestone-row state-${x.status}`}>\n <span className=\"milestone-state\"><Icon name={x.status === \"complete\" ? \"check\" : x.status === \"active\" ? \"update\" : \"clock\"} size={15}/></span>\n <div className=\"milestone-copy\"><header><h4>{x.title}</h4><span>{titleCase(x.status)}</span>{!x.due_date && x.status !== \"complete\" && <span className=\"milestone-undated\">Date needed</span>}</header><p>{x.tag} · {x.completed_date ? `Completed ${prettyDate(x.completed_date)}` : x.due_date ? `Due ${prettyDate(x.due_date)}` : \"Due date not set\"}</p>{x.description && <small>{x.description}</small>}</div>\n {internal && canActor(actor, \"manage_milestones\") && <div className=\"milestone-actions\"><select aria-label={`Status for ${x.title}`} value={x.status} onChange={(e) => updateMilestone(x, e.target.value)}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select><button type=\"button\" className=\"text-action\" aria-expanded={editingMilestoneId === x.id} onClick={() => setEditingMilestoneId(editingMilestoneId === x.id ? \"\" : x.id)}>{editingMilestoneId === x.id ? \"Close\" : \"Edit\"}</button><button type=\"button\" className=\"text-danger\" onClick={() => removeItem(`/api/milestones/${x.id}`)}>Remove</button></div>}\n {editingMilestoneId === x.id && <form className=\"milestone-editor\" onSubmit={(e) => saveMilestone(e, x)}>\n <Field label=\"Milestone title\"><input name=\"title\" required defaultValue={x.title}/></Field>\n <Field label=\"Tag\"><input name=\"tag\" defaultValue={x.tag || \"Milestone\"}/></Field>\n <Field label=\"Due date\"><input name=\"due_date\" type=\"date\" defaultValue={x.due_date || \"\"}/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={x.status}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field>\n <Field label=\"Completed date\" hint=\"Filled automatically when marked complete\"><input name=\"completed_date\" type=\"date\" defaultValue={x.completed_date || \"\"}/></Field>\n <label className=\"check milestone-visibility\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked={Boolean(x.client_visible)}/> Visible on the client portal</label>\n <div className=\"milestone-description\"><Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description || \"\"} placeholder=\"What will be delivered at this checkpoint?\"/></Field></div>\n <div className=\"form-actions\"><Button disabled={savingMilestoneId === x.id}>{savingMilestoneId === x.id ? \"Saving…\" : \"Save milestone\"}</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingMilestoneId(\"\")}>Cancel</Button></div>\n </form>}\n </article>)}</div>\n {!detail.milestones.length && <Empty title=\"No milestones yet\" text=\"Add milestone tags to make delivery checkpoints visible.\"/>}\n </div>}\n {tab === \"resources\" && <div className=\"detail-section split-section\">\n <section><div className=\"section-toolbar\"><div><h3>Shared resources</h3><p>Documents, contracts, references, and repositories.</p></div>{((internal && canActor(actor, \"manage_links\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add resource</summary><div className=\"popover-form\"><QuickForm kind=\"link\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"resource-list\">{detail.links.map((x: any) => <article className=\"resource-row\"><span className=\"resource-icon\"><Icon name={x.link_type === \"github\" ? \"work\" : \"link\"}/></span><div><a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a><p>{titleCase(x.link_type)} · {x.client_visible ? \"Client visible\" : \"Team only\"}</p></div>{internal && canActor(actor, \"manage_links\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/links/${x.id}`)}>Remove</button>}</article>)}</div>{!detail.links.length && <Empty title=\"No shared resources\" text=\"Add the first document, contract, repository, or reference link.\"/>}</section>\n {((internal && canActor(actor, \"view_credentials\")) || (actor.actorType === \"partner\" && collaborationReady)) && <section><div className=\"section-toolbar\"><div><h3>Credentials</h3><p>Project access details. Credentials remain hidden from the client portal.</p></div>{((internal && canActor(actor, \"manage_credentials\")) || actor.actorType === \"partner\") && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add credential</summary><div className=\"popover-form\"><QuickForm kind=\"credential\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"credential-list\">{detail.credentials.map((x: any) => <CredentialCard item={x} canRemove={internal && canActor(actor, \"manage_credentials\")} removeItem={removeItem}/>)}</div>{!detail.credentials.length && <Empty title=\"No credentials saved\" text=\"Add basic project access details when the delivery team needs them.\"/>}</section>}\n </div>}\n {tab === \"people\" && <div className=\"detail-section\"><div className=\"section-toolbar\"><div><h3>Client stakeholders</h3><p>One contact is always the main POC. Other stakeholder emails can receive project updates by CC.</p></div>{((internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add stakeholder</summary><div className=\"popover-form\"><QuickForm kind=\"stakeholder\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"people-grid\">{detail.stakeholders.map((x: any) => <StakeholderCard key={x.id} item={x} canManage={(internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)} onUpdate={updateStakeholder} onRemove={removeItem}/>)}</div>{!detail.stakeholders.length && <Empty title=\"No stakeholders\" text=\"Add a client contact; the first becomes the main POC automatically.\"/>}</div>}\n {tab === \"payments\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Payment fulfillment</h3><p>Track receipts and generate branded invoices against the agreed client cost.</p></div>{(actor.actorType === \"partner\" || canActor(actor, \"manage_payments\")) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Record payment</summary><div className=\"popover-form\"><QuickForm kind=\"payment\" projectId={p.id} detail={detail} done={load}/></div></details>}</div>\n <div className=\"payment-summary\"><div><span>Project cost</span><b>{money(detail.paymentSummary.total, p.currency)}</b></div><div><span>Received</span><b>{money(detail.paymentSummary.paid, p.currency)}</b></div><div className=\"pending\"><span>Pending</span><b>{money(detail.paymentSummary.pending, p.currency)}</b></div></div>\n <div className=\"payments-layout\"><section><h4 className=\"subsection-title\">Receipts</h4><div className=\"item-list\">{detail.payments.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"payment\"/></span><div><b>{money(x.amount, x.currency)}</b><p>{prettyDate(x.paid_date)} · {x.note || \"Payment received\"}</p><a className=\"receipt-link\" href={`/api/payments/${x.id}/receipt.pdf`} target=\"_blank\" rel=\"noreferrer\">Receipt PDF ↗</a></div>{internal && canActor(actor, \"manage_payments\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/payments/${x.id}`)}>Remove</button>}</div>)}</div>{!detail.payments.length && <p className=\"muted\">No payments recorded yet.</p>}</section>\n <section>\n <div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <Button variant=\"secondary\" icon=\"plus\" onClick={() => setInvoiceOpen(true)}>Create invoice</Button>}</div>\n <Modal open={invoiceOpen} close={() => setInvoiceOpen(false)} wide><div className=\"modal-head\"><div><h2>New invoice</h2><p>Review line items, adjustments, tax, and the final total before creating the PDF.</p></div><button className=\"icon-button\" aria-label=\"Close invoice composer\" onClick={() => setInvoiceOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><InvoiceComposer project={p} detail={detail} onDone={async () => { await load(); setInvoiceOpen(false); }} notify={notify}/></div></Modal>\n <div className=\"invoice-list\">{(detail.invoices || []).map((x: any) => <a className=\"invoice-row\" href={\"/api/invoices/\" + x.id + \"/pdf\"} target=\"_blank\"><span><Icon name=\"note\"/></span><div><b>{x.invoice_number}</b><p>{titleCase(x.invoice_type)} · {money(x.total || x.amount, x.currency)} · {x.items?.length || 0} items</p></div><em>PDF ↗</em></a>)}</div>\n {!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}\n </section></div>\n </div>}\n {tab === \"access\" && <div className=\"detail-section access-grid\"><section><div className=\"section-heading\"><h3>Client portal access</h3><p>Share the private project link and PIN together with the client.</p></div><div className=\"portal-access-card\"><div><span>Private project link</span><code>{location.origin}/client/{p.client_token}</code></div><Button variant=\"secondary\" icon=\"copy\" onClick={copyPortal}>Copy link</Button><div><span>Project PIN</span><strong>{p.client_pin}</strong></div></div>{internal && <form className=\"inline-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await patch(`/api/projects/${p.id}`, Object.fromEntries(new FormData(form))); notify(\"Client PIN updated\"); await load(); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Change client PIN\"><input name=\"client_pin\" defaultValue={p.client_pin} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Button>Update PIN</Button></form>}</section><section className=\"privacy-note\"><h3>Client-safe sharing</h3><ul><li>Only client-visible links, milestones, and timeline entries appear.</li><li>Credentials, internal comments, and commission documents remain private.</li><li>Project completion and payment fulfillment update automatically.</li></ul></section></div>}\n </div>\n </div>;\n}\n\nfunction BrandingEditor({ value, fallback = {}, title, description, partner = false, onSave }: any) {\n const [draft, setDraft] = useState<any>(value || {});\n useEffect(() => { setDraft(value || {}); }, [JSON.stringify(value)]);\n const update = (key: string, next: string) => setDraft((current: any) => ({ ...current, [key]: next }));\n const effective = {\n name: draft.name || fallback.name || \"AFLABS\",\n logo_url: draft.logo_url || fallback.logo_url || \"/frontend/logo.png\",\n accent_color: draft.accent_color || fallback.accent_color || \"#8edb11\",\n contact_info: draft.contact_info || fallback.contact_info || \"\",\n website_url: draft.website_url || fallback.website_url || \"\",\n portal_label: draft.portal_label || fallback.portal_label || \"Project delivery\",\n welcome_message: draft.welcome_message || fallback.welcome_message || \"Every meaningful update, in one clear timeline.\",\n document_header: draft.document_header || fallback.document_header || \"AFLABS PM\\nProject delivery, made visible.\",\n document_footer: draft.document_footer || fallback.document_footer || \"Thank you for your business.\",\n };\n return <div className=\"branding-layout\">\n <section className=\"branding-form\">\n <h2>{title}</h2><p>{description}</p>\n <form className=\"stack\" onSubmit={async (e) => { e.preventDefault(); await onSave(draft); }}>\n <div className=\"form-row\"><Field label=\"Brand name\"><input value={draft.name || \"\"} onChange={(e) => update(\"name\", e.target.value)} placeholder={partner ? fallback.name || \"Use AFLABS default\" : \"AFLABS\"} required={!partner}/></Field>{!partner && <Field label=\"Portal label\"><input value={draft.portal_label || \"\"} onChange={(e) => update(\"portal_label\", e.target.value)} required/></Field>}</div>\n <Field label=\"Logo URL\" hint={partner ? \"Leave blank to use the AFLABS logo\" : \"The supplied AFLABS logo is available at /frontend/logo.png\"}><input value={draft.logo_url || \"\"} onChange={(e) => update(\"logo_url\", e.target.value)} placeholder={partner ? fallback.logo_url || \"/frontend/logo.png\" : \"/frontend/logo.png\"} required={!partner}/></Field>\n <div className=\"form-row\">\n <Field label=\"Accent color\"><div className=\"color-control\"><input type=\"color\" value={effective.accent_color.startsWith(\"#\") ? effective.accent_color : \"#8edb11\"} onChange={(e) => update(\"accent_color\", e.target.value)}/><input value={draft.accent_color || \"\"} onChange={(e) => update(\"accent_color\", e.target.value)} placeholder={fallback.accent_color || \"#8edb11\"}/></div></Field>\n <Field label=\"Contact information\"><input value={draft.contact_info || \"\"} onChange={(e) => update(\"contact_info\", e.target.value)} placeholder={partner ? fallback.contact_info || \"Email or support line\" : \"Email or support line\"}/></Field>\n </div>\n <Field label=\"Website\"><input type=\"url\" value={draft.website_url || \"\"} onChange={(e) => update(\"website_url\", e.target.value)} placeholder={fallback.website_url || \"https://example.com\"}/></Field>\n {!partner && <Field label=\"Timeline introduction\"><textarea rows={3} value={draft.welcome_message || \"\"} onChange={(e) => update(\"welcome_message\", e.target.value)}/></Field>}\n <div className=\"document-branding-fields\">\n <div className=\"form-section-title\"><h3>PDF document details</h3><p>Used consistently on proposals, invoices, and payment receipts.</p></div>\n <Field label=\"Document header\" hint={partner ? \"Leave blank to use the AFLABS document header\" : \"Business name, address, or a short legal line\"}><textarea rows={3} value={draft.document_header || \"\"} onChange={(e) => update(\"document_header\", e.target.value)} placeholder={fallback.document_header || \"Business name\\nAddress or legal details\"}/></Field>\n <Field label=\"Document footer\" hint={partner ? \"Leave blank to use the AFLABS document footer\" : \"Payment, contact, registration, or thank-you details\"}><textarea rows={3} value={draft.document_footer || \"\"} onChange={(e) => update(\"document_footer\", e.target.value)} placeholder={fallback.document_footer || \"Contact and payment details\"}/></Field>\n </div>\n {partner && <p className=\"fallback-note\">Any blank partner field automatically uses the direct AFLABS branding.</p>}\n <div className=\"form-actions\"><Button>Save branding</Button></div>\n </form>\n </section>\n <aside className=\"branding-preview\" style={{ \"--preview-accent\": effective.accent_color } as any}>\n <span className=\"preview-label\">Client preview</span>\n <div className=\"preview-brand\"><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><small>{effective.portal_label}</small></div></div>\n <div className=\"preview-project\"><span>In progress</span><h3>Your project title</h3><p>{effective.welcome_message}</p><div><i/></div></div>\n {(effective.contact_info || effective.website_url) && <small className=\"preview-contact\">{effective.contact_info}{effective.contact_info && effective.website_url ? \" · \" : \"\"}{effective.website_url && \"Visit website\"}</small>}\n <div className=\"document-preview\"><small>Document preview</small><header><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><span>{effective.document_header}</span></div></header><section><i/><strong>Proposal · Invoice · Receipt</strong><p>Professional documents automatically use this logo, accent, header, and footer.</p></section><footer>{effective.document_footer}</footer></div>\n </aside>\n </div>;\n}\n\nfunction AdminDirectory({ actor, config, projects, notify }: any) {\n const [tab, setTab] = useState(\"users\");\n const [users, setUsers] = useState<any[]>([]);\n const [partners, setPartners] = useState<any[]>([]);\n const [branding, setBranding] = useState<any>(null);\n const [loaded, setLoaded] = useState(false);\n const [userRole, setUserRole] = useState(\"user\");\n const [editingUser, setEditingUser] = useState<any>(null);\n const [editingPartner, setEditingPartner] = useState<any>(null);\n const [partnerPermissionLevel, setPartnerPermissionLevel] = useState(\"basic\");\n const [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\n const [ccUserId, setCcUserId] = useState(\"\");\n\n const load = async () => {\n const [userData, partnerData, brandData, ccData] = await Promise.all([\n request(\"/api/admin/users\"),\n request(\"/api/admin/partners\"),\n request(\"/api/admin/branding\"),\n request(\"/api/admin/cc-recipients\"),\n ]);\n setUsers(userData.users);\n setPartners(partnerData.partners);\n setBranding(brandData.branding);\n setProjectOptions(userData.projects || projects);\n setCcRecipients(ccData.recipients || []);\n setCcUsers(ccData.users || []);\n setLoaded(true);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n\n const addUser = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n const formData = new FormData(form);\n const data: any = Object.fromEntries(formData);\n data.permissions = Object.fromEntries(config.permissions.map((x: any) => [x.key, formData.has(`perm_${x.key}`)]));\n data.all_project_access = formData.has(\"all_project_access\");\n data.project_ids = formData.getAll(\"project_ids\");\n try {\n await post(\"/api/admin/users\", data);\n form.reset();\n setUserRole(\"user\");\n await load();\n notify(\"Team member added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addPartner = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n try {\n const values = new FormData(form), data: any = Object.fromEntries(values);\n data.permission_level = partnerPermissionLevel;\n data.permissions = Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"partner_perm_\" + item.key)]));\n await post(\"/api/admin/partners\", data);\n form.reset();\n setPartnerPermissionLevel(\"basic\");\n await load();\n notify(\"Partner added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const toggle = async (type: string, item: any) => {\n try {\n await patch(`/api/admin/${type}/${item.id}`, { active: !item.active });\n await load();\n notify(item.active ? \"Access revoked\" : \"Access restored\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveUserVisibility = async (e: any) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n try {\n await patch(`/api/admin/users/${editingUser.id}`, {\n name: formData.get(\"name\"),\n email: formData.get(\"email\"),\n pin: formData.get(\"pin\"),\n all_project_access: formData.has(\"all_project_access\"),\n project_ids: formData.getAll(\"project_ids\"),\n });\n await load(); setEditingUser(null); notify(\"Project visibility updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const destroy = async (type: string, item: any) => {\n if (!confirm(`Permanently remove ${item.name}? This cannot be undone.`)) return;\n try {\n await remove(`/api/admin/${type}/${item.id}`);\n await load();\n notify(`${item.name} removed`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerPermissions = async (e: any) => {\n e.preventDefault();\n const values = new FormData(e.currentTarget);\n try {\n await patch(\"/api/admin/partners/\" + editingPartner.id, {\n permission_level: editingPartner.permission_level || \"basic\",\n permissions: Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"edit_partner_perm_\" + item.key)])),\n });\n await load(); setEditingPartner(null); notify(\"Partner permissions updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerBranding = async (data: any) => {\n try {\n await patch(`/api/admin/partners/${editingPartner.id}`, {\n brand_name: data.name, logo_url: data.logo_url, accent_color: data.accent_color,\n contact_info: data.contact_info, website_url: data.website_url,\n document_header: data.document_header, document_footer: data.document_footer,\n });\n await load(); setEditingPartner(null); notify(\"Partner branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveBranding = async (data: any) => {\n try {\n const result = await patch(\"/api/admin/branding\", data);\n setBranding(result.branding);\n notify(\"Client portal branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveCcRecipients = async (next: any[], message = \"Email CC settings updated\") => {\n try {\n const result = await patch(\"/api/admin/cc-recipients\", { recipients: next });\n setCcRecipients(result.recipients);\n notify(message);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addCcRecipient = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget, formData = new FormData(form);\n await saveCcRecipients([...ccRecipients, {\n id: crypto.randomUUID(), label: formData.get(\"label\"),\n email: ccUserId ? \"\" : formData.get(\"email\"), user_id: ccUserId,\n default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\n setCcUserId(\"\");\n };\n\n if (!loaded) return <PageSkeleton rows={5}/>;\n return <div className=\"directory\">\n <header className=\"page-heading\">\n <div>\n <p>Administration</p>\n <h1>Access & branding</h1>\n <span>Manage who can enter the workspace and how direct client portals present AFLABS.</span>\n </div>\n </header>\n <div className=\"directory-tabs\">\n <button className={tab === \"users\" ? \"active\" : \"\"} onClick={() => setTab(\"users\")}>Internal team <b>{users.length}</b></button>\n <button className={tab === \"partners\" ? \"active\" : \"\"} onClick={() => setTab(\"partners\")}>Partners <b>{partners.length}</b></button>\n <button className={tab === \"branding\" ? \"active\" : \"\"} onClick={() => setTab(\"branding\")}>Client branding</button>\n <button className={tab === \"email\" ? \"active\" : \"\"} onClick={() => setTab(\"email\")}>Email CC <b>{ccRecipients.length}</b></button>\n </div>\n\n {tab === \"users\" && <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add internal user</h2>\n <p>Admins receive full access. For users, choose each permitted action and project scope.</p>\n <form className=\"stack\" onSubmit={addUser}>\n <div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"Work email\" hint=\"Used when this user is mapped to a project CC recipient\"><input name=\"email\" type=\"email\" placeholder=\"name@company.com\"/></Field>\n <div className=\"form-row\"><Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Field label=\"Role\"><select name=\"role\" value={userRole} onChange={(e) => setUserRole(e.target.value)}><option value=\"user\">User</option><option value=\"admin\">Admin</option></select></Field></div>\n <fieldset key={userRole}><legend>Allowed actions</legend><div className=\"permission-grid\">{config.permissions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name={`perm_${x.key}`} defaultChecked={userRole === \"admin\" || userDefaults[x.key]} disabled={userRole === \"admin\"}/>{x.label}</label>)}</div>{userRole === \"admin\" && <small className=\"field-note\">Administrators always receive every action. Project visibility remains configurable below.</small>}</fieldset>\n <fieldset><legend>Project visibility</legend><label className=\"check\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked/> All projects</label><div className=\"project-checks\">{projectOptions.map((p: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={p.id}/>{p.title}{p.archived ? \" · Archived\" : \"\"}</label>)}</div></fieldset>\n <Button icon=\"plus\">Add user</Button>\n </form>\n </section>\n <section className=\"directory-list\">{users.map((u) => {\n const isSelf = u.id === actor.actorId;\n return <article className=\"directory-row\" key={u.id}>\n <span className=\"avatar\">{initials(u.name)}</span>\n <div><h3>{u.name}<em>{isSelf ? \"you\" : u.role}</em></h3><p>{u.phone}{u.email ? ` · ${u.email}` : \"\"}</p><small>{u.role === \"admin\" ? \"All actions\" : `${Object.values(u.permissions).filter(Boolean).length} actions`} · {u.all_project_access ? \"all projects\" : `${u.project_ids.length} assigned`}</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" icon=\"eye\" onClick={() => setEditingUser(u)}>Manage</Button>{isSelf ? <span className=\"self-label\">Protected current account</span> : <><Button variant=\"secondary\" onClick={() => toggle(\"users\", u)}>{u.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"users\", u)}>Remove</button></>}</div>\n </article>;\n })}</section>\n </div>}\n <Modal open={Boolean(editingUser)} close={() => setEditingUser(null)}>{editingUser && <><div className=\"modal-head\"><div><h2>Manage {editingUser.name}</h2><p>Update account access, login PIN, and project visibility.</p></div><button className=\"icon-button\" onClick={() => setEditingUser(null)}><Icon name=\"close\"/></button></div><form className=\"modal-content stack visibility-editor\" onSubmit={saveUserVisibility}><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" defaultValue={editingUser.name} required/></Field><Field label=\"Work email\"><input name=\"email\" type=\"email\" defaultValue={editingUser.email || \"\"}/></Field></div><Field label=\"New login PIN\" hint=\"Leave blank to keep the current PIN\"><input name=\"pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\" placeholder=\"4–8 digits\"/></Field><label className=\"scope-toggle\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked={editingUser.all_project_access}/><span><b>All projects</b><small>Automatically include current and future projects.</small></span></label><fieldset><legend>Selected projects</legend><p className=\"field-note\">Used when “All projects” is unchecked.</p><div className=\"project-visibility-list\">{projectOptions.map((project: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={project.id} defaultChecked={editingUser.project_ids.includes(project.id)}/><span><b>{project.title}</b><small>{statusMeta[project.status]?.label}{project.archived ? \" · Archived\" : \"\"}</small></span></label>)}</div></fieldset><div className=\"form-actions\"><Button>Save account</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingUser(null)}>Cancel</Button></div></form></>}</Modal>\n\n {tab === \"partners\" && <>\n <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add partner</h2>\n <p>Each partner has one account. New partners inherit the default AFLABS client branding until customized.</p>\n <form className=\"stack\" onSubmit={addPartner}>\n <div className=\"form-row\"><Field label=\"Partner name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n <label className={partnerPermissionLevel === \"basic\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"basic\" checked={partnerPermissionLevel === \"basic\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Basic</b><small>Capture leads, view owned work, chat, meetings, and AI tools.</small></span></label>\n <label className={partnerPermissionLevel === \"advanced\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"advanced\" checked={partnerPermissionLevel === \"advanced\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Advanced</b><small>Manage and convert owned leads, and edit owned projects.</small></span></label>\n <label className={partnerPermissionLevel === \"custom\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"custom\" checked={partnerPermissionLevel === \"custom\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Custom</b><small>Choose each action individually.</small></span></label>\n </div></fieldset>\n {partnerPermissionLevel === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions apply only to leads and projects owned by this partner.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"partner_perm_\" + item.key}/><span>{item.label}</span></label>)}</div></fieldset>}\n <Button icon=\"plus\">Add partner</Button>\n </form>\n </section>\n <section className=\"directory-list\">{partners.map((p) => <article className=\"directory-row\" key={p.id}>\n <span className=\"avatar partner-avatar\" style={{ background: p.accent_color || undefined }}>{initials(p.brand_name || p.name)}</span>\n <div><h3>{p.name}<em>{p.active ? \"active\" : \"revoked\"}</em></h3><p>{p.phone}</p><small>{titleCase(p.permission_level || \"basic\")} permissions · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Manage</Button><Button variant=\"secondary\" onClick={() => toggle(\"partners\", p)}>{p.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"partners\", p)}>Remove</button></div>\n </article>)}</section>\n </div>\n <Modal open={Boolean(editingPartner)} close={() => setEditingPartner(null)} wide>{editingPartner && <><div className=\"modal-head\"><div><h2>Manage {editingPartner.name}</h2><p>Control access level and partner-facing branding.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">\n <form className=\"growth-stack partner-permission-editor\" onSubmit={savePartnerPermissions}>\n <header><div><h3>Access permissions</h3><p>Choose a predictable package or specify each allowed action.</p></div><span>{titleCase(editingPartner.permission_level || \"basic\")} access</span></header>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n {[\n { value: \"basic\", title: \"Basic\", text: \"Capture leads, view owned work, chat, meetings, and AI tools.\" },\n { value: \"advanced\", title: \"Advanced\", text: \"Manage and convert owned leads, and edit owned projects.\" },\n { value: \"custom\", title: \"Custom\", text: \"Choose each action individually.\" },\n ].map((option) => <label key={option.value} className={(editingPartner.permission_level || \"basic\") === option.value ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value={option.value} checked={(editingPartner.permission_level || \"basic\") === option.value} onChange={(e) => setEditingPartner({ ...editingPartner, permission_level: e.target.value })}/><span><b>{option.title}</b><small>{option.text}</small></span></label>)}\n </div></fieldset>\n {editingPartner.permission_level === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions remain limited to this partner's own leads and projects.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"edit_partner_perm_\" + item.key} defaultChecked={editingPartner.permissions?.[item.key] === true}/><span>{item.label}</span></label>)}</div></fieldset>}\n <footer><Button>Save permissions</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingPartner(null)}>Cancel</Button></footer>\n </form>\n <BrandingEditor\n value={{ name: editingPartner.brand_name || \"\", logo_url: editingPartner.logo_url || \"\", accent_color: editingPartner.accent_color || \"\", contact_info: editingPartner.contact_info || \"\", website_url: editingPartner.website_url || \"\", document_header: editingPartner.document_header || \"\", document_footer: editingPartner.document_footer || \"\" }}\n fallback={branding || {}} partner title=\"Partner branding\"\n description=\"Blank fields inherit the direct AFLABS brand.\"\n onSave={savePartnerBranding}\n /></div></>}</Modal>\n </>}\n\n {tab === \"branding\" && branding && <BrandingEditor value={branding} fallback={branding} title=\"Direct client portal\" description=\"These defaults apply to direct projects and fill any blank fields in partner branding.\" onSave={saveBranding}/>}\n {tab === \"email\" && <div className=\"directory-layout cc-directory\">\n <section className=\"directory-form\"><h2>Add a default CC recipient</h2><p>Map an internal user to always use their current work email, or add a standalone company address.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Recipient source\"><select name=\"user_id\" value={ccUserId} onChange={(e) => setCcUserId(e.target.value)}><option value=\"\">Standalone email address</option>{ccUsers.filter((x: any) => x.active && x.email).map((x: any) => <option key={x.id} value={x.id}>{x.name} · {x.email}</option>)}</select></Field>{ccUserId ? <p className=\"recipient-source\"><Icon name=\"mail\" size={16}/><span><b>Uses the internal user’s current email</b><small>Update the user’s work email under Internal team whenever it changes.</small></span></p> : <Field label=\"Recipient email\"><input name=\"email\" type=\"email\" required placeholder=\"finance@company.com\"/></Field>}<p className=\"field-note\">Internal users without a work email can be updated under Internal team before mapping them.</p><label className=\"check\"><input name=\"default_selected\" type=\"checkbox\"/> Select automatically on new projects</label><Button icon=\"plus\">Add recipient</Button></form></section>\n <section className=\"directory-list\">{ccRecipients.map((recipient: any) => { const mapped = ccUsers.find((x: any) => x.id === recipient.user_id); return <article className=\"directory-row\" key={recipient.id}><span className=\"avatar\"><Icon name=\"mail\" size={17}/></span><div><h3>{recipient.label}<em>{recipient.default_selected ? \"new project default\" : \"optional\"}</em></h3><p>{mapped?.email || recipient.email || \"Update this internal user’s work email\"}</p><small>{mapped ? `Uses ${mapped.name}’s current work email` : \"Standalone email recipient\"}</small></div><div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => saveCcRecipients(ccRecipients.map((x: any) => x.id === recipient.id ? { ...x, default_selected: !x.default_selected } : x))}>{recipient.default_selected ? \"Make optional\" : \"Use by default\"}</Button><button className=\"text-danger\" onClick={() => saveCcRecipients(ccRecipients.filter((x: any) => x.id !== recipient.id), \"CC recipient removed\")}>Remove</button></div></article>; })}{!ccRecipients.length && <Empty title=\"No company CC recipients\" text=\"Add finance, operations, or account contacts that should be available across projects.\"/>}</section>\n </div>}\n </div>;\n}\n\nfunction PartnerBranding({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const load = () => request(\"/api/partner/branding\").then(setData);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/></div>;\n return <div className=\"directory\">\n <header className=\"page-heading\"><div><p>Partner workspace</p><h1>Client branding</h1><span>Customize how your linked project portals appear to your clients.</span></div></header>\n <BrandingEditor value={data.overrides} fallback={data.branding} partner title=\"Your client portal brand\" description=\"Your logo, name, accent, contact details, and website appear on projects attributed to you.\" onSave={async (branding: any) => {\n const result = await patch(\"/api/partner/branding\", branding);\n setData((current: any) => ({ ...current, branding: result.branding, overrides: branding }));\n notify(\"Partner branding updated\");\n }}/>\n </div>;\n}\n\nfunction Dashboard({ actor, notify, onQuestions }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { request(\"/api/dashboard\").then(setData).catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4} chart/>;\n const totalProjects = Object.values(data.status_counts).reduce((sum: number, count: any) => sum + Number(count), 0);\n const maxStatus = Math.max(1, ...Object.values(data.status_counts).map(Number));\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Delivery intelligence</p><h1>Dashboard</h1><span>A lightweight view of momentum, cash received, and the work ahead.</span></div></header>\n <div className=\"dashboard-overview\">\n <section className=\"momentum-panel\">\n <div className=\"momentum-gauge\" style={{ \"--gauge-value\": data.north_star } as any}><div><b>{data.north_star}%</b><span>momentum</span></div></div>\n <div className=\"momentum-copy\"><h2>Delivery pulse</h2><p>Projects with meaningful activity in the last 14 days.</p><dl><div><dt>Active projects</dt><dd>{data.active_count}</dd></div><div><dt>Average completion</dt><dd>{data.average_completion}%</dd></div></dl></div>\n </section>\n <section className=\"portfolio-chart\">\n <div className=\"section-heading\"><h2>Portfolio distribution</h2><p>{totalProjects} current projects across delivery stages.</p></div>\n <div className=\"status-stack\" aria-label=\"Projects by status\">{Object.entries(statusMeta).map(([key]) => <i className={`chart-${key}`} style={{ width: `${totalProjects ? (Number(data.status_counts[key] || 0) / totalProjects) * 100 : 0}%` }}/>)}</div>\n <div className=\"status-chart-rows\">{Object.entries(statusMeta).map(([key, meta]) => <div><span><i className={`status-dot status-${key}`}/>{meta.label}</span><div><i className={`chart-${key}`} style={{ width: `${Number(data.status_counts[key] || 0) / maxStatus * 100}%` }}/></div><b>{data.status_counts[key] || 0}</b></div>)}</div>\n </section>\n </div>\n {data.unanswered_count > 0 && <section className=\"dashboard-questions\">\n <div className=\"question-signal\"><Icon name=\"question\" size={22}/><b>{data.unanswered_count}</b></div>\n <div className=\"question-summary\"><h2>Clients are waiting for an answer</h2><p>Unanswered questions should be handled before routine project updates.</p><div>{data.unanswered_questions.slice(0, 3).map((question: any) => <span><b>{question.project_title}</b><small>{question.author_name} · {prettyDate(question.event_date)}</small></span>)}</div></div>\n <Button onClick={onQuestions}>Open question inbox</Button>\n </section>}\n <div className=\"financial-overview\">\n <section><div className=\"section-heading\"><h2>Earnings received</h2><p>Recorded payments, kept separate by currency.</p></div><div className=\"money-metrics\">{data.earnings.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.earnings.length && <p className=\"muted\">No receipts recorded.</p>}</section>\n <section><div className=\"section-heading\"><h2>Estimated next month</h2><p>Pending value for projects due next month.</p></div><div className=\"money-metrics\">{data.next_month.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.next_month.length && <p className=\"muted\">No active projects currently due next month.</p>}</section>\n </div>\n <GrowthDashboard actor={actor} notify={notify}/>\n </div>;\n}\n\nfunction QuestionInbox({ notify, onOpen, onResolved }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busyId, setBusyId] = useState(\"\");\n const load = () => request(\"/api/questions\").then((result) => setItems(result.questions));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const answer = async (e: any, question: any) => {\n e.preventDefault(); setBusyId(question.id);\n const form = e.currentTarget, formData = new FormData(form);\n try {\n const sendEmail = formData.has(\"send_email\");\n const result = await post(`/api/comments/${question.id}/resolve`, {\n reply: formData.get(\"reply\"),\n send_email: sendEmail,\n });\n await load(); await onResolved();\n if (sendEmail && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Client question answered\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusyId(\"\"); }\n };\n if (!items) return <PageSkeleton rows={5}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client communication</p><h1>Question inbox</h1><span>Answer outstanding client questions across every project without hunting through timelines.</span></div><strong className={items.length ? \"inbox-count has-items\" : \"inbox-count\"}>{items.length} open</strong></header>\n <div className=\"question-inbox\">{items.map((question) => <article className=\"inbox-question\" key={question.id}>\n <header><span className={`status-dot status-${question.project_status}`}/><div><button type=\"button\" onClick={() => onOpen(question.project_id)}>{question.project_title}</button><p>{question.author_name}{question.stakeholder_role ? ` · ${question.stakeholder_role}` : \"\"}</p></div><time>{prettyDate(question.event_date)}</time></header>\n <blockquote>{question.body}</blockquote>\n <form onSubmit={(e) => answer(e, question)}><Field label=\"Your answer\"><textarea name=\"reply\" rows={3} required placeholder=\"Answer clearly and share the next step.\"/></Field><div className=\"inbox-answer-actions\"><label className=\"check notify-check\"><input type=\"checkbox\" name=\"send_email\"/>Email this answer to the project POC</label><Button disabled={busyId === question.id} icon=\"message\">{busyId === question.id ? \"Sending…\" : \"Reply & resolve\"}</Button></div></form>\n </article>)}</div>\n {!items.length && <Empty title=\"All client questions are answered\" text=\"New questions will appear here and on the related project card.\"/>}\n </div>;\n}\n\nfunction ProposalWorkspace({ partners, owners, notify, onProjectCreated }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busy, setBusy] = useState(false), [openId, setOpenId] = useState(\"\"), [convertOwnerId, setConvertOwnerId] = useState(\"\"), [proposalPrompt, setProposalPrompt] = useState<any>(null), [promptBusy, setPromptBusy] = useState(false);\n const load = async () => { const [proposalData, promptData] = await Promise.all([request(\"/api/admin/proposals\"), request(\"/api/admin/ai-prompts\")]); setItems(proposalData.proposals); setProposalPrompt(promptData); };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => {\n e.preventDefault(); const form = e.currentTarget; setBusy(true);\n try { const data: any = Object.fromEntries(new FormData(form)); data.use_ai = true; await post(\"/api/admin/proposals\", data); form.reset(); await load(); notify(\"AI quotation created\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const saveProposalPrompt = async (e: any) => { e.preventDefault(); setPromptBusy(true); try { await patch(\"/api/admin/ai-prompts\", Object.fromEntries(new FormData(e.currentTarget))); await load(); notify(\"Proposal generator prompt updated\"); } catch (x: any) { notify(x.message, \"error\"); } finally { setPromptBusy(false); } };\r\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page proposal-workspace\">\n <header className=\"page-heading\"><div><h1>Proposals</h1><span>Turn discovery notes into a structured quotation, branded PDF, and ready-to-run project.</span></div></header>\n <div className=\"proposal-layout\">\n <aside className=\"proposal-builder\">\n <header><h2>Build a proposal</h2><p>Use known facts only. Missing commercial or delivery details remain explicit.</p></header>\n <form className=\"stack\" onSubmit={create}>\n <Field label=\"Proposal title\" hint=\"Optional — the generator can suggest one.\"><input name=\"title\" placeholder=\"Retail workflow automation\"/></Field>\n <div className=\"form-row\"><Field label=\"Brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{partners.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field></div>\n <Field label=\"Discovery notes\" hint=\"Include the problem, users, workflow, constraints, scope, timing, pricing, and terms you know.\"><textarea name=\"notes\" rows={16} required placeholder={\"Customer and problem\\n\\nCurrent workflow\\n\\nProposed scope\\n\\nCommercial details\"}/></Field>\n <Button disabled={busy}>{busy ? \"Building proposal…\" : \"Generate proposal\"}</Button>\n </form>\n </aside>\n <section className=\"proposal-library\">\n <header><div><h2>Saved proposals</h2><p>{items.length} proposal{items.length === 1 ? \"\" : \"s\"}</p></div></header>\n <div className=\"proposal-list\">{items.map((x) => <article className={\"proposal-row \" + (openId === x.id ? \"open\" : \"\")} key={x.id}>\n <button className=\"proposal-main\" onClick={() => { setOpenId(openId === x.id ? \"\" : x.id); setConvertOwnerId(\"\"); }} aria-expanded={openId === x.id}>\n <div><span>{titleCase(x.status)}</span><h3>{x.title}</h3><p>{x.partner_name || \"Direct AFLABS\"} · {money(x.total, x.currency)}</p></div><Icon name=\"chevron\"/>\n </button>\n {openId === x.id && <div className=\"proposal-detail\"><div className=\"proposal-document\"><MarkdownBlock value={x.markdown_content}/></div><footer><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open PDF</span></a>{!x.project_id ? <div className=\"proposal-convert\"><label><span>Project owner</span><select value={convertOwnerId} onChange={(event) => setConvertOwnerId(event.target.value)} required><option value=\"\">Select owner</option>{owners.map((owner: any) => <option key={owner.id} value={owner.id}>{owner.name}</option>)}</select></label><Button disabled={!convertOwnerId} onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: convertOwnerId }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button></div> : <span className=\"proposal-converted\">Project created</span>}</footer></div>}\n </article>)}</div>\n {!items.length && <Empty title=\"No proposals yet\" text=\"Create a proposal from the discovery form. It will remain editable and available as a branded PDF.\"/>}\n </section>\n </div>\n {proposalPrompt && <details className=\"growth-panel prompt-settings proposal-prompt-settings\"><summary><span><b>Proposal generator prompt settings</b><small>Admin only · controls proposal generation</small></span><em>Configure</em></summary><form className=\"stack\" onSubmit={saveProposalPrompt} aria-busy={promptBusy}><Field label=\"Proposal generator system prompt\"><textarea name=\"proposal_prompt\" rows={12} defaultValue={proposalPrompt.proposal_prompt}/></Field><div className=\"form-actions\"><Button disabled={promptBusy}>{promptBusy ? \"Saving prompt…\" : \"Save proposal prompt\"}</Button></div></form></details>}\r\n </div>;\n}\n\nfunction RecurringWorkspace({ actor, partners, owners, notify }: any) {\n const [items, setItems] = useState<any[] | null>(null), [adding, setAdding] = useState(false);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/recurring\").then((x) => setItems(x.recurring));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/recurring\", Object.fromEntries(new FormData(form))); form.reset(); setAdding(false); await load(); notify(\"Recurring project added\"); } catch (x: any) { notify(x.message, \"error\"); } };\n const update = async (e: any, id: string) => {\n e.preventDefault();\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.active = new FormData(form).has(\"active\");\n try { await patch(`/api/recurring/${id}`, data); setEditingId(\"\"); await load(); notify(\"Recurring project updated\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteRecurring = async (item: any) => {\n if (!confirm(`Delete “${item.title}” and its time logs? This cannot be undone.`)) return;\n try { await remove(`/api/recurring/${item.id}`); await load(); notify(\"Recurring project deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Ongoing support</p><h1>Recurring projects</h1><span>Run monthly commitments and hourly retainers without turning them into one-off delivery cards.</span></div><Button icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"New recurring project\"}</Button></header>\n {adding && <section className=\"inline-builder\"><form className=\"form-grid\" onSubmit={create}><Field label=\"Name\"><input name=\"title\" required/></Field><Field label=\"Billing model\"><select name=\"billing_type\"><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field><Field label=\"Description\"><textarea name=\"description\" rows={3}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" placeholder=\"Comma-separated\"/></Field>{actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={actor.actorId}>{owners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field></>}<Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\"/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\"/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\"/></Field><div className=\"form-actions full\"><Button>Add recurring project</Button></div></form></section>}\n <div className=\"recurring-grid\">{items.map((x) => {\n const value = x.billing_type === \"hourly\" ? Number(x.period_hours) * Number(x.hourly_rate) : Number(x.monthly_amount);\n return <article className={`recurring-card ${x.active ? \"\" : \"inactive\"}`} key={x.id}>\n <header><div><span>{x.billing_type === \"hourly\" ? \"Hourly / month\" : \"Monthly commitment\"}{!x.active ? \" · Paused\" : \"\"}</span><h2>{x.title}</h2><p>{x.description || \"Ongoing project support\"}</p></div><b>{money(value, x.currency)}</b></header>\n <div className=\"recurring-dates\"><span><small>Starts</small><b>{prettyDate(x.start_date)}</b></span><span><small>Ends</small><b>{prettyDate(x.end_date)}</b></span></div>\n <dl><div><dt>Owner</dt><dd>{x.owner_name || \"AFLABS team\"}</dd></div>{x.partner_name && <div><dt>Partner</dt><dd>{x.partner_name}</dd></div>}<div><dt>This month</dt><dd>{x.period_hours} hours{x.billing_type === \"hourly\" && x.included_hours ? ` / ${x.included_hours} included` : \"\"}</dd></div></dl>\n <div className=\"recurring-actions\"><Button variant=\"secondary\" onClick={() => setEditingId(editingId === x.id ? \"\" : x.id)}>{editingId === x.id ? \"Close editor\" : \"Edit\"}</Button><button type=\"button\" className=\"text-danger\" onClick={() => deleteRecurring(x)}>Delete</button></div>\n {editingId === x.id && <form className=\"recurring-edit form-grid\" onSubmit={(e) => update(e, x.id)}>\n <Field label=\"Name\"><input name=\"title\" defaultValue={x.title} required/></Field><Field label=\"Billing model\"><select name=\"billing_type\" defaultValue={x.billing_type}><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field>\n <Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={x.contact_email || \"\"}/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(x.cc_emails || []).join(\", \")}/></Field>\n {actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={x.owner_user_id || \"\"}>{owners.map((owner: any) => <option value={owner.id}>{owner.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\" defaultValue={x.partner_id || \"\"}><option value=\"\">Direct</option>{partners.map((partner: any) => <option value={partner.id}>{partner.name}</option>)}</select></Field></>}\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={x.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.monthly_amount}/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.hourly_rate}/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\" defaultValue={x.included_hours}/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={x.start_date || \"\"}/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\" defaultValue={x.end_date || \"\"}/></Field>\n <label className=\"check full\"><input name=\"active\" type=\"checkbox\" defaultChecked={x.active}/> Active recurring project</label><div className=\"form-actions full\"><Button>Save changes</Button></div>\n </form>}\n <details className=\"recurring-details\"><summary>View details and time log</summary><div className=\"recurring-detail-copy\"><p>{x.contact_email || \"No project email\"}{x.cc_emails?.length ? ` · CC: ${x.cc_emails.join(\", \")}` : \"\"}</p><p>{x.billing_type === \"hourly\" ? `${money(x.hourly_rate, x.currency)} per hour · ${x.included_hours || 0} included hours` : `${money(x.monthly_amount, x.currency)} each month`}</p></div>\n <form className=\"hour-log\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(`/api/recurring/${x.id}/logs`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Hours logged\"); } catch (error: any) { notify(error.message, \"error\"); } }}><input name=\"work_date\" type=\"date\" defaultValue={todayValue()} required/><input name=\"hours\" type=\"number\" min=\".25\" step=\".25\" placeholder=\"Hours\" required/><input name=\"note\" placeholder=\"Work completed\"/><Button variant=\"secondary\">Log time</Button></form>\n {x.logs?.length > 0 && <div className=\"log-history\"><h3>Recent logs</h3>{x.logs.slice(0, 10).map((l: any) => <div key={l.id}><b>{l.hours}h</b><span>{prettyDate(l.work_date || `${l.period}-01`)} · {l.note || \"Support work\"}</span></div>)}</div>}\n </details>\n </article>;\n })}</div>{!items.length && <Empty title=\"No recurring projects\" text=\"Create a monthly commitment or hourly support project.\"/>}\n </div>;\n}\n\nfunction HolidayWorkspace({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const [weeklyDays, setWeeklyDays] = useState<number[]>([5, 6]);\n const dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n const load = async () => {\n const result = await request(\"/api/holidays\");\n setData(result);\n setWeeklyDays(result.weekly_days || [5, 6]);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client availability</p><h1>Holidays</h1><span>Set weekly non-working days and one-off holidays shown gently in every client portal.</span></div></header>\n <div className=\"holiday-layout\">\n <section className=\"builder-form\"><h2>Weekly holidays</h2><p>Friday and Saturday are selected by default. Clients can still send questions on these days.</p><div className=\"weekday-picker\">{dayNames.map((name, day) => <label className={weeklyDays.includes(day) ? \"selected\" : \"\"} key={name}><input type=\"checkbox\" checked={weeklyDays.includes(day)} onChange={() => setWeeklyDays((current) => current.includes(day) ? current.filter((x) => x !== day) : [...current, day])}/><span>{name.slice(0, 3)}</span></label>)}</div><Button onClick={async () => { try { await patch(\"/api/admin/holidays/settings\", { weekly_days: weeklyDays }); await load(); notify(\"Weekly holidays saved\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Save weekly schedule</Button></section>\n <section className=\"builder-form\"><h2>Add a one-off holiday</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/admin/holidays\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Holiday added\"); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Holiday name\"><input name=\"name\" required placeholder=\"Eid al-Fitr\"/></Field><Field label=\"Date\"><input name=\"holiday_date\" type=\"date\" required/></Field><Button icon=\"plus\">Add holiday</Button></form></section>\n </div>\n <section className=\"holiday-list\"><header><div><h2>Configured dates</h2><p>{data.today?.is_holiday ? `Today is marked as ${data.today.name}.` : \"Today is a working day.\"}</p></div></header>{data.holidays.map((holiday: any) => <article key={holiday.id}><div className=\"holiday-date\"><b>{new Date(`${holiday.holiday_date}T12:00:00`).getDate()}</b><span>{new Intl.DateTimeFormat(\"en\", { month: \"short\" }).format(new Date(`${holiday.holiday_date}T12:00:00`))}</span></div><div><h3>{holiday.name}</h3><p>{prettyDate(holiday.holiday_date)}</p></div><button className=\"text-danger\" onClick={async () => { if (!confirm(`Delete ${holiday.name}?`)) return; try { await remove(`/api/admin/holidays/${holiday.id}`); await load(); notify(\"Holiday deleted\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Delete</button></article>)}{!data.holidays.length && <Empty title=\"No one-off holidays\" text=\"Add public holidays or company-wide non-working dates.\"/>}</section>\n </div>;\n}\n\nfunction QuickNoteWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/quick-notes\").then((result) => setItems(result.quick_notes));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n const variables = (value: string) => [...new Set([...String(value || \"\").matchAll(/\\{\\{([^{}\\n]+)\\}\\}/g)].map((match) => match[1].trim()))];\n const save = async (event: any, id?: string) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload = Object.fromEntries(new FormData(form));\n if (id) await patch(`/api/admin/quick-notes/${id}`, payload);\n else await post(\"/api/admin/quick-notes\", payload);\n form.reset();\n setEditingId(\"\");\n await load();\n notify(id ? \"Quick note updated\" : \"Quick note created\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const deleteNote = async (item: any) => {\n if (!confirm(`Delete the “${item.title}” quick note?`)) return;\n try {\n await remove(`/api/admin/quick-notes/${item.id}`);\n await load();\n notify(\"Quick note deleted\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Reusable timeline copy</p><h1>Quick notes</h1><span>Create polished updates once, then insert them from any timeline composer by typing /.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>New quick note</h2><p>Use Liquid-style placeholders such as {\"{{CLIENT_NAME}}\"} or {\"{{DELIVERY_DATE}}\"}. After insertion, Tab moves through each placeholder.</p><form className=\"stack\" onSubmit={(event) => save(event)}><Field label=\"Note name\"><input name=\"title\" required placeholder=\"Weekly progress update\"/></Field><Field label=\"Slash shortcut\" hint=\"Letters, numbers, and hyphens\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required placeholder=\"weekly-update\"/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={9} required placeholder={\"Hi {{NAME}},\\n\\nWe completed {{WORK_DONE}}. Next, we will focus on {{NEXT_STEP}} by {{DATE}}.\"}/></Field><Button icon=\"plus\">Create quick note</Button></form></section>\n <section className=\"quick-note-library\">{items.map((item) => {\n const noteVariables = variables(item.body);\n return <article key={item.id}><header><div><span>/{item.shortcut}</span><h3>{item.title}</h3></div><button className=\"text-danger\" type=\"button\" onClick={() => deleteNote(item)}>Delete</button></header><p className=\"quick-note-copy\">{item.body}</p>{noteVariables.length > 0 && <div className=\"quick-note-variables\">{noteVariables.map((name) => <span key={name}>{\"{{\"}{name}{\"}}\"}</span>)}</div>}<button className=\"text-action\" type=\"button\" onClick={() => setEditingId(editingId === item.id ? \"\" : item.id)}>{editingId === item.id ? \"Close editor\" : \"Edit quick note\"}</button>{editingId === item.id && <form className=\"quick-note-edit stack\" onSubmit={(event) => save(event, item.id)}><Field label=\"Note name\"><input name=\"title\" required defaultValue={item.title}/></Field><Field label=\"Slash shortcut\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required defaultValue={item.shortcut}/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={7} required defaultValue={item.body}/></Field><Button variant=\"secondary\">Save changes</Button></form>}</article>;\n })}{!items.length && <Empty title=\"No quick notes yet\" text=\"Create a reusable update with placeholders, then type / in a project timeline.\"/>}</section>\n </div>\n </div>;\n}\n\nfunction TemplateWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const load = () => request(\"/api/milestone-templates\").then((x) => setItems(x.templates));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const deleteTemplate = async (item: any) => {\n if (!confirm(`Delete the “${item.name}” milestone template? Existing project milestones will not be affected.`)) return;\n try { await remove(`/api/admin/milestone-templates/${item.id}`); await load(); notify(\"Milestone template deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\"><header className=\"page-heading\"><div><p>Reusable delivery</p><h1>Milestone templates</h1><span>Create repeatable checkpoint sets and apply them inside any project.</span></div></header><div className=\"builder-layout\"><section className=\"builder-form\"><h2>New template</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; await post(\"/api/admin/milestone-templates\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Milestone template created\"); }}><Field label=\"Template name\"><input name=\"name\" required placeholder=\"Website delivery\"/></Field><Field label=\"Description\"><input name=\"description\" placeholder=\"Optional context\"/></Field><Field label=\"Milestones\" hint=\"One milestone per line\"><textarea name=\"items\" rows={9} required placeholder={\"Discovery\\nDesign approval\\nDevelopment\\nQuality assurance\\nLaunch\"}/></Field><Button>Create template</Button></form></section><section className=\"template-list\">{items.map((x) => <article key={x.id}><header><span>{x.items.length} milestones</span><button className=\"text-danger\" type=\"button\" onClick={() => deleteTemplate(x)}>Delete</button></header><h3>{x.name}</h3><p>{x.description || \"Reusable milestone set\"}</p><ol>{x.items.map((m: any, index: number) => <li key={`${x.id}-${index}`}>{m.title}</li>)}</ol></article>)}{!items.length && <Empty title=\"No templates yet\" text=\"Add your first repeatable milestone sequence.\"/>}</section></div></div>;\n}\n\nfunction Workspace({ actor, config, refreshActor, notify, theme, toggleTheme }: any) {\n const [projects, setProjects] = useState<Project[]>([]), [partners, setPartners] = useState<any[]>([]), [owners, setOwners] = useState<any[]>([]);\n const [leads, setLeads] = useState<any[]>([]), [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\n const [projectFilters, setProjectFilters] = useState({ type: \"\", due: \"\", partner: \"\", status: \"\" });\n const [selected, setSelected] = useState<string | null>(null), [addOpen, setAddOpen] = useState(false);\n const [aiDraft, setAiDraft] = useState<any>(null), [aiNotes, setAiNotes] = useState(\"\"), [aiBusy, setAiBusy] = useState(false);\n const [projectsLoading, setProjectsLoading] = useState(true), [questionCount, setQuestionCount] = useState(0);\n const load = async (showSkeleton = false) => {\n if (showSkeleton) setProjectsLoading(true);\n try {\n const p = await request(`/api/projects?archived=${archived ? 1 : 0}`);\n setProjects(p.projects);\n if (actor.role === \"admin\") {\n request(\"/api/admin/partners\").then((x) => setPartners(x.partners)).catch(() => {});\n request(\"/api/admin/cc-recipients\").then((x) => setCcRecipients(x.recipients)).catch(() => {});\n }\n if (actor.actorType === \"internal\") request(\"/api/user-options\").then((x) => setOwners(x.users)).catch(() => {});\n if (actor.actorType === \"internal\" || actor.permissions.view_leads) request(\"/api/leads\").then((x) => setLeads(x.leads)).catch(() => {});\n if (actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) request(\"/api/questions\").then((x) => setQuestionCount(x.questions.length)).catch(() => {});\n } finally {\n if (showSkeleton) setProjectsLoading(false);\n }\n };\n useEffect(() => { load(true).catch((x) => notify(x.message, \"error\")); }, [archived]);\n const visible = projects.filter((p) => {\n if (!(`${p.title} ${p.description} ${p.partner_name}`).toLowerCase().includes(search.toLowerCase())) return false;\n if (projectFilters.type && p.project_type !== projectFilters.type) return false;\n if (projectFilters.partner && String(p.partner_id || \"\") !== projectFilters.partner) return false;\n if (projectFilters.status && p.status !== projectFilters.status) return false;\n if (projectFilters.due === \"overdue\" && !(p.end_date && p.status !== \"done\" && Date.parse(p.end_date) < Date.now())) return false;\n if (projectFilters.due === \"7days\" && !(p.end_date && Date.parse(p.end_date) >= Date.now() && Date.parse(p.end_date) <= Date.now() + 7 * 86400000)) return false;\n if (projectFilters.due === \"nodate\" && p.end_date) return false;\n return true;\n });\n const activeProjectFilterCount = Object.values(projectFilters).filter(Boolean).length;\n const unansweredCount = questionCount;\n const move = async (id: string, status: string) => {\n const item = projects.find((p) => p.id === id);\n if (!item || item.status === status) return;\n try {\n setProjects((all) => all.map((p) => p.id === id ? { ...p, status } : p));\n await patch(`/api/projects/${id}`, { status }); notify(`Moved to ${statusMeta[status].label}`);\n } catch (x: any) { notify(x.message, \"error\"); load(); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); refreshActor(); };\n const mayCreate = actor.actorType === \"partner\" ? actor.permissions.create_projects === true : canActor(actor, \"create_projects\");\n const canLeads = actor.actorType === \"internal\" || actor.permissions.view_leads;\n const canChat = actor.actorType === \"internal\" || actor.permissions.chat;\n const canMeet = actor.actorType === \"internal\" || actor.permissions.book_meetings;\n const canIdeas = actor.actorType === \"internal\" || actor.permissions.use_ai;\n return <div className=\"app-shell\">\n <aside className=\"sidebar\">\n <a className=\"brand\" href=\"/\"><BrandMark/><span>AFLABS <b>PM</b></span></a>\n <nav>\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}><Icon name=\"work\"/>Leads</button>}\n <button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}><Icon name=\"message\"/>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}><Icon name=\"clock\"/>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}><Icon name=\"note\"/>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}><Icon name=\"milestone\"/>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active attention-nav\" : \"attention-nav\"} onClick={() => setView(\"questions\")}><Icon name=\"question\"/>Questions{unansweredCount > 0 && <b>{unansweredCount}</b>}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}><Icon name=\"note\"/>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}><Icon name=\"milestone\"/>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}><Icon name=\"message\"/>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}\n </nav>\n <div className=\"sidebar-foot\"><ThemeToggle theme={theme} toggle={toggleTheme}/><div className=\"account\"><span>{initials(actor.name)}</span><div><b>{actor.name}</b><small>{actor.role}</small></div><button onClick={logout} aria-label=\"Sign out\"><Icon name=\"logout\" size={17}/></button></div></div>\n </aside>\n <main className=\"workspace\">\n <div className=\"mobile-nav\" aria-label=\"Workspace navigation\">\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}>Leads</button>}\n <button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` (${unansweredCount})` : \"\"}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Client branding</button>}\n <button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button>\n </div>\n {view === \"dashboard\" ? <Dashboard actor={actor} notify={notify} onQuestions={() => setView(\"questions\")}/> : [\"leads\", \"conversations\", \"meetings\", \"mou\", \"ideas\"].includes(view) ? <GrowthSuite section={view} actor={actor} notify={notify} onOpenProject={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"questions\" ? <QuestionInbox notify={notify} onOpen={setSelected} onResolved={load}/> : view === \"recurring\" ? <RecurringWorkspace actor={actor} partners={partners} owners={owners} notify={notify}/> : view === \"proposals\" ? <ProposalWorkspace partners={partners} owners={owners} notify={notify} onProjectCreated={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"templates\" ? <TemplateWorkspace notify={notify}/> : view === \"quick-notes\" ? <QuickNoteWorkspace notify={notify}/> : view === \"holidays\" ? <HolidayWorkspace notify={notify}/> : view === \"directory\" ? <AdminDirectory actor={actor} config={config} projects={projects} notify={notify}/> : view === \"branding\" ? <PartnerBranding notify={notify}/> : <>\n <header className=\"workspace-head\"><div><p>{actor.actorType === \"partner\" ? \"Partner workspace\" : \"Delivery workspace\"}</p><h1>{archived ? \"Archived projects\" : \"Project board\"}</h1><span>{archived ? \"A complete record of work moved out of active delivery.\" : \"Move work forward, keep context close, and make progress visible.\"}</span></div><div className=\"head-actions\"><div className=\"search\"><Icon name=\"search\" size={17}/><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder=\"Search projects\"/></div>{mayCreate && !archived && <Button className=\"new-project-button\" icon=\"plus\" onClick={() => setAddOpen(true)}>New project</Button>}</div></header>\n <section className=\"project-filter-panel\" aria-label=\"Project filters\">\n <header className=\"project-filter-panel-head\">\n <div className=\"project-filter-panel-title\">\n <span>Filter projects</span>\n <strong>{visible.length}<small> of {projects.length} shown</small></strong>\n {activeProjectFilterCount > 0 && <b>{activeProjectFilterCount} active</b>}\n </div>\n {activeProjectFilterCount > 0 && <button className=\"project-filter-clear\" type=\"button\" onClick={() => setProjectFilters({ type: \"\", due: \"\", partner: \"\", status: \"\" })}>Clear all</button>}\n </header>\n <div className=\"project-filter-controls\">\n <label><span>Project type</span><select aria-label=\"Filter by project type\" value={projectFilters.type} onChange={(e) => setProjectFilters((current) => ({ ...current, type: e.target.value }))}><option value=\"\">All types</option>{config.projectTypes.map((type: string) => <option key={type} value={type}>{type}</option>)}</select></label>\n <label><span>Stage</span><select aria-label=\"Filter by project stage\" value={projectFilters.status} onChange={(e) => setProjectFilters((current) => ({ ...current, status: e.target.value }))}><option value=\"\">All stages</option>{config.statuses.map((status: string) => <option key={status} value={status}>{statusMeta[status]?.label || titleCase(status)}</option>)}</select></label>\n <label><span>Due date</span><select aria-label=\"Filter by due date\" value={projectFilters.due} onChange={(e) => setProjectFilters((current) => ({ ...current, due: e.target.value }))}><option value=\"\">Any due date</option><option value=\"overdue\">Overdue</option><option value=\"7days\">Due in 7 days</option><option value=\"nodate\">No due date</option></select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter by partner\" value={projectFilters.partner} onChange={(e) => setProjectFilters((current) => ({ ...current, partner: e.target.value }))}><option value=\"\">All partners</option>{Array.from(new Map(projects.filter((project) => project.partner_id).map((project) => [project.partner_id, project.partner_name])).entries()).map(([id, name]) => <option key={String(id)} value={String(id)}>{String(name)}</option>)}</select></label>}\n </div>\n </section>\n {projectsLoading ? <BoardSkeleton/> : visible.length ? <Kanban projects={visible} actor={actor} onOpen={setSelected} onMove={move}/> : <Empty title={archived ? \"Archive is empty\" : \"No projects found\"} text={search ? \"Try a different search term.\" : mayCreate ? \"Add the first project to begin the delivery board.\" : \"No projects are assigned to this account.\"} action={mayCreate && !search && !archived ? <Button icon=\"plus\" onClick={() => setAddOpen(true)}>Add project</Button> : null}/>}\n </>}\n </main>\n <Modal open={addOpen} close={() => { setAddOpen(false); setAiDraft(null); }} wide><div className=\"modal-head\"><div><h2>Add a project</h2><p>{actor.actorType === \"partner\" ? \"Submit basic project details. AFLABS will manage delivery status.\" : \"Create manually, or let AI extract a draft from rough notes.\"}</p></div><button className=\"icon-button\" onClick={() => setAddOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">{actor.role === \"admin\" && <details className=\"ai-project-builder\"><summary><span><Icon name=\"work\"/>Draft this project with AI</span><Icon name=\"chevron\"/></summary><div><Field label=\"Rough project details\"><textarea value={aiNotes} onChange={(e) => setAiNotes(e.target.value)} rows={6} placeholder=\"Paste scope, dates, POC details, pricing, links, credentials and milestones. Timeline entries are intentionally excluded.\"/></Field><Button type=\"button\" variant=\"secondary\" disabled={aiBusy || aiNotes.trim().length < 10} onClick={async () => { setAiBusy(true); try { const result = await post(\"/api/admin/ai/project-draft\", { notes: aiNotes }); setAiDraft(result.draft); notify(\"AI project draft is ready\"); } catch (x: any) { notify(x.message, \"error\"); } finally { setAiBusy(false); } }}>{aiBusy ? \"Extracting…\" : \"Extract details\"}</Button>{aiDraft && <p className=\"ai-result\">Draft populated · {(aiDraft.resources || []).length} resources · {(aiDraft.credentials || []).length} credentials · {(aiDraft.stakeholders || []).length} stakeholders</p>}</div></details>}<ProjectForm key={JSON.stringify(aiDraft || {})} actor={actor} config={config} partners={partners} leads={leads} owners={owners} ccRecipients={ccRecipients} initial={aiDraft || {}} onSave={async (data: any) => { const result = await post(\"/api/projects\", { ...aiDraft, ...data }); setAddOpen(false); setAiDraft(null); setAiNotes(\"\"); await load(); setSelected(result.id); notify(\"Project added\"); }}/></div></Modal>\n <Modal open={Boolean(selected)} close={() => setSelected(null)} wide>{selected && <DetailPanel projectId={selected} actor={actor} owners={owners} partners={partners} close={() => setSelected(null)} refreshList={load} notify={notify}/>}</Modal>\n </div>;\n}\n\nfunction ClientPortal({ actor, notify, theme, setTheme, toggleTheme }: any) {\n const [detail, setDetail] = useState<any>(null), [linksOpen, setLinksOpen] = useState(false), [busy, setBusy] = useState(false);\n const load = () => request(`/api/projects/${actor.projectId}`).then(setDetail);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n useEffect(() => {\n const projectTheme = detail?.project?.branding?.theme;\n if (projectTheme === \"light\" || projectTheme === \"dark\") setTheme(projectTheme);\n }, [detail?.project?.branding?.theme]);\n if (!detail) return <div className=\"client-loading\"><div className=\"brand\"><BrandMark/><span>AFLABS <b>PM</b></span></div><div className=\"skeleton client-skeleton\"/></div>;\n const p = detail.project, brand = p.branding;\n const nextMilestone = [...detail.milestones]\n .filter((x: any) => x.status === \"upcoming\" && x.due_date)\n .sort((a: any, b: any) => a.due_date.localeCompare(b.due_date))[0];\n const timeline = [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, date: x.event_date, timelineType: x.comment_type })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, date: x.completed_date || x.due_date, timelineType: \"milestone\", body: x.description })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date));\n const submitQuestion = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const data: any = Object.fromEntries(new FormData(form));\n await post(`/api/projects/${p.id}/comments`, data);\n form.reset(); await load();\n notify(\"Your question was added\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); location.reload(); };\n return <main className={`client-portal ${p.status === \"blocked\" ? \"client-blocked\" : \"\"}`} style={{ \"--partner-accent\": brand?.accent_color || \"var(--blue)\" } as any}>\n <header className=\"client-nav\"><div className=\"client-brand\">{brand?.logo_url ? <img src={brand.logo_url} alt={`${brand?.name || \"AFLABS\"} logo`}/> : <span className=\"client-logo\">{initials(brand?.name || \"AFLABS\")}</span>}<div><b>{brand?.name || \"AFLABS\"}</b><small>{brand?.portal_label || \"Project delivery\"}</small></div></div><div className=\"client-nav-actions\"><ThemeToggle theme={theme} toggle={toggleTheme}/><button onClick={logout}>Close project <Icon name=\"logout\" size={15}/></button></div></header>\n <section className=\"client-hero\">{detail.holiday?.is_holiday && <div className=\"client-holiday-banner\"><Icon name=\"sun\" size={18}/><div><b>{detail.holiday.name}</b><span>Today is a non-working day. You can still review the project and send questions.</span></div></div>}<div className=\"client-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <em>Forecast +{p.delivery_delay_days} days</em>}</div>{p.status === \"blocked\" && <div className=\"client-blocked-notice\"><Icon name=\"blocker\" size={18}/><div><b>Delivery is currently blocked</b><span>The team is working through an external dependency. The expected delivery date is moving by {p.delivery_delay_days || 1} {p.delivery_delay_days === 1 ? \"day\" : \"days\"}.</span></div></div>}<h1>{p.title}</h1><p>{p.description}</p><div className=\"client-dates\"><span><small>Started</small><b>{prettyDate(p.start_date)}</b>{p.start_date && <em>{projectDateFootnote(p.start_date, \"start\")}</em>}</span><Icon name=\"chevron\"/><span><small>{p.delivery_delay_days > 0 ? \"Forecast\" : \"Target\"}</small><b>{prettyDate(p.forecast_end_date || p.end_date)}</b>{p.delivery_delay_days > 0 && <em>Original {prettyDate(p.end_date)}</em>}{(p.forecast_end_date || p.end_date) && <em>{projectDateFootnote(p.forecast_end_date || p.end_date, \"end\")}</em>}<strong className={`client-deadline ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</strong></span></div></section>\n <section className=\"client-progress-block\"><div className=\"client-progress-copy\"><span>Overall completion</span><b>{p.progress}%</b></div><div className=\"client-progress\"><i style={{ width: `${p.progress}%` }}/><span style={{ left: `${Math.max(2, Math.min(96, p.progress))}%` }}/></div><div className=\"client-stages\"><span className=\"passed\">Project started</span><span className={p.progress >= 50 ? \"passed\" : \"\"}>Core delivery</span><span className={p.progress === 100 ? \"passed\" : \"\"}>Complete</span></div>{nextMilestone && <div className=\"client-next-milestone\"><span><Icon name=\"milestone\" size={16}/></span><div><small>Next milestone</small><b>{nextMilestone.title}</b>{nextMilestone.description && <p>{nextMilestone.description}</p>}</div><time><b>{prettyDate(nextMilestone.due_date)}</b><small>{deadlineLabel(nextMilestone.due_date)}</small></time></div>}</section>\n <div className=\"client-grid\">\n <section className=\"client-main\"><div className=\"client-section-head\"><div><h2>Project journey</h2><p>{brand?.welcome_message || \"Every meaningful update, in one clear timeline.\"}</p></div></div>\n <div className=\"client-timeline\">{timeline.map((x: any) => {\n const replies = detail.comments.filter((reply: any) => reply.parent_id === x.id);\n const daysToGo = futureDaysLabel(x.date);\n if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{timelineDate(x.date)}</time></header><div className=\"milestone-callout\"><small>{titleCase(x.status)}</small><h3>{x.title}</h3>{x.body && <p>{x.body}</p>}</div></div></article>;\n if (x.timelineType === \"question\") return <article className=\"client-question-event\" key={`question-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{timelineDate(x.date)}</time></header><div className=\"chat-bubble chat-client\"><small>{x.author_name}</small><p>{x.body}</p></div>{replies.map((reply: any) => <div className=\"chat-bubble chat-team\"><small>{reply.author_name} · Project team</small><p>{reply.body}</p></div>)}<span className={x.resolved_at ? \"chat-status resolved\" : \"chat-status\"}>{x.resolved_at ? \"Answered\" : \"Awaiting a response\"}</span></div></article>;\n return <article key={`${x.timelineType}-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className={`client-node node-${x.timelineType}`}><Icon name={eventIcons[x.timelineType] || \"note\"} size={16}/></div><div><header><span>{typeLabels[x.timelineType] || titleCase(x.timelineType)}</span><time>{timelineDate(x.date)}</time></header><h3>{x.author_name}</h3>{x.body && <p>{x.body}</p>}</div></article>;\n })}</div>\n {!timeline.length && <Empty title=\"The journey starts here\" text=\"Project updates will appear as the team moves delivery forward.\"/>}\n </section>\n <aside className=\"client-aside\">\n <section className=\"client-panel\"><h2>Milestones</h2><div className=\"client-milestones\">{detail.milestones.map((x: any) => <div className={x.status}><span>{x.status === \"complete\" ? \"✓\" : \"\"}</span><div><b>{x.title}</b><small>{x.status === \"complete\" ? `Completed ${prettyDate(x.completed_date)}` : `Target ${prettyDate(x.due_date)}`}</small></div></div>)}</div>{!detail.milestones.length && <p className=\"muted\">Milestones will appear as they are scheduled.</p>}</section>\n <section className=\"client-panel payment-panel\"><div><span>Payment fulfilled</span><b>{detail.paymentSummary.total ? Math.round(detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%</b></div><div className=\"mini-progress\"><i style={{ width: `${detail.paymentSummary.total ? Math.min(100, detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%` }}/></div><dl><div><dt>Received</dt><dd>{money(detail.paymentSummary.paid, p.currency)}</dd></div><div><dt>Pending</dt><dd>{money(detail.paymentSummary.pending, p.currency)}</dd></div></dl></section>\n {detail.links.length > 0 && <section className=\"client-panel links-panel\"><button onClick={() => setLinksOpen(!linksOpen)}><div><Icon name=\"link\"/><span><b>Project links</b><small>{detail.links.length} shared resources</small></span></div><Icon name=\"chevron\"/></button>{linksOpen && <div className=\"client-links\">{detail.links.map((x: any) => <a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a>)}</div>}</section>}\n <section className=\"client-panel question-panel\"><h2>Ask the project team</h2><p>Select who you are so the team can answer in context.</p>{detail.holiday?.is_holiday && <div className=\"holiday-question-note\"><Icon name=\"clock\" size={16}/><span>You can send this now. The team may reply on the next working day.</span></div>}<form onSubmit={submitQuestion} className=\"stack\"><Field label=\"I am\"><select name=\"stakeholder_id\" required><option value=\"\">Select stakeholder</option>{detail.stakeholders.map((x: any) => <option value={x.id}>{x.name} · {x.role}</option>)}</select></Field><Field label=\"Question or comment\"><textarea name=\"body\" required rows={3} placeholder=\"What would you like to clarify?\"/></Field><Button disabled={busy} icon=\"message\">{busy ? \"Sending…\" : \"Send to team\"}</Button></form></section>\n {brand?.contact_info && <p className=\"partner-contact\">Managed by {brand.name} · {brand.contact_info}</p>}\n </aside>\n </div>\n <footer className=\"client-footer\"><span>{brand?.name || \"AFLABS\"} PM</span>{brand?.website_url ? <a href={brand.website_url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={13}/> Visit website</a> : <span>Project delivery, made visible.</span>}</footer>\n </main>;\n}\n\nexport function App() {\n const clientToken = location.pathname.match(/^\\/client\\/([^/]+)/)?.[1];\n const [config, setConfig] = useState<any>(null), [actor, setActor] = useState<Actor | null | undefined>(undefined), [toast, setToast] = useState<any>(null);\n const [theme, setTheme] = useState(() => {\n const saved = localStorage.getItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\");\n return saved === \"dark\" || saved === \"light\" ? saved : clientToken ? \"light\" : matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n });\n const notify = (message: string, kind = \"success\") => setToast({ message, kind });\n const refresh = async () => {\n const cfg = await request(\"/api/config\");\n clientCacheEnabled = cfg.cacheEnabled !== false;\n if (!clientCacheEnabled) apiCache.clear();\n setConfig(cfg); setActor(cfg.actor ?? null);\n };\n useEffect(() => {\n document.documentElement.dataset.theme = theme;\n localStorage.setItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\", theme);\n }, [theme, clientToken]);\n useEffect(() => { refresh().catch((x) => { setConfig({ initialized: true }); setActor(null); notify(x.message, \"error\"); }); }, []);\n if (!config || actor === undefined) return <div className=\"app-loading\"><div className=\"brand brand-large\"><BrandMark large/><span>AFLABS <b>PM</b></span></div><div className=\"loading-line\"><i/></div></div>;\n const toggleTheme = () => setTheme((current) => current === \"dark\" ? \"light\" : \"dark\");\n return <><NetworkActivity/><Toast value={toast} clear={() => setToast(null)}/>{!config.initialized ? <Bootstrap onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : !actor ? <Login clientToken={clientToken} onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : actor.actorType === \"client\" ? <ClientPortal actor={actor} notify={notify} theme={theme} setTheme={setTheme} toggleTheme={toggleTheme}/> : <Workspace actor={actor} config={config} refreshActor={refresh} notify={notify} theme={theme} toggleTheme={toggleTheme}/>}</>;\n}\n\r\n",["D",1786658319884],"id","754e49f1-03b3-49a5-b751-be0ab27dd211","aflabs-pm",["D",1785324724390],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AFLABS PM — projects, partners, and client timelines","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7fb3e06c-d9ab-432f-445c-6f2687afb500/square512?exp=1789563599&sig=17686b847a15be74f42a84c7362e6c5baad9c33b12fe1560f0ea5e6a99f10487","1c0af5f4-5486-4207-b370-2ccd83bc1dcf","pinnedFileId","019fada5-614d-738d-bbb2-8ce609465f5b","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f90d7-9872-7518-b6a7-7f6420c76125","tursoName","754e49f103b349a5b751be0ab27dd211","tursoHostname","754e49f103b349a5b751be0ab27dd211-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789492855745],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_115":114,"_123":119},"org",{"_115":114,"_116":117,"_118":119,"_18":66,"_120":121,"_122":26},"branch",{"_13":100,"_33":101,"_53":44,"_102":54,"_103":104,"_105":106,"_107":60,"_108":109,"_110":111,"_112":55,"_113":114},"isOwned",122,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","alshell7","handle","displayName","alshell 7","avatar","https://lh3.googleusercontent.com/a/ACg8ocIgzGkcs1h98if29Hwf_aAP4jTjWQLgwQAaxKmdWUK166qTecxnAw=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_53":54,"_33":55,"_40":327,"_57":-5,"_58":26,"_59":60,"_61":60,"_62":63,"_64":65,"_18":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":328,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":329,"_95":330,"_97":331,"_99":26},"tree",[221,222,232,234,235,236],"files",[221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236],"counts",{"_209":74,"_210":211,"_212":74,"_213":214,"_215":216},"contents",[160,161,162,163,164,165],"upstreamProject",{"_53":109,"_33":155,"_62":156,"_64":157,"_59":60,"_93":158},"upstreamBranch",{"_53":104,"_40":148,"_149":150,"_33":101,"_102":109,"_13":151,"_103":-5,"_105":-5,"_152":153,"_57":-5,"_99":26,"_59":60,"_113":154,"_75":111,"_112":155},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789563599&sig=c3b06339283e4bc07165fa54c09036aa25cea7ac6108dec2f68b1acc60fad95f",{"_115":154,"_123":159},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1",{"_53":203,"_33":204,"_31":205,"_168":-5,"_43":44,"_42":206,"_170":70,"_40":207,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_28":208},{"_53":197,"_33":198,"_31":199,"_168":-5,"_43":44,"_42":200,"_170":70,"_40":201,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_28":202},{"_53":190,"_33":191,"_31":192,"_168":-5,"_43":44,"_42":193,"_170":70,"_40":194,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_28":196},{"_53":183,"_33":184,"_31":185,"_168":-5,"_43":44,"_42":169,"_170":70,"_40":186,"_13":187,"_35":21,"_37":188,"_25":26,"_175":-5,"_28":189},{"_53":177,"_33":178,"_31":179,"_168":-5,"_43":44,"_42":169,"_170":26,"_40":180,"_13":74,"_35":36,"_37":181,"_25":26,"_175":-5,"_28":182},{"_53":166,"_33":167,"_31":68,"_168":-5,"_43":44,"_42":169,"_170":70,"_40":171,"_13":172,"_35":173,"_37":174,"_25":26,"_175":55,"_28":176},"ebf2bca5-9ff6-4ced-ad98-a4d466e9ef2c","index.ts","parentId",114,"latest",["D",1786653143386],33,"http","import { createClient } from \"npm:@libsql/client/web\";\nimport { neon } from \"npm:@neondatabase/serverless\";\nimport { Hono } from \"npm:hono\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\nimport { jsPDF } from \"npm:jspdf\";\nimport { Ratelimit } from \"npm:@upstash/ratelimit\";\nimport { Redis } from \"npm:@upstash/redis\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { ValTownOpenAI } from \"https://esm.town/v/std/openai/main.ts\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { createGrowthSuite } from \"./growth.ts\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string | null;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n allProjectAccess?: boolean;\n};\n\nconst env = {\n url: Deno.env.get(\"TURSO_DATABASE_URL\") ?? \"\",\n token: Deno.env.get(\"TURSO_AUTH_TOKEN\") ?? \"\",\n neonUrl: Deno.env.get(\"NEON_DATABASE_URL\") ?? \"\",\n databaseProvider: (Deno.env.get(\"DATABASE_PROVIDER\") ?? \"turso\").trim().toLowerCase(),\n cacheEnabled: /^(1|true|yes|on)$/i.test(Deno.env.get(\"CACHE_ENABLED\") ?? \"true\"),\n session: Deno.env.get(\"SESSION_SECRET\") ?? \"\",\n bootstrap: (Deno.env.get(\"APP_BOOTSTRAP_TOKEN\") ?? \"\").trim(),\n resend: Deno.env.get(\"RESEND_API_KEY\") ?? \"\",\n resendFrom: Deno.env.get(\"RESEND_FROM_EMAIL\") ?? \"\",\n resendDomain: Deno.env.get(\"RESEND_FROM_DOMAIN\") ?? \"\",\n upstashUrl: Deno.env.get(\"UPSTASH_REDIS_REST_URL\") ?? \"\",\n upstashToken: Deno.env.get(\"UPSTASH_REDIS_REST_TOKEN\") ?? \"\",\n};\ntype DatabaseProvider = \"neon\" | \"turso\";\ntype DatabaseStatement = string | { sql: string; args?: unknown[] };\ntype DatabaseResult = { rows: any[]; rowsAffected: number; columns?: string[] };\ntype DatabaseLock = { provider: DatabaseProvider; locked_at: string; schema_version?: number };\n\nconst tursoDb = createClient({ url: env.url, authToken: env.token });\nconst neonSql = env.neonUrl ? neon(env.neonUrl) : null;\nconst providerLockKey = \"config:database-provider-lock:v1\";\nlet providerPromise: Promise<DatabaseProvider> | null = null;\nlet providerLockState: DatabaseLock | null = null;\n\nfunction configuredDatabaseProvider(): DatabaseProvider {\n if (env.databaseProvider === \"neon\" || env.databaseProvider === \"turso\") return env.databaseProvider;\n throw new Error(\"DATABASE_PROVIDER must be either neon or turso\");\n}\nasync function lockedDatabaseProvider(): Promise<DatabaseProvider> {\n if (providerPromise) return providerPromise;\n providerPromise = (async () => {\n const configured = configuredDatabaseProvider();\n const saved = await blob.getJSON(providerLockKey) as DatabaseLock | null;\n if (saved?.provider && saved.provider !== configured) {\n throw new Error(`Database provider is permanently locked to ${saved.provider}; DATABASE_PROVIDER cannot switch it`);\n }\n providerLockState = saved?.provider ? saved : {\n provider: configured,\n locked_at: new Date().toISOString(),\n };\n if (!saved?.provider) {\n await blob.setJSON(providerLockKey, providerLockState);\n }\n return providerLockState.provider;\n })().catch((error) => {\n providerPromise = null;\n providerLockState = null;\n throw error;\n });\n return providerPromise;\n}\nasync function markDatabaseSchemaReady(version: number) {\n if (!providerLockState) await lockedDatabaseProvider();\n providerLockState = {\n ...(providerLockState as DatabaseLock),\n schema_version: version,\n };\n await blob.setJSON(providerLockKey, providerLockState);\n}\nfunction normalizeStatement(statement: DatabaseStatement) {\n return typeof statement === \"string\"\n ? { sql: statement, args: [] as unknown[] }\n : { sql: statement.sql, args: statement.args ?? [] };\n}\nfunction postgresSql(source: string) {\n let output = \"\";\n let quote = \"\";\n let parameter = 0;\n for (let index = 0; index < source.length; index += 1) {\n const character = source[index];\n if (quote) {\n output += character;\n if (character === quote) {\n if (source[index + 1] === quote) output += source[++index];\n else quote = \"\";\n }\n continue;\n }\n if (character === \"'\" || character === '\"') {\n quote = character;\n output += character;\n } else if (character === \"?\") {\n output += `$${++parameter}`;\n } else {\n output += character;\n }\n }\n if (/^\\s*INSERT\\s+OR\\s+IGNORE\\s+/i.test(output)) {\n output = output.replace(/^\\s*INSERT\\s+OR\\s+IGNORE\\s+/i, \"INSERT \");\n output = output.replace(/\\s*;?\\s*$/, \" ON CONFLICT DO NOTHING\");\n }\n return output;\n}\nfunction neonResult(result: any): DatabaseResult {\n return {\n rows: Array.isArray(result?.rows) ? result.rows : [],\n rowsAffected: Number(result?.rowCount ?? 0),\n columns: Array.isArray(result?.fields) ? result.fields.map((field: any) => String(field.name)) : undefined,\n };\n}\nconst db = {\n async execute(statement: DatabaseStatement): Promise<DatabaseResult> {\n const provider = await lockedDatabaseProvider();\n const query = normalizeStatement(statement);\n if (provider === \"turso\") return await tursoDb.execute(query as any) as any;\n if (!neonSql) throw new Error(\"NEON_DATABASE_URL is missing\");\n const result = await (neonSql as any).query(postgresSql(query.sql), query.args, { fullResults: true });\n return neonResult(result);\n },\n async batch(statements: DatabaseStatement[]): Promise<DatabaseResult[]> {\n const provider = await lockedDatabaseProvider();\n if (provider === \"turso\") return await tursoDb.batch(statements as any) as any;\n if (!neonSql) throw new Error(\"NEON_DATABASE_URL is missing\");\n if (!statements.length) return [];\n const queries = statements.map((statement) => {\n const query = normalizeStatement(statement);\n return (neonSql as any).query(postgresSql(query.sql), query.args);\n });\n const results = await (neonSql as any).transaction(queries, { fullResults: true });\n return results.map(neonResult);\n },\n};\nconst openai = new ValTownOpenAI({});\nconst app = new Hono();\nconst redis = env.upstashUrl && env.upstashToken\n ? new Redis({ url: env.upstashUrl, token: env.upstashToken })\n : null;\nconst loginIpLimiter = redis ? new Ratelimit({\n redis,\n limiter: Ratelimit.slidingWindow(30, \"10 m\"),\n prefix: \"aflabs-pm:login:ip\",\n}) : null;\nconst loginIdentityLimiter = redis ? new Ratelimit({\n redis,\n limiter: Ratelimit.slidingWindow(8, \"10 m\"),\n prefix: \"aflabs-pm:login:identity\",\n}) : null;\nconst statuses = [\"backlog\", \"todo\", \"in-progress\", \"blocked\", \"done\"];\nconst projectTypes = [\"Billable\", \"R&D\", \"Community\"];\nconst commentTypes = [\"update\", \"meeting\", \"blocker\", \"major-work\", \"mail-sent\", \"mail-received\", \"payment\", \"question\", \"note\", \"schedule-extension\"];\nconst permissionDefinitions = [\n [\"view_projects\", \"View assigned projects\"],\n [\"create_projects\", \"Create projects\"],\n [\"edit_projects\", \"Edit project details\"],\n [\"move_projects\", \"Move projects on the board\"],\n [\"archive_projects\", \"Archive and restore projects\"],\n [\"manage_links\", \"Manage project links\"],\n [\"view_credentials\", \"View credentials\"],\n [\"manage_credentials\", \"Manage credentials\"],\n [\"manage_comments\", \"Add updates and answer questions\"],\n [\"manage_milestones\", \"Manage milestones\"],\n [\"manage_stakeholders\", \"Manage stakeholders\"],\n [\"manage_payments\", \"Record and remove payments\"],\n] as const;\nconst fullPermissions = Object.fromEntries(permissionDefinitions.map(([key]) => [key, true]));\nconst partnerPermissionDefinitions = [\n [\"view_leads\", \"View owned leads\"],\n [\"create_leads\", \"Create leads\"],\n [\"edit_leads\", \"Edit owned leads and follow-ups\"],\n [\"convert_leads\", \"Convert leads to projects\"],\n [\"view_projects\", \"View owned projects\"],\n [\"create_projects\", \"Create projects from leads\"],\n [\"edit_owned_projects\", \"Edit owned project details\"],\n [\"manage_owned_projects\", \"Manage owned project delivery\"],\n [\"chat\", \"Start and reply to scoped conversations\"],\n [\"book_meetings\", \"Book meetings within allowance\"],\n [\"use_ai\", \"Use the business pitch generator\"],\n] as const;\nconst partnerPermissionPresets: Record<string, Record<string, boolean>> = {\n basic: {\n view_leads: true, create_leads: true, edit_leads: false, convert_leads: false,\n view_projects: true, create_projects: false, edit_owned_projects: false, manage_owned_projects: false,\n chat: true, book_meetings: true, use_ai: true,\n },\n advanced: {\n view_leads: true, create_leads: true, edit_leads: true, convert_leads: true,\n view_projects: true, create_projects: true, edit_owned_projects: true, manage_owned_projects: true,\n chat: true, book_meetings: true, use_ai: true,\n },\n};\nfunction partnerPermissions(row: any) {\n const level = [\"basic\", \"advanced\", \"custom\"].includes(String(row.permission_level)) ? String(row.permission_level) : \"basic\";\n if (level === \"custom\") {\n const custom = parseJson<Record<string, boolean>>(row.permissions, {});\n return Object.fromEntries(partnerPermissionDefinitions.map(([key]) => [key, custom[key] === true]));\n }\n return partnerPermissionPresets[level];\n}\nconst userDefaults = {\n view_projects: true, create_projects: false, edit_projects: true,\n move_projects: true, archive_projects: false, manage_links: true,\n view_credentials: false, manage_credentials: false, manage_comments: true,\n manage_milestones: true, manage_stakeholders: true, manage_payments: false,\n};\nconst defaultBranding = {\n name: \"AFLABS\",\n logo_url: \"/frontend/logo.png\",\n accent_color: \"#8edb11\",\n contact_info: \"\",\n website_url: \"\",\n portal_label: \"Project delivery\",\n welcome_message: \"Every meaningful update, in one clear timeline.\",\n document_header: \"AFLABS PM\\nProject delivery, made visible.\",\n document_footer: \"Thank you for your business.\",\n theme: \"light\",\n};\n\nconst now = () => new Date().toISOString();\nconst uid = () => crypto.randomUUID();\nconst str = (value: unknown) => String(value ?? \"\").trim();\nconst int = (value: unknown) => value ? 1 : 0;\nconst titleCase = (value: unknown) => str(value).replaceAll(\"-\", \" \").replace(/\\b\\w/g, (x) => x.toUpperCase());\nconst dayMs = 86_400_000;\nfunction dateDays(from: unknown, to: unknown) {\n const start = Date.parse(`${str(from).slice(0, 10)}T00:00:00Z`);\n const end = Date.parse(`${str(to).slice(0, 10)}T00:00:00Z`);\n return Number.isFinite(start) && Number.isFinite(end) ? Math.round((end - start) / dayMs) : 0;\n}\nfunction addDateDays(value: unknown, days: number) {\n const date = new Date(`${str(value).slice(0, 10)}T00:00:00Z`);\n if (Number.isNaN(date.getTime())) return null;\n date.setUTCDate(date.getUTCDate() + days);\n return date.toISOString().slice(0, 10);\n}\nconst prettyDateForServer = (value: unknown) => {\n const date = str(value).slice(0, 10);\n return date ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\", timeZone: \"UTC\" })\n .format(new Date(`${date}T12:00:00Z`)) : \"Not set\";\n};\nconst parseJson = <T>(value: unknown, fallback: T): T => {\n try { return value ? JSON.parse(String(value)) : fallback; } catch { return fallback; }\n};\nasync function sha(value: string) {\n const raw = await crypto.subtle.digest(\"SHA-256\", new TextEncoder().encode(value));\n return [...new Uint8Array(raw)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\");\n}\nconst hashPin = (phone: string, pin: string) => sha(`${env.session}:pin:${phone}:${pin}`);\nfunction phone(value: unknown) {\n let p = str(value).replace(/[()\\s-]/g, \"\");\n if (!p.startsWith(\"+\") && /^\\d{10}$/.test(p)) p = `+91${p}`;\n if (!/^\\+91[6-9]\\d{9}$/.test(p) && !/^\\+9665\\d{8}$/.test(p) && !/^\\+9715\\d{8}$/.test(p)) {\n throw new Error(\"Use a valid India, Saudi Arabia, or UAE mobile number\");\n }\n return p;\n}\nfunction optionalPhone(value: unknown) {\n if (!str(value)) return \"\";\n try { return phone(value); } catch { return \"\"; }\n}\nfunction pin(value: unknown) {\n const p = str(value);\n if (!/^\\d{4,8}$/.test(p)) throw new Error(\"PIN must contain 4–8 digits\");\n return p;\n}\nfunction color(value: unknown) {\n const c = str(value);\n return /^(#[0-9a-fA-F]{6}|oklch\$[^)]+\$)$/.test(c) ? c : \"\";\n}\nconst admin = (a: Actor) => a.actorType === \"internal\" && a.role === \"admin\";\nconst can = (a: Actor, key: string) => admin(a) || a.permissions[key] === true;\nfunction requireCan(a: Actor, key: string) {\n if (!can(a, key)) throw new Error(\"You do not have permission for this action\");\n}\nfunction requirePartnerReady(a: Actor, project: any) {\n if (a.actorType === \"partner\" && project.status === \"backlog\") {\n throw new Error(\"Partner collaboration opens after the project moves to To do\");\n }\n}\nasync function body(c: any) {\n if (!(c.req.header(\"content-type\") ?? \"\").includes(\"application/json\")) throw new Error(\"JSON body required\");\n return await c.req.json();\n}\n\nlet schema: Promise<void> | null = null;\nconst growthSuite = createGrowthSuite({\n db, actor, admin, body, uid, now, str, int, allowedProject, projectInsertStatements, openai,\n});\n\nasync function migrate() {\n const provider = await lockedDatabaseProvider();\n if (provider === \"turso\" && (!env.url || !env.token)) throw new Error(\"Turso database environment variables are missing\");\n if (provider === \"neon\" && !env.neonUrl) throw new Error(\"Neon database environment variable is missing\");\n if (!env.session || !env.bootstrap) throw new Error(\"Application secret environment variables are missing\");\n if (Number(providerLockState?.schema_version ?? 0) >= 3) {\n if (!schema) schema = Promise.resolve();\n return schema;\n }\n if (!schema) schema = db.batch([\n `CREATE TABLE IF NOT EXISTS internal_users (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT NOT NULL UNIQUE, email TEXT, pin_hash TEXT NOT NULL,\n role TEXT NOT NULL CHECK(role IN ('admin','user')), permissions TEXT NOT NULL DEFAULT '{}',\n all_project_access INTEGER NOT NULL DEFAULT 1, active INTEGER NOT NULL DEFAULT 1,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS partners (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT NOT NULL UNIQUE, pin_hash TEXT NOT NULL,\n brand_name TEXT, logo_url TEXT, accent_color TEXT, contact_info TEXT, website_url TEXT,\n document_header TEXT, document_footer TEXT,\n active INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS projects (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, description TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'backlog', archived INTEGER NOT NULL DEFAULT 0,\n start_date TEXT, end_date TEXT, project_type TEXT NOT NULL DEFAULT 'Billable',\n partner_id TEXT REFERENCES partners(id), regular_cost REAL NOT NULL DEFAULT 0,\n partner_cost REAL NOT NULL DEFAULT 0, currency TEXT NOT NULL DEFAULT 'INR',\n progress INTEGER NOT NULL DEFAULT 0, client_token TEXT NOT NULL UNIQUE,\n client_pin TEXT NOT NULL, commission_document_url TEXT, contact_email TEXT,\n cc_emails TEXT NOT NULL DEFAULT '[]', owner_user_id TEXT REFERENCES internal_users(id),\n notification_cc_ids TEXT NOT NULL DEFAULT '[]',\n tax_label TEXT NOT NULL DEFAULT 'GST', tax_rate REAL NOT NULL DEFAULT 0,\n tax_inclusive INTEGER NOT NULL DEFAULT 0,\n client_brand_name TEXT, client_logo_url TEXT, client_accent_color TEXT,\n client_theme TEXT NOT NULL DEFAULT 'light',\n blocked_since TEXT, blocked_days INTEGER NOT NULL DEFAULT 0,\n created_by_type TEXT NOT NULL, created_by_id TEXT NOT NULL,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS user_project_access (\n user_id TEXT NOT NULL REFERENCES internal_users(id) ON DELETE CASCADE,\n project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n PRIMARY KEY(user_id, project_id))`,\n `CREATE TABLE IF NOT EXISTS project_links (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n label TEXT NOT NULL, url TEXT NOT NULL, link_type TEXT NOT NULL DEFAULT 'reference',\n client_visible INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS project_credentials (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n label TEXT NOT NULL, username TEXT, secret TEXT, url TEXT, notes TEXT,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS stakeholders (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n name TEXT NOT NULL, phone TEXT NOT NULL, email TEXT NOT NULL DEFAULT '',\n role TEXT NOT NULL DEFAULT '', is_main_poc INTEGER NOT NULL DEFAULT 0,\n email_cc INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS milestones (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n title TEXT NOT NULL, tag TEXT NOT NULL DEFAULT 'Milestone', description TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'upcoming', due_date TEXT, completed_date TEXT,\n client_visible INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS payments (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n amount REAL NOT NULL, currency TEXT NOT NULL, paid_date TEXT NOT NULL,\n note TEXT NOT NULL DEFAULT '', created_by_type TEXT NOT NULL, created_by_id TEXT,\n created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS comments (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n parent_id TEXT REFERENCES comments(id), author_type TEXT NOT NULL, author_id TEXT,\n author_name TEXT NOT NULL, stakeholder_id TEXT REFERENCES stakeholders(id),\n body TEXT NOT NULL, comment_type TEXT NOT NULL DEFAULT 'update',\n visibility TEXT NOT NULL DEFAULT 'both', event_date TEXT NOT NULL,\n resolved_at TEXT, payment_id TEXT REFERENCES payments(id), created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS sessions (\n token_hash TEXT PRIMARY KEY, actor_type TEXT NOT NULL, actor_id TEXT NOT NULL,\n project_id TEXT, expires_at TEXT NOT NULL, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS activity_reads (\n actor_type TEXT NOT NULL, actor_id TEXT NOT NULL, project_id TEXT NOT NULL,\n last_read_at TEXT NOT NULL, PRIMARY KEY(actor_type, actor_id, project_id))`,\n `CREATE TABLE IF NOT EXISTS app_settings (\n setting_key TEXT PRIMARY KEY, setting_value TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS email_logs (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n comment_id TEXT, recipient TEXT NOT NULL, cc TEXT NOT NULL DEFAULT '[]',\n subject TEXT NOT NULL, status TEXT NOT NULL, provider_id TEXT, error TEXT,\n created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS proposals (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, markdown_content TEXT NOT NULL,\n structured_data TEXT NOT NULL DEFAULT '{}', partner_id TEXT REFERENCES partners(id),\n currency TEXT NOT NULL DEFAULT 'INR', total REAL NOT NULL DEFAULT 0,\n status TEXT NOT NULL DEFAULT 'draft', project_id TEXT REFERENCES projects(id),\n created_by_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS recurring_projects (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, description TEXT NOT NULL DEFAULT '',\n partner_id TEXT REFERENCES partners(id), owner_user_id TEXT REFERENCES internal_users(id),\n contact_email TEXT, cc_emails TEXT NOT NULL DEFAULT '[]',\n billing_type TEXT NOT NULL DEFAULT 'monthly', monthly_amount REAL NOT NULL DEFAULT 0,\n hourly_rate REAL NOT NULL DEFAULT 0, included_hours REAL NOT NULL DEFAULT 0,\n currency TEXT NOT NULL DEFAULT 'INR', start_date TEXT, end_date TEXT,\n active INTEGER NOT NULL DEFAULT 1, created_by_type TEXT NOT NULL,\n created_by_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS recurring_logs (\n id TEXT PRIMARY KEY, recurring_id TEXT NOT NULL REFERENCES recurring_projects(id) ON DELETE CASCADE,\n period TEXT NOT NULL, work_date TEXT, hours REAL NOT NULL DEFAULT 0, note TEXT NOT NULL DEFAULT '',\n logged_by_type TEXT NOT NULL, logged_by_id TEXT NOT NULL, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS holidays (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, holiday_date TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS holiday_settings (\n id TEXT PRIMARY KEY, weekly_days TEXT NOT NULL DEFAULT '[5,6]', updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS schema_meta (\n migration_key TEXT PRIMARY KEY, version INTEGER NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS milestone_templates (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT NOT NULL DEFAULT '',\n items TEXT NOT NULL DEFAULT '[]', active INTEGER NOT NULL DEFAULT 1,\n created_by_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS quick_notes (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, shortcut TEXT NOT NULL UNIQUE,\n body TEXT NOT NULL, active INTEGER NOT NULL DEFAULT 1,\n created_by_id TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS schedule_extensions (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n previous_end_date TEXT NOT NULL, new_end_date TEXT NOT NULL, days INTEGER NOT NULL,\n reason TEXT NOT NULL, created_by_type TEXT NOT NULL, created_by_id TEXT NOT NULL,\n created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS invoices (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n invoice_number TEXT NOT NULL UNIQUE, invoice_type TEXT NOT NULL,\n milestone_ids TEXT NOT NULL DEFAULT '[]', notes TEXT NOT NULL DEFAULT '',\n amount REAL NOT NULL DEFAULT 0, currency TEXT NOT NULL, due_date TEXT,\n status TEXT NOT NULL DEFAULT 'issued', created_by_id TEXT NOT NULL,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n \"CREATE INDEX IF NOT EXISTS idx_projects_status ON projects(status, archived)\",\n \"CREATE INDEX IF NOT EXISTS idx_projects_archived_updated ON projects(archived, updated_at DESC)\",\n \"CREATE INDEX IF NOT EXISTS idx_projects_partner_archived ON projects(partner_id, archived, updated_at DESC)\",\n \"CREATE INDEX IF NOT EXISTS idx_comments_project_date ON comments(project_id, event_date)\",\n \"CREATE INDEX IF NOT EXISTS idx_comments_questions ON comments(project_id, comment_type, resolved_at, parent_id)\",\n \"CREATE INDEX IF NOT EXISTS idx_comments_project_created ON comments(project_id, created_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_payments_project ON payments(project_id)\",\n \"CREATE INDEX IF NOT EXISTS idx_sessions_expiry ON sessions(expires_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_recurring_partner ON recurring_projects(partner_id, active)\",\n \"CREATE INDEX IF NOT EXISTS idx_recurring_logs_period ON recurring_logs(recurring_id, period)\",\n \"CREATE INDEX IF NOT EXISTS idx_holidays_date ON holidays(holiday_date)\",\n \"CREATE INDEX IF NOT EXISTS idx_quick_notes_active ON quick_notes(active, title)\",\n ]).then(async () => {\n if (provider === \"turso\") for (const statement of [\n \"ALTER TABLE partners ADD COLUMN website_url TEXT\",\n \"ALTER TABLE partners ADD COLUMN document_header TEXT\",\n \"ALTER TABLE partners ADD COLUMN document_footer TEXT\",\n \"ALTER TABLE projects ADD COLUMN contact_email TEXT\",\n \"ALTER TABLE projects ADD COLUMN cc_emails TEXT NOT NULL DEFAULT '[]'\",\n \"ALTER TABLE projects ADD COLUMN owner_user_id TEXT REFERENCES internal_users(id)\",\n \"ALTER TABLE projects ADD COLUMN blocked_since TEXT\",\n \"ALTER TABLE projects ADD COLUMN blocked_days INTEGER NOT NULL DEFAULT 0\",\n \"ALTER TABLE projects ADD COLUMN notification_cc_ids TEXT NOT NULL DEFAULT '[]'\",\n \"ALTER TABLE projects ADD COLUMN tax_label TEXT NOT NULL DEFAULT 'GST'\",\n \"ALTER TABLE projects ADD COLUMN tax_rate REAL NOT NULL DEFAULT 0\",\n \"ALTER TABLE projects ADD COLUMN tax_inclusive INTEGER NOT NULL DEFAULT 0\",\n \"ALTER TABLE projects ADD COLUMN client_brand_name TEXT\",\n \"ALTER TABLE projects ADD COLUMN client_logo_url TEXT\",\n \"ALTER TABLE projects ADD COLUMN client_accent_color TEXT\",\n \"ALTER TABLE projects ADD COLUMN client_theme TEXT NOT NULL DEFAULT 'light'\",\n \"ALTER TABLE internal_users ADD COLUMN email TEXT\",\n \"ALTER TABLE comments ADD COLUMN payment_id TEXT REFERENCES payments(id)\",\n \"ALTER TABLE stakeholders ADD COLUMN email TEXT NOT NULL DEFAULT ''\",\n \"ALTER TABLE stakeholders ADD COLUMN is_main_poc INTEGER NOT NULL DEFAULT 0\",\n \"ALTER TABLE stakeholders ADD COLUMN email_cc INTEGER NOT NULL DEFAULT 0\",\n \"ALTER TABLE recurring_logs ADD COLUMN work_date TEXT\",\n ]) {\n try { await db.execute(statement); } catch (e) {\n if (!/duplicate column|already exists/i.test(e instanceof Error ? e.message : String(e))) throw e;\n }\n }\n await db.execute(\"CREATE INDEX IF NOT EXISTS idx_stakeholders_project ON stakeholders(project_id, is_main_poc, name)\");\n await db.execute({\n sql: \"INSERT OR IGNORE INTO holiday_settings(id,weekly_days,updated_at) VALUES('default','[5,6]',?)\",\n args: [now()],\n });\n await db.execute({\n sql: `INSERT INTO schema_meta(migration_key,version,updated_at) VALUES('app',3,?)\n ON CONFLICT(migration_key) DO UPDATE SET version=excluded.version,updated_at=excluded.updated_at`,\n args: [now()],\n });\n await markDatabaseSchemaReady(3);\n }).catch((e) => { schema = null; throw e; });\n return schema;\n}\n\nfunction dateInIndia(value = new Date()) {\n const parts = new Intl.DateTimeFormat(\"en-GB\", {\n timeZone: \"Asia/Kolkata\", year: \"numeric\", month: \"2-digit\", day: \"2-digit\",\n }).formatToParts(value);\n const read = (type: string) => parts.find((part) => part.type === type)?.value || \"\";\n return `${read(\"year\")}-${read(\"month\")}-${read(\"day\")}`;\n}\nasync function holidayStatus(date = dateInIndia()) {\n const [settingResult, holidayResult] = await Promise.all([\n db.execute(\"SELECT weekly_days FROM holiday_settings WHERE id='default'\"),\n db.execute({ sql: \"SELECT id,name,holiday_date FROM holidays WHERE holiday_date=? LIMIT 1\", args: [date] }),\n ]);\n const weeklyDays = parseJson<number[]>((settingResult.rows[0] as any)?.weekly_days, [5, 6])\n .map(Number).filter((day) => Number.isInteger(day) && day >= 0 && day <= 6);\n const oneOff = holidayResult.rows[0] as any;\n const day = new Date(`${date}T12:00:00Z`).getUTCDay();\n const weekly = weeklyDays.includes(day);\n return {\n date,\n is_holiday: Boolean(oneOff || weekly),\n name: oneOff?.name || (weekly ? \"Weekly holiday\" : \"\"),\n reason: oneOff ? \"configured\" : weekly ? \"weekly\" : \"\",\n weekly_days: weeklyDays,\n };\n}\n\nasync function newSession(c: any, actorType: Actor[\"actorType\"], actorId: string, projectId: string | null = null) {\n const raw = `${uid()}${uid()}`.replaceAll(\"-\", \"\");\n const tokenHash = await sha(`${env.session}:session:${raw}`);\n const maxAge = actorType === \"client\" ? 86400 : 1209600;\n await db.execute({\n sql: \"INSERT INTO sessions (token_hash,actor_type,actor_id,project_id,expires_at,created_at) VALUES (?,?,?,?,?,?)\",\n args: [tokenHash, actorType, actorId, projectId, new Date(Date.now() + maxAge * 1000).toISOString(), now()],\n });\n setCookie(c, \"aflabs_session\", raw, { httpOnly: true, secure: true, sameSite: \"Lax\", path: \"/\", maxAge });\n}\nasync function session(c: any): Promise<Actor | null> {\n const raw = getCookie(c, \"aflabs_session\");\n if (!raw) return null;\n const tokenHash = await sha(`${env.session}:session:${raw}`);\n const rs = await db.execute({ sql: \"SELECT * FROM sessions WHERE token_hash=? AND expires_at>?\", args: [tokenHash, now()] });\n const s = rs.rows[0] as any;\n if (!s) return null;\n if (s.actor_type === \"internal\") {\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE id=? AND active=1\", args: [s.actor_id] });\n const u = r.rows[0] as any;\n return u ? {\n actorType: \"internal\", actorId: String(u.id), name: String(u.name), role: String(u.role),\n permissions: u.role === \"admin\" ? fullPermissions : parseJson(u.permissions, {}),\n allProjectAccess: Boolean(u.all_project_access),\n } : null;\n }\n if (s.actor_type === \"partner\") {\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=? AND active=1\", args: [s.actor_id] });\n const p = r.rows[0] as any;\n return p ? { actorType: \"partner\", actorId: String(p.id), name: String(p.name), role: \"partner\", permissions: partnerPermissions(p) } : null;\n }\n const r = await db.execute({ sql: \"SELECT id FROM projects WHERE id=?\", args: [s.project_id] });\n return r.rows[0] ? { actorType: \"client\", actorId: String(s.actor_id), projectId: String(s.project_id), name: \"Client\", role: \"client\", permissions: {} } : null;\n}\nasync function actor(c: any) {\n const a = await session(c);\n if (!a) throw new Error(\"AUTH_REQUIRED\");\n return a;\n}\nasync function allowedProject(projectId: string, a: Actor) {\n let sql = `SELECT p.*, pa.name partner_name, pa.brand_name, pa.logo_url partner_logo_url,\n pa.accent_color partner_accent_color, pa.contact_info partner_contact_info,\n pa.website_url partner_website_url,pa.document_header partner_document_header,\n pa.document_footer partner_document_footer,ou.name owner_name\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id\n LEFT JOIN internal_users ou ON ou.id=p.owner_user_id WHERE p.id=?`;\n const args: any[] = [projectId];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (a.actorType === \"client\") { sql += \" AND p.id=?\"; args.push(a.projectId ?? \"\"); }\n else if (a.actorType === \"internal\" && !a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n return (await db.execute({ sql, args })).rows[0] as any;\n}\nlet brandingCache: { expires: number; value: any } | null = null;\nasync function getClientBranding() {\n if (brandingCache && brandingCache.expires > Date.now()) return brandingCache.value;\n const result = await db.execute({\n sql: \"SELECT setting_value FROM app_settings WHERE setting_key='client_branding'\",\n args: [],\n });\n const value = { ...defaultBranding, ...parseJson((result.rows[0] as any)?.setting_value, {}) };\n brandingCache = { expires: Date.now() + 30_000, value };\n return value;\n}\nfunction effectivePartnerBranding(p: any, base: any) {\n return {\n ...base,\n name: p.brand_name || base.name,\n logo_url: p.logo_url || p.partner_logo_url || base.logo_url,\n accent_color: p.accent_color || p.partner_accent_color || base.accent_color,\n contact_info: p.contact_info || p.partner_contact_info || base.contact_info,\n website_url: p.website_url || p.partner_website_url || base.website_url,\n document_header: p.document_header || p.partner_document_header || base.document_header,\n document_footer: p.document_footer || p.partner_document_footer || base.document_footer,\n };\n}\nasync function ccRecipients() {\n const result = await db.execute(\"SELECT setting_value FROM app_settings WHERE setting_key='notification_cc_recipients'\");\n const rows = parseJson<any[]>((result.rows[0] as any)?.setting_value, []);\n return rows.map((x) => {\n const userId = str(x.user_id) || \"\";\n return {\n id: str(x.id) || uid(),\n label: str(x.label) || str(x.email) || \"CC recipient\",\n email: userId ? \"\" : emailList([x.email])[0] || \"\",\n user_id: userId,\n default_selected: Boolean(x.default_selected),\n };\n }).filter((x) => x.email || x.user_id);\n}\nconst safeHtml = (value: unknown) => str(value)\n .replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\")\n .replaceAll('\"', \""\").replaceAll(\"'\", \"'\");\nfunction emailList(value: unknown) {\n const source = Array.isArray(value) ? value : typeof value === \"string\" && value.trim().startsWith(\"[\")\n ? parseJson(value, []) : str(value).split(\",\");\n return [...new Set((source as unknown[]).map((x) => str(x).toLowerCase()).filter((x) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(x)))];\n}\nasync function rateLimitIdentity(value: unknown) {\n const digest = await crypto.subtle.digest(\"SHA-256\", new TextEncoder().encode(str(value).toLowerCase()));\n return [...new Uint8Array(digest)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\");\n}\nasync function enforceLoginRateLimit(c: any, scope: string, identity: unknown) {\n if (!loginIpLimiter || !loginIdentityLimiter) {\n return c.json({ error: \"Login protection is temporarily unavailable\" }, 503);\n }\n const forwarded = str(c.req.header(\"cf-connecting-ip\") || c.req.header(\"x-forwarded-for\")).split(\",\")[0].trim();\n const ip = forwarded || \"unknown\";\n try {\n const identityHash = await rateLimitIdentity(identity);\n const [ipResult, identityResult] = await Promise.all([\n loginIpLimiter.limit(`${scope}:${ip}`),\n loginIdentityLimiter.limit(`${scope}:${identityHash}`),\n ]);\n if (ipResult.success && identityResult.success) return null;\n const reset = Math.max(ipResult.success ? 0 : ipResult.reset, identityResult.success ? 0 : identityResult.reset);\n const retryAfter = Math.max(1, Math.ceil((reset - Date.now()) / 1000));\n c.header(\"Retry-After\", String(retryAfter));\n return c.json({\n error: \"Too many login attempts. Please wait before trying again.\",\n retry_after: retryAfter,\n }, 429);\n } catch (e) {\n console.error(\"Login rate limiter unavailable\", e);\n return c.json({ error: \"Login protection is temporarily unavailable\" }, 503);\n }\n}\ntype ResponseCacheEntry = { expires: number; value: unknown };\nconst responseCache = new Map<string, ResponseCacheEntry>();\nconst responseCacheVersions = new Map<string, { expires: number; value: number }>();\nconst cachePolicies: Record<string, number> = {\n config: 60, projects: 120, \"project-details\": 120, people: 300,\n proposals: 180, dashboard: 120, recurring: 180, questions: 60,\n templates: 300, holidays: 300,\n};\nfunction responseCacheTag(path: string) {\n if (path === \"/api/config\") return \"config\";\n if (path === \"/api/projects\") return \"projects\";\n if (/^\\/api\\/projects\\/[^/]+$/.test(path)) return \"project-details\";\n if (path === \"/api/dashboard\") return \"dashboard\";\n if (path === \"/api/questions\") return \"questions\";\n if (path === \"/api/recurring\") return \"recurring\";\n if (path === \"/api/milestone-templates\" || path === \"/api/quick-notes\") return \"templates\";\n if (path === \"/api/holidays\") return \"holidays\";\n if (path === \"/api/admin/proposals\") return \"proposals\";\n if ([\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\"].includes(path)) return \"people\";\n return \"\";\n}\nfunction mutationCacheTags(path: string) {\n const tags = new Set<string>();\n if (/^\\/api\\/projects\\/[^/]+\\/read$/.test(path)) return [\"projects\"];\n if (/^\\/api\\/(projects|comments|links|credentials|stakeholders|milestones|payments|invoices)/.test(path)) {\n [\"projects\", \"project-details\", \"dashboard\", \"questions\"].forEach((x) => tags.add(x));\n }\n if (/^\\/api\\/admin\\/(users|partners|settings|branding|cc-recipients)/.test(path) || path === \"/api/partner/branding\") {\n [\"people\", \"projects\", \"project-details\", \"dashboard\", \"config\"].forEach((x) => tags.add(x));\n }\n if (path.startsWith(\"/api/admin/proposals\")) {\n [\"proposals\", \"projects\", \"project-details\", \"dashboard\"].forEach((x) => tags.add(x));\n }\n if (path.startsWith(\"/api/recurring\")) tags.add(\"recurring\");\n if (path.startsWith(\"/api/admin/holidays\")) {\n tags.add(\"holidays\");\n tags.add(\"project-details\");\n }\n if (path.includes(\"milestone-template\") || path.includes(\"quick-notes\")) tags.add(\"templates\");\n return [...tags];\n}\nasync function responseCacheVersion(tag: string) {\n const local = responseCacheVersions.get(tag);\n if (local && local.expires > Date.now()) return local.value;\n const value = redis ? Number(await redis.get(`aflabs-pm:cache-version:${tag}`)) || 0 : 0;\n responseCacheVersions.set(tag, { expires: Date.now() + 5000, value });\n return value;\n}\nasync function invalidateResponseCache(tags: string[]) {\n if (!tags.length) return;\n for (const key of responseCache.keys()) {\n if (tags.some((tag) => key.startsWith(`${tag}:`))) responseCache.delete(key);\n }\n if (!redis) return;\n await Promise.all(tags.map(async (tag) => {\n const value = Number(await redis.incr(`aflabs-pm:cache-version:${tag}`));\n responseCacheVersions.set(tag, { expires: Date.now() + 5000, value });\n }));\n}\nasync function cachedApiResponse(c: any, next: () => Promise<void>) {\n const path = c.req.path;\n const tag = responseCacheTag(path);\n if (c.req.method !== \"GET\" || !tag || !redis || !env.cacheEnabled) {\n await next();\n if (env.cacheEnabled && c.req.method !== \"GET\" && c.res.status < 400) {\n try { await invalidateResponseCache(mutationCacheTags(path)); } catch (e) {\n console.error(\"Response cache invalidation failed\", e);\n }\n }\n return;\n }\n const rawSession = getCookie(c, \"aflabs_session\");\n if (!rawSession) return await next();\n let key = \"\", localKey = \"\", redisKey = \"\";\n try {\n const sessionHash = (await rateLimitIdentity(rawSession)).slice(0, 24);\n const requestUrl = new URL(c.req.url);\n localKey = `${tag}:${sessionHash}:${requestUrl.pathname}${requestUrl.search}`;\n const local = responseCache.get(localKey);\n if (local && local.expires > Date.now()) {\n c.header(\"X-AFLABS-Cache\", \"L1-HIT\");\n return c.json(local.value);\n }\n const version = await responseCacheVersion(tag);\n key = `${tag}:${version}:${sessionHash}:${requestUrl.pathname}${requestUrl.search}`;\n redisKey = `aflabs-pm:response:${key}`;\n const cached = await redis.get(redisKey);\n if (cached !== null) {\n responseCache.set(localKey, { expires: Date.now() + 12000, value: cached });\n c.header(\"X-AFLABS-Cache\", \"REDIS-HIT\");\n return c.json(cached);\n }\n } catch (e) {\n console.error(\"Response cache lookup failed\", e);\n }\n await next();\n if (key && redisKey && c.res.status === 200 && (c.res.headers.get(\"content-type\") || \"\").includes(\"application/json\")) {\n try {\n const value = await c.res.clone().json();\n const ttl = cachePolicies[tag] || 60;\n responseCache.set(localKey, { expires: Date.now() + Math.min(ttl * 1000, 12000), value });\n await redis.set(redisKey, value, { ex: ttl });\n c.header(\"X-AFLABS-Cache\", \"MISS\");\n } catch (e) {\n console.error(\"Response cache store failed\", e);\n }\n }\n}\nasync function syncProjectRecipients(projectId: string) {\n const result = await db.execute({\n sql: \"SELECT id,email,is_main_poc,email_cc FROM stakeholders WHERE project_id=? ORDER BY is_main_poc DESC,created_at,id\",\n args: [projectId],\n });\n const rows = result.rows as any[];\n if (!rows.length) {\n await db.execute({ sql: \"UPDATE projects SET contact_email=NULL,cc_emails='[]' WHERE id=?\", args: [projectId] });\n return;\n }\n let main = rows.find((x) => Number(x.is_main_poc));\n if (!main) {\n main = rows[0];\n await db.execute({ sql: \"UPDATE stakeholders SET is_main_poc=CASE WHEN id=? THEN 1 ELSE 0 END WHERE project_id=?\", args: [main.id, projectId] });\n }\n const cc = emailList(rows.filter((x) => x.id !== main.id && Number(x.email_cc)).map((x) => x.email));\n await db.execute({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=?,updated_at=? WHERE id=?\",\n args: [main.email, JSON.stringify(cc), now(), projectId],\n });\n}\nasync function brandingForProject(p: any) {\n const base = await getClientBranding();\n return p.partner_id ? effectivePartnerBranding(p, base) : base;\n}\nfunction hexRgb(value: unknown) {\n const match = /^#([0-9a-f]{6})$/i.exec(str(value));\n if (!match) return [72, 104, 137] as const;\n const n = Number.parseInt(match[1], 16);\n return [(n >> 16) & 255, (n >> 8) & 255, n & 255] as const;\n}\nasync function sendProjectEmail(p: any, comment: any, kind = \"update\", origin = \"\") {\n const [stakeholderResult, ccDirectory, internalUsers] = await Promise.all([\n db.execute({\n sql: \"SELECT email,is_main_poc,email_cc FROM stakeholders WHERE project_id=? ORDER BY is_main_poc DESC,created_at,id\",\n args: [p.id],\n }),\n ccRecipients(),\n db.execute(\"SELECT id,email FROM internal_users WHERE active=1 AND email IS NOT NULL\"),\n ]);\n const stakeholderRows = stakeholderResult.rows as any[];\n const mainStakeholder = stakeholderRows.find((x) => Number(x.is_main_poc));\n const recipient = emailList([mainStakeholder?.email, p.contact_email])[0] || \"\";\n if (!recipient) return { sent: false, skipped: true, error: \"No main POC email is configured for this project\" };\n if (!env.resend) return { sent: false, skipped: true, error: \"The Resend API key is not configured\" };\n const senderEmail = /^[a-z0-9.-]+\\.[a-z]{2,}$/i.test(env.resendDomain)\n ? `notifications@${env.resendDomain}`\n : emailList([env.resendFrom])[0] || \"\";\n if (!senderEmail) return { sent: false, skipped: true, error: \"The Resend sender email or domain is not configured correctly\" };\n const branding = await brandingForProject(p);\n const stakeholderCc = stakeholderRows\n .filter((x) => !Number(x.is_main_poc) && Number(x.email_cc))\n .map((x) => x.email);\n const selectedCcIds = new Set(parseJson<string[]>(p.notification_cc_ids, []).map(String));\n const userEmail = new Map((internalUsers.rows as any[]).map((x) => [String(x.id), str(x.email)]));\n const configuredCc = ccDirectory\n .filter((x) => selectedCcIds.has(x.id))\n .map((x) => x.user_id ? userEmail.get(x.user_id) || \"\" : x.email);\n const cc = emailList([...stakeholderCc, ...emailList(p.cc_emails), ...configuredCc]).filter((x) => x !== recipient);\n const subject = kind === \"reply\"\n ? `${branding.name}: your question on ${p.title} was answered`\n : `${branding.name}: ${comment.author_name} added a ${str(comment.comment_type).replaceAll(\"-\", \" \")} update`;\n const accent = /^#[0-9a-f]{6}$/i.test(str(branding.accent_color)) ? branding.accent_color : \"#4d7193\";\n const emailLogo = /^https?:\\/\\//.test(str(branding.logo_url)) ? str(branding.logo_url)\n : origin && str(branding.logo_url).startsWith(\"/\") ? `${origin}${branding.logo_url}` : \"\";\n const projectUrl = origin && p.client_token ? `${origin}/client/${p.client_token}` : \"\";\n const html = [\n '<div style=\"margin:0;background:#f4f6f8;padding:32px 12px;font-family:Inter,Arial,sans-serif;color:#17202a\">',\n '<div style=\"max-width:620px;margin:auto;background:#ffffff;border-radius:12px;overflow:hidden\">',\n '<div style=\"background:#161b22;padding:22px 26px;color:#ffffff\">',\n emailLogo ? '<img src=\"' + safeHtml(emailLogo) + '\" alt=\"\" style=\"height:38px;width:38px;object-fit:contain;vertical-align:middle;margin-right:12px;border-radius:8px\">' : \"\",\n '<strong style=\"font-size:16px;vertical-align:middle\">' + safeHtml(branding.name) + \"</strong></div>\",\n '<div style=\"height:4px;background:' + safeHtml(accent) + '\"></div>',\n '<div style=\"padding:28px 26px\"><div style=\"color:#66727f;font-size:12px;margin-bottom:8px\">' + safeHtml(p.title) + \"</div>\",\n '<h1 style=\"font-size:22px;line-height:1.25;margin:0 0 18px\">' + safeHtml(subject) + \"</h1>\",\n '<div style=\"background:#f5f7f9;border-radius:10px;padding:18px;font-size:14px;line-height:1.7;white-space:pre-wrap\">' + safeHtml(comment.body) + \"</div>\",\n '<div style=\"margin-top:18px;font-size:12px;color:#66727f\">Added by ' + safeHtml(comment.author_name) + \" · \" + safeHtml(comment.event_date) + \"</div>\",\n projectUrl ? '<a href=\"' + safeHtml(projectUrl) + '\" style=\"display:inline-block;margin-top:22px;padding:12px 18px;border-radius:8px;background:' + safeHtml(accent) + ';color:#ffffff;font-weight:700;text-decoration:none\">Check Project Update →</a>' : \"\",\n \"</div></div></div>\",\n ].join(\"\");\n const logId = uid(), t = now();\n try {\n const response = await fetch(\"https://api.resend.com/emails\", {\n method: \"POST\",\n headers: { Authorization: `Bearer ${env.resend}`, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n from: `${branding.name} Updates <${senderEmail}>`,\n to: recipient, ...(cc.length ? { cc } : {}), subject, html,\n }),\n });\n const result = await response.json();\n if (!response.ok) throw new Error(str(result?.message || result?.name) || `Resend returned ${response.status}`);\n await db.execute({\n sql: \"INSERT INTO email_logs(id,project_id,comment_id,recipient,cc,subject,status,provider_id,created_at) VALUES(?,?,?,?,?,?, 'sent',?,?)\",\n args: [logId, p.id, comment.id || null, recipient, JSON.stringify(cc), subject, str(result?.id) || null, t],\n });\n return { sent: true, id: result?.id };\n } catch (e) {\n const message = e instanceof Error ? e.message : String(e);\n await db.execute({\n sql: \"INSERT INTO email_logs(id,project_id,comment_id,recipient,cc,subject,status,error,created_at) VALUES(?,?,?,?,?,?,'failed',?,?)\",\n args: [logId, p.id, comment.id || null, recipient, JSON.stringify(cc), subject, message, t],\n });\n return { sent: false, error: message };\n }\n}\nasync function addPdfHeader(doc: jsPDF, branding: any, title: string, subtitle: string, origin = \"\") {\n const [r, g, b] = hexRgb(branding.accent_color);\n doc.setFillColor(22, 27, 34); doc.rect(0, 0, 210, 38, \"F\");\n let brandX = 16;\n const logoUrl = str(branding.logo_url);\n if (logoUrl) {\n try {\n const resolved = /^https?:\\/\\//.test(logoUrl) ? logoUrl : logoUrl.startsWith(\"/\") && origin ? `${origin}${logoUrl}` : \"\";\n if (resolved) {\n const response = await fetch(resolved);\n const contentType = response.headers.get(\"content-type\") || \"\";\n if (response.ok && /image\\/(png|jpe?g)/i.test(contentType)) {\n const format = /jpe?g/i.test(contentType) ? \"JPEG\" : \"PNG\";\n doc.addImage(new Uint8Array(await response.arrayBuffer()), format, 16, 8, 22, 22, undefined, \"FAST\");\n brandX = 44;\n }\n }\n } catch {\n // A remote partner logo should never prevent document generation.\n }\n }\n doc.setTextColor(255, 255, 255); doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(15);\n doc.text(str(branding.name || \"AFLABS\"), brandX, 16);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(8); doc.setTextColor(210, 217, 225);\n doc.text(str(branding.portal_label || \"Project delivery\"), brandX, 23);\n const header = str(branding.document_header);\n if (header) {\n doc.setFontSize(7.5); doc.setTextColor(220, 226, 232);\n const lines = doc.splitTextToSize(header, 76).slice(0, 3);\n doc.text(lines, 194, 12, { align: \"right\" });\n }\n doc.setFillColor(r, g, b); doc.rect(0, 38, 210, 2.5, \"F\");\n doc.setTextColor(24, 31, 39); doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(21); doc.text(title, 16, 57);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(94, 105, 116); doc.text(subtitle, 16, 65);\n}\nfunction addPdfLines(doc: jsPDF, content: string, startY = 76, branding?: any) {\n let y = startY;\n const pageHeight = 297;\n for (const raw of content.split(\"\\n\")) {\n const line = raw.trimEnd();\n if (y > pageHeight - 26) {\n doc.addPage();\n y = 23;\n doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(8); doc.setTextColor(94, 105, 116);\n doc.text(str(branding?.name || \"AFLABS\"), 16, 13);\n const [r, g, b] = hexRgb(branding?.accent_color);\n doc.setDrawColor(r, g, b); doc.setLineWidth(.6); doc.line(16, 17, 194, 17);\n }\n if (/^#{1,3}\\s/.test(line)) {\n y += 3; doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(line.startsWith(\"# \") ? 15 : 11); doc.setTextColor(24, 31, 39);\n const text = line.replace(/^#{1,3}\\s+/, \"\");\n const wrapped = doc.splitTextToSize(text, 177); doc.text(wrapped, 16, y); y += wrapped.length * 6 + 3;\n } else if (/^[-*]\\s/.test(line)) {\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(50, 59, 68);\n const wrapped = doc.splitTextToSize(\"• \" + line.replace(/^[-*]\\s+/, \"\"), 171); doc.text(wrapped, 20, y); y += wrapped.length * 4.8 + 2;\n } else if (line) {\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(50, 59, 68);\n const wrapped = doc.splitTextToSize(line.replaceAll(\"**\", \"\"), 177); doc.text(wrapped, 16, y); y += wrapped.length * 4.8 + 2;\n } else y += 3;\n }\n}\nfunction addPdfFooter(doc: jsPDF, branding: any) {\n const pageCount = doc.getNumberOfPages();\n const footer = str(branding.document_footer);\n const contact = [str(branding.contact_info), str(branding.website_url)].filter(Boolean).join(\" · \");\n for (let page = 1; page <= pageCount; page++) {\n doc.setPage(page);\n doc.setDrawColor(218, 223, 228); doc.setLineWidth(.25); doc.line(16, 278, 194, 278);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(7); doc.setTextColor(105, 115, 125);\n const footerText = footer || contact || str(branding.name || \"AFLABS\");\n doc.text(doc.splitTextToSize(footerText, 137).slice(0, 2), 16, 284);\n if (contact && footer) doc.text(doc.splitTextToSize(contact, 137).slice(0, 1), 16, 291);\n doc.text(`Page ${page} of ${pageCount}`, 194, 286, { align: \"right\" });\n }\n}\nfunction addPdfSummaryCard(doc: jsPDF, rows: Array<[string, string]>, startY: number, branding: any) {\n const [r, g, b] = hexRgb(branding.accent_color);\n const height = 13 + rows.length * 10;\n doc.setFillColor(247, 249, 251); doc.roundedRect(16, startY, 178, height, 3, 3, \"F\");\n doc.setDrawColor(r, g, b); doc.setLineWidth(1); doc.line(16, startY, 16, startY + height);\n rows.forEach(([label, value], index) => {\n const y = startY + 10 + index * 10;\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(8); doc.setTextColor(94, 105, 116); doc.text(label, 22, y);\n doc.setFont(\"helvetica\", \"bold\"); doc.setTextColor(24, 31, 39); doc.text(value, 188, y, { align: \"right\" });\n });\n return startY + height + 8;\n}\nfunction pdfResponse(doc: jsPDF, filename: string) {\n return new Response(doc.output(\"arraybuffer\"), {\n headers: {\n \"Content-Type\": \"application/pdf\",\n \"Content-Disposition\": `inline; filename=\"${filename.replace(/[^a-z0-9._-]/gi, \"-\")}\"`,\n \"Cache-Control\": \"private, no-store\",\n },\n });\n}\nconst projectDraftSchema = {\n type: \"object\",\n properties: {\n title: { type: \"string\" }, description: { type: \"string\" },\n start_date: { type: \"string\" }, end_date: { type: \"string\" },\n project_type: { type: \"string\", enum: [\"Billable\", \"R&D\", \"Community\"] },\n currency: { type: \"string\" }, regular_cost: { type: \"number\" }, partner_cost: { type: \"number\" },\n contact_email: { type: \"string\" }, cc_emails: { type: \"array\", items: { type: \"string\" } },\n stakeholders: { type: \"array\", items: { type: \"object\", properties: {\n name: { type: \"string\" }, phone: { type: \"string\" }, email: { type: \"string\" },\n role: { type: \"string\" }, is_main_poc: { type: \"boolean\" }, email_cc: { type: \"boolean\" },\n }, required: [\"name\", \"phone\", \"email\", \"role\", \"is_main_poc\", \"email_cc\"], additionalProperties: false } },\n resources: { type: \"array\", items: { type: \"object\", properties: {\n label: { type: \"string\" }, url: { type: \"string\" }, link_type: { type: \"string\" },\n }, required: [\"label\", \"url\", \"link_type\"], additionalProperties: false } },\n credentials: { type: \"array\", items: { type: \"object\", properties: {\n label: { type: \"string\" }, username: { type: \"string\" }, secret: { type: \"string\" },\n url: { type: \"string\" }, notes: { type: \"string\" },\n }, required: [\"label\", \"username\", \"secret\", \"url\", \"notes\"], additionalProperties: false } },\n milestones: { type: \"array\", items: { type: \"object\", properties: {\n title: { type: \"string\" }, tag: { type: \"string\" }, description: { type: \"string\" },\n due_date: { type: \"string\" },\n }, required: [\"title\", \"tag\", \"description\", \"due_date\"], additionalProperties: false } },\n },\n required: [\"title\", \"description\", \"start_date\", \"end_date\", \"project_type\", \"currency\", \"regular_cost\",\n \"partner_cost\", \"contact_email\", \"cc_emails\", \"stakeholders\", \"resources\", \"credentials\", \"milestones\"],\n additionalProperties: false,\n};\nasync function aiProjectDraft(notes: string) {\n const response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: \"Extract a practical project record from rough notes. Do not invent unknown contact details, credentials, URLs, money, or dates: return empty strings, zero, or empty arrays. Dates must be YYYY-MM-DD. Do not create timeline comments.\",\n input: notes,\n text: { format: { type: \"json_schema\", name: \"project_draft\", schema: projectDraftSchema } },\n });\n return JSON.parse(response.output_text);\n}\nconst quotationSchema = {\n type: \"object\",\n properties: {\n title: { type: \"string\" },\n executive_summary: { type: \"string\" },\n scope: { type: \"array\", items: { type: \"string\" } },\n deliverables: { type: \"array\", items: { type: \"string\" } },\n assumptions: { type: \"array\", items: { type: \"string\" } },\n terms: { type: \"array\", items: { type: \"string\" } },\n pricing: { type: \"array\", items: { type: \"object\", properties: {\n item: { type: \"string\" }, amount: { type: \"number\" },\n }, required: [\"item\", \"amount\"], additionalProperties: false } },\n project: projectDraftSchema,\n },\n required: [\"title\", \"executive_summary\", \"scope\", \"deliverables\", \"assumptions\", \"terms\", \"pricing\", \"project\"],\n additionalProperties: false,\n};\nfunction quotationMarkdown(value: any, currency = \"INR\") {\n const section = (title: string, items: unknown[]) => items?.length\n ? `\\n## ${title}\\n${items.map((x) => `- ${str(x)}`).join(\"\\n\")}\\n` : \"\";\n const pricing = (value.pricing || []).map((x: any) => `- ${str(x.item)} — ${currency} ${Number(x.amount || 0).toLocaleString()}`).join(\"\\n\");\n const total = (value.pricing || []).reduce((sum: number, x: any) => sum + Number(x.amount || 0), 0);\n return [\n `# ${str(value.title) || \"Project quotation\"}`,\n value.executive_summary || \"\",\n section(\"Scope\", value.scope || []),\n section(\"Deliverables\", value.deliverables || []),\n pricing ? `\\n## Investment\\n${pricing}\\n\\n**Total — ${currency} ${total.toLocaleString()}**\\n` : \"\",\n section(\"Assumptions\", value.assumptions || []),\n section(\"Commercial terms\", value.terms || []),\n ].join(\"\\n\").trim();\n}\nasync function aiQuotation(notes: string) {\n const promptResult = await db.execute({ sql: \"SELECT setting_value FROM app_settings WHERE setting_key='proposal_prompt'\", args: [] });\n const prompt = str((promptResult.rows[0] as any)?.setting_value) ||\n \"Turn rough commercial notes into a concise, professional, ROI-aware project quotation and extract a reusable project record. Preserve supplied facts. Label assumptions. Do not invent dates, contact details, credentials, URLs, or money. Dates must be YYYY-MM-DD. Pricing amounts are numbers. Do not add timeline comments.\";\n const response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: prompt,\n input: notes,\n text: { format: { type: \"json_schema\", name: \"project_quotation\", schema: quotationSchema } },\n });\n return JSON.parse(response.output_text);\n}\nfunction projectInsertStatements(projectId: string, data: any, context: {\n actorType: string; actorId: string; ownerId: string; partnerId: string | null; status?: string;\n}) {\n const t = now();\n const clientPin = /^\\d{4,8}$/.test(str(data.client_pin)) ? str(data.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,markdown_details,status,archived,start_date,end_date,project_type,partner_id,lead_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(33).fill(\"?\").join(\",\")})`,\n args: [projectId, str(data.title) || \"Untitled project\", str(data.description), str(data.markdown_details), context.status || \"backlog\", 0,\n str(data.start_date) || null, str(data.end_date) || null,\n projectTypes.includes(data.project_type) ? data.project_type : \"Billable\", context.partnerId, str(data.lead_id) || null,\n Number(data.regular_cost) || 0, context.partnerId ? Number(data.partner_cost) || 0 : 0, str(data.currency) || \"INR\", 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin,\n context.partnerId ? str(data.commission_document_url) || null : null,\n str(data.contact_email) || null, JSON.stringify(emailList(data.cc_emails)),\n JSON.stringify(Array.isArray(data.notification_cc_ids) ? data.notification_cc_ids.map(str).filter(Boolean) : []),\n str(data.tax_label) || \"GST\", Math.max(0, Number(data.tax_rate) || 0), int(data.tax_inclusive),\n null, null, null, \"light\",\n context.ownerId || null,\n context.actorType, context.actorId, t, t],\n }];\n for (const x of Array.isArray(data.resources) ? data.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(data.credentials) ? data.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(data.stakeholders) ? data.stakeholders : []) {\n const stakeholderPhone = optionalPhone(x.phone);\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (str(x.name) && stakeholderPhone && stakeholderEmail) {\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), stakeholderPhone, stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(data.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(data.milestones) ? data.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n return { statements, clientPin };\n}\nfunction present(p: any, a: Actor) {\n const activeBlockedDays = p.blocked_since\n ? Math.max(1, Math.ceil((Date.now() - Date.parse(String(p.blocked_since))) / dayMs))\n : 0;\n const deliveryDelayDays = Math.max(0, Number(p.blocked_days) || 0) + activeBlockedDays;\n const baseCost = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const taxRate = Math.max(0, Number(p.tax_rate) || 0);\n const clientCost = Number(p.tax_inclusive) ? baseCost : baseCost * (1 + taxRate / 100);\n const x: any = {\n id: p.id, title: p.title, description: p.description, status: p.status,\n archived: Boolean(p.archived), start_date: p.start_date, end_date: p.end_date,\n lead_id: p.lead_id,\n project_type: p.project_type, partner_id: p.partner_id, partner_name: p.partner_name,\n progress: Number(p.progress), currency: p.currency, created_at: p.created_at,\n updated_at: p.updated_at,\n owner_user_id: p.owner_user_id, owner_name: p.owner_name,\n blocked_since: p.blocked_since, delivery_delay_days: deliveryDelayDays,\n forecast_end_date: p.end_date && deliveryDelayDays ? addDateDays(p.end_date, deliveryDelayDays) : p.end_date,\n client_cost: clientCost, tax_label: p.tax_label || \"GST\", tax_rate: taxRate,\n tax_inclusive: Boolean(p.tax_inclusive), branding: null,\n };\n if (a.actorType !== \"client\") Object.assign(x, {\n contact_email: p.contact_email, cc_emails: emailList(p.cc_emails),\n markdown_details: p.markdown_details || \"\",\n });\n if (a.actorType === \"internal\") Object.assign(x, {\n regular_cost: Number(p.regular_cost), partner_cost: Number(p.partner_cost),\n client_token: p.client_token, client_pin: p.client_pin,\n commission_document_url: p.commission_document_url,\n notification_cc_ids: parseJson(p.notification_cc_ids, []),\n });\n if (a.actorType === \"partner\" && p.status !== \"backlog\") Object.assign(x, {\n client_token: p.client_token, client_pin: p.client_pin,\n });\n return x;\n}\nfunction error(c: any, e: unknown) {\n const message = e instanceof Error ? e.message : \"Unexpected error\";\n if (message === \"AUTH_REQUIRED\") return c.json({ error: \"Please sign in to continue\" }, 401);\n if (/permission|Admins only|not available/.test(message)) return c.json({ error: message }, 403);\n if (/not found/i.test(message)) return c.json({ error: message }, 404);\n if (/required|invalid|select|must be|cannot|already exists/i.test(message)) return c.json({ error: message }, 400);\n console.error(e);\n return c.json({ error: message }, 400);\n}\n\napp.use(\"/api/*\", async (c, next) => {\n try { await migrate(); await growthSuite.migrate(); await next(); } catch (e) { return error(c, e); }\n});\napp.use(\"/api/*\", cachedApiResponse);\napp.get(\"/api/health\", (c) => c.json({ ok: true }));\napp.get(\"/api/config\", async (c) => {\n const [r, currentActor, databaseProvider] = await Promise.all([\n db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\"),\n session(c),\n lockedDatabaseProvider(),\n ]);\n return c.json({\n initialized: Number((r.rows[0] as any)?.count) > 0,\n actor: currentActor,\n databaseProvider,\n cacheEnabled: env.cacheEnabled,\n permissions: permissionDefinitions.map(([key, label]) => ({ key, label })),\n partnerPermissions: partnerPermissionDefinitions.map(([key, label]) => ({ key, label })),\n partnerPermissionPresets,\n projectTypes, statuses, commentTypes,\n countries: [{ code: \"+91\", label: \"India\" }, { code: \"+966\", label: \"Saudi Arabia\" }, { code: \"+971\", label: \"UAE\" }],\n });\n});\napp.post(\"/api/bootstrap\", async (c) => {\n const b = await body(c);\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count)) throw new Error(\"Bootstrap is no longer available\");\n if (str(b.token) !== env.bootstrap) throw new Error(\"Invalid bootstrap token\");\n const p = phone(b.phone), code = pin(b.pin), t = now(), userId = uid();\n await db.execute({\n sql: `INSERT INTO internal_users(id,name,phone,pin_hash,role,permissions,all_project_access,active,created_at,updated_at)\n VALUES(?,?,?,?,'admin',?,1,1,?,?)\n ON CONFLICT(phone) DO UPDATE SET name=excluded.name,pin_hash=excluded.pin_hash,role='admin',\n permissions=excluded.permissions,all_project_access=1,active=1,updated_at=excluded.updated_at`,\n args: [userId, str(b.name) || \"AFLABS Admin\", p, await hashPin(p, code), JSON.stringify(fullPermissions), t, t],\n });\n const adminRow = await db.execute({ sql: \"SELECT id FROM internal_users WHERE phone=?\", args: [p] });\n await newSession(c, \"internal\", String((adminRow.rows[0] as any).id));\n return c.json({ ok: true }, 201);\n});\napp.post(\"/api/auth/login\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"team\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"internal\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/partner\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"partner\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"partner\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/client\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"client\", b.token);\n if (limited) return limited;\n const r = await db.execute({ sql: \"SELECT id,client_pin FROM projects WHERE client_token=?\", args: [str(b.token)] });\n const p = r.rows[0] as any;\n if (!p || str(b.pin) !== String(p.client_pin)) return c.json({ error: \"Invalid project link or PIN\" }, 401);\n await newSession(c, \"client\", `client:${p.id}`, String(p.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/logout\", async (c) => {\n const raw = getCookie(c, \"aflabs_session\");\n if (raw) await db.execute({ sql: \"DELETE FROM sessions WHERE token_hash=?\", args: [await sha(`${env.session}:session:${raw}`)] });\n deleteCookie(c, \"aflabs_session\", { path: \"/\" });\n return c.json({ ok: true });\n});\napp.get(\"/api/me\", async (c) => c.json({ actor: await session(c) }));\napp.get(\"/api/user-options\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT id,name,role FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name\");\n return c.json({ users: r.rows });\n});\napp.get(\"/api/dashboard\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Dashboard is not available\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid FROM payments GROUP BY project_id\n ), recent_projects AS (\n SELECT DISTINCT project_id FROM comments WHERE created_at>=?\n )\n SELECT p.id,p.status,p.progress,p.currency,p.end_date,p.regular_cost,p.partner_cost,p.partner_id,\n COALESCE(pt.paid,0) paid,CASE WHEN rp.project_id IS NULL THEN 0 ELSE 1 END recent_activity\n FROM projects p LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN recent_projects rp ON rp.project_id=p.id WHERE p.archived=0`;\n const args: any[] = [new Date(Date.now() - 14 * 86400000).toISOString()];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n const rows = (await db.execute({ sql, args })).rows as any[];\n const active = rows.filter((x) => x.status !== \"done\");\n let unansweredQuestions: any[] = [];\n if ((a.actorType === \"partner\" || can(a, \"manage_comments\")) && rows.length) {\n const projectIds = rows.map((x) => String(x.id));\n const questions = await db.execute({\n sql: `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n s.role stakeholder_role FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL\n AND c.project_id IN (${projectIds.map(() => \"?\").join(\",\")})\n ORDER BY c.created_at DESC`,\n args: projectIds,\n });\n unansweredQuestions = questions.rows as any[];\n }\n const nextStart = new Date(); nextStart.setUTCDate(1); nextStart.setUTCMonth(nextStart.getUTCMonth() + 1);\n const nextEnd = new Date(nextStart); nextEnd.setUTCMonth(nextEnd.getUTCMonth() + 1);\n const sumByCurrency = (items: any[], value: (x: any) => number) => Object.entries(items.reduce((all: any, x) => {\n all[x.currency] = (all[x.currency] || 0) + value(x); return all;\n }, {})).map(([currency, amount]) => ({ currency, amount: Number(amount) }));\n return c.json({\n active_count: active.length,\n status_counts: Object.fromEntries(statuses.map((status) => [status, rows.filter((x) => x.status === status).length])),\n average_completion: active.length ? Math.round(active.reduce((sum, x) => sum + Number(x.progress), 0) / active.length) : 0,\n north_star: active.length ? Math.round(active.filter((x) => Number(x.recent_activity)).length / active.length * 100) : 0,\n unanswered_count: unansweredQuestions.length,\n unanswered_questions: unansweredQuestions.slice(0, 3),\n earnings: sumByCurrency(rows, (x) => Number(x.paid)),\n next_month: sumByCurrency(active.filter((x) => {\n const end = x.end_date ? new Date(`${String(x.end_date).slice(0, 10)}T00:00:00Z`) : null;\n return end && end >= nextStart && end < nextEnd;\n }), (x) => Math.max(0, Number(x.partner_id ? x.partner_cost : x.regular_cost) - Number(x.paid))),\n });\n});\n\napp.get(\"/api/questions\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Questions are available to the project team\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n let sql = `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n p.status project_status,s.role stakeholder_role\n FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE p.archived=0 AND c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL`;\n const args: any[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND p.partner_id=? AND p.status<>'backlog'\";\n args.push(a.actorId);\n } else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY c.created_at ASC\";\n const result = await db.execute({ sql, args });\n return c.json({ questions: result.rows });\n});\n\napp.get(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project list is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"view_projects\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid_amount FROM payments GROUP BY project_id\n ), question_totals AS (\n SELECT project_id,COUNT(*) unanswered_count FROM comments\n WHERE comment_type='question' AND parent_id IS NULL AND resolved_at IS NULL GROUP BY project_id\n ), unread_totals AS (\n SELECT c.project_id,COUNT(*) unread_count FROM comments c\n LEFT JOIN activity_reads r ON r.project_id=c.project_id AND r.actor_type=? AND r.actor_id=?\n WHERE c.created_at>COALESCE(r.last_read_at,'1970-01-01') GROUP BY c.project_id\n )\n SELECT p.*,pa.name partner_name,ou.name owner_name,COALESCE(pt.paid_amount,0) paid_amount,\n COALESCE(ut.unread_count,0) unread_count,COALESCE(qt.unanswered_count,0) unanswered_count\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id\n LEFT JOIN internal_users ou ON ou.id=p.owner_user_id\n LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN question_totals qt ON qt.project_id=p.id\n LEFT JOIN unread_totals ut ON ut.project_id=p.id\n WHERE p.archived=?`;\n const args: any[] = [a.actorType, a.actorId, c.req.query(\"archived\") === \"1\" ? 1 : 0];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (a.actorType === \"internal\" && !a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY p.updated_at DESC\";\n const r = await db.execute({ sql, args });\n return c.json({ projects: r.rows.map((p: any) => ({\n ...present(p, a), paid_amount: Number(p.paid_amount), unread_count: Number(p.unread_count),\n unanswered_count: Number(p.unanswered_count),\n })) });\n});\napp.post(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project creation is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"create_projects\");\n const b = await body(c), title = str(b.title);\n if (!title) throw new Error(\"Project title is required\");\n if (a.actorType === \"partner\" && !can(a, \"create_projects\")) throw new Error(\"You do not have permission for this action\");\n const leadId = str(b.lead_id);\n if (!leadId) throw new Error(\"Select the lead that started this project\");\n const leadResult = await db.execute({ sql: \"SELECT id,partner_id FROM leads WHERE id=?\", args: [leadId] });\n const sourceLead = leadResult.rows[0] as any;\n if (!sourceLead || (a.actorType === \"partner\" && String(sourceLead.partner_id || \"\") !== a.actorId)) throw new Error(\"Lead not found\");\n const projectId = uid(), t = now();\n if (!str(b.description).includes(\"\\n\")) b.description = str(b.description).slice(0, 240);\n else throw new Error(\"Project description must be a single line; use Markdown details for longer notes\");\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(b.partner_id || sourceLead.partner_id) || null;\n if (sourceLead.partner_id && partnerId && String(sourceLead.partner_id) !== partnerId) throw new Error(\"Project partner must match the lead partner\");\n b.lead_id = leadId;\n const status = a.actorType === \"partner\" ? \"backlog\" : statuses.includes(b.status) ? b.status : \"backlog\";\n if (status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n const clientPin = /^\\d{4,8}$/.test(str(b.client_pin)) ? str(b.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const notificationCcIds = Array.isArray(b.notification_cc_ids)\n ? b.notification_cc_ids.map(str).filter(Boolean)\n : (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id);\n let ownerId = a.actorType === \"internal\" ? str(b.owner_user_id) || (admin(a) ? \"\" : a.actorId) : \"\";\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id) || \"\";\n }\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,markdown_details,status,archived,start_date,end_date,project_type,partner_id,lead_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(33).fill(\"?\").join(\",\")})`,\n args: [projectId, title, str(b.description), str(b.markdown_details), status, 0, str(b.start_date) || null, str(b.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : \"Billable\", partnerId, str(b.lead_id) || null, Number(b.regular_cost) || 0,\n partnerId ? Number(b.partner_cost) || 0 : 0, str(b.currency) || \"INR\",\n status === \"done\" ? 100 : admin(a) ? Math.max(0, Math.min(100, Number(b.progress) || 0)) : 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin, partnerId ? str(b.commission_document_url) || null : null,\n str(b.contact_email) || null, JSON.stringify(emailList(b.cc_emails)), JSON.stringify(notificationCcIds),\n str(b.tax_label) || \"GST\", Math.max(0, Number(b.tax_rate) || 0), int(b.tax_inclusive),\n null, null, null, \"light\",\n ownerId || null, a.actorType, a.actorId, t, t],\n }];\n if (a.actorType === \"internal\" && !admin(a)) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [a.actorId, projectId],\n });\n for (const x of Array.isArray(b.resources) ? b.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(b.credentials) ? b.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(b.stakeholders) ? b.stakeholders : []) {\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (!str(x.name) || !str(x.phone) || !stakeholderEmail) continue;\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), phone(x.phone), stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(b.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(b.milestones) ? b.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n statements.push(\n { sql: \"UPDATE leads SET stage='won',updated_at=? WHERE id=?\", args: [t, leadId] },\n { sql: \"INSERT INTO lead_events(id,lead_id,event_type,title,details,metadata,actor_type,actor_id,actor_name,occurred_at,created_at) VALUES(?,?,'project','Project created from lead',?,?,?,?,?,?,?)\", args: [uid(), leadId, title, JSON.stringify({ project_id: projectId }), a.actorType, a.actorId, a.name, t, t] },\n );\n await db.batch(statements);\n return c.json({ ok: true, id: projectId, client_pin: clientPin }, 201);\n});\n\napp.get(\"/api/projects/:id\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const projectId = String(p.id);\n const visibility = a.actorType === \"client\" ? \"AND visibility IN ('client','both')\" :\n a.actorType === \"partner\" ? \"AND (visibility IN ('client','both') OR (author_type='partner' AND author_id=?))\" : \"\";\n const [links, credentials, stakeholders, milestones, comments, payments, invoices, notificationCcOptions] = await Promise.all([\n db.execute({ sql: `SELECT * FROM project_links WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY created_at DESC`, args: [projectId] }),\n (a.actorType === \"internal\" && can(a, \"view_credentials\")) || a.actorType === \"partner\"\n ? db.execute({ sql: \"SELECT * FROM project_credentials WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] })\n : Promise.resolve({ rows: [] }),\n db.execute({ sql: \"SELECT * FROM stakeholders WHERE project_id=? ORDER BY name\", args: [projectId] }),\n db.execute({ sql: `SELECT * FROM milestones WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY COALESCE(completed_date,due_date,created_at),created_at`, args: [projectId] }),\n db.execute({\n sql: `SELECT c.*,s.name stakeholder_name,s.role stakeholder_role FROM comments c\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id WHERE c.project_id=? ${visibility}\n ORDER BY c.event_date DESC,c.created_at DESC`,\n args: a.actorType === \"partner\" ? [projectId, a.actorId] : [projectId],\n }),\n db.execute({ sql: \"SELECT * FROM payments WHERE project_id=? ORDER BY paid_date DESC,created_at DESC\", args: [projectId] }),\n a.actorType === \"client\" ? Promise.resolve({ rows: [] }) :\n db.execute({ sql: \"SELECT * FROM invoices WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] }),\n a.actorType === \"internal\" && admin(a) ? ccRecipients() : Promise.resolve([]),\n ]);\n const paid = payments.rows.reduce((sum: number, x: any) => sum + Number(x.amount), 0);\n const baseTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const total = Number(p.tax_inclusive) ? baseTotal : baseTotal * (1 + Math.max(0, Number(p.tax_rate) || 0) / 100);\n const commentRows = [...comments.rows] as any[];\n for (const payment of payments.rows as any[]) {\n const represented = commentRows.some((comment: any) =>\n String(comment.payment_id || \"\") === String(payment.id) ||\n (!comment.payment_id && comment.comment_type === \"payment\" && comment.event_date === payment.paid_date &&\n String(comment.body || \"\").includes(Number(payment.amount).toLocaleString()))\n );\n if (!represented) commentRows.push({\n id: `payment-${payment.id}`,\n project_id: projectId,\n author_type: payment.created_by_type,\n author_id: payment.created_by_id,\n author_name: payment.created_by_type === \"partner\" ? (p.partner_name || \"Partner\") : \"Project team\",\n body: `Payment received: ${payment.currency} ${Number(payment.amount).toLocaleString()}${payment.note ? ` · ${payment.note}` : \"\"}`,\n comment_type: \"payment\",\n visibility: \"both\",\n event_date: payment.paid_date,\n payment_id: payment.id,\n created_at: payment.created_at,\n });\n }\n commentRows.sort((a: any, b: any) =>\n String(b.event_date).localeCompare(String(a.event_date)) || String(b.created_at).localeCompare(String(a.created_at))\n );\n const project = present(p, a);\n const [baseBranding, currentHoliday] = await Promise.all([\n getClientBranding(),\n a.actorType === \"client\" ? holidayStatus() : Promise.resolve(null),\n ]);\n project.branding = p.partner_id ? effectivePartnerBranding(p, baseBranding) : baseBranding;\n return c.json({\n project, links: links.rows, credentials: credentials.rows,\n stakeholders: a.actorType === \"client\"\n ? stakeholders.rows.map((x: any) => ({ id: x.id, name: x.name, role: x.role }))\n : stakeholders.rows,\n milestones: milestones.rows, comments: commentRows,\n payments: a.actorType === \"client\" ? [] : payments.rows,\n invoices: invoices.rows.map((x: any) => ({ ...x, milestone_ids: parseJson(x.milestone_ids, []), items: parseJson(x.items, []), total: Number(x.total || x.amount) })),\n paymentSummary: { total, paid, pending: Math.max(0, total - paid), currency: p.currency },\n notificationCcOptions,\n holiday: currentHoliday,\n });\n});\napp.patch(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"edit_projects\");\n else if (!can(a, \"edit_owned_projects\")) throw new Error(\"You do not have permission for this action\");\n const p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const b = await body(c);\n if (a.actorType === \"partner\" && [\"partner_id\", \"lead_id\", \"regular_cost\", \"partner_cost\", \"currency\", \"tax_rate\", \"tax_inclusive\", \"owner_user_id\", \"progress\", \"archived\"].some((key) => b[key] !== undefined)) {\n throw new Error(\"Partners cannot change ownership or internal commercial fields\");\n }\n if (b.status !== undefined) {\n if (a.actorType === \"internal\") requireCan(a, \"move_projects\");\n else if (!can(a, \"manage_owned_projects\")) throw new Error(\"You do not have permission for this action\");\n if (!statuses.includes(b.status)) throw new Error(\"Invalid project status\");\n if (b.status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n }\n if (b.progress !== undefined && !admin(a)) throw new Error(\"Admins only can change project completion\");\n if (b.archived !== undefined) requireCan(a, \"archive_projects\");\n const t = now();\n const nextStatus = b.status ?? p.status;\n const nextPartnerId = a.actorType === \"partner\" ? p.partner_id : b.partner_id === undefined ? p.partner_id : str(b.partner_id) || null;\n let blockedSince = p.blocked_since || null;\n let blockedDays = Math.max(0, Number(p.blocked_days) || 0);\n const statements: any[] = [];\n if (p.status !== \"blocked\" && nextStatus === \"blocked\") {\n blockedSince = t;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'blocker','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n \"Project moved to Blocked. The delivery forecast will show the active delay until this blocker is cleared.\",\n t.slice(0, 10), t],\n });\n } else if (p.status === \"blocked\" && nextStatus !== \"blocked\") {\n const elapsed = Math.max(1, dateDays(blockedSince || t, t));\n blockedDays += elapsed;\n blockedSince = null;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'update','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n `Blocker cleared after ${elapsed} ${elapsed === 1 ? \"day\" : \"days\"}. The delivery forecast now includes ${blockedDays} delayed ${blockedDays === 1 ? \"day\" : \"days\"}.`,\n t.slice(0, 10), t],\n });\n }\n const nextProgress = nextStatus === \"done\"\n ? 100\n : b.progress === undefined ? Number(p.progress) : Math.max(0, Math.min(100, Number(b.progress) || 0));\n statements.unshift({\n sql: `UPDATE projects SET title=?,description=?,markdown_details=?,status=?,archived=?,start_date=?,end_date=?,\n project_type=?,partner_id=?,lead_id=?,regular_cost=?,partner_cost=?,currency=?,progress=?,client_pin=?,\n commission_document_url=?,contact_email=?,cc_emails=?,notification_cc_ids=?,\n tax_label=?,tax_rate=?,tax_inclusive=?,owner_user_id=?,blocked_since=?,blocked_days=?,updated_at=? WHERE id=?`,\n args: [\n str(b.title ?? p.title) || p.title, str(b.description ?? p.description).replace(/[\\r\\n]+/g, \" \").slice(0, 240), str(b.markdown_details ?? p.markdown_details), nextStatus,\n b.archived === undefined ? Number(p.archived) : int(b.archived),\n str(b.start_date ?? p.start_date) || null, str(b.end_date ?? p.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : p.project_type,\n nextPartnerId, b.lead_id === undefined ? p.lead_id : str(b.lead_id) || null,\n b.regular_cost === undefined ? Number(p.regular_cost) : Number(b.regular_cost) || 0,\n nextPartnerId ? (b.partner_cost === undefined ? Number(p.partner_cost) : Number(b.partner_cost) || 0) : 0,\n str(b.currency ?? p.currency) || \"INR\",\n nextProgress,\n b.client_pin === undefined ? p.client_pin : pin(b.client_pin),\n nextPartnerId\n ? (b.commission_document_url === undefined ? p.commission_document_url : str(b.commission_document_url) || null)\n : null,\n b.contact_email === undefined ? p.contact_email : str(b.contact_email) || null,\n b.cc_emails === undefined ? p.cc_emails : JSON.stringify(emailList(b.cc_emails)),\n !admin(a) || b.notification_cc_ids === undefined\n ? p.notification_cc_ids\n : JSON.stringify(Array.isArray(b.notification_cc_ids) ? b.notification_cc_ids.map(str).filter(Boolean) : []),\n str(b.tax_label ?? p.tax_label) || \"GST\",\n b.tax_rate === undefined ? Number(p.tax_rate) : Math.max(0, Number(b.tax_rate) || 0),\n b.tax_inclusive === undefined ? Number(p.tax_inclusive) : int(b.tax_inclusive),\n b.owner_user_id === undefined ? p.owner_user_id : str(b.owner_user_id) || null,\n blockedSince, blockedDays, t, p.id,\n ],\n });\n await db.batch(statements);\n return c.json({ ok: true, progress: nextProgress, delivery_delay_days: blockedDays });\n});\napp.post(\"/api/projects/:id/extensions\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"edit_projects\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const previousEndDate = str(p.end_date).slice(0, 10);\n const newEndDate = str(b.new_end_date).slice(0, 10);\n const reason = str(b.reason);\n if (!previousEndDate) throw new Error(\"Set a project end date before extending it\");\n const days = dateDays(previousEndDate, newEndDate);\n if (!newEndDate || days < 1) throw new Error(\"The new end date must be later than the current end date\");\n if (!reason) throw new Error(\"Explain the external reason for this extension\");\n const t = now(), extensionId = uid();\n await db.batch([\n {\n sql: \"UPDATE projects SET end_date=?,updated_at=? WHERE id=?\",\n args: [newEndDate, t, p.id],\n },\n {\n sql: `INSERT INTO schedule_extensions(id,project_id,previous_end_date,new_end_date,days,reason,created_by_type,created_by_id,created_at)\n VALUES(?,?,?,?,?,?,?,?,?)`,\n args: [extensionId, p.id, previousEndDate, newEndDate, days, reason, a.actorType, a.actorId, t],\n },\n {\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'schedule-extension','both',?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name,\n `Target date extended by ${days} ${days === 1 ? \"day\" : \"days\"}, from ${previousEndDate} to ${newEndDate}. Reason: ${reason}`,\n str(b.event_date).slice(0, 10) || t.slice(0, 10), t],\n },\n ]);\n return c.json({ ok: true, days, end_date: newEndDate });\n});\napp.delete(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete projects\");\n const confirmation = await body(c);\n const left = Number(confirmation.left), right = Number(confirmation.right), answer = Number(confirmation.answer);\n if (!Number.isInteger(left) || !Number.isInteger(right) || left < 2 || left > 20 || right < 2 || right > 20 || answer !== left + right) {\n throw new Error(\"Incorrect deletion confirmation answer\");\n }\n if (!await allowedProject(c.req.param(\"id\"), a)) throw new Error(\"Project not found\");\n const projectId = c.req.param(\"id\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM activity_reads WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM user_project_access WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_links WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_credentials WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM email_logs WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM invoices WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM schedule_extensions WHERE project_id=?\", args: [projectId] },\n { sql: \"UPDATE proposals SET project_id=NULL,status=CASE WHEN status='converted' THEN 'draft' ELSE status END WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM milestones WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM comments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM payments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM stakeholders WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM projects WHERE id=?\", args: [projectId] },\n ]);\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/read\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n await db.execute({\n sql: `INSERT INTO activity_reads(actor_type,actor_id,project_id,last_read_at) VALUES(?,?,?,?)\n ON CONFLICT(actor_type,actor_id,project_id) DO UPDATE SET last_read_at=excluded.last_read_at`,\n args: [a.actorType, a.actorId, p.id, now()],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/comments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n requirePartnerReady(a, p);\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const b = await body(c), text = str(b.body);\n if (!text) throw new Error(\"Comment text is required\");\n let stakeholderId = str(b.stakeholder_id) || null, authorName = a.name;\n if (a.actorType === \"client\") {\n if (!stakeholderId) throw new Error(\"Select the stakeholder asking this question\");\n const s = await db.execute({ sql: \"SELECT name FROM stakeholders WHERE id=? AND project_id=?\", args: [stakeholderId, p.id] });\n if (!s.rows[0]) throw new Error(\"Stakeholder not found\");\n authorName = String((s.rows[0] as any).name);\n }\n const t = now(), commentId = uid();\n const commentType = a.actorType === \"client\" ? \"question\" : commentTypes.includes(b.comment_type) ? b.comment_type : \"update\";\n const eventDate = str(b.event_date) || t.slice(0, 10);\n await db.execute({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,stakeholder_id,\n body,comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [commentId, p.id, str(b.parent_id) || null, a.actorType, a.actorId, authorName, stakeholderId, text,\n commentType,\n a.actorType === \"client\" ? \"both\" : [\"admin\", \"client\", \"both\"].includes(b.visibility) ? b.visibility : \"both\",\n eventDate, t],\n });\n const email = a.actorType !== \"client\" && b.send_email\n ? await sendProjectEmail(p, { id: commentId, body: text, author_name: authorName, comment_type: commentType, event_date: eventDate }, \"update\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email }, 201);\n});\napp.post(\"/api/comments/:id/resolve\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const r = await db.execute({ sql: \"SELECT * FROM comments WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = r.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Comment not found\");\n requirePartnerReady(a, p);\n const b = await body(c), t = now(), statements: any[] = [\n { sql: \"UPDATE comments SET resolved_at=? WHERE id=?\", args: [t, item.id] },\n ];\n const replyId = uid();\n if (str(b.reply)) statements.push({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,body,\n comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,'update','both',?,?)`,\n args: [replyId, item.project_id, item.id, a.actorType, a.actorId, a.name, str(b.reply), t.slice(0, 10), t],\n });\n await db.batch(statements);\n const email = b.send_email && str(b.reply)\n ? await sendProjectEmail(p, { id: replyId, body: str(b.reply), author_name: a.name, comment_type: \"update\", event_date: t.slice(0, 10) }, \"reply\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email });\n});\n\napp.post(\"/api/projects/:id/links\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_links\");\n requirePartnerReady(a, p);\n if (!str(b.label) || !/^https?:\\/\\//.test(str(b.url))) throw new Error(\"A label and valid URL are required\");\n await db.execute({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.url), str(b.link_type) || \"reference\", int(b.client_visible !== false), now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/links/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_links\");\n await db.execute({ sql: \"DELETE FROM project_links WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/credentials\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_credentials\");\n requirePartnerReady(a, p);\n if (!str(b.label)) throw new Error(\"Credential label is required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.username) || null, str(b.secret) || null, str(b.url) || null, str(b.notes) || null, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/credentials/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_credentials\");\n await db.execute({ sql: \"DELETE FROM project_credentials WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/stakeholders\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n if (!str(b.name)) throw new Error(\"Stakeholder name is required\");\n const stakeholderEmail = emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const existing = await db.execute({ sql: \"SELECT COUNT(*) count FROM stakeholders WHERE project_id=?\", args: [p.id] });\n const main = Boolean(b.is_main_poc) || !Number((existing.rows[0] as any)?.count);\n const stakeholderId = uid();\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [p.id] });\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [stakeholderId, p.id, str(b.name), phone(b.phone), stakeholderEmail, str(b.role), int(main), int(!main && b.email_cc), now()],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(p.id));\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n const b = await body(c);\n const stakeholderEmail = b.email === undefined ? item.email : emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const main = b.is_main_poc === undefined ? Boolean(item.is_main_poc) : Boolean(b.is_main_poc);\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [item.project_id] });\n statements.push({\n sql: `UPDATE stakeholders SET name=?,phone=?,email=?,role=?,is_main_poc=?,email_cc=? WHERE id=?`,\n args: [\n str(b.name ?? item.name) || item.name,\n b.phone === undefined ? item.phone : phone(b.phone),\n stakeholderEmail,\n str(b.role ?? item.role),\n int(main),\n int(!main && (b.email_cc === undefined ? Boolean(item.email_cc) : Boolean(b.email_cc))),\n item.id,\n ],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\napp.delete(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n await db.execute({ sql: \"DELETE FROM stakeholders WHERE id=?\", args: [item.id] });\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/milestones\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (!str(b.title)) throw new Error(\"Milestone title is required\");\n const t = now();\n await db.execute({\n sql: `INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,completed_date,\n client_visible,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?)`,\n args: [uid(), p.id, str(b.title), str(b.tag) || \"Milestone\", str(b.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : \"upcoming\",\n str(b.due_date) || null, str(b.completed_date) || null, int(b.client_visible !== false), t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const r = await db.execute({ sql: \"SELECT * FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || !await allowedProject(String(x.project_id), a)) throw new Error(\"Milestone not found\");\n await db.execute({\n sql: \"UPDATE milestones SET title=?,tag=?,description=?,status=?,due_date=?,completed_date=?,client_visible=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? x.title) || x.title, str(b.tag ?? x.tag) || \"Milestone\", str(b.description ?? x.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : x.status,\n str(b.due_date ?? x.due_date) || null, str(b.completed_date ?? x.completed_date) || null,\n b.client_visible === undefined ? Number(x.client_visible) : int(b.client_visible), now(), x.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n await db.execute({ sql: \"DELETE FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/payments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_payments\");\n const b = await body(c), amount = Number(b.amount);\n if (!(amount > 0)) throw new Error(\"Payment amount must be greater than zero\");\n const sums = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) paid FROM payments WHERE project_id=?\", args: [p.id] });\n const total = Number(p.partner_id ? p.partner_cost : p.regular_cost), paid = Number((sums.rows[0] as any)?.paid);\n if (total > 0 && paid + amount > total + .0001) throw new Error(`Payment exceeds the pending amount of ${p.currency} ${Math.max(0, total - paid)}`);\n const t = now(), date = str(b.paid_date) || t.slice(0, 10), note = str(b.note), paymentId = uid();\n const pending = Math.max(0, total - paid - amount);\n const paymentBody = `Payment received: ${p.currency} ${amount.toLocaleString()}${note ? ` · ${note}` : \"\"}. Pending: ${p.currency} ${pending.toLocaleString()}.`;\n await db.batch([\n { sql: \"INSERT INTO payments(id,project_id,amount,currency,paid_date,note,created_by_type,created_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [paymentId, p.id, amount, p.currency, date, note, a.actorType, a.actorId, t] },\n { sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,payment_id,created_at)\n VALUES(?,?,?,?,?,?,'payment','both',?,?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name, paymentBody, date, paymentId, t] },\n ]);\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/payments/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_payments\");\n await db.batch([\n { sql: \"DELETE FROM comments WHERE payment_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM payments WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/admin/ai/project-draft\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create projects with AI\");\n const notes = str((await body(c)).notes);\n if (notes.length < 10) throw new Error(\"Add a little more project context for AI extraction\");\n return c.json({ draft: await aiProjectDraft(notes) });\n});\napp.get(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage proposals\");\n const r = await db.execute(`SELECT q.*,p.name partner_name FROM proposals q\n LEFT JOIN partners p ON p.id=q.partner_id ORDER BY q.updated_at DESC`);\n return c.json({ proposals: r.rows.map((x: any) => ({ ...x, structured_data: parseJson(x.structured_data, {}) })) });\n});\napp.post(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create proposals\");\n const b = await body(c), notes = str(b.notes || b.markdown_content);\n if (notes.length < 10) throw new Error(\"Add rough notes or Markdown for the proposal\");\n const structured = b.use_ai === false ? (b.structured_data || { project: {} }) : await aiQuotation(notes);\n const currency = str(b.currency || structured?.project?.currency) || \"INR\";\n const markdown = str(b.markdown_content) || quotationMarkdown(structured, currency);\n const total = Number(b.total) || (structured.pricing || []).reduce((sum: number, x: any) => sum + Number(x.amount || 0), 0);\n const id = uid(), t = now();\n await db.execute({\n sql: `INSERT INTO proposals(id,title,markdown_content,structured_data,partner_id,currency,total,status,\n created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,'draft',?,?,?)`,\n args: [id, str(b.title || structured.title) || \"Project quotation\", markdown, JSON.stringify(structured),\n str(b.partner_id) || null, currency, total, a.actorId, t, t],\n });\n return c.json({ ok: true, id }, 201);\n});\napp.patch(\"/api/admin/proposals/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can update proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n await db.execute({\n sql: \"UPDATE proposals SET title=?,markdown_content=?,partner_id=?,currency=?,total=?,status=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? q.title) || q.title, str(b.markdown_content ?? q.markdown_content),\n b.partner_id === undefined ? q.partner_id : str(b.partner_id) || null,\n str(b.currency ?? q.currency) || \"INR\", b.total === undefined ? Number(q.total) : Number(b.total) || 0,\n [\"draft\", \"sent\", \"accepted\", \"declined\", \"converted\"].includes(b.status) ? b.status : q.status, now(), q.id],\n });\n return c.json({ ok: true });\n});\napp.get(\"/api/admin/proposals/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can view proposal PDFs\");\n const r = await db.execute({ sql: `SELECT q.*,p.brand_name,p.logo_url,p.accent_color,p.contact_info,p.website_url,\n p.document_header,p.document_footer\n FROM proposals q LEFT JOIN partners p ON p.id=q.partner_id WHERE q.id=?`, args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any;\n if (!q) throw new Error(\"Proposal not found\");\n const branding = q.partner_id ? effectivePartnerBranding(q, await getClientBranding()) : await getClientBranding();\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, q.title, `Quotation · ${q.currency} ${Number(q.total).toLocaleString()}`, new URL(c.req.url).origin);\n addPdfLines(doc, q.markdown_content, 76, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${q.title}-quotation.pdf`);\n});\napp.post(\"/api/admin/proposals/:id/convert\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can convert proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n if (q.project_id) return c.json({ ok: true, id: q.project_id, existing: true });\n const structured = parseJson<any>(q.structured_data, {});\n const draft = { ...(structured.project || {}), title: structured.project?.title || q.title,\n currency: structured.project?.currency || q.currency,\n notification_cc_ids: (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id) };\n let ownerId = str(b.owner_user_id);\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id);\n }\n const requestedLeadId = str(b.lead_id || draft.lead_id);\n const existingLead = requestedLeadId ? (await db.execute({ sql: \"SELECT id FROM leads WHERE id=?\", args: [requestedLeadId] })).rows[0] : null;\n const leadId = existingLead ? requestedLeadId : uid();\n draft.lead_id = leadId;\n draft.markdown_details = str(draft.markdown_details || q.markdown_content);\n const projectId = uid();\n const built = projectInsertStatements(projectId, draft, {\n actorType: \"internal\", actorId: a.actorId, ownerId, partnerId: str(q.partner_id) || null, status: \"backlog\",\n });\n if (!existingLead) built.statements.unshift({\n sql: \"INSERT INTO leads(id,title,company_name,contact_name,contact_email,contact_phone,category,business_type,source,stage,priority,expected_budget,currency,partner_id,owner_user_id,requirements_markdown,pain_points,inside_info,use_case_hint,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,'won','medium',?,?,?,?,?,?,?,?,?,?,?,?)\",\n args: [leadId, str(draft.title || q.title), str(draft.client_brand_name), \"\", str(draft.contact_email), \"\", str(draft.project_type), \"\", \"Proposal conversion\", Number(q.total) || 0, str(q.currency) || \"INR\", str(q.partner_id) || null, ownerId || null, q.markdown_content, str(draft.description), \"\", \"\", \"internal\", a.actorId, now(), now()],\n });\n built.statements.push({\n sql: \"UPDATE proposals SET project_id=?,status='converted',updated_at=? WHERE id=?\",\n args: [projectId, now(), q.id],\n });\n await db.batch(built.statements);\n return c.json({ ok: true, id: projectId, client_pin: built.clientPin }, 201);\n});\n\napp.get(\"/api/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT * FROM milestone_templates WHERE active=1 ORDER BY name\");\n return c.json({ templates: r.rows.map((x: any) => ({ ...x, items: parseJson(x.items, []) })) });\n});\napp.post(\"/api/admin/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create milestone templates\");\n const b = await body(c);\n const items = (Array.isArray(b.items) ? b.items : str(b.items).split(\"\\n\").map((title) => ({ title })))\n .map((x: any) => typeof x === \"string\" ? { title: str(x), tag: \"Milestone\", description: \"\" } : {\n title: str(x.title), tag: str(x.tag) || \"Milestone\", description: str(x.description),\n }).filter((x: any) => x.title);\n if (!str(b.name) || !items.length) throw new Error(\"Template name and at least one milestone are required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO milestone_templates(id,name,description,items,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), str(b.name), str(b.description), JSON.stringify(items), a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/admin/milestone-templates/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete milestone templates\");\n const result = await db.execute({\n sql: \"UPDATE milestone_templates SET active=0,updated_at=? WHERE id=? AND active=1\",\n args: [now(), c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Milestone template not found\");\n return c.json({ ok: true });\n});\napp.get(\"/api/quick-notes\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute(\n \"SELECT id,title,shortcut,body,created_at,updated_at FROM quick_notes WHERE active=1 ORDER BY title\",\n );\n return c.json({ quick_notes: result.rows });\n});\napp.post(\"/api/admin/quick-notes\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create quick notes\");\n const b = await body(c);\n const title = str(b.title);\n const noteBody = str(b.body);\n const shortcut = (str(b.shortcut) || title).toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\").slice(0, 40);\n if (!title || !noteBody || !shortcut) throw new Error(\"Title, shortcut, and note content are required\");\n const existing = await db.execute({ sql: \"SELECT id FROM quick_notes WHERE shortcut=?\", args: [shortcut] });\n if (existing.rows.length) throw new Error(`The /${shortcut} shortcut is already in use`);\n const t = now();\n await db.execute({\n sql: \"INSERT INTO quick_notes(id,title,shortcut,body,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), title, shortcut, noteBody, a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/admin/quick-notes/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can edit quick notes\");\n const b = await body(c);\n const title = str(b.title);\n const noteBody = str(b.body);\n const shortcut = (str(b.shortcut) || title).toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\").slice(0, 40);\n if (!title || !noteBody || !shortcut) throw new Error(\"Title, shortcut, and note content are required\");\n const duplicate = await db.execute({\n sql: \"SELECT id FROM quick_notes WHERE shortcut=? AND id<>?\",\n args: [shortcut, c.req.param(\"id\")],\n });\n if (duplicate.rows.length) throw new Error(`The /${shortcut} shortcut is already in use`);\n const result = await db.execute({\n sql: \"UPDATE quick_notes SET title=?,shortcut=?,body=?,updated_at=? WHERE id=? AND active=1\",\n args: [title, shortcut, noteBody, now(), c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Quick note not found\");\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/quick-notes/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete quick notes\");\n const result = await db.execute({\n sql: \"DELETE FROM quick_notes WHERE id=?\",\n args: [c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Quick note not found\");\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/apply-milestone-template\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const r = await db.execute({ sql: \"SELECT items FROM milestone_templates WHERE id=? AND active=1\", args: [str(b.template_id)] });\n const items = parseJson<any[]>((r.rows[0] as any)?.items, []);\n if (!items.length) throw new Error(\"Milestone template not found\");\n const t = now();\n await db.batch(items.map((x) => ({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',1,?,?)\",\n args: [uid(), p.id, str(x.title), str(x.tag) || \"Milestone\", str(x.description), t, t],\n })));\n return c.json({ ok: true, count: items.length }, 201);\n});\n\napp.get(\"/api/holidays\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") return c.json({ today: await holidayStatus() });\n const [holidayResult, settingResult, today] = await Promise.all([\n db.execute(\"SELECT id,name,holiday_date,created_at FROM holidays ORDER BY holiday_date,name\"),\n db.execute(\"SELECT weekly_days FROM holiday_settings WHERE id='default'\"),\n holidayStatus(),\n ]);\n return c.json({\n holidays: holidayResult.rows,\n weekly_days: parseJson<number[]>((settingResult.rows[0] as any)?.weekly_days, [5, 6]),\n today,\n });\n});\napp.post(\"/api/admin/holidays\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n const b = await body(c), holidayDate = str(b.holiday_date);\n if (!str(b.name)) throw new Error(\"Holiday name is required\");\n if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(holidayDate)) throw new Error(\"A valid holiday date is required\");\n await db.execute({\n sql: \"INSERT INTO holidays(id,name,holiday_date,created_at) VALUES(?,?,?,?)\",\n args: [uid(), str(b.name), holidayDate, now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/admin/holidays/settings\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n const b = await body(c);\n const weeklyDays = (Array.isArray(b.weekly_days) ? b.weekly_days : [])\n .map(Number).filter((day: number) => Number.isInteger(day) && day >= 0 && day <= 6);\n await db.execute({\n sql: `INSERT INTO holiday_settings(id,weekly_days,updated_at) VALUES('default',?,?)\n ON CONFLICT(id) DO UPDATE SET weekly_days=excluded.weekly_days,updated_at=excluded.updated_at`,\n args: [JSON.stringify([...new Set(weeklyDays)]), now()],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/holidays/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n await db.execute({ sql: \"DELETE FROM holidays WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\n\napp.get(\"/api/recurring\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Recurring work is not available\");\n let sql = `SELECT r.*,p.name partner_name,u.name owner_name,\n COALESCE((SELECT SUM(hours) FROM recurring_logs l WHERE l.recurring_id=r.id AND l.period=?),0) period_hours\n FROM recurring_projects r LEFT JOIN partners p ON p.id=r.partner_id\n LEFT JOIN internal_users u ON u.id=r.owner_user_id WHERE 1=1`;\n const period = new Date().toISOString().slice(0, 7), args: any[] = [period];\n if (a.actorType === \"partner\") { sql += \" AND r.partner_id=?\"; args.push(a.actorId); }\n else if (!a.allProjectAccess) {\n sql += \" AND r.owner_user_id=?\"; args.push(a.actorId);\n }\n sql += \" ORDER BY r.active DESC,r.updated_at DESC\";\n const rows = (await db.execute({ sql, args })).rows;\n const logs = rows.length ? await db.execute({\n sql: `SELECT * FROM recurring_logs WHERE recurring_id IN (${rows.map(() => \"?\").join(\",\")})\n ORDER BY period DESC,created_at DESC LIMIT 200`, args: rows.map((x: any) => x.id),\n }) : { rows: [] };\n return c.json({ recurring: rows.map((x: any) => ({\n ...x, active: Boolean(x.active), cc_emails: emailList(x.cc_emails),\n period_hours: Number(x.period_hours), logs: logs.rows.filter((l: any) => l.recurring_id === x.id),\n })) });\n});\napp.post(\"/api/recurring\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Recurring work is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"create_projects\");\n const b = await body(c);\n if (!str(b.title)) throw new Error(\"Recurring project title is required\");\n const billing = b.billing_type === \"hourly\" ? \"hourly\" : \"monthly\";\n let ownerId = a.actorType === \"internal\" ? admin(a) ? str(b.owner_user_id) || a.actorId : a.actorId : \"\";\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id);\n }\n const t = now();\n await db.execute({\n sql: `INSERT INTO recurring_projects(id,title,description,partner_id,owner_user_id,contact_email,cc_emails,\n billing_type,monthly_amount,hourly_rate,included_hours,currency,start_date,end_date,active,\n created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,1,?,?,?,?)`,\n args: [uid(), str(b.title), str(b.description), a.actorType === \"partner\" ? a.actorId : str(b.partner_id) || null,\n ownerId || null, str(b.contact_email) || null, JSON.stringify(emailList(b.cc_emails)), billing,\n Number(b.monthly_amount) || 0, Number(b.hourly_rate) || 0, Number(b.included_hours) || 0,\n str(b.currency) || \"INR\", str(b.start_date) || null, str(b.end_date) || null,\n a.actorType, a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/recurring/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n requireCan(a, \"edit_projects\");\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n await db.execute({\n sql: `UPDATE recurring_projects SET title=?,description=?,partner_id=?,owner_user_id=?,contact_email=?,cc_emails=?,\n billing_type=?,monthly_amount=?,hourly_rate=?,included_hours=?,currency=?,start_date=?,end_date=?,active=?,updated_at=? WHERE id=?`,\n args: [str(b.title ?? x.title) || x.title, str(b.description ?? x.description),\n a.actorType === \"internal\" && admin(a) && b.partner_id !== undefined ? str(b.partner_id) || null : x.partner_id,\n b.owner_user_id === undefined ? x.owner_user_id : str(b.owner_user_id) || null,\n b.contact_email === undefined ? x.contact_email : str(b.contact_email) || null,\n b.cc_emails === undefined ? x.cc_emails : JSON.stringify(emailList(b.cc_emails)),\n b.billing_type === \"hourly\" ? \"hourly\" : b.billing_type === \"monthly\" ? \"monthly\" : x.billing_type,\n b.monthly_amount === undefined ? Number(x.monthly_amount) : Number(b.monthly_amount) || 0,\n b.hourly_rate === undefined ? Number(x.hourly_rate) : Number(b.hourly_rate) || 0,\n b.included_hours === undefined ? Number(x.included_hours) : Number(b.included_hours) || 0,\n str(b.currency ?? x.currency) || \"INR\", str(b.start_date ?? x.start_date) || null,\n str(b.end_date ?? x.end_date) || null, b.active === undefined ? Number(x.active) : int(b.active), now(), x.id],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/recurring/:id/logs\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n const hours = Number(b.hours);\n if (!(hours > 0)) throw new Error(\"Logged hours must be greater than zero\");\n const workDate = /^\\d{4}-\\d{2}-\\d{2}$/.test(str(b.work_date)) ? str(b.work_date) : dateInIndia();\n const period = workDate.slice(0, 7);\n await db.execute({\n sql: \"INSERT INTO recurring_logs(id,recurring_id,period,work_date,hours,note,logged_by_type,logged_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), x.id, period, workDate, hours, str(b.note), a.actorType, a.actorId, now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/recurring/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any;\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n requireCan(a, \"edit_projects\");\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n await db.batch([\n { sql: \"DELETE FROM recurring_logs WHERE recurring_id=?\", args: [x.id] },\n { sql: \"DELETE FROM recurring_projects WHERE id=?\", args: [x.id] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/invoices\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create invoices\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const count = await db.execute(\"SELECT COUNT(*) count FROM invoices\");\n const invoiceNumber = str(b.invoice_number) || `INV-${new Date().getUTCFullYear()}-${String(Number((count.rows[0] as any)?.count) + 1).padStart(4, \"0\")}`;\n const items = (Array.isArray(b.items) ? b.items : []).map((item: any) => {\n const quantity = Math.max(0, Number(item.quantity) || 0);\n const unitPrice = Math.max(0, Number(item.unit_price) || 0);\n return { description: str(item.description) || \"Service\", quantity, unit_price: unitPrice, amount: quantity * unitPrice };\n }).filter((item: any) => item.quantity > 0);\n if (!items.length && Number(b.amount) > 0) items.push({ description: str(b.notes) || \"Professional services\", quantity: 1, unit_price: Number(b.amount), amount: Number(b.amount) });\n if (!items.length) throw new Error(\"Add at least one invoice item\");\n const subtotal = items.reduce((sum: number, item: any) => sum + item.amount, 0);\n const discount = Math.max(0, Number(b.discount) || 0);\n const arrears = Math.max(0, Number(b.arrears) || 0);\n const taxable = Math.max(0, subtotal - discount + arrears);\n const taxRate = Math.max(0, Number(b.tax_rate) || 0);\n const taxAmount = taxable * taxRate / 100;\n const total = taxable + taxAmount;\n const t = now();\n await db.execute({\n sql: `INSERT INTO invoices(id,project_id,invoice_number,invoice_type,milestone_ids,notes,amount,currency,\n due_date,status,created_by_id,created_at,updated_at,items,subtotal,discount,arrears,tax_label,tax_rate,tax_amount,total)\n VALUES(?,?,?,?,?,?,?,?,?,'issued',?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [uid(), p.id, invoiceNumber, [\"milestone\", \"final\", \"custom\"].includes(b.invoice_type) ? b.invoice_type : \"custom\",\n JSON.stringify(Array.isArray(b.milestone_ids) ? b.milestone_ids : []), str(b.notes), total,\n p.currency, str(b.due_date) || null, a.actorId, t, t, JSON.stringify(items), subtotal, discount, arrears,\n str(b.tax_label) || p.tax_label || \"Tax\", taxRate, taxAmount, total],\n });\n return c.json({ ok: true }, 201);\n});\napp.get(\"/api/invoices/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Invoices are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM invoices WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any;\n const p = x ? await allowedProject(String(x.project_id), a) : null;\n if (!x || !p) throw new Error(\"Invoice not found\");\n const branding = await brandingForProject(p);\n const paid = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [x.project_id] });\n const selected = parseJson<string[]>(x.milestone_ids, []);\n const milestones = selected.length ? await db.execute({\n sql: `SELECT title,status,completed_date FROM milestones WHERE project_id=? AND id IN (${selected.map(() => \"?\").join(\",\")})`,\n args: [x.project_id, ...selected],\n }) : { rows: [] };\n const invoiceItems = parseJson<any[]>(x.items, []);\n const lineItems = invoiceItems.length\n ? [\"## Invoice items\", ...invoiceItems.map((item: any, index: number) => `${index + 1}. ${item.description} — ${Number(item.quantity).toLocaleString()} × ${x.currency} ${Number(item.unit_price).toLocaleString()} = ${x.currency} ${Number(item.amount).toLocaleString()}`), \"\"]\n : [];\n const content = [\n ...lineItems,\n \"## Calculation\",\n `Subtotal: ${x.currency} ${Number(x.subtotal || x.amount).toLocaleString()}`,\n `Discount: − ${x.currency} ${Number(x.discount || 0).toLocaleString()}`,\n `Arrears: + ${x.currency} ${Number(x.arrears || 0).toLocaleString()}`,\n `${x.tax_label || \"Tax\"} (${Number(x.tax_rate || 0)}%): + ${x.currency} ${Number(x.tax_amount || 0).toLocaleString()}`,\n `Total due: ${x.currency} ${Number(x.total || x.amount).toLocaleString()}`,\n \"\",\n ...(milestones.rows.length ? [\"## Covered milestones\", ...milestones.rows.map((m: any) => `- ${m.title} — ${titleCase(m.status)}`), \"\"] : []),\n x.notes ? `## Notes\\n${x.notes}` : \"\",\n `\\n## Payment summary\\nReceived to date: ${x.currency} ${Number((paid.rows[0] as any)?.total).toLocaleString()}`,\n ].join(\"\\n\");\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Project invoice\", `${x.invoice_number} · Issued ${prettyDateForServer(x.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Invoice type\", titleCase(x.invoice_type)],\n [\"Amount due\", `${x.currency} ${Number(x.total || x.amount).toLocaleString()}`],\n [\"Due date\", x.due_date ? prettyDateForServer(x.due_date) : \"Due on receipt\"],\n ], 76, branding);\n addPdfLines(doc, content, contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${x.invoice_number}.pdf`);\n});\n\napp.get(\"/api/payments/:id/receipt.pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Receipts are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM payments WHERE id=?\", args: [c.req.param(\"id\")] });\n const payment = r.rows[0] as any;\n const p = payment ? await allowedProject(String(payment.project_id), a) : null;\n if (!payment || !p) throw new Error(\"Payment not found\");\n const [branding, paidResult] = await Promise.all([\n brandingForProject(p),\n db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [p.id] }),\n ]);\n const projectTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const paid = Number((paidResult.rows[0] as any)?.total);\n const receiptNumber = `RCT-${String(payment.paid_date).slice(0, 4)}-${String(payment.id).slice(0, 8).toUpperCase()}`;\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Payment receipt\", `${receiptNumber} · Issued ${prettyDateForServer(payment.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Payment received\", `${payment.currency} ${Number(payment.amount).toLocaleString()}`],\n [\"Payment date\", prettyDateForServer(payment.paid_date)],\n [\"Total received\", `${payment.currency} ${paid.toLocaleString()}`],\n [\"Balance pending\", `${payment.currency} ${Math.max(0, projectTotal - paid).toLocaleString()}`],\n ], 76, branding);\n const note = str(payment.note);\n addPdfLines(doc, [\n \"## Receipt acknowledgement\",\n `This receipt confirms payment of ${payment.currency} ${Number(payment.amount).toLocaleString()} toward ${p.title}.`,\n note ? `\\n## Payment note\\n${note}` : \"\",\n ].join(\"\\n\"), contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${receiptNumber}.pdf`);\n});\n\napp.get(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n const partner = r.rows[0] as any;\n if (!partner) throw new Error(\"Partner not found\");\n const base = await getClientBranding();\n return c.json({\n branding: effectivePartnerBranding(partner, base),\n overrides: {\n name: partner.brand_name || \"\",\n logo_url: partner.logo_url || \"\",\n accent_color: partner.accent_color || \"\",\n contact_info: partner.contact_info || \"\",\n website_url: partner.website_url || \"\",\n portal_label: \"\",\n welcome_message: \"\",\n document_header: partner.document_header || \"\",\n document_footer: partner.document_footer || \"\",\n },\n });\n});\napp.patch(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const b = await body(c);\n await db.execute({\n sql: \"UPDATE partners SET brand_name=?,logo_url=?,accent_color=?,contact_info=?,website_url=?,document_header=?,document_footer=?,updated_at=? WHERE id=?\",\n args: [\n str(b.name) || null,\n /^https?:\\/\\//.test(str(b.logo_url)) ? str(b.logo_url) : null,\n color(b.accent_color) || null,\n str(b.contact_info) || null,\n /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null,\n str(b.document_footer) || null,\n now(), a.actorId,\n ],\n });\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n return c.json({ ok: true, branding: effectivePartnerBranding(r.rows[0], await getClientBranding()) });\n});\n\napp.get(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const [users, assignments, projects] = await Promise.all([\n db.execute(\"SELECT id,name,phone,email,role,permissions,all_project_access,active,created_at,updated_at FROM internal_users ORDER BY role,name\"),\n db.execute(\"SELECT user_id,project_id FROM user_project_access\"),\n db.execute(\"SELECT id,title,status,archived FROM projects ORDER BY archived,title\"),\n ]);\n return c.json({ users: users.rows.map((u: any) => ({\n ...u, active: Boolean(u.active), all_project_access: Boolean(u.all_project_access),\n permissions: parseJson(u.permissions, {}),\n project_ids: assignments.rows.filter((x: any) => x.user_id === u.id).map((x: any) => x.project_id),\n })), projects: projects.rows.map((x: any) => ({ ...x, archived: Boolean(x.archived) })) });\n});\napp.post(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), userId = uid(), t = now();\n const role = b.role === \"admin\" ? \"admin\" : \"user\";\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...(b.permissions ?? {}) };\n const all = b.all_project_access !== false;\n const statements: any[] = [{\n sql: \"INSERT INTO internal_users(id,name,phone,email,pin_hash,role,permissions,all_project_access,active,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,1,?,?)\",\n args: [userId, str(b.name) || \"Team member\", p, emailList([b.email])[0] || null, await hashPin(p, code), role, JSON.stringify(permissions), int(all), t, t],\n }];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [userId, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true, id: userId }, 201);\n});\napp.patch(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = r.rows[0] as any, b = await body(c);\n if (!u) throw new Error(\"User not found\");\n const requestedRole = b.role === \"admin\" ? \"admin\" : b.role === \"user\" ? \"user\" : u.role;\n const requestedActive = b.active === undefined ? Boolean(u.active) : Boolean(b.active);\n if (a.actorId === String(u.id) && (!requestedActive || requestedRole !== \"admin\")) {\n throw new Error(\"You cannot revoke or demote your own administrator account\");\n }\n if (u.role === \"admin\" && u.active && (!requestedActive || requestedRole !== \"admin\")) {\n const admins = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((admins.rows[0] as any)?.count) <= 1) {\n throw new Error(\"At least one active administrator is required\");\n }\n }\n const p = b.phone === undefined ? String(u.phone) : phone(b.phone);\n const role = requestedRole;\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...parseJson(u.permissions, {}), ...(b.permissions ?? {}) };\n const all = b.all_project_access === undefined ? Boolean(u.all_project_access) : Boolean(b.all_project_access);\n const statements: any[] = [\n { sql: \"UPDATE internal_users SET name=?,phone=?,email=?,pin_hash=?,role=?,permissions=?,all_project_access=?,active=?,updated_at=? WHERE id=?\",\n args: [str(b.name ?? u.name) || u.name, p,\n b.email === undefined ? u.email : emailList([b.email])[0] || null,\n b.pin ? await hashPin(p, pin(b.pin)) : u.pin_hash,\n role, JSON.stringify(permissions), int(all), b.active === undefined ? Number(u.active) : int(b.active), now(), u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n ];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [u.id, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove users\");\n if (a.actorId === c.req.param(\"id\")) throw new Error(\"You cannot remove your own account\");\n const target = await db.execute({ sql: \"SELECT role,active FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = target.rows[0] as any;\n if (!u) throw new Error(\"User not found\");\n if (u.role === \"admin\" && u.active) {\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count) <= 1) throw new Error(\"At least one active admin is required\");\n }\n const fallback = await db.execute({\n sql: \"SELECT id FROM internal_users WHERE id<>? AND active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\",\n args: [c.req.param(\"id\")],\n });\n const fallbackId = str((fallback.rows[0] as any)?.id);\n if (!fallbackId) throw new Error(\"Assign another active user before removing this account\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='internal' AND actor_id=?\", args: [u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n { sql: \"UPDATE projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"UPDATE recurring_projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"DELETE FROM internal_users WHERE id=?\", args: [u.id] },\n ]);\n return c.json({ ok: true });\n});\n\napp.get(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const [recipients, users] = await Promise.all([\n ccRecipients(),\n db.execute(\"SELECT id,name,email,active FROM internal_users ORDER BY name\"),\n ]);\n return c.json({\n recipients,\n users: users.rows.map((x: any) => ({ ...x, active: Boolean(x.active) })),\n });\n});\napp.patch(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const b = await body(c);\n const users = await db.execute(\"SELECT id,email FROM internal_users WHERE active=1\");\n const userEmails = new Map((users.rows as any[]).map((x) => [str(x.id), emailList([x.email])[0] || \"\"]));\n const recipients = [];\n for (const x of Array.isArray(b.recipients) ? b.recipients : []) {\n const userId = str(x.user_id) || \"\";\n const standaloneEmail = userId ? \"\" : emailList([x.email])[0] || \"\";\n if (userId && !userEmails.get(userId)) throw new Error(\"Mapped internal users must have a valid work email\");\n if (!userId && !standaloneEmail) throw new Error(\"A standalone recipient needs a valid email address\");\n recipients.push({\n id: str(x.id) || uid(),\n label: str(x.label) || standaloneEmail || \"CC recipient\",\n email: standaloneEmail,\n user_id: userId,\n default_selected: Boolean(x.default_selected),\n });\n }\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('notification_cc_recipients',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(recipients), now()],\n });\n return c.json({ ok: true, recipients });\n});\n\napp.get(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute(`SELECT p.*,(SELECT COUNT(*) FROM projects x WHERE x.partner_id=p.id) project_count FROM partners p ORDER BY p.name`);\n return c.json({ partners: r.rows.map((p: any) => ({ ...p, active: Boolean(p.active), project_count: Number(p.project_count), permissions: parseJson(p.permissions, {}), pin_hash: undefined })) });\n});\napp.get(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n return c.json({ branding: await getClientBranding() });\n});\napp.patch(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n const b = await body(c);\n const branding = {\n name: str(b.name) || defaultBranding.name,\n logo_url: str(b.logo_url) || defaultBranding.logo_url,\n accent_color: color(b.accent_color) || defaultBranding.accent_color,\n contact_info: str(b.contact_info),\n website_url: /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : \"\",\n portal_label: str(b.portal_label) || defaultBranding.portal_label,\n welcome_message: str(b.welcome_message) || defaultBranding.welcome_message,\n document_header: str(b.document_header) || defaultBranding.document_header,\n document_footer: str(b.document_footer) || defaultBranding.document_footer,\n };\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('client_branding',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(branding), now()],\n });\n brandingCache = null;\n return c.json({ ok: true, branding });\n});\napp.post(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), partnerId = uid(), t = now();\n const permissionLevel = [\"basic\", \"advanced\", \"custom\"].includes(b.permission_level) ? b.permission_level : \"basic\";\n const customPermissions = permissionLevel === \"custom\"\n ? Object.fromEntries(partnerPermissionDefinitions.map(([key]) => [key, b.permissions?.[key] === true]))\n : {};\n await db.execute({\n sql: `INSERT INTO partners(id,name,phone,pin_hash,brand_name,logo_url,accent_color,contact_info,website_url,\n document_header,document_footer,permission_level,permissions,active,created_at,updated_at)\n VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,1,?,?)`,\n args: [partnerId, str(b.name) || \"Partner\", p, await hashPin(p, code),\n str(b.brand_name) || null, str(b.logo_url) || null, color(b.accent_color) || null,\n str(b.contact_info) || null, /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null, str(b.document_footer) || null, permissionLevel, JSON.stringify(customPermissions), t, t],\n });\n return c.json({ ok: true, id: partnerId }, 201);\n});\napp.patch(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [c.req.param(\"id\")] });\n const p = r.rows[0] as any, b = await body(c);\n if (!p) throw new Error(\"Partner not found\");\n const ph = b.phone === undefined ? String(p.phone) : phone(b.phone);\n const permissionLevel = b.permission_level === undefined ? String(p.permission_level || \"basic\")\n : [\"basic\", \"advanced\", \"custom\"].includes(b.permission_level) ? b.permission_level : \"basic\";\n const customPermissions = permissionLevel === \"custom\"\n ? Object.fromEntries(partnerPermissionDefinitions.map(([key]) => [key, b.permissions === undefined ? parseJson(p.permissions, {})[key] === true : b.permissions?.[key] === true]))\n : {};\n await db.execute({\n sql: `UPDATE partners SET name=?,phone=?,pin_hash=?,brand_name=?,logo_url=?,accent_color=?,contact_info=?,\n website_url=?,document_header=?,document_footer=?,permission_level=?,permissions=?,active=?,updated_at=? WHERE id=?`,\n args: [str(b.name ?? p.name) || p.name, ph, b.pin ? await hashPin(ph, pin(b.pin)) : p.pin_hash,\n str(b.brand_name ?? p.brand_name) || null, str(b.logo_url ?? p.logo_url) || null,\n color(b.accent_color ?? p.accent_color) || null, str(b.contact_info ?? p.contact_info) || null,\n b.website_url === undefined ? p.website_url : /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n b.document_header === undefined ? p.document_header : str(b.document_header) || null,\n b.document_footer === undefined ? p.document_footer : str(b.document_footer) || null,\n permissionLevel, JSON.stringify(customPermissions),\n b.active === undefined ? Number(p.active) : int(b.active), now(), p.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove partners\");\n const linked = await db.execute({\n sql: `SELECT (SELECT COUNT(*) FROM projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM recurring_projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM proposals WHERE partner_id=?) count`,\n args: [c.req.param(\"id\"), c.req.param(\"id\"), c.req.param(\"id\")],\n });\n if (Number((linked.rows[0] as any)?.count)) throw new Error(\"Deactivate this partner or unlink their projects before deletion\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='partner' AND actor_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM partners WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\ngrowthSuite.register(app);\n\napp.get(\"/frontend/logo.png\", async () => {\n const logo = await blob.get(\"assets/aflabs-logo.png\");\n return new Response(logo.body, {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=86400\" },\n });\n});\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\napp.get(\"*\", () => serveFile(\"/frontend/index.html\"));\napp.onError((e, c) => c.req.path.startsWith(\"/api/\") ? error(c, e) : Promise.reject(e));\nexport default app.fetch;\n","label",[167],"3393700d-77f3-446b-81bf-c769857fd506","growth.ts","1723cc22-9756-11f1-bd2f-1607ee4eb77e",["D",1786653143386],"type GrowthActor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string | null;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n allProjectAccess?: boolean;\n};\n\ntype DbStatement = string | { sql: string; args?: unknown[] };\ntype GrowthDeps = {\n db: {\n execute(statement: DbStatement): Promise<{ rows: any[]; rowsAffected: number }>;\n batch(statements: DbStatement[]): Promise<Array<{ rows: any[]; rowsAffected: number }>>;\n };\n actor(c: any): Promise<GrowthActor>;\n admin(actor: GrowthActor): boolean;\n body(c: any): Promise<any>;\n uid(): string;\n now(): string;\n str(value: unknown): string;\n int(value: unknown): number;\n allowedProject(projectId: string, actor: GrowthActor): Promise<any>;\n projectInsertStatements(projectId: string, data: any, context: {\n actorType: string;\n actorId: string;\n ownerId: string;\n partnerId: string | null;\n status?: string;\n }): { statements: DbStatement[]; clientPin: string };\n openai: any;\n};\n\nconst LEAD_STAGES = [\"new\", \"contacted\", \"qualified\", \"discovery\", \"proposal\", \"negotiation\", \"won\", \"lost\"];\nconst IDEA_PROMPT = \"You are a Forward Deployed Engineer, technical sales expert, and business development leader. Create a practical, ROI-driven business idea pitch for tailor-made software, AI, automation, Voice AI, WhatsApp, or the most appropriate combination. Understand the business context deeply. Be direct, credible, commercially strong, and specific. Explain the operational pain, recommended solution, implementation path, measurable value, risks, assumptions, and next action. Do not invent facts or guaranteed ROI. Label assumptions and give a realistic ROI model using ranges where inputs are incomplete. Return polished Markdown.\";\nconst PROPOSAL_PROMPT = \"Turn the supplied business context into a concise, convincing, implementation-ready custom software proposal. Write as a Forward Deployed Engineer and technical sales leader. Include executive summary, current pain, proposed solution, scope, phased implementation, integrations, measurable outcomes, ROI model, timeline assumptions, investment framing, risks, success criteria, and a clear next step. Preserve supplied facts, label assumptions, and do not invent customer data. Return polished Markdown.\";\n\nfunction monthBounds(month?: string) {\n const normalized = /^\\d{4}-\\d{2}$/.test(String(month || \"\")) ? String(month) : new Date().toISOString().slice(0, 7);\n const start = normalized + \"-01T00:00:00.000Z\";\n const date = new Date(start);\n date.setUTCMonth(date.getUTCMonth() + 1);\n return { month: normalized, start, end: date.toISOString() };\n}\n\nexport function createGrowthSuite(deps: GrowthDeps) {\n const { db, actor, admin, body, uid, now, str, int, allowedProject, projectInsertStatements, openai } = deps;\n let migration: Promise<void> | null = null;\n\n const json = <T>(value: unknown, fallback: T): T => {\n try { return value ? JSON.parse(String(value)) : fallback; } catch { return fallback; }\n };\n const requireTeam = (a: GrowthActor) => {\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n };\n const requirePartnerPermission = (a: GrowthActor, key: string) => {\n if (a.actorType === \"partner\" && a.permissions[key] !== true) {\n throw new Error(\"You do not have permission for this action\");\n }\n };\n const bool = (value: unknown) => Boolean(Number(value));\n const safeDateTime = (value: unknown) => {\n const parsed = new Date(str(value));\n if (Number.isNaN(parsed.getTime())) throw new Error(\"Select a valid date and time\");\n return parsed.toISOString();\n };\n const alter = async (sql: string) => {\n try { await db.execute(sql); } catch (error) {\n const message = error instanceof Error ? error.message : String(error);\n if (!/duplicate column|already exists/i.test(message)) throw error;\n }\n };\n const setting = async (key: string, fallback: string) => {\n const result = await db.execute({ sql: \"SELECT setting_value FROM app_settings WHERE setting_key=?\", args: [key] });\n return str(result.rows[0]?.setting_value) || fallback;\n };\n const saveSetting = async (key: string, value: string) => {\n await db.execute({\n sql: \"INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES(?,?,?) ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at\",\n args: [key, value, now()],\n });\n };\n\n async function migrate() {\n if (migration) return migration;\n migration = (async () => {\n await db.batch([\n \"CREATE TABLE IF NOT EXISTS leads (id TEXT PRIMARY KEY,title TEXT NOT NULL,company_name TEXT NOT NULL DEFAULT '',contact_name TEXT NOT NULL DEFAULT '',contact_email TEXT NOT NULL DEFAULT '',contact_phone TEXT NOT NULL DEFAULT '',category TEXT NOT NULL DEFAULT '',business_type TEXT NOT NULL DEFAULT '',source TEXT NOT NULL DEFAULT '',stage TEXT NOT NULL DEFAULT 'new',priority TEXT NOT NULL DEFAULT 'medium',expected_budget REAL NOT NULL DEFAULT 0,currency TEXT NOT NULL DEFAULT 'INR',partner_id TEXT REFERENCES partners(id),owner_user_id TEXT REFERENCES internal_users(id),requirements_markdown TEXT NOT NULL DEFAULT '',pain_points TEXT NOT NULL DEFAULT '',inside_info TEXT NOT NULL DEFAULT '',use_case_hint TEXT NOT NULL DEFAULT '',next_follow_up_at TEXT,lost_reason TEXT,created_by_type TEXT NOT NULL,created_by_id TEXT NOT NULL,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS lead_events (id TEXT PRIMARY KEY,lead_id TEXT NOT NULL REFERENCES leads(id) ON DELETE CASCADE,event_type TEXT NOT NULL,title TEXT NOT NULL,details TEXT NOT NULL DEFAULT '',metadata TEXT NOT NULL DEFAULT '{}',actor_type TEXT NOT NULL,actor_id TEXT NOT NULL,actor_name TEXT NOT NULL,occurred_at TEXT NOT NULL,created_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS lead_followups (id TEXT PRIMARY KEY,lead_id TEXT NOT NULL REFERENCES leads(id) ON DELETE CASCADE,note TEXT NOT NULL,due_at TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'open',completed_at TEXT,created_by_type TEXT NOT NULL,created_by_id TEXT NOT NULL,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS conversations (id TEXT PRIMARY KEY,context_type TEXT NOT NULL,context_id TEXT NOT NULL,partner_id TEXT NOT NULL REFERENCES partners(id),internal_user_id TEXT NOT NULL REFERENCES internal_users(id),subject TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'open',last_message_at TEXT,last_read_partner_at TEXT,last_read_internal_at TEXT,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS conversation_messages (id TEXT PRIMARY KEY,conversation_id TEXT NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,sender_type TEXT NOT NULL,sender_id TEXT NOT NULL,sender_name TEXT NOT NULL,body TEXT NOT NULL,created_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS mou_templates (id TEXT PRIMARY KEY,name TEXT NOT NULL,terms_markdown TEXT NOT NULL,benefits_markdown TEXT NOT NULL DEFAULT '',active INTEGER NOT NULL DEFAULT 1,created_by_id TEXT NOT NULL,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS partner_mous (id TEXT PRIMARY KEY,partner_id TEXT NOT NULL REFERENCES partners(id),template_id TEXT REFERENCES mou_templates(id),terms_markdown TEXT NOT NULL,benefits_markdown TEXT NOT NULL DEFAULT '',effective_from TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'active',created_by_id TEXT NOT NULL,created_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS partner_targets (id TEXT PRIMARY KEY,partner_id TEXT NOT NULL REFERENCES partners(id),target_month TEXT NOT NULL,leads_target INTEGER NOT NULL DEFAULT 0,projects_target INTEGER NOT NULL DEFAULT 0,revenue_target REAL NOT NULL DEFAULT 0,revenue_currency TEXT NOT NULL DEFAULT 'INR',meetings_allowed INTEGER NOT NULL DEFAULT 0,note TEXT NOT NULL DEFAULT '',created_by_id TEXT NOT NULL,created_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS meeting_slots (id TEXT PRIMARY KEY,slot_type TEXT NOT NULL DEFAULT 'available',starts_at TEXT NOT NULL,ends_at TEXT NOT NULL,note TEXT NOT NULL DEFAULT '',created_by_id TEXT NOT NULL,created_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS meetings (id TEXT PRIMARY KEY,partner_id TEXT NOT NULL REFERENCES partners(id),internal_user_id TEXT REFERENCES internal_users(id),context_type TEXT NOT NULL DEFAULT 'other',context_id TEXT,agenda TEXT NOT NULL,starts_at TEXT NOT NULL,ends_at TEXT NOT NULL,join_url TEXT,place TEXT,status TEXT NOT NULL DEFAULT 'booked',created_by_type TEXT NOT NULL,created_by_id TEXT NOT NULL,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE TABLE IF NOT EXISTS business_ideas (id TEXT PRIMARY KEY,title TEXT NOT NULL,input_data TEXT NOT NULL,generated_markdown TEXT NOT NULL,partner_id TEXT REFERENCES partners(id),proposal_id TEXT REFERENCES proposals(id),created_by_type TEXT NOT NULL,created_by_id TEXT NOT NULL,created_at TEXT NOT NULL,updated_at TEXT NOT NULL)\",\n \"CREATE INDEX IF NOT EXISTS idx_leads_stage_updated ON leads(stage,updated_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_leads_partner_stage ON leads(partner_id,stage,updated_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_lead_events_lead_date ON lead_events(lead_id,occurred_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_followups_lead_due ON lead_followups(lead_id,status,due_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_conversations_partner ON conversations(partner_id,last_message_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_messages_conversation ON conversation_messages(conversation_id,created_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_targets_partner_month ON partner_targets(partner_id,target_month,created_at)\",\n \"CREATE INDEX IF NOT EXISTS idx_meetings_time ON meetings(starts_at,ends_at,status)\",\n \"CREATE INDEX IF NOT EXISTS idx_slots_time ON meeting_slots(starts_at,ends_at,slot_type)\",\n \"CREATE INDEX IF NOT EXISTS idx_ideas_partner ON business_ideas(partner_id,created_at)\",\n ]);\n await alter(\"ALTER TABLE projects ADD COLUMN lead_id TEXT REFERENCES leads(id)\");\n await alter(\"ALTER TABLE projects ADD COLUMN markdown_details TEXT NOT NULL DEFAULT ''\");\n await alter(\"ALTER TABLE partners ADD COLUMN permission_level TEXT NOT NULL DEFAULT 'basic'\");\n await alter(\"ALTER TABLE partners ADD COLUMN permissions TEXT NOT NULL DEFAULT '{}'\");\n await alter(\"ALTER TABLE invoices ADD COLUMN items TEXT NOT NULL DEFAULT '[]'\");\n await alter(\"ALTER TABLE invoices ADD COLUMN subtotal REAL NOT NULL DEFAULT 0\");\n await alter(\"ALTER TABLE invoices ADD COLUMN discount REAL NOT NULL DEFAULT 0\");\n await alter(\"ALTER TABLE invoices ADD COLUMN arrears REAL NOT NULL DEFAULT 0\");\n await alter(\"ALTER TABLE invoices ADD COLUMN tax_label TEXT NOT NULL DEFAULT 'Tax'\");\n await alter(\"ALTER TABLE invoices ADD COLUMN tax_rate REAL NOT NULL DEFAULT 0\");\n await alter(\"ALTER TABLE invoices ADD COLUMN tax_amount REAL NOT NULL DEFAULT 0\");\n await alter(\"ALTER TABLE invoices ADD COLUMN total REAL NOT NULL DEFAULT 0\");\n await db.execute(\"CREATE INDEX IF NOT EXISTS idx_projects_lead ON projects(lead_id,updated_at)\");\n })().catch((error) => {\n migration = null;\n throw error;\n });\n return migration;\n }\n\n async function getLead(id: string, a: GrowthActor) {\n let sql = \"SELECT l.*,p.name partner_name,u.name owner_name FROM leads l LEFT JOIN partners p ON p.id=l.partner_id LEFT JOIN internal_users u ON u.id=l.owner_user_id WHERE l.id=?\";\n const args: unknown[] = [id];\n if (a.actorType === \"partner\") {\n sql += \" AND l.partner_id=?\";\n args.push(a.actorId);\n } else if (a.actorType === \"internal\" && !admin(a) && !a.allProjectAccess) {\n sql += \" AND l.owner_user_id=?\";\n args.push(a.actorId);\n }\n return (await db.execute({ sql, args })).rows[0] as any;\n }\n\n async function logLead(leadId: string, a: GrowthActor, eventType: string, title: string, details = \"\", metadata: any = {}) {\n const stamp = now();\n await db.execute({\n sql: \"INSERT INTO lead_events(id,lead_id,event_type,title,details,metadata,actor_type,actor_id,actor_name,occurred_at,created_at) VALUES(?,?,?,?,?,?,?,?,?,?,?)\",\n args: [uid(), leadId, eventType, title, details, JSON.stringify(metadata || {}), a.actorType, a.actorId, a.name, stamp, stamp],\n });\n }\n\n async function optionsFor(a: GrowthActor) {\n requireTeam(a);\n let leadSql = \"SELECT id,title,company_name,partner_id,stage FROM leads WHERE 1=1\";\n let projectSql = \"SELECT id,title,partner_id,status,lead_id FROM projects WHERE archived=0\";\n const leadArgs: unknown[] = [];\n const projectArgs: unknown[] = [];\n if (a.actorType === \"partner\") {\n leadSql += \" AND partner_id=?\";\n projectSql += \" AND partner_id=?\";\n leadArgs.push(a.actorId);\n projectArgs.push(a.actorId);\n } else if (!admin(a) && !a.allProjectAccess) {\n leadSql += \" AND owner_user_id=?\";\n projectSql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=projects.id AND x.user_id=?)\";\n leadArgs.push(a.actorId);\n projectArgs.push(a.actorId);\n }\n const [leads, projects, partners, users] = await Promise.all([\n db.execute({ sql: leadSql + \" ORDER BY updated_at DESC\", args: leadArgs }),\n db.execute({ sql: projectSql + \" ORDER BY updated_at DESC\", args: projectArgs }),\n a.actorType === \"partner\"\n ? db.execute({ sql: \"SELECT id,name FROM partners WHERE id=?\", args: [a.actorId] })\n : db.execute(\"SELECT id,name FROM partners WHERE active=1 ORDER BY name\"),\n db.execute(\"SELECT id,name,role FROM internal_users WHERE active=1 ORDER BY name\"),\n ]);\n return { leads: leads.rows, projects: projects.rows, partners: partners.rows, users: users.rows };\n }\n\n async function targetSnapshot(partnerId: string, month?: string) {\n const bounds = monthBounds(month);\n const targetResult = await db.execute({\n sql: \"SELECT * FROM partner_targets WHERE partner_id=? AND target_month=? ORDER BY created_at DESC LIMIT 1\",\n args: [partnerId, bounds.month],\n });\n const [leadCount, projectCount, revenue, meetingCount] = await Promise.all([\n db.execute({ sql: \"SELECT COUNT(*) count FROM leads WHERE partner_id=? AND created_at>=? AND created_at<?\", args: [partnerId, bounds.start, bounds.end] }),\n db.execute({ sql: \"SELECT COUNT(*) count FROM projects WHERE partner_id=? AND lead_id IS NOT NULL AND created_at>=? AND created_at<?\", args: [partnerId, bounds.start, bounds.end] }),\n db.execute({ sql: \"SELECT COALESCE(SUM(pm.amount),0) amount FROM payments pm JOIN projects p ON p.id=pm.project_id WHERE p.partner_id=? AND pm.created_at>=? AND pm.created_at<?\", args: [partnerId, bounds.start, bounds.end] }),\n db.execute({ sql: \"SELECT COUNT(*) count FROM meetings WHERE partner_id=? AND starts_at>=? AND starts_at<? AND status<>'cancelled'\", args: [partnerId, bounds.start, bounds.end] }),\n ]);\n const target = targetResult.rows[0] || null;\n return {\n month: bounds.month,\n target,\n achieved: {\n leads: Number(leadCount.rows[0]?.count || 0),\n projects: Number(projectCount.rows[0]?.count || 0),\n revenue: Number(revenue.rows[0]?.amount || 0),\n meetings: Number(meetingCount.rows[0]?.count || 0),\n },\n };\n }\n\n function register(app: any) {\n app.get(\"/api/growth/options\", async (c: any) => c.json(await optionsFor(await actor(c))));\n\n app.get(\"/api/leads\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"view_leads\");\n let sql = \"SELECT l.*,p.name partner_name,u.name owner_name,(SELECT COUNT(*) FROM projects x WHERE x.lead_id=l.id) project_count,(SELECT COUNT(*) FROM lead_followups f WHERE f.lead_id=l.id AND f.status='open') open_followups FROM leads l LEFT JOIN partners p ON p.id=l.partner_id LEFT JOIN internal_users u ON u.id=l.owner_user_id WHERE 1=1\";\n const args: unknown[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND l.partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a) && !a.allProjectAccess) {\n sql += \" AND l.owner_user_id=?\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY l.updated_at DESC\";\n const result = await db.execute({ sql, args });\n const stages = Object.fromEntries(LEAD_STAGES.map((stage) => [stage, result.rows.filter((lead: any) => lead.stage === stage).length]));\n return c.json({ leads: result.rows, stages, stage_order: LEAD_STAGES, options: await optionsFor(a) });\n });\n\n app.get(\"/api/leads/:id\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"view_leads\");\n const lead = await getLead(c.req.param(\"id\"), a);\n if (!lead) throw new Error(\"Lead not found\");\n const [events, followups, projects] = await Promise.all([\n db.execute({ sql: \"SELECT * FROM lead_events WHERE lead_id=? ORDER BY occurred_at DESC,created_at DESC\", args: [lead.id] }),\n db.execute({ sql: \"SELECT * FROM lead_followups WHERE lead_id=? ORDER BY CASE status WHEN 'open' THEN 0 ELSE 1 END,due_at\", args: [lead.id] }),\n db.execute({ sql: \"SELECT id,title,status,progress,end_date,project_type,updated_at FROM projects WHERE lead_id=? ORDER BY updated_at DESC\", args: [lead.id] }),\n ]);\n const chronological = [...events.rows].reverse();\n const gaps = new Map<string, number>();\n chronological.forEach((event: any, index: number) => {\n const previous = chronological[index - 1];\n gaps.set(String(event.id), previous ? Math.max(0, Math.floor((Date.parse(event.occurred_at) - Date.parse(previous.occurred_at)) / 86400000)) : 0);\n });\n return c.json({\n lead,\n events: events.rows.map((event: any) => ({\n ...event,\n metadata: json(event.metadata, {}),\n days_since_previous: gaps.get(String(event.id)) || 0,\n days_ago: Math.max(0, Math.floor((Date.now() - Date.parse(event.occurred_at)) / 86400000)),\n })),\n followups: followups.rows.map((item: any) => ({ ...item, overdue: item.status === \"open\" && Date.parse(item.due_at) < Date.now() })),\n projects: projects.rows,\n options: await optionsFor(a),\n });\n });\n\n app.post(\"/api/leads\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"create_leads\");\n const data = await body(c);\n const title = str(data.title || data.company_name || data.contact_name);\n if (!title) throw new Error(\"Lead title or company name is required\");\n const leadId = uid();\n const stamp = now();\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(data.partner_id) || null;\n let ownerId = a.actorType === \"internal\" ? str(data.owner_user_id) || a.actorId : str(data.owner_user_id) || null;\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str(owner.rows[0]?.id) || null;\n }\n await db.batch([\n {\n sql: \"INSERT INTO leads(id,title,company_name,contact_name,contact_email,contact_phone,category,business_type,source,stage,priority,expected_budget,currency,partner_id,owner_user_id,requirements_markdown,pain_points,inside_info,use_case_hint,next_follow_up_at,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,'new',?,?,?,?,?,?,?,?,?,?,?,?,?,?)\",\n args: [leadId, title, str(data.company_name), str(data.contact_name), str(data.contact_email), str(data.contact_phone), str(data.category), str(data.business_type), str(data.source), [\"low\", \"medium\", \"high\", \"urgent\"].includes(data.priority) ? data.priority : \"medium\", Number(data.expected_budget) || 0, str(data.currency) || \"INR\", partnerId, ownerId, str(data.requirements_markdown), str(data.pain_points), str(data.inside_info), str(data.use_case_hint), str(data.next_follow_up_at) || null, a.actorType, a.actorId, stamp, stamp],\n },\n {\n sql: \"INSERT INTO lead_events(id,lead_id,event_type,title,details,metadata,actor_type,actor_id,actor_name,occurred_at,created_at) VALUES(?,?,'created','Lead created',?,'{}',?,?,?,?,?)\",\n args: [uid(), leadId, title, a.actorType, a.actorId, a.name, stamp, stamp],\n },\n ]);\n return c.json({ ok: true, id: leadId }, 201);\n });\n\n app.patch(\"/api/leads/:id\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"edit_leads\");\n const lead = await getLead(c.req.param(\"id\"), a);\n if (!lead) throw new Error(\"Lead not found\");\n const data = await body(c);\n const nextStage = data.stage === undefined ? lead.stage : LEAD_STAGES.includes(data.stage) ? data.stage : (() => { throw new Error(\"Invalid lead stage\"); })();\n const changed: string[] = [];\n if (nextStage !== lead.stage) changed.push(\"Stage: \" + lead.stage + \" → \" + nextStage);\n for (const key of [\"requirements_markdown\", \"next_follow_up_at\", \"expected_budget\", \"partner_id\", \"owner_user_id\"]) {\n if (data[key] !== undefined && String(data[key] ?? \"\") !== String(lead[key] ?? \"\")) changed.push(key.replaceAll(\"_\", \" \") + \" updated\");\n }\n await db.execute({\n sql: \"UPDATE leads SET title=?,company_name=?,contact_name=?,contact_email=?,contact_phone=?,category=?,business_type=?,source=?,stage=?,priority=?,expected_budget=?,currency=?,partner_id=?,owner_user_id=?,requirements_markdown=?,pain_points=?,inside_info=?,use_case_hint=?,next_follow_up_at=?,lost_reason=?,updated_at=? WHERE id=?\",\n args: [str(data.title ?? lead.title) || lead.title, str(data.company_name ?? lead.company_name), str(data.contact_name ?? lead.contact_name), str(data.contact_email ?? lead.contact_email), str(data.contact_phone ?? lead.contact_phone), str(data.category ?? lead.category), str(data.business_type ?? lead.business_type), str(data.source ?? lead.source), nextStage, [\"low\", \"medium\", \"high\", \"urgent\"].includes(data.priority) ? data.priority : lead.priority, data.expected_budget === undefined ? Number(lead.expected_budget) : Number(data.expected_budget) || 0, str(data.currency ?? lead.currency) || \"INR\", a.actorType === \"partner\" ? a.actorId : data.partner_id === undefined ? lead.partner_id : str(data.partner_id) || null, data.owner_user_id === undefined ? lead.owner_user_id : str(data.owner_user_id) || null, str(data.requirements_markdown ?? lead.requirements_markdown), str(data.pain_points ?? lead.pain_points), str(data.inside_info ?? lead.inside_info), str(data.use_case_hint ?? lead.use_case_hint), data.next_follow_up_at === undefined ? lead.next_follow_up_at : str(data.next_follow_up_at) || null, str(data.lost_reason ?? lead.lost_reason), now(), lead.id],\n });\n await logLead(lead.id, a, nextStage !== lead.stage ? \"stage\" : \"updated\", nextStage !== lead.stage ? \"Lead moved to \" + nextStage : \"Lead details updated\", changed.join(\"\\n\"));\n return c.json({ ok: true });\n });\n\n app.post(\"/api/leads/:id/followups\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"edit_leads\");\n const lead = await getLead(c.req.param(\"id\"), a);\n if (!lead) throw new Error(\"Lead not found\");\n const data = await body(c);\n const note = str(data.note);\n if (!note) throw new Error(\"Follow-up note is required\");\n const dueAt = safeDateTime(data.due_at);\n const id = uid();\n const stamp = now();\n await db.batch([\n { sql: \"INSERT INTO lead_followups(id,lead_id,note,due_at,status,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,'open',?,?,?,?)\", args: [id, lead.id, note, dueAt, a.actorType, a.actorId, stamp, stamp] },\n { sql: \"UPDATE leads SET next_follow_up_at=?,updated_at=? WHERE id=?\", args: [dueAt, stamp, lead.id] },\n ]);\n await logLead(lead.id, a, \"follow_up\", \"Follow-up scheduled\", note, { due_at: dueAt });\n return c.json({ ok: true, id }, 201);\n });\n\n app.patch(\"/api/lead-followups/:id\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"edit_leads\");\n const result = await db.execute({ sql: \"SELECT * FROM lead_followups WHERE id=?\", args: [c.req.param(\"id\")] });\n const followup = result.rows[0];\n const lead = followup ? await getLead(String(followup.lead_id), a) : null;\n if (!followup || !lead) throw new Error(\"Follow-up not found\");\n const data = await body(c);\n const completed = data.status === \"completed\" || data.completed === true;\n await db.execute({\n sql: \"UPDATE lead_followups SET note=?,due_at=?,status=?,completed_at=?,updated_at=? WHERE id=?\",\n args: [str(data.note ?? followup.note) || followup.note, data.due_at === undefined ? followup.due_at : safeDateTime(data.due_at), completed ? \"completed\" : \"open\", completed ? now() : null, now(), followup.id],\n });\n await logLead(lead.id, a, \"follow_up\", completed ? \"Follow-up completed\" : \"Follow-up updated\", str(data.note ?? followup.note));\n return c.json({ ok: true });\n });\n\n app.post(\"/api/leads/:id/attach-project\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"edit_leads\");\n const lead = await getLead(c.req.param(\"id\"), a);\n const data = await body(c);\n const project = lead ? await allowedProject(str(data.project_id), a) : null;\n if (!lead || !project) throw new Error(\"Lead or project not found\");\n if (project.lead_id && String(project.lead_id) !== String(lead.id)) throw new Error(\"Project is already attached to another lead\");\n const statements: DbStatement[] = [{ sql: \"UPDATE projects SET lead_id=?,partner_id=COALESCE(partner_id,?),updated_at=? WHERE id=?\", args: [lead.id, lead.partner_id, now(), project.id] }];\n if (data.copy_stakeholder !== false && str(lead.contact_name) && str(lead.contact_phone) && str(lead.contact_email)) {\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) SELECT ?,?,?,?,?,?,CASE WHEN EXISTS(SELECT 1 FROM stakeholders WHERE project_id=?) THEN 0 ELSE 1 END,0,? WHERE NOT EXISTS(SELECT 1 FROM stakeholders WHERE project_id=? AND email=?)\",\n args: [uid(), project.id, lead.contact_name, lead.contact_phone, lead.contact_email, \"Lead contact\", project.id, now(), project.id, lead.contact_email],\n });\n }\n await db.batch(statements);\n await logLead(lead.id, a, \"project\", \"Existing project attached\", String(project.title), { project_id: project.id });\n return c.json({ ok: true });\n });\n\n app.post(\"/api/leads/:id/projects\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"convert_leads\");\n requirePartnerPermission(a, \"create_projects\");\n const lead = await getLead(c.req.param(\"id\"), a);\n if (!lead) throw new Error(\"Lead not found\");\n const data = await body(c);\n if (!str(data.title)) throw new Error(\"Project title is required\");\n let ownerId = str(data.owner_user_id || lead.owner_user_id);\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str(owner.rows[0]?.id);\n }\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(data.partner_id || lead.partner_id) || null;\n const projectId = uid();\n const projectData = {\n ...data,\n lead_id: lead.id,\n markdown_details: str(data.markdown_details || lead.requirements_markdown),\n description: str(data.description || lead.pain_points || lead.use_case_hint).split(/\\r?\\n/)[0].slice(0, 240),\n stakeholders: data.copy_stakeholder === false ? [] : [{\n name: lead.contact_name,\n phone: lead.contact_phone,\n email: lead.contact_email,\n role: \"Lead contact\",\n email_cc: false,\n }],\n };\n const built = projectInsertStatements(projectId, projectData, {\n actorType: a.actorType,\n actorId: a.actorId,\n ownerId,\n partnerId,\n status: a.actorType === \"partner\" ? \"backlog\" : str(data.status) || \"backlog\",\n });\n built.statements.push({ sql: \"UPDATE leads SET stage='won',updated_at=? WHERE id=?\", args: [now(), lead.id] });\n await db.batch(built.statements);\n await logLead(lead.id, a, \"project\", \"Project created from lead\", str(data.title), { project_id: projectId });\n return c.json({ ok: true, id: projectId, client_pin: built.clientPin }, 201);\n });\n\n app.get(\"/api/conversations\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"chat\");\n let sql = \"SELECT c.*,p.name partner_name,u.name internal_name,CASE WHEN c.context_type='lead' THEN (SELECT title FROM leads WHERE id=c.context_id) ELSE (SELECT title FROM projects WHERE id=c.context_id) END context_title,(SELECT body FROM conversation_messages m WHERE m.conversation_id=c.id ORDER BY m.created_at DESC LIMIT 1) last_message FROM conversations c JOIN partners p ON p.id=c.partner_id JOIN internal_users u ON u.id=c.internal_user_id WHERE 1=1\";\n const args: unknown[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND c.partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n sql += \" AND c.internal_user_id=?\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY COALESCE(c.last_message_at,c.created_at) DESC\";\n const result = await db.execute({ sql, args });\n return c.json({ conversations: result.rows.map((item: any) => ({\n ...item,\n unread: a.actorType === \"partner\"\n ? Boolean(item.last_message_at && (!item.last_read_partner_at || item.last_message_at > item.last_read_partner_at))\n : Boolean(item.last_message_at && (!item.last_read_internal_at || item.last_message_at > item.last_read_internal_at)),\n })), options: await optionsFor(a) });\n });\n\n app.post(\"/api/conversations\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"chat\");\n const data = await body(c);\n const contextType = data.context_type === \"lead\" ? \"lead\" : data.context_type === \"project\" ? \"project\" : \"\";\n if (!contextType) throw new Error(\"Select a lead or project context\");\n const contextId = str(data.context_id);\n const subject = str(data.subject);\n if (!subject) throw new Error(\"Thread subject is required\");\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(data.partner_id);\n const internalUserId = a.actorType === \"internal\" ? a.actorId : str(data.internal_user_id);\n if (!partnerId || !internalUserId) throw new Error(\"Select the partner and AFLABS user\");\n const context = contextType === \"lead\"\n ? (await db.execute({ sql: \"SELECT id,partner_id FROM leads WHERE id=?\", args: [contextId] })).rows[0]\n : (await db.execute({ sql: \"SELECT id,partner_id FROM projects WHERE id=?\", args: [contextId] })).rows[0];\n if (!context || String(context.partner_id || \"\") !== partnerId) throw new Error(\"The selected context does not belong to this partner\");\n const id = uid();\n const stamp = now();\n await db.execute({\n sql: \"INSERT INTO conversations(id,context_type,context_id,partner_id,internal_user_id,subject,status,created_at,updated_at) VALUES(?,?,?,?,?,?,'open',?,?)\",\n args: [id, contextType, contextId, partnerId, internalUserId, subject, stamp, stamp],\n });\n if (str(data.message)) {\n await db.execute({ sql: \"INSERT INTO conversation_messages(id,conversation_id,sender_type,sender_id,sender_name,body,created_at) VALUES(?,?,?,?,?,?,?)\", args: [uid(), id, a.actorType, a.actorId, a.name, str(data.message), stamp] });\n await db.execute({ sql: \"UPDATE conversations SET last_message_at=?,updated_at=? WHERE id=?\", args: [stamp, stamp, id] });\n }\n return c.json({ ok: true, id }, 201);\n });\n\n app.get(\"/api/conversations/:id/messages\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"chat\");\n let sql = \"SELECT * FROM conversations WHERE id=?\";\n const args: unknown[] = [c.req.param(\"id\")];\n if (a.actorType === \"partner\") {\n sql += \" AND partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n sql += \" AND internal_user_id=?\";\n args.push(a.actorId);\n }\n const conversation = (await db.execute({ sql, args })).rows[0];\n if (!conversation) throw new Error(\"Conversation not found\");\n const stamp = now();\n await db.execute({\n sql: a.actorType === \"partner\" ? \"UPDATE conversations SET last_read_partner_at=? WHERE id=?\" : \"UPDATE conversations SET last_read_internal_at=? WHERE id=?\",\n args: [stamp, conversation.id],\n });\n const messages = await db.execute({ sql: \"SELECT * FROM conversation_messages WHERE conversation_id=? ORDER BY created_at\", args: [conversation.id] });\n return c.json({ conversation, messages: messages.rows });\n });\n\n app.post(\"/api/conversations/:id/messages\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"chat\");\n let sql = \"SELECT * FROM conversations WHERE id=?\";\n const args: unknown[] = [c.req.param(\"id\")];\n if (a.actorType === \"partner\") {\n sql += \" AND partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n sql += \" AND internal_user_id=?\";\n args.push(a.actorId);\n }\n const conversation = (await db.execute({ sql, args })).rows[0];\n if (!conversation) throw new Error(\"Conversation not found\");\n const data = await body(c);\n const message = str(data.body);\n if (!message) throw new Error(\"Message is required\");\n const stamp = now();\n await db.batch([\n { sql: \"INSERT INTO conversation_messages(id,conversation_id,sender_type,sender_id,sender_name,body,created_at) VALUES(?,?,?,?,?,?,?)\", args: [uid(), conversation.id, a.actorType, a.actorId, a.name, message, stamp] },\n { sql: \"UPDATE conversations SET last_message_at=?,updated_at=? WHERE id=?\", args: [stamp, stamp, conversation.id] },\n ]);\n return c.json({ ok: true }, 201);\n });\n\n app.get(\"/api/meetings\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"book_meetings\");\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(c.req.query(\"partner_id\"));\n const slotResult = await db.execute({ sql: \"SELECT * FROM meeting_slots WHERE ends_at>=? ORDER BY starts_at\", args: [now()] });\n let meetingSql = \"SELECT m.*,p.name partner_name,u.name internal_name FROM meetings m JOIN partners p ON p.id=m.partner_id LEFT JOIN internal_users u ON u.id=m.internal_user_id WHERE m.ends_at>=?\";\n const args: unknown[] = [now()];\n if (a.actorType === \"partner\") {\n meetingSql += \" AND m.partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n meetingSql += \" AND (m.internal_user_id=? OR m.created_by_id=?)\";\n args.push(a.actorId, a.actorId);\n }\n meetingSql += \" ORDER BY m.starts_at\";\n const meetings = await db.execute({ sql: meetingSql, args });\n const snapshot = partnerId ? await targetSnapshot(partnerId) : null;\n return c.json({ slots: slotResult.rows, meetings: meetings.rows, target: snapshot, options: await optionsFor(a) });\n });\n\n app.post(\"/api/admin/meeting-slots\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage availability\");\n const data = await body(c);\n const startsAt = safeDateTime(data.starts_at);\n const endsAt = safeDateTime(data.ends_at);\n if (Date.parse(endsAt) <= Date.parse(startsAt)) throw new Error(\"End time must be after start time\");\n await db.execute({\n sql: \"INSERT INTO meeting_slots(id,slot_type,starts_at,ends_at,note,created_by_id,created_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), data.slot_type === \"blocked\" ? \"blocked\" : \"available\", startsAt, endsAt, str(data.note), a.actorId, now()],\n });\n return c.json({ ok: true }, 201);\n });\n\n app.delete(\"/api/admin/meeting-slots/:id\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage availability\");\n await db.execute({ sql: \"DELETE FROM meeting_slots WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n });\n\n app.post(\"/api/meetings\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"book_meetings\");\n const data = await body(c);\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(data.partner_id);\n if (!partnerId) throw new Error(\"Select a partner\");\n const startsAt = safeDateTime(data.starts_at);\n const endsAt = safeDateTime(data.ends_at);\n if (Date.parse(endsAt) <= Date.parse(startsAt) || Date.parse(startsAt) < Date.now()) throw new Error(\"Select a valid future time\");\n if (a.actorType === \"partner\") {\n const availability = await db.execute({ sql: \"SELECT id FROM meeting_slots WHERE slot_type='available' AND starts_at<=? AND ends_at>=? LIMIT 1\", args: [startsAt, endsAt] });\n if (!availability.rows[0]) throw new Error(\"Select a time inside an available slot\");\n const blocked = await db.execute({ sql: \"SELECT id FROM meeting_slots WHERE slot_type='blocked' AND starts_at<? AND ends_at>? LIMIT 1\", args: [endsAt, startsAt] });\n if (blocked.rows[0]) throw new Error(\"This time is blocked\");\n const snapshot = await targetSnapshot(partnerId, startsAt.slice(0, 7));\n const limit = Number(snapshot.target?.meetings_allowed || 0);\n if (!limit || snapshot.achieved.meetings >= limit) throw new Error(\"Monthly meeting allowance has been used\");\n }\n const collision = await db.execute({ sql: \"SELECT id FROM meetings WHERE status<>'cancelled' AND starts_at<? AND ends_at>? LIMIT 1\", args: [endsAt, startsAt] });\n if (collision.rows[0]) throw new Error(\"That time is already booked\");\n const contextType = [\"lead\", \"project\", \"other\"].includes(data.context_type) ? data.context_type : \"other\";\n const contextId = contextType === \"other\" ? null : str(data.context_id);\n if (contextId) {\n const context = contextType === \"lead\"\n ? (await db.execute({ sql: \"SELECT partner_id FROM leads WHERE id=?\", args: [contextId] })).rows[0]\n : (await db.execute({ sql: \"SELECT partner_id FROM projects WHERE id=?\", args: [contextId] })).rows[0];\n if (!context || String(context.partner_id || \"\") !== partnerId) throw new Error(\"Selected context does not belong to this partner\");\n }\n const id = uid();\n const stamp = now();\n await db.execute({\n sql: \"INSERT INTO meetings(id,partner_id,internal_user_id,context_type,context_id,agenda,starts_at,ends_at,join_url,place,status,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,'booked',?,?,?,?)\",\n args: [id, partnerId, str(data.internal_user_id) || null, contextType, contextId, str(data.agenda) || \"Partner meeting\", startsAt, endsAt, /^https?:\\/\\//.test(str(data.join_url)) ? str(data.join_url) : null, str(data.place) || null, a.actorType, a.actorId, stamp, stamp],\n });\n return c.json({ ok: true, id }, 201);\n });\n\n app.patch(\"/api/meetings/:id\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n const result = await db.execute({ sql: \"SELECT * FROM meetings WHERE id=?\", args: [c.req.param(\"id\")] });\n const meeting = result.rows[0];\n if (!meeting || (a.actorType === \"partner\" && String(meeting.partner_id) !== a.actorId)) throw new Error(\"Meeting not found\");\n const data = await body(c);\n const status = [\"booked\", \"confirmed\", \"completed\", \"cancelled\"].includes(data.status) ? data.status : meeting.status;\n if (a.actorType === \"partner\" && ![\"booked\", \"cancelled\"].includes(status)) throw new Error(\"Only AFLABS can confirm or complete meetings\");\n await db.execute({\n sql: \"UPDATE meetings SET internal_user_id=?,join_url=?,place=?,status=?,updated_at=? WHERE id=?\",\n args: [a.actorType === \"partner\" ? meeting.internal_user_id : str(data.internal_user_id ?? meeting.internal_user_id) || null, data.join_url === undefined ? meeting.join_url : /^https?:\\/\\//.test(str(data.join_url)) ? str(data.join_url) : null, data.place === undefined ? meeting.place : str(data.place) || null, status, now(), meeting.id],\n });\n return c.json({ ok: true });\n });\n\n app.get(\"/api/mou\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(c.req.query(\"partner_id\"));\n if (a.actorType !== \"partner\" && !admin(a)) throw new Error(\"Admins only can manage partner agreements\");\n const partners = admin(a) ? await db.execute(\"SELECT id,name FROM partners WHERE active=1 ORDER BY name\") : { rows: [] };\n const templates = admin(a) ? await db.execute(\"SELECT * FROM mou_templates WHERE active=1 ORDER BY updated_at DESC\") : { rows: [] };\n if (!partnerId) return c.json({ partners: partners.rows, templates: templates.rows, mou: null, targets: [], snapshot: null });\n const [partner, mou, targets] = await Promise.all([\n db.execute({ sql: \"SELECT id,name,brand_name FROM partners WHERE id=?\", args: [partnerId] }),\n db.execute({ sql: \"SELECT * FROM partner_mous WHERE partner_id=? ORDER BY created_at DESC LIMIT 1\", args: [partnerId] }),\n db.execute({ sql: \"SELECT * FROM partner_targets WHERE partner_id=? ORDER BY target_month DESC,created_at DESC\", args: [partnerId] }),\n ]);\n if (!partner.rows[0] || (a.actorType === \"partner\" && partnerId !== a.actorId)) throw new Error(\"Partner not found\");\n return c.json({ partners: partners.rows, templates: templates.rows, partner: partner.rows[0], mou: mou.rows[0] || null, targets: targets.rows, snapshot: await targetSnapshot(partnerId) });\n });\n\n app.post(\"/api/admin/mou-templates\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage MoU templates\");\n const data = await body(c);\n if (!str(data.name) || !str(data.terms_markdown)) throw new Error(\"Template name and terms are required\");\n const stamp = now();\n await db.execute({ sql: \"INSERT INTO mou_templates(id,name,terms_markdown,benefits_markdown,active,created_by_id,created_at,updated_at) VALUES(?,?,?,?,1,?,?,?)\", args: [uid(), str(data.name), str(data.terms_markdown), str(data.benefits_markdown), a.actorId, stamp, stamp] });\n return c.json({ ok: true }, 201);\n });\n\n app.post(\"/api/admin/partners/:id/mou\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partner agreements\");\n const data = await body(c);\n let terms = str(data.terms_markdown);\n let benefits = str(data.benefits_markdown);\n const templateId = str(data.template_id) || null;\n if (templateId && (!terms || !benefits)) {\n const template = (await db.execute({ sql: \"SELECT * FROM mou_templates WHERE id=?\", args: [templateId] })).rows[0];\n if (!template) throw new Error(\"MoU template not found\");\n terms ||= str(template.terms_markdown);\n benefits ||= str(template.benefits_markdown);\n }\n if (!terms) throw new Error(\"MoU terms are required\");\n await db.batch([\n { sql: \"UPDATE partner_mous SET status='superseded' WHERE partner_id=? AND status='active'\", args: [c.req.param(\"id\")] },\n { sql: \"INSERT INTO partner_mous(id,partner_id,template_id,terms_markdown,benefits_markdown,effective_from,status,created_by_id,created_at) VALUES(?,?,?,?,?,?,'active',?,?)\", args: [uid(), c.req.param(\"id\"), templateId, terms, benefits, str(data.effective_from) || now().slice(0, 10), a.actorId, now()] },\n ]);\n return c.json({ ok: true }, 201);\n });\n\n app.post(\"/api/admin/partners/:id/targets\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partner targets\");\n const data = await body(c);\n const month = monthBounds(data.target_month).month;\n await db.execute({\n sql: \"INSERT INTO partner_targets(id,partner_id,target_month,leads_target,projects_target,revenue_target,revenue_currency,meetings_allowed,note,created_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?,?,?)\",\n args: [uid(), c.req.param(\"id\"), month, Math.max(0, Number(data.leads_target) || 0), Math.max(0, Number(data.projects_target) || 0), Math.max(0, Number(data.revenue_target) || 0), str(data.revenue_currency) || \"INR\", Math.max(0, Number(data.meetings_allowed) || 0), str(data.note), a.actorId, now()],\n });\n return c.json({ ok: true }, 201);\n });\n\n app.get(\"/api/business-ideas\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"use_ai\");\n let sql = \"SELECT i.*,p.name partner_name FROM business_ideas i LEFT JOIN partners p ON p.id=i.partner_id WHERE 1=1\";\n const args: unknown[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND i.partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n sql += \" AND i.created_by_type='internal' AND i.created_by_id=?\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY i.created_at DESC\";\n const result = await db.execute({ sql, args });\n return c.json({ ideas: result.rows.map((idea: any) => ({ ...idea, input_data: json(idea.input_data, {}) })), options: await optionsFor(a) });\n });\n\n app.post(\"/api/business-ideas\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"use_ai\");\n const data = await body(c);\n for (const key of [\"customer_name\", \"category\", \"business_type\", \"pain_points\", \"use_case_hint\"]) {\n if (!str(data[key])) throw new Error(key.replaceAll(\"_\", \" \") + \" is required\");\n }\n const prompt = await setting(\"business_pitch_prompt\", IDEA_PROMPT);\n const input = {\n customer_name: str(data.customer_name),\n category: str(data.category),\n business_type: str(data.business_type),\n pain_points: str(data.pain_points),\n inside_info: str(data.inside_info),\n use_case_hint: str(data.use_case_hint),\n budget: Number(data.budget) || 0,\n currency: str(data.currency) || \"INR\",\n };\n const response = await openai.responses.create({\n model: \"gpt-5.4-mini\",\n instructions: prompt,\n input: \"Build the pitch around these verified inputs:\\n\" + JSON.stringify(input, null, 2),\n });\n const generated = str(response.output_text);\n if (!generated) throw new Error(\"AI did not return a pitch\");\n const id = uid();\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(data.partner_id) || null;\n const stamp = now();\n await db.execute({\n sql: \"INSERT INTO business_ideas(id,title,input_data,generated_markdown,partner_id,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [id, str(data.title) || input.customer_name + \" growth pitch\", JSON.stringify(input), generated, partnerId, a.actorType, a.actorId, stamp, stamp],\n });\n return c.json({ ok: true, id, generated_markdown: generated }, 201);\n });\n\n app.post(\"/api/business-ideas/:id/proposal\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n requirePartnerPermission(a, \"use_ai\");\n let sql = \"SELECT * FROM business_ideas WHERE id=?\";\n const args: unknown[] = [c.req.param(\"id\")];\n if (a.actorType === \"partner\") {\n sql += \" AND partner_id=?\";\n args.push(a.actorId);\n } else if (!admin(a)) {\n sql += \" AND created_by_id=?\";\n args.push(a.actorId);\n }\n const idea = (await db.execute({ sql, args })).rows[0];\n if (!idea) throw new Error(\"Business idea not found\");\n if (idea.proposal_id) return c.json({ ok: true, id: idea.proposal_id, existing: true });\n const prompt = await setting(\"proposal_prompt\", PROPOSAL_PROMPT);\n const response = await openai.responses.create({\n model: \"gpt-5.4-mini\",\n instructions: prompt,\n input: \"Create the proposal from this approved idea pitch:\\n\\n\" + idea.generated_markdown + \"\\n\\nVerified input:\\n\" + idea.input_data,\n });\n const markdown = str(response.output_text);\n const input = json<any>(idea.input_data, {});\n const proposalId = uid();\n const stamp = now();\n await db.batch([\n { sql: \"INSERT INTO proposals(id,title,markdown_content,structured_data,partner_id,currency,total,status,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,'draft',?,?,?)\", args: [proposalId, idea.title, markdown, JSON.stringify({ project: { title: idea.title, description: str(input.pain_points).split(/\\r?\\n/)[0], markdown_details: markdown, currency: input.currency, regular_cost: input.budget }, source_business_idea_id: idea.id }), idea.partner_id, input.currency || \"INR\", Number(input.budget) || 0, a.actorId, stamp, stamp] },\n { sql: \"UPDATE business_ideas SET proposal_id=?,updated_at=? WHERE id=?\", args: [proposalId, stamp, idea.id] },\n ]);\n return c.json({ ok: true, id: proposalId }, 201);\n });\n\n app.get(\"/api/admin/ai-prompts\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage AI prompts\");\n return c.json({\n business_pitch_prompt: await setting(\"business_pitch_prompt\", IDEA_PROMPT),\n proposal_prompt: await setting(\"proposal_prompt\", PROPOSAL_PROMPT),\n });\n });\n\n app.patch(\"/api/admin/ai-prompts\", async (c: any) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage AI prompts\");\n const data = await body(c);\n if (str(data.business_pitch_prompt)) await saveSetting(\"business_pitch_prompt\", str(data.business_pitch_prompt));\n if (str(data.proposal_prompt)) await saveSetting(\"proposal_prompt\", str(data.proposal_prompt));\n return c.json({ ok: true });\n });\n\n app.get(\"/api/growth/dashboard\", async (c: any) => {\n const a = await actor(c);\n requireTeam(a);\n let leadSql = \"SELECT * FROM leads WHERE 1=1\";\n let projectSql = \"SELECT p.*,COALESCE((SELECT SUM(amount) FROM payments pm WHERE pm.project_id=p.id),0) paid FROM projects p WHERE p.archived=0\";\n const leadArgs: unknown[] = [];\n const projectArgs: unknown[] = [];\n if (a.actorType === \"partner\") {\n leadSql += \" AND partner_id=?\";\n projectSql += \" AND partner_id=?\";\n leadArgs.push(a.actorId);\n projectArgs.push(a.actorId);\n } else if (!admin(a) && !a.allProjectAccess) {\n leadSql += \" AND owner_user_id=?\";\n projectSql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n leadArgs.push(a.actorId);\n projectArgs.push(a.actorId);\n }\n const [leads, projects, meetings, conversations] = await Promise.all([\n db.execute({ sql: leadSql, args: leadArgs }),\n db.execute({ sql: projectSql, args: projectArgs }),\n db.execute({ sql: \"SELECT COUNT(*) count FROM meetings WHERE status IN ('booked','confirmed') AND starts_at>=? \" + (a.actorType === \"partner\" ? \"AND partner_id=?\" : \"\"), args: a.actorType === \"partner\" ? [now(), a.actorId] : [now()] }),\n db.execute({ sql: \"SELECT COUNT(*) count FROM conversations WHERE last_message_at IS NOT NULL \" + (a.actorType === \"partner\" ? \"AND partner_id=? AND (last_read_partner_at IS NULL OR last_message_at>last_read_partner_at)\" : admin(a) ? \"AND (last_read_internal_at IS NULL OR last_message_at>last_read_internal_at)\" : \"AND internal_user_id=? AND (last_read_internal_at IS NULL OR last_message_at>last_read_internal_at)\"), args: a.actorType === \"partner\" ? [a.actorId] : admin(a) ? [] : [a.actorId] }),\n ]);\n const pipelineValue = leads.rows.filter((lead: any) => ![\"won\", \"lost\"].includes(lead.stage)).reduce((sum: number, lead: any) => sum + Number(lead.expected_budget || 0), 0);\n const won = leads.rows.filter((lead: any) => lead.stage === \"won\").length;\n const overdue = projects.rows.filter((project: any) => project.status !== \"done\" && project.end_date && Date.parse(project.end_date) < Date.now()).length;\n const snapshot = a.actorType === \"partner\" ? await targetSnapshot(a.actorId) : null;\n return c.json({\n leads_total: leads.rows.length,\n leads_won: won,\n conversion_rate: leads.rows.length ? Math.round(won / leads.rows.length * 100) : 0,\n pipeline_value: pipelineValue,\n pipeline_currency: str(leads.rows.find((lead: any) => Number(lead.expected_budget))?.currency) || \"INR\",\n active_projects: projects.rows.filter((project: any) => project.status !== \"done\").length,\n overdue_projects: overdue,\n upcoming_meetings: Number(meetings.rows[0]?.count || 0),\n unread_conversations: Number(conversations.rows[0]?.count || 0),\n target: snapshot,\n });\n });\n }\n\n return { migrate, register };\n}\n",[178],"26c90fa8-07ef-4be2-8e18-fea80fc8dfb3","README.md","019fada5-614d-738d-bbb2-8864d623b645",["D",1786653143386],4,"# AFLABS PM\n\nA full Val Town operations workspace for AFLABS administrators, internal users, and partners.\n\n## Runtime\n\n- Val Town React + Hono\n- Selectable Neon Postgres or Turso/libSQL database\n- Phone-and-PIN authentication for internal users and partners\n- Secret project URL plus PIN for clients\n- Cookie-backed sessions\n- Val Town `std/openai` for AI project extraction, proposals, and business pitch generation\n\n## Required environment variables\n\n- `DATABASE_PROVIDER` (`neon` or `turso`)\n- `NEON_DATABASE_URL` when using Neon\n- `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN` when using Turso\n- `CACHE_ENABLED` (`true` or `false`)\n- `APP_BOOTSTRAP_TOKEN`\n- `SESSION_SECRET`\n\nThe selected database provider is permanently recorded in Val-scoped blob storage on first use. Changing `DATABASE_PROVIDER` later fails safely.\n\n## Main capabilities\n\n- Lead pipeline with stage overview, reminders, requirements, complete audit timeline, and one-to-many project conversion\n- Mandatory lead origin for new projects and attachment flow for legacy projects\n- Project filters for type, due date, stage, and partner\n- Scoped one-to-one AFLABS ↔ partner conversation threads for a single lead or project\n- Project one-line summaries plus Markdown working notes\n- Basic, advanced, and custom partner permission packages\n- Itemized invoice PDFs with quantity, unit price, discount, arrears, optional tax, and totals\n- Commercial cost preview for regular cost, partner-managed cost, spread, tax, and client total\n- AI Business Idea Pitch Generator for admins and eligible partners\n- Admin-configurable AI pitch and proposal prompts stored in application settings\n- Partner MoU templates, published agreement versions, monthly targets, achievement metrics, and target history\n- Admin and partner dashboards with pipeline, delivery risks, revenue, meetings, unread threads, and target trajectory\n- Meeting availability and blocking, quota enforcement, collision prevention, lead/project context, and online/offline venue\n- Existing delivery Kanban, milestones, stakeholders, payments, branded proposals, recurring projects, client portal, and activity history\n\n## Data evolution\n\nThe growth-suite schema is created idempotently on authenticated API requests. Existing project records remain valid and can be attached to a lead later; all newly created projects require an originating lead.\n",[184],"df509fd1-3004-4668-a9be-ed6d1763e40b","scripts","f6625940-f161-4cf0-b862-081103dfd8b4",14,["D",1785327805216],"directory",[191],"c48219a0-f722-4a49-9b6b-09e7d2e33882","frontend","019fada5-614d-738d-bbb2-876b78247f7e",1,["D",1785324724390],[198],"78f06f1e-991f-49fa-8ebd-6802aa5a8e90","diagnostics","b2481c4f-69e8-451f-8db5-a88ab58ba99c",52,["D",1785343198085],[204],"pulls","branches",10,"forks","envVars",{"_217":219,"_220":74},"connections",{"_217":74,"_218":74},"count","unfilledCount",12,"emptyCount",{"_53":203,"_33":204,"_31":205,"_168":-5,"_43":44,"_42":206,"_170":70,"_40":324,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_238":325,"_28":326},{"_53":197,"_33":198,"_31":199,"_168":-5,"_43":44,"_42":200,"_170":70,"_40":321,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_238":322,"_28":323},{"_53":317,"_33":304,"_31":300,"_168":199,"_43":44,"_42":200,"_170":70,"_40":318,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_238":319,"_28":320},{"_53":312,"_33":49,"_31":48,"_168":300,"_43":44,"_42":14,"_170":26,"_40":313,"_13":314,"_35":36,"_37":51,"_25":26,"_175":-5,"_238":315,"_28":316},{"_53":305,"_33":306,"_31":307,"_168":300,"_43":44,"_42":200,"_170":70,"_40":308,"_13":74,"_35":36,"_37":309,"_25":26,"_175":-5,"_238":310,"_28":311},{"_53":299,"_33":34,"_31":32,"_168":300,"_43":44,"_42":14,"_170":26,"_40":301,"_13":287,"_35":36,"_37":39,"_25":26,"_175":-5,"_238":302,"_28":303},{"_53":291,"_33":292,"_31":293,"_168":199,"_43":44,"_42":294,"_170":70,"_40":295,"_13":200,"_35":21,"_37":296,"_25":26,"_175":-5,"_238":297,"_28":298},{"_53":282,"_33":283,"_31":284,"_168":199,"_43":44,"_42":285,"_170":26,"_40":286,"_13":287,"_35":21,"_37":288,"_25":26,"_175":-5,"_238":289,"_28":290},{"_53":275,"_33":276,"_31":277,"_168":199,"_43":44,"_42":169,"_170":70,"_40":278,"_13":187,"_35":21,"_37":279,"_25":26,"_175":-5,"_238":280,"_28":281},{"_53":268,"_33":269,"_31":270,"_168":199,"_43":44,"_42":252,"_170":70,"_40":271,"_13":200,"_35":36,"_37":272,"_25":26,"_175":-5,"_238":273,"_28":274},{"_53":259,"_33":260,"_31":261,"_168":199,"_43":44,"_42":262,"_170":26,"_40":263,"_13":264,"_35":21,"_37":265,"_25":26,"_175":-5,"_238":266,"_28":267},{"_53":190,"_33":191,"_31":192,"_168":-5,"_43":44,"_42":193,"_170":70,"_40":256,"_13":74,"_35":195,"_37":-5,"_25":26,"_175":-5,"_238":257,"_28":258},{"_53":247,"_33":248,"_31":249,"_168":192,"_43":44,"_42":250,"_170":70,"_40":251,"_13":252,"_35":36,"_37":253,"_25":26,"_175":-5,"_238":254,"_28":255},{"_53":183,"_33":184,"_31":185,"_168":-5,"_43":44,"_42":169,"_170":70,"_40":244,"_13":187,"_35":21,"_37":188,"_25":26,"_175":-5,"_238":245,"_28":246},{"_53":177,"_33":178,"_31":179,"_168":-5,"_43":44,"_42":169,"_170":26,"_40":241,"_13":74,"_35":36,"_37":181,"_25":26,"_175":-5,"_238":242,"_28":243},{"_53":166,"_33":167,"_31":68,"_168":-5,"_43":44,"_42":169,"_170":70,"_40":237,"_13":172,"_35":173,"_37":174,"_25":26,"_175":55,"_238":239,"_28":240},["D",1786653143386],"children",[],[167],["D",1786653143386],[],[178],["D",1786653143386],[],[184],"fade81e1-e797-4572-b2ca-5bce9e5c7cbf","neon-connection-test.ts","9ec78434-8b8a-11f1-a11b-1607ee4eb77e",93,["D",1785356631336],6,"import { neon } from \"npm:@neondatabase/serverless\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst connectionString = Deno.env.get(\"NEON_DATABASE_URL\");\nif (!connectionString) throw new Error(\"NEON_DATABASE_URL is missing\");\nconst sql = neon(connectionString);\nconst id = crypto.randomUUID();\nconst results = await sql.transaction([\n sql.query(\"CREATE TABLE IF NOT EXISTS provider_adapter_test (id TEXT PRIMARY KEY, label TEXT NOT NULL)\"),\n sql.query(\"INSERT INTO provider_adapter_test(id,label) VALUES($1,$2) ON CONFLICT DO NOTHING\", [id, \"Adapter ready\"]),\n sql.query(\"SELECT id,label FROM provider_adapter_test WHERE id=$1\", [id]),\n], { fullResults: true });\nconst single = await sql.query(\"SELECT $1::text label\", [\"Single query ready\"], { fullResults: true });\nawait sql.query(\"DROP TABLE provider_adapter_test\");\nconst savedLock = await blob.getJSON(\"config:database-provider-lock:v1\");\nconsole.log({\n ok: results[2]?.rows?.[0]?.label === \"Adapter ready\" && single.rows?.[0]?.label === \"Single query ready\",\n lockState: savedLock ?? \"empty\",\n resultCount: results.length,\n inserted: results[1]?.rowCount,\n selected: results[2]?.rows?.length,\n});\n",[],[191,248],["D",1785327805216],[233],[191],"1179a15d-ca4f-4041-baa8-c63913415cb4","styles.css","2bc34f40-8b44-11f1-9ddb-1607ee4eb77e",116,["D",1786656193523],18,":root {\n --bg: oklch(1 0 0);\n --surface: oklch(0.975 0.004 240);\n --surface-raised: oklch(0.992 0.002 240);\n --ink: oklch(0.18 0.012 245);\n --muted: oklch(0.46 0.018 245);\n --faint: oklch(0.65 0.012 245);\n --border: oklch(0.9 0.008 240);\n --border-strong: oklch(0.82 0.012 240);\n --blue: oklch(0.55 0.12 245);\n --blue-dark: oklch(0.48 0.13 245);\n --blue-soft: oklch(0.95 0.025 245);\n --lemon: oklch(0.88 0.18 115);\n --lemon-soft: oklch(0.96 0.08 115);\n --danger: oklch(0.55 0.19 25);\n --danger-soft: oklch(0.96 0.025 25);\n --warning: oklch(0.72 0.15 75);\n --success: oklch(0.57 0.14 145);\n --success-soft: oklch(0.95 0.035 145);\n --sidebar: oklch(0.155 0.012 245);\n --z-dropdown: 20;\n --z-sticky: 30;\n --z-backdrop: 40;\n --z-modal: 50;\n --z-toast: 60;\n color: var(--ink);\n background: var(--bg);\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n font-synthesis: none;\n line-height: 1.5;\n text-rendering: optimizeLegibility;\n}\n\n* { box-sizing: border-box; }\nhtml, body, #root { min-height: 100%; margin: 0; }\nbody { min-width: 320px; background: var(--bg); }\nbutton, input, textarea, select { font: inherit; }\nbutton, a { -webkit-tap-highlight-color: transparent; }\nbutton { color: inherit; }\na { color: inherit; }\n.icon { flex: 0 0 auto; }\nh1, h2, h3, h4, p { margin-top: 0; }\nh1, h2, h3 { letter-spacing: -0.025em; text-wrap: balance; }\np { text-wrap: pretty; }\n\n.button {\n min-height: 40px;\n border: 0;\n border-radius: 10px;\n padding: 0 15px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 650;\n cursor: pointer;\n transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, opacity 180ms ease-out;\n}\n.button:active { transform: translateY(1px); }\n.button:disabled { cursor: wait; opacity: .58; }\n.button-primary, .button-primary span { color: white !important; }\n.button-primary { background: var(--blue); }\n.button-primary:hover { background: var(--blue-dark); }\n.button-secondary { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }\n.button-secondary:hover { background: oklch(0.95 0.008 240); }\n.button-danger { color: var(--danger); background: var(--danger-soft); }\n.button-danger:hover { background: oklch(0.93 0.045 25); }\n.icon-button {\n width: 38px;\n height: 38px;\n border: 0;\n border-radius: 9px;\n background: transparent;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n.icon-button:hover { background: var(--surface); }\nbutton:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {\n outline: 3px solid oklch(0.72 0.12 245 / .35);\n outline-offset: 2px;\n}\n\n.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.field > span, fieldset legend {\n color: oklch(0.3 0.018 245);\n font-size: 12px;\n font-weight: 650;\n}\n.field small { color: var(--muted); font-size: 11px; }\ninput, textarea, select {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n padding: 9px 11px;\n transition: border-color 160ms ease-out, box-shadow 160ms ease-out;\n}\ninput, select { min-height: 42px; }\ntextarea { resize: vertical; line-height: 1.5; }\ninput::placeholder, textarea::placeholder { color: oklch(0.51 0.012 245); opacity: 1; }\ninput:hover, textarea:hover, select:hover { border-color: oklch(0.72 0.025 245); }\ninput:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.55 0.12 245 / .12); outline: 0; }\n.stack { display: flex; flex-direction: column; gap: 16px; }\n.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }\n.form-row > .field { flex: 1 1 180px; }\n.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.form-grid > .field:nth-of-type(3) { grid-column: 1 / -1; }\n.full { grid-column: 1 / -1; }\n.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }\n.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }\n.check input { width: 16px; min-height: 16px; height: 16px; accent-color: var(--blue); }\nfieldset { border: 0; padding: 0; margin: 0; }\nfieldset legend { margin-bottom: 10px; }\n\n.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }\n.brand b { color: var(--lemon); font-weight: 700; }\n.brand-mark {\n width: 31px;\n height: 31px;\n background: oklch(0.18 0.015 245);\n border-radius: 8px;\n display: grid;\n place-items: center;\n overflow: hidden;\n}\n.brand-mark img { width: 100%; height: 100%; object-fit: contain; }\n.brand-mark-large { width: 38px; height: 38px; border-radius: 10px; }\n.brand-large { font-size: 17px; }\n.brand-large .brand-mark { width: 38px; height: 38px; border-radius: 10px; }\n.alert { border-radius: 10px; padding: 10px 12px; font-size: 12px; }\n.alert-error { color: oklch(0.42 0.17 25); background: var(--danger-soft); }\n.alert-warning { color: oklch(0.38 0.1 65); background: oklch(0.95 0.045 78); }\n\n.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .95fr) minmax(430px, 1.05fr); }\n.auth-brand {\n color: white;\n background: var(--sidebar);\n padding: 44px clamp(36px, 6vw, 92px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 100vh;\n}\n.auth-statement { max-width: 580px; }\n.auth-statement .signal { color: oklch(0.82 0.03 245); font-size: 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }\n.auth-statement .signal i { width: 7px; height: 7px; background: var(--lemon); border-radius: 50%; box-shadow: 0 0 0 5px oklch(0.88 0.18 115 / .12); }\n.auth-statement h1 { font-size: clamp(2.7rem, 5vw, 5.25rem); line-height: .99; max-width: 10ch; letter-spacing: -.04em; margin-bottom: 26px; }\n.auth-statement p { color: oklch(0.78 0.02 245); font-size: 16px; max-width: 49ch; line-height: 1.7; }\n.auth-foot { color: oklch(0.65 0.02 245); font-size: 12px; }\n.auth-panel { display: grid; place-items: center; padding: 40px; background: var(--bg); }\n.auth-card { width: min(100%, 410px); }\n.auth-heading { margin-bottom: 28px; }\n.auth-heading h2 { font-size: 28px; margin-bottom: 8px; }\n.auth-heading p, .auth-note { color: var(--muted); font-size: 13px; line-height: 1.6; }\n.auth-note { text-align: center; margin-top: 20px; }\n.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface); border-radius: 11px; margin-bottom: 22px; }\n.segmented button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }\n.segmented button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px oklch(0.18 0.012 245 / .1); }\n.app-loading, .client-loading { min-height: 100vh; display: grid; place-content: center; gap: 24px; }\n.loading-line { width: 180px; height: 2px; background: var(--border); overflow: hidden; }\n.loading-line i { display: block; width: 48%; height: 100%; background: var(--blue); animation: loading 1.2s infinite ease-in-out; }\n@keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } }\n.network-activity { position: fixed; top: 10px; left: 50%; z-index: var(--z-toast); min-height: 28px; padding: 0 10px 0 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: white; background: var(--sidebar); border-radius: 8px; font-size: 9px; font-weight: 650; }\n.network-activity i { width: 7px; height: 7px; border-radius: 50%; background: var(--lemon); animation: activity-pulse .9s ease-in-out infinite alternate; }\n@keyframes activity-pulse { to { opacity: .38; transform: scale(.82); } }\n.page-skeleton { min-height: 520px; padding: 34px 30px; background: var(--surface-raised); }\n.page-skeleton .skeleton { max-width: 980px; margin: 12px 0; }\n.skeleton-row { height: 74px; }\n.skeleton-chart { width: min(100%, 760px); height: 190px; }\n.skeleton-column-title { width: 55%; height: 20px; margin: 8px 4px 18px; }\n.skeleton-card { height: 138px; margin-bottom: 10px; background: var(--bg); }\n\n.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); background: var(--surface); }\n.sidebar {\n position: sticky;\n top: 0;\n height: 100vh;\n color: white;\n background: var(--sidebar);\n padding: 22px 14px 16px;\n display: flex;\n flex-direction: column;\n z-index: var(--z-sticky);\n}\n.sidebar > .brand { padding: 0 10px; margin-bottom: 34px; }\n.sidebar nav { display: flex; flex-direction: column; gap: 4px; }\n.sidebar nav button {\n min-height: 42px;\n color: oklch(0.78 0.018 245);\n background: transparent;\n border: 0;\n border-radius: 9px;\n padding: 0 11px;\n display: flex;\n align-items: center;\n gap: 11px;\n font-size: 12px;\n font-weight: 570;\n text-align: left;\n cursor: pointer;\n}\n.sidebar nav button:hover { color: white; background: oklch(0.22 0.014 245); }\n.sidebar nav button.active { color: var(--sidebar); background: var(--lemon); font-weight: 700; }\n.sidebar-foot { margin-top: auto; }\n.sidebar-foot > a { color: oklch(0.65 0.018 245); font-size: 11px; padding: 10px; display: flex; align-items: center; gap: 8px; text-decoration: none; }\n.account { border-top: 1px solid oklch(1 0 0 / .1); padding: 16px 4px 0; margin-top: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 9px; align-items: center; }\n.account > span { width: 34px; height: 34px; border-radius: 9px; background: oklch(0.28 0.025 245); display: grid; place-items: center; font-size: 11px; font-weight: 700; }\n.account div { min-width: 0; }\n.account b, .account small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.account b { font-size: 11px; }\n.account small { color: oklch(0.6 0.02 245); font-size: 10px; text-transform: capitalize; }\n.account button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: oklch(0.65 0.02 245); border-radius: 7px; cursor: pointer; }\n.account button:hover { background: oklch(1 0 0 / .08); color: white; }\n\n.workspace { min-width: 0; overflow: hidden; }\n.workspace-head, .page-heading { padding: 29px 30px 24px; background: white; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: end; gap: 24px; }\n.workspace-head > div:first-child, .page-heading > div { max-width: 650px; }\n.workspace-head p, .page-heading p { color: var(--blue); font-size: 11px; font-weight: 700; margin-bottom: 5px; }\n.workspace-head h1, .page-heading h1 { font-size: 25px; margin-bottom: 4px; }\n.workspace-head span, .page-heading span { color: var(--muted); font-size: 12px; }\n.head-actions { display: flex; gap: 10px; align-items: center; }\n.search { width: min(260px, 25vw); position: relative; }\n.search svg { position: absolute; left: 12px; top: 12px; color: var(--faint); }\n.search input { padding-left: 36px; background: var(--surface); border-color: transparent; }\n.mobile-nav { display: none; }\n\n.kanban { height: calc(100vh - 114px); padding: 20px 22px 24px; display: flex; gap: 12px; overflow-x: auto; align-items: stretch; }\n.kanban-column { flex: 0 0 282px; min-width: 0; display: flex; flex-direction: column; }\n.kanban-column > header { padding: 4px 5px 13px; }\n.kanban-column > header > div { display: flex; align-items: center; gap: 7px; }\n.kanban-column h2 { margin: 0; font-size: 13px; letter-spacing: -.01em; }\n.kanban-column header b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--muted); background: oklch(0.91 0.008 240); font-size: 10px; display: grid; place-items: center; }\n.kanban-column header p { color: var(--muted); font-size: 10px; margin: 4px 0 0 17px; }\n.status-symbol { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }\n.column-todo .status-symbol { background: var(--blue); }\n.column-in-progress .status-symbol { background: var(--lemon); box-shadow: 0 0 0 3px oklch(0.88 0.18 115 / .18); }\n.column-blocked .status-symbol { background: var(--warning); }\n.column-done .status-symbol { background: var(--success); }\n.kanban-list { flex: 1; min-height: 100px; padding: 3px; overflow-y: auto; scrollbar-width: thin; }\n.kanban-card {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 14px;\n text-align: left;\n margin-bottom: 9px;\n cursor: pointer;\n transition: border-color 180ms ease-out, transform 180ms ease-out;\n}\n.kanban-card:hover { border-color: var(--blue); transform: translateY(-1px); }\n.kanban-card:active { transform: translateY(0); }\n.card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }\n.type-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }\n.type-rd { background: oklch(0.55 0.16 310); }\n.type-community { background: var(--success); }\n.project-type { color: var(--muted); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.unread { margin-left: auto; min-width: 18px; height: 18px; border-radius: 999px; color: var(--sidebar); background: var(--lemon); font-size: 9px; font-weight: 750; display: grid; place-items: center; }\n.question-attention { margin-left: auto; min-height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; color: oklch(0.35 0.12 55); background: oklch(0.94 0.055 75); font-size: 9px; font-weight: 750; }\n.question-attention + .unread { margin-left: 2px; }\n.kanban-card h3 { font-size: 14px; line-height: 1.35; margin-bottom: 6px; }\n.kanban-card > p { height: 34px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 14px; }\n.card-progress { height: 3px; border-radius: 999px; background: var(--surface); overflow: hidden; }\n.card-progress span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }\n.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: var(--muted); }\n.card-meta span { display: flex; align-items: center; gap: 5px; font-size: 9px; }\n.card-meta b { font-size: 10px; color: var(--ink); }\n.deadline-countdown { width: fit-content; margin-top: 8px; padding: 3px 7px; border-radius: 999px; color: oklch(0.38 0.1 245); background: var(--blue-soft); font-size: 8px; font-weight: 700; }\n.deadline-countdown.overdue { color: oklch(0.45 0.16 28); background: var(--danger-soft); }\n.partner-chip { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.partner-chip span { width: 20px; height: 20px; border-radius: 6px; color: white; background: var(--sidebar); display: grid; place-items: center; font-size: 7px; font-weight: 700; }\n.column-empty { color: var(--faint); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 22px 12px; text-align: center; font-size: 10px; }\n\n.empty { margin: 30px auto; max-width: 380px; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; }\n.empty-mark { width: 48px; height: 48px; border-radius: 14px; color: var(--blue); background: var(--blue-soft); display: grid; place-items: center; margin-bottom: 15px; }\n.empty h3 { font-size: 16px; margin-bottom: 5px; }\n.empty p { color: var(--muted); font-size: 12px; max-width: 36ch; margin-bottom: 16px; }\n\n.modal { width: min(620px, calc(100vw - 32px)); max-height: min(880px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: white; overflow: hidden; }\n.modal-wide { width: min(1100px, calc(100vw - 32px)); }\n.modal::backdrop { background: oklch(0.1 0.01 245 / .6); }\n.modal[open] { animation: modal-in 180ms cubic-bezier(.2,.8,.2,1); }\n@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }\n.modal-inner { max-height: inherit; overflow: auto; }\n.modal-head { min-height: 86px; padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }\n.modal-head h2 { font-size: 20px; margin-bottom: 4px; }\n.modal-head p { color: var(--muted); font-size: 12px; margin: 0; }\n.modal-content { padding: 22px; }\n\n.detail { min-height: min(780px, calc(100vh - 32px)); display: flex; flex-direction: column; }\n.detail-loading { min-height: 500px; padding: 32px; }\n.skeleton { height: 58px; border-radius: 8px; background: var(--surface); margin: 12px 0; animation: pulse 1.5s infinite ease-in-out; }\n.skeleton-title { width: 45%; height: 28px; }\n@keyframes pulse { 50% { opacity: .48; } }\n.detail-header { min-height: 118px; padding: 22px 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 240px 38px; align-items: center; gap: 24px; }\n.detail-title { min-width: 0; }\n.detail-title h2 { font-size: 23px; margin: 5px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.detail-title p { color: var(--muted); font-size: 11px; margin: 0; }\n.detail-status { color: var(--muted); font-size: 10px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.deadline-badge { color: var(--blue); background: var(--blue-soft); }\n.deadline-badge.overdue { color: var(--danger); background: var(--danger-soft); }\n.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }\n.status-todo { background: var(--blue); }\n.status-in-progress { background: var(--lemon); }\n.status-blocked { background: var(--warning); }\n.status-done { background: var(--success); }\n.detail-progress > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 7px; }\n.detail-progress b { color: var(--ink); font-size: 13px; }\n.progress { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }\n.progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.detail-tabs { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; overflow-x: auto; }\n.detail-tabs button { min-height: 46px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; text-transform: capitalize; cursor: pointer; white-space: nowrap; }\n.detail-tabs button.active { color: var(--ink); border-bottom-color: var(--blue); }\n.detail-body { flex: 1; background: var(--surface-raised); }\n.detail-section, .timeline-wrap { padding: 24px; }\n.read-overview > p { max-width: 70ch; color: var(--muted); line-height: 1.75; }\n.read-overview dl { display: flex; flex-wrap: wrap; gap: 14px; }\n.read-overview dl div { min-width: 150px; padding: 14px; background: var(--surface); border-radius: 10px; }\n.read-overview dt { color: var(--muted); font-size: 10px; }\n.read-overview dd { margin: 3px 0 0; font-size: 13px; font-weight: 650; }\n.read-overview dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }\n.quick-form { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: white; display: flex; flex-direction: column; gap: 13px; }\n.quick-form .button { align-self: flex-start; }\n.section-heading { margin-bottom: 16px; }\n.section-heading h3 { font-size: 16px; margin-bottom: 3px; }\n.section-heading p { color: var(--muted); font-size: 11px; margin: 0; }\n.split-section { display: grid; grid-template-columns: 1fr; gap: 30px; }\n.split-section > section + section { padding-top: 26px; border-top: 1px solid var(--border); }\n\n.timeline { max-width: 740px; margin: 24px auto 0; }\n.timeline-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 22px; }\n.timeline-item::before { content: \"\"; position: absolute; left: 16px; top: 25px; bottom: -2px; width: 1px; background: var(--border); }\n.timeline-item:last-child::before { display: none; }\n.timeline-future-gap { position: absolute; z-index: 2; left: -9px; top: 42px; width: 51px; padding: 3px 2px; border-radius: 6px; color: var(--blue); background: var(--bg); font-size: 7px; font-weight: 700; line-height: 1.2; text-align: center; }\n.timeline-node { position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 10px; background: var(--surface); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; }\n.timeline-payment .timeline-node { color: var(--success); background: var(--success-soft); }\n.timeline-blocker .timeline-node { color: oklch(0.55 0.14 60); background: oklch(0.95 0.04 75); }\n.timeline-milestone .timeline-node { color: var(--blue); background: var(--blue-soft); }\n.timeline-schedule-extension .timeline-node { color: oklch(0.48 0.13 245); background: oklch(0.94 0.035 245); }\n.timeline-content { padding: 0 0 4px; }\n.timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }\n.timeline-head time { color: var(--faint); font-size: 9px; }\n.event-type { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }\n.timeline-content h4 { font-size: 12px; margin-bottom: 4px; }\n.timeline-content p { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 0; max-width: 68ch; }\n.resolved { color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; }\n.text-action, .text-danger { border: 0; background: none; padding: 0; font-size: 10px; font-weight: 650; cursor: pointer; }\n.text-action { color: var(--blue); margin-top: 7px; }\n.text-danger { color: var(--danger); }\n.reply-box { margin-top: 10px; display: flex; gap: 8px; align-items: end; }\n.reply-box textarea { min-height: 70px; }\n.reply-box .button { flex: 0 0 auto; }\n\n.item-list { display: flex; flex-direction: column; }\n.item-row { min-height: 62px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 4px; }\n.item-row > div { min-width: 0; flex: 1; }\n.item-row b, .item-row a { color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }\n.item-row a:hover { color: var(--blue); }\n.item-row p { color: var(--muted); font-size: 9px; margin: 3px 0 0; }\n.item-row small { color: var(--muted); font-size: 10px; display: block; margin-top: 4px; }\n.resource-icon, .milestone-state { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.milestone-state { font-weight: 700; }\n.state-complete { color: var(--success); background: var(--success-soft); }\n.state-active { color: var(--sidebar); background: var(--lemon-soft); }\n.credential-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.credential { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: white; }\n.credential div b, .credential div span { display: block; }\n.credential b { font-size: 11px; }\n.credential span { color: var(--muted); font-size: 9px; }\n.credential code { grid-column: 1 / -1; padding: 7px; background: var(--surface); border-radius: 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }\n.credential a, .credential button { color: var(--blue); border: 0; background: none; font-size: 9px; padding: 0; cursor: pointer; text-decoration: none; }\n.credential button { color: var(--danger); }\n.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.person { position: relative; min-height: 112px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 13px; display: flex; gap: 11px; align-items: flex-start; }\n.person-main { border-color: oklch(0.78 0.08 115); background: var(--lemon-soft); }\n.person > span, .avatar { width: 38px; height: 38px; border-radius: 10px; color: white; background: var(--blue); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }\n.person > div { min-width: 0; flex: 1; }\n.person header { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }\n.person header em { padding: 2px 5px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 7px; font-style: normal; font-weight: 700; }\n.person b, .person p, .person small { display: block; }\n.person b { font-size: 11px; }\n.person p, .person small { color: var(--muted); font-size: 9px; margin: 1px 0; }\n.person > button { position: absolute; right: 7px; top: 6px; border: 0; background: none; color: var(--faint); cursor: pointer; }\n.person a { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }\n.person-actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }\n.person-actions button { border: 0; padding: 4px 7px; border-radius: 6px; color: var(--blue); background: var(--surface); font-size: 8px; cursor: pointer; }\n.person-actions .danger-link { color: var(--danger); }\n.person-editor { margin-top: 9px; }\n.person-editor > summary { width: fit-content; color: var(--blue); font-size: 8px; font-weight: 700; cursor: pointer; list-style-position: inside; }\n.person-editor > form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }\n.person-editor .button { width: 100%; min-height: 34px; }\n.payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-radius: 11px; overflow: hidden; margin-bottom: 20px; }\n.payment-summary > div { background: white; padding: 16px; }\n.payment-summary span, .payment-summary b { display: block; }\n.payment-summary span { color: var(--muted); font-size: 9px; }\n.payment-summary b { font-size: 16px; margin-top: 3px; }\n.payment-summary .pending { background: var(--lemon-soft); }\n.access-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 28px; }\n.copy-field { display: flex; gap: 8px; margin-bottom: 18px; }\n.copy-field code { flex: 1; min-width: 0; padding: 11px; border-radius: 8px; background: var(--surface); font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.inline-form { display: flex; gap: 8px; align-items: end; max-width: 360px; }\n.inline-form .field { flex: 1; }\n.privacy-note { color: oklch(0.37 0.02 245); background: var(--surface); border-radius: 12px; padding: 18px; align-self: start; }\n.privacy-note h3 { font-size: 13px; }\n.privacy-note ul { padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.9; }\n\n.directory { min-height: 100vh; background: white; }\n.directory-tabs { display: flex; gap: 4px; padding: 18px 30px 0; border-bottom: 1px solid var(--border); }\n.directory-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; background: none; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; }\n.directory-tabs button.active { color: var(--ink); border-color: var(--blue); }\n.directory-tabs b { margin-left: 6px; color: var(--faint); }\n.directory-layout { display: grid; grid-template-columns: minmax(370px, .75fr) minmax(480px, 1.25fr); min-height: calc(100vh - 174px); }\n.directory-form { padding: 28px 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.directory-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.directory-form > p { color: var(--muted); font-size: 11px; margin-bottom: 22px; max-width: 55ch; }\n.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }\n.project-checks { max-height: 100px; overflow: auto; margin-top: 8px; padding-left: 24px; display: flex; flex-direction: column; gap: 5px; }\n.directory-list { padding: 12px 24px; }\n.directory-row { min-height: 86px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); }\n.directory-row h3 { font-size: 12px; margin: 0 0 2px; }\n.directory-row h3 em { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 6px; margin-left: 7px; font-size: 8px; font-style: normal; text-transform: capitalize; }\n.directory-row p, .directory-row small { color: var(--muted); font-size: 9px; margin: 0; }\n.row-actions { display: flex; gap: 10px; align-items: center; }\n.row-actions .button { min-height: 32px; padding: 0 10px; font-size: 10px; }\n.partner-avatar { background: var(--sidebar); }\n.self-label { color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 7px 9px; border-radius: 8px; font-size: 9px; white-space: nowrap; }\n.visibility-editor fieldset { min-width: 0; }\n.scope-toggle { min-height: 68px; padding: 13px; border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; }\n.scope-toggle input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--blue); }\n.scope-toggle span, .scope-toggle b, .scope-toggle small { display: block; }\n.scope-toggle b { font-size: 12px; }\n.scope-toggle small, .field-note { color: var(--muted); font-size: 9px; }\n.project-visibility-list { max-height: 320px; margin-top: 10px; overflow: auto; border-top: 1px solid var(--border); }\n.project-visibility-list .check { width: 100%; min-height: 54px; padding: 9px 4px; border-bottom: 1px solid var(--border); }\n.project-visibility-list .check > span { min-width: 0; flex: 1; }\n.project-visibility-list b, .project-visibility-list small { display: block; }\n.project-visibility-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 10px; }\n.project-visibility-list small { margin-top: 2px; font-size: 8px; }\n.branding-layout { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(320px, .72fr); min-height: calc(100vh - 174px); }\n.branding-form { padding: 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.branding-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.branding-form > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 24px; max-width: 62ch; }\n.branding-preview { --preview-accent: var(--lemon); align-self: start; margin: 30px; padding: 22px; color: white; background: var(--sidebar); border: 1px solid oklch(1 0 0 / .08); border-radius: 14px; }\n.preview-label { display: block; color: oklch(0.72 0.02 245); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }\n.preview-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }\n.preview-brand img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: oklch(0.15 0.012 245); }\n.preview-brand b, .preview-brand small { display: block; }\n.preview-brand b { font-size: 12px; }\n.preview-brand small { color: oklch(0.72 0.02 245); font-size: 8px; margin-top: 2px; }\n.preview-project > span { color: var(--preview-accent); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.preview-project h3 { font-size: 25px; letter-spacing: -.025em; margin: 7px 0 9px; }\n.preview-project p { color: oklch(0.76 0.02 245); font-size: 10px; line-height: 1.6; min-height: 32px; }\n.preview-project > div { height: 5px; margin-top: 25px; border-radius: 999px; background: oklch(1 0 0 / .12); overflow: hidden; }\n.preview-project > div i { display: block; width: 64%; height: 100%; background: var(--preview-accent); }\n.preview-contact { display: block; color: oklch(0.67 0.02 245); font-size: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid oklch(1 0 0 / .09); }\n.document-branding-fields { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }\n.document-preview { margin-top: 22px; padding: 13px; border-radius: 9px; color: oklch(0.2 0.012 245); background: oklch(0.98 0.004 240); }\n.document-preview > small { display: block; margin-bottom: 10px; color: oklch(0.48 0.018 245); font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }\n.document-preview header { min-height: 42px; padding: 8px; border-radius: 6px; display: flex; gap: 9px; align-items: center; color: white; background: oklch(0.18 0.012 245); }\n.document-preview header img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }\n.document-preview header b, .document-preview header span { display: block; }\n.document-preview header b { font-size: 8px; }\n.document-preview header span { max-width: 23ch; margin-top: 2px; color: oklch(0.77 0.015 245); font-size: 6px; line-height: 1.35; white-space: pre-line; }\n.document-preview section { min-height: 76px; padding: 14px 8px; }\n.document-preview section i { display: block; width: 34px; height: 3px; margin-bottom: 10px; background: var(--preview-accent); }\n.document-preview section strong { display: block; font-size: 9px; }\n.document-preview section p { margin: 5px 0 0; color: oklch(0.48 0.018 245); font-size: 7px; line-height: 1.5; }\n.document-preview footer { min-height: 22px; padding: 7px 8px 0; border-top: 1px solid oklch(0.9 0.008 240); color: oklch(0.5 0.015 245); font-size: 6px; line-height: 1.4; white-space: pre-line; }\n\n.toast {\n position: fixed;\n top: 18px;\n right: 18px;\n z-index: var(--z-toast);\n min-width: 260px;\n max-width: min(420px, calc(100vw - 36px));\n min-height: 44px;\n color: white;\n background: var(--sidebar);\n border-radius: 11px;\n padding: 10px 10px 10px 14px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-size: 11px;\n animation: toast-in 180ms ease-out;\n}\n.toast-error { background: oklch(0.38 0.14 25); }\n.toast button { width: 25px; height: 25px; border: 0; border-radius: 6px; color: white; background: oklch(1 0 0 / .1); display: grid; place-items: center; cursor: pointer; }\n@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }\n\n.client-portal { --partner-accent: var(--blue); min-height: 100vh; color: var(--ink); background: white; }\n.client-nav { height: 76px; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }\n.client-brand { display: flex; align-items: center; gap: 10px; }\n.client-brand img, .client-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; }\n.client-logo { color: white; background: var(--partner-accent); display: grid; place-items: center; font-size: 10px; font-weight: 750; }\n.client-brand b, .client-brand small { display: block; }\n.client-brand b { font-size: 12px; }\n.client-brand small { color: var(--muted); font-size: 9px; }\n.client-nav > button { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-hero { max-width: 850px; margin: 0 auto; padding: 66px 24px 38px; text-align: center; }\n.client-blocked .client-nav {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 1132px) / 2));\n color: white;\n background: oklch(0.43 0.16 38);\n border-bottom-color: oklch(0.34 0.13 38);\n}\n.client-blocked .client-brand small,\n.client-blocked .client-nav-actions > button:last-child { color: oklch(0.94 0.025 55); }\n.client-blocked .client-nav-actions .theme-toggle { color: white; border-color: oklch(1 0 0 / .45); }\n.client-blocked .client-hero {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 802px) / 2));\n background: oklch(0.97 0.025 62);\n border-bottom: 1px solid oklch(0.88 0.05 55);\n}\n.client-blocked-notice {\n max-width: 590px;\n margin: 0 auto 25px;\n padding: 13px 15px;\n display: flex;\n align-items: flex-start;\n gap: 11px;\n color: oklch(0.33 0.12 38);\n background: oklch(0.92 0.07 60);\n border: 1px solid oklch(0.79 0.1 52);\n border-radius: 11px;\n text-align: left;\n}\n.client-blocked-notice svg { flex: 0 0 auto; margin-top: 1px; }\n.client-blocked-notice b,\n.client-blocked-notice span { display: block; }\n.client-blocked-notice b { margin-bottom: 2px; font-size: 12px; }\n.client-blocked-notice span { font-size: 10px; line-height: 1.55; }\n.client-status { width: fit-content; margin: 0 auto 16px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 5px 9px; font-size: 9px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.client-status em { padding-left: 6px; border-left: 1px solid var(--border-strong); color: oklch(0.48 0.13 55); font-style: normal; }\n.client-hero h1 { font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 18px; }\n.client-hero > p { max-width: 66ch; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.75; }\n.client-dates { margin: 30px auto 0; display: flex; justify-content: center; align-items: center; gap: 18px; }\n.client-dates > span { text-align: left; }\n.client-dates small, .client-dates b { display: block; }\n.client-dates small { color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }\n.client-dates b { font-size: 11px; }\n.client-dates em { display: block; margin-top: 2px; color: var(--faint); font-size: 8px; font-style: normal; }\n.client-deadline { display: block; width: fit-content; margin-top: 6px; padding: 3px 7px; border-radius: 999px; color: var(--partner-accent); background: color-mix(in oklch, var(--partner-accent) 12%, white); font-size: 8px; }\n.client-deadline.overdue { color: var(--danger); background: var(--danger-soft); }\n.client-dates svg { color: var(--faint); }\n.client-progress-block { max-width: 930px; margin: 0 auto; padding: 28px 40px; background: var(--sidebar); color: white; border-radius: 14px; }\n.client-progress-copy { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }\n.client-progress-copy span { color: oklch(0.75 0.02 245); font-size: 11px; }\n.client-progress-copy b { font-size: 26px; }\n.client-progress { position: relative; height: 8px; border-radius: 999px; background: oklch(1 0 0 / .13); }\n.client-progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.client-progress > span { position: absolute; width: 16px; height: 16px; top: -4px; margin-left: -8px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 4px oklch(0.88 0.18 115 / .18); }\n.client-stages { display: flex; justify-content: space-between; color: oklch(0.53 0.02 245); font-size: 8px; margin-top: 10px; }\n.client-stages .passed { color: white; }\n.client-next-milestone { margin-top: 18px; padding-top: 16px; border-top: 1px solid oklch(1 0 0 / .16); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; }\n.client-next-milestone > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--sidebar); background: var(--lemon); }\n.client-next-milestone small, .client-next-milestone b { display: block; }\n.client-next-milestone small { color: oklch(0.76 0.02 245); font-size: 8px; }\n.client-next-milestone b { margin-top: 2px; color: white; font-size: 11px; }\n.client-next-milestone p { max-width: 62ch; margin: 4px 0 0; color: oklch(0.78 0.02 245); font-size: 9px; line-height: 1.45; }\n.client-next-milestone time { min-width: 116px; text-align: right; }\n.client-next-milestone time b { font-size: 10px; }\n.client-next-milestone time small { margin-top: 2px; color: var(--lemon); }\n.client-grid { max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 72px; }\n.client-section-head h2, .client-panel h2 { font-size: 20px; margin-bottom: 4px; }\n.client-section-head p, .client-panel > p { color: var(--muted); font-size: 11px; }\n.client-timeline { margin-top: 34px; }\n.client-timeline article { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-bottom: 30px; }\n.client-timeline article::before { content: \"\"; position: absolute; left: 20px; top: 35px; bottom: 0; width: 1px; background: var(--border); }\n.client-timeline article:last-child::before { display: none; }\n.client-future-gap { position: absolute; z-index: 2; left: -5px; top: 51px; width: 51px; padding: 3px 2px; border-radius: 6px; color: var(--blue); background: var(--bg); font-size: 7px; font-weight: 700; line-height: 1.2; text-align: center; }\n.client-node { width: 41px; height: 41px; border-radius: 12px; color: var(--muted); background: var(--surface); display: grid; place-items: center; z-index: 1; font-size: 12px; font-weight: 700; }\n.node-milestone { color: var(--blue); background: var(--blue-soft); }\n.node-payment { color: var(--success); background: var(--success-soft); }\n.node-blocker { color: oklch(0.5 0.15 60); background: oklch(0.95 0.04 75); }\n.client-timeline header { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 5px; }\n.client-timeline header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }\n.client-timeline time { color: var(--faint); font-size: 9px; }\n.client-timeline h3 { font-size: 13px; margin-bottom: 5px; }\n.client-timeline p { color: var(--muted); font-size: 11px; line-height: 1.7; max-width: 66ch; }\n.client-aside { display: flex; flex-direction: column; gap: 14px; }\n.client-panel { background: var(--surface); border-radius: 12px; padding: 18px; }\n.client-panel h2 { font-size: 14px; }\n.client-milestones { display: flex; flex-direction: column; margin-top: 14px; }\n.client-milestones > div { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding-bottom: 16px; }\n.client-milestones > div::before { content: \"\"; position: absolute; left: 10px; top: 21px; bottom: 0; width: 1px; background: var(--border-strong); }\n.client-milestones > div:last-child::before { display: none; }\n.client-milestones > div > span { width: 21px; height: 21px; border: 1px solid var(--border-strong); border-radius: 50%; background: white; display: grid; place-items: center; font-size: 9px; z-index: 1; }\n.client-milestones > div.complete > span { color: var(--sidebar); background: var(--lemon); border-color: var(--lemon); }\n.client-milestones > div.active > span { border-color: var(--blue); box-shadow: inset 0 0 0 5px white; background: var(--blue); }\n.client-milestones b, .client-milestones small { display: block; }\n.client-milestones b { font-size: 10px; }\n.client-milestones small { color: var(--muted); font-size: 8px; margin-top: 2px; }\n.muted { color: var(--muted); font-size: 10px; }\n.payment-panel > div:first-child { display: flex; justify-content: space-between; align-items: center; }\n.payment-panel span { color: var(--muted); font-size: 9px; }\n.payment-panel > div:first-child b { font-size: 18px; }\n.mini-progress { height: 4px; border-radius: 999px; background: white; margin: 10px 0 13px; overflow: hidden; }\n.mini-progress i { display: block; height: 100%; background: var(--blue); }\n.payment-panel dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.payment-panel dl div { padding-top: 9px; border-top: 1px solid var(--border); }\n.payment-panel dt { color: var(--muted); font-size: 8px; }\n.payment-panel dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.links-panel { padding: 0; overflow: hidden; }\n.links-panel > button { width: 100%; border: 0; padding: 15px 16px; background: transparent; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }\n.links-panel > button > div { display: flex; align-items: center; gap: 10px; text-align: left; }\n.links-panel > button b, .links-panel > button small { display: block; }\n.links-panel > button b { font-size: 10px; }\n.links-panel > button small { color: var(--muted); font-size: 8px; }\n.client-links { padding: 0 16px 12px; display: flex; flex-direction: column; }\n.client-links a { padding: 9px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--blue); font-size: 9px; text-decoration: none; }\n.question-panel { background: white; border: 1px solid var(--border); }\n.client-holiday-banner { max-width: 590px; margin: -36px auto 28px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; color: oklch(0.34 0.1 85); background: oklch(0.96 0.05 92); border: 1px solid oklch(0.86 0.09 90); border-radius: 11px; text-align: left; }\n.client-holiday-banner svg { flex: 0 0 auto; margin-top: 1px; }\n.client-holiday-banner b, .client-holiday-banner span { display: block; }\n.client-holiday-banner b { font-size: 11px; margin-bottom: 2px; }\n.client-holiday-banner span { font-size: 9px; line-height: 1.5; }\n.holiday-question-note { margin: 12px 0 14px; padding: 10px; display: flex; gap: 8px; align-items: flex-start; color: oklch(0.4 0.09 80); background: oklch(0.96 0.045 90); border-radius: 9px; font-size: 9px; line-height: 1.5; }\n.holiday-question-note svg { flex: 0 0 auto; }\n.partner-contact { color: var(--muted); font-size: 8px; text-align: center; }\n.client-footer { max-width: 1180px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; }\n.client-footer a { text-decoration: none; }\n.client-skeleton { width: min(680px, 80vw); height: 220px; }\n\n@media (max-width: 980px) {\n .auth-page { grid-template-columns: .85fr 1.15fr; }\n .auth-brand { padding: 36px; }\n .auth-statement h1 { font-size: 3.3rem; }\n .app-shell { grid-template-columns: 72px minmax(0, 1fr); }\n .sidebar { padding-inline: 10px; }\n .sidebar > .brand span:last-child, .sidebar nav button:not(.active) { font-size: 0; }\n .sidebar nav button { justify-content: center; padding: 0; }\n .sidebar nav button.active { font-size: 0; }\n .sidebar nav button .icon { width: 19px; height: 19px; }\n .sidebar-foot > a { justify-content: center; font-size: 0; }\n .account { grid-template-columns: 34px; justify-content: center; }\n .account div, .account button { display: none; }\n .directory-layout { grid-template-columns: 1fr; }\n .directory-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-layout { grid-template-columns: 1fr; }\n .branding-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-preview { width: min(520px, calc(100% - 60px)); }\n .client-progress-block { border-radius: 0; }\n .client-grid { gap: 40px; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); }\n}\n\n@media (max-width: 720px) {\n .auth-page { display: block; background: var(--sidebar); }\n .auth-brand { min-height: auto; padding: 24px; }\n .auth-statement, .auth-foot { display: none; }\n .auth-panel { min-height: calc(100vh - 86px); padding: 30px 20px 60px; border-radius: 16px 16px 0 0; align-items: start; }\n .auth-card { margin-top: 26px; }\n .app-shell { display: block; }\n .sidebar { position: static; width: 100%; height: 66px; padding: 0 15px; flex-direction: row; align-items: center; }\n .sidebar > .brand { padding: 0; margin: 0; }\n .sidebar > .brand span:last-child { display: inline; font-size: 14px; }\n .sidebar nav { display: none; }\n .sidebar-foot { margin: 0 0 0 auto; }\n .sidebar-foot > a { display: none; }\n .account { padding: 0; margin: 0; border: 0; display: flex; }\n .account div { display: block; }\n .account button { display: grid; }\n .workspace-head, .page-heading { padding: 23px 18px 18px; display: block; }\n .workspace-head h1, .page-heading h1 { font-size: 22px; }\n .workspace-head span, .page-heading span { display: block; max-width: 48ch; }\n .head-actions { margin-top: 16px; }\n .search { width: auto; flex: 1; }\n .mobile-nav { position: sticky; z-index: var(--z-sticky); top: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; background: white; border-bottom: 1px solid var(--border); padding: 0 8px; }\n .mobile-nav button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }\n .mobile-nav button.active { color: var(--ink); border-color: var(--blue); }\n .kanban { height: auto; min-height: calc(100vh - 210px); padding: 16px; }\n .kanban-column { flex-basis: 264px; }\n .modal, .modal-wide { width: 100vw; max-width: none; height: min(92vh, 900px); max-height: none; margin: auto 0 0; border-radius: 14px 14px 0 0; }\n .modal-inner, .detail { height: 100%; min-height: 0; }\n .form-grid { grid-template-columns: 1fr; }\n .form-grid > .field:nth-of-type(3), .full { grid-column: auto; }\n .detail-header { grid-template-columns: minmax(0, 1fr) 38px; padding: 16px; gap: 12px; }\n .detail-progress { grid-column: 1 / -1; grid-row: 2; }\n .detail-tabs { padding: 0 6px; }\n .detail-section, .timeline-wrap { padding: 16px; }\n .payment-summary { grid-template-columns: 1fr; }\n .access-grid { grid-template-columns: 1fr; }\n .reply-box { flex-direction: column; align-items: stretch; }\n .directory-tabs { padding-inline: 16px; }\n .directory-form, .directory-list { padding: 20px 16px; }\n .directory-row { grid-template-columns: 38px minmax(0, 1fr); padding: 11px 0; }\n .row-actions { grid-column: 2; }\n .permission-grid { grid-template-columns: 1fr; }\n .branding-form { padding: 22px 16px; }\n .branding-preview { width: auto; margin: 20px 16px; }\n .client-nav { height: 66px; padding: 0 17px; }\n .client-hero { padding: 48px 20px 30px; }\n .client-blocked .client-nav { padding-inline: 17px; }\n .client-blocked .client-hero { padding-inline: 20px; }\n .client-hero h1 { font-size: 2.45rem; }\n .client-progress-block { padding: 24px 20px; }\n .client-grid { grid-template-columns: 1fr; padding: 50px 18px 60px; gap: 40px; }\n .client-aside { grid-row: 1; }\n .client-main { grid-row: 2; }\n .client-stages { font-size: 7px; }\n}\n\n@media (max-width: 450px) {\n .account div { display: none; }\n .head-actions { align-items: stretch; flex-direction: column; }\n .head-actions .button { width: 100%; }\n .form-row { flex-direction: column; align-items: stretch; }\n .form-row > .field { flex-basis: auto; }\n .copy-field, .inline-form { flex-direction: column; align-items: stretch; }\n .credential-list, .people-grid { grid-template-columns: 1fr; }\n .client-dates { gap: 10px; }\n .client-progress-copy b { font-size: 22px; }\n .client-progress-block { padding-inline: 16px; }\n .client-next-milestone { grid-template-columns: 32px minmax(0, 1fr); }\n .client-next-milestone time { grid-column: 2; min-width: 0; text-align: left; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }\n}\n\n/* Interaction, detail and theme refinements */\nhtml[data-theme=\"dark\"] {\n --bg: oklch(0.16 0.012 245);\n --surface: oklch(0.205 0.014 245);\n --surface-raised: oklch(0.185 0.013 245);\n --ink: oklch(0.94 0.008 245);\n --muted: oklch(0.72 0.014 245);\n --faint: oklch(0.55 0.012 245);\n --border: oklch(0.29 0.014 245);\n --border-strong: oklch(0.37 0.016 245);\n --blue: oklch(0.7 0.11 245);\n --blue-dark: oklch(0.64 0.12 245);\n --blue-soft: oklch(0.25 0.04 245);\n --lemon-soft: oklch(0.28 0.07 115);\n --danger-soft: oklch(0.25 0.055 25);\n --success-soft: oklch(0.25 0.045 145);\n color-scheme: dark;\n}\nhtml[data-theme=\"dark\"] input,\nhtml[data-theme=\"dark\"] textarea,\nhtml[data-theme=\"dark\"] select,\nhtml[data-theme=\"dark\"] .workspace-head,\nhtml[data-theme=\"dark\"] .page-heading,\nhtml[data-theme=\"dark\"] .kanban-card,\nhtml[data-theme=\"dark\"] .modal,\nhtml[data-theme=\"dark\"] .quick-form,\nhtml[data-theme=\"dark\"] .payment-summary > div,\nhtml[data-theme=\"dark\"] .directory,\nhtml[data-theme=\"dark\"] .client-portal,\nhtml[data-theme=\"dark\"] .question-panel,\nhtml[data-theme=\"dark\"] .client-milestones > div > span,\nhtml[data-theme=\"dark\"] .person,\nhtml[data-theme=\"dark\"] .mobile-nav {\n background: var(--bg);\n}\nhtml[data-theme=\"dark\"] .person-main { background: var(--lemon-soft); }\nhtml[data-theme=\"dark\"] .client-blocked .client-hero { background: oklch(0.22 0.045 38); border-bottom-color: oklch(0.36 0.07 42); }\nhtml[data-theme=\"dark\"] .client-blocked-notice { color: oklch(0.95 0.025 60); background: oklch(0.3 0.07 42); border-color: oklch(0.48 0.1 45); }\nhtml[data-theme=\"dark\"] .client-holiday-banner,\nhtml[data-theme=\"dark\"] .holiday-question-note { color: oklch(0.9 0.05 90); background: oklch(0.28 0.045 85); border-color: oklch(0.42 0.07 85); }\nhtml[data-theme=\"dark\"] .segmented button.active,\nhtml[data-theme=\"dark\"] .mini-progress {\n background: var(--surface-raised);\n}\nhtml[data-theme=\"dark\"] .field > span,\nhtml[data-theme=\"dark\"] fieldset legend { color: var(--ink); }\nhtml[data-theme=\"dark\"] .button-primary { color: white; }\n\n.phone-field { min-width: 0; }\n.form-row > .phone-field { flex: 1 1 260px; }\n.phone-control {\n display: grid;\n grid-template-columns: 108px minmax(0, 1fr);\n gap: 8px;\n width: 100%;\n min-width: 0;\n align-items: stretch;\n}\n.phone-control select, .phone-control input:not([type=\"hidden\"]) { height: 42px; min-width: 0; margin: 0; }\n.phone-control select { padding-inline: 7px; font-size: 11px; }\n.phone-control input[type=\"hidden\"] { display: none; }\n.theme-toggle {\n min-height: 36px;\n border: 1px solid currentColor;\n border-radius: 9px;\n padding: 0 10px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: transparent;\n color: inherit;\n font-size: 10px;\n cursor: pointer;\n opacity: .82;\n}\n.theme-toggle:hover { opacity: 1; }\n.auth-panel { position: relative; }\n.auth-theme { position: absolute; top: 24px; right: 24px; color: var(--muted); }\n.sidebar .theme-toggle { width: 100%; justify-content: flex-start; color: oklch(0.7 0.02 245); border-color: oklch(1 0 0 / .12); margin-bottom: 8px; }\n.sidebar nav .attention-nav b { margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: oklch(0.27 0.1 65); background: oklch(0.9 0.12 85); font-size: 9px; }\n.head-actions .button-primary { min-width: 118px; color: white; white-space: nowrap; box-shadow: 0 5px 15px oklch(0.4 0.1 245 / .18); }\n.head-actions .new-project-button {\n color: oklch(0.16 0.02 115) !important;\n background: var(--lemon);\n box-shadow: 0 6px 18px oklch(0.72 0.16 115 / .22);\n}\n.head-actions .new-project-button span { color: oklch(0.16 0.02 115) !important; }\n.head-actions .new-project-button:hover { background: oklch(0.83 0.19 115); }\n\n.detail-header { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--border); }\n.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 10px; }\n.detail-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); text-decoration: none; }\n.progress-controls { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 8px; align-items: center; }\n.progress-controls input[type=\"range\"] { padding: 0; min-height: 28px; border: 0; box-shadow: none; accent-color: var(--blue); background: transparent; cursor: pointer; }\n.progress-controls .button { min-height: 32px; padding-inline: 10px; font-size: 10px; }\n.detail-tabs { position: sticky; top: 118px; z-index: 3; background: var(--bg); scrollbar-width: none; }\n.detail-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.detail-tabs button b { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); background: var(--surface); font-size: 8px; }\n.detail-body { min-height: 480px; }\n\n.overview-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: 28px; align-items: start; }\n.overview-form { min-width: 0; }\n.form-section-title { padding: 3px 0 10px; margin: 5px 0 2px; border-bottom: 1px solid var(--border); }\n.form-section-title h3 { font-size: 14px; margin-bottom: 2px; }\n.form-section-title p { color: var(--muted); font-size: 10px; margin: 0; }\n.overview-summary { position: sticky; top: 184px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.overview-summary h3 { font-size: 14px; margin-bottom: 15px; }\n.overview-summary dl { margin: 0; display: flex; flex-direction: column; }\n.overview-summary dl div { padding: 10px 0; display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); }\n.overview-summary dt { color: var(--muted); font-size: 10px; }\n.overview-summary dd { margin: 0; font-size: 11px; font-weight: 650; text-align: right; }\n.notice { margin-top: 14px; padding: 12px; border-left: 3px solid var(--blue); color: var(--muted); background: var(--blue-soft); font-size: 10px; line-height: 1.6; }\n\n.section-toolbar { min-height: 54px; margin-bottom: 17px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }\n.section-toolbar h3 { font-size: 16px; margin-bottom: 3px; }\n.section-toolbar p { color: var(--muted); font-size: 10px; margin: 0; }\n.composer { max-width: 760px; margin: 0 auto 20px; }\n.quick-note-composer { position: relative; }\n.quick-note-composer textarea { width: 100%; }\n.quick-note-hint { display: block; margin-top: 5px; color: var(--faint); font-size: 8px; }\n.quick-note-menu {\n position: absolute;\n z-index: var(--z-dropdown);\n right: 0;\n left: 0;\n top: calc(100% - 17px);\n max-height: 260px;\n padding: 6px;\n overflow: auto;\n border: 1px solid var(--border-strong);\n border-radius: 11px;\n background: var(--bg);\n box-shadow: 0 16px 38px oklch(0.15 0.02 245 / .2);\n}\n.quick-note-menu button {\n width: 100%;\n padding: 10px;\n border: 0;\n border-radius: 8px;\n display: grid;\n grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);\n gap: 12px;\n color: var(--ink);\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.quick-note-menu button.active { background: var(--blue-soft); }\n.quick-note-menu button span { min-width: 0; display: flex; align-items: baseline; gap: 7px; }\n.quick-note-menu button b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }\n.quick-note-menu button small { color: var(--blue); font-size: 8px; font-weight: 700; }\n.quick-note-menu button p { margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }\n.quick-note-empty { padding: 16px 12px; color: var(--muted); font-size: 10px; text-align: center; }\n.add-menu { position: relative; flex: 0 0 auto; }\n.add-menu > summary {\n min-height: 36px;\n padding: 0 11px;\n border: 1px solid var(--border);\n border-radius: 9px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n color: var(--ink);\n background: var(--bg);\n font-size: 10px;\n font-weight: 650;\n cursor: pointer;\n list-style: none;\n}\n.add-menu > summary::-webkit-details-marker { display: none; }\n.add-menu[open] > summary { border-color: var(--blue); }\n.popover-form {\n position: absolute;\n right: 0;\n top: 44px;\n z-index: var(--z-dropdown);\n width: min(430px, calc(100vw - 56px));\n padding: 14px;\n border: 1px solid var(--border);\n border-radius: 12px;\n background: var(--bg);\n box-shadow: 0 18px 60px oklch(0.12 0.02 245 / .18);\n}\n.popover-form .quick-form { padding: 0; margin: 0; border: 0; }\n\n.milestone-list, .resource-list, .item-list { border-top: 1px solid var(--border); }\n.milestone-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--border); }\n.milestone-state, .resource-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--surface); }\n.state-active .milestone-state { color: var(--blue); background: var(--blue-soft); }\n.state-complete .milestone-state { color: var(--success); background: var(--success-soft); }\n.milestone-copy header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }\n.milestone-copy h4 { font-size: 12px; margin: 0; }\n.milestone-copy header span { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.milestone-copy header .milestone-undated { color: oklch(0.47 0.13 62); background: oklch(0.95 0.045 78); }\n.milestone-copy p, .milestone-copy small { color: var(--muted); font-size: 9px; margin: 3px 0 0; }\n.milestone-actions { display: flex; align-items: center; gap: 10px; }\n.milestone-actions select { width: 112px; min-height: 34px; padding: 5px 8px; font-size: 9px; }\n.text-action { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 650; cursor: pointer; }\n.text-danger { border: 0; background: transparent; color: var(--danger); font-size: 9px; cursor: pointer; }\n.milestone-date-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--lemon) 42%, var(--border)); border-radius: 11px; display: flex; align-items: flex-start; gap: 10px; background: var(--lemon-soft); }\n.milestone-date-notice > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: oklch(0.4 0.1 115); background: color-mix(in oklab, var(--lemon) 24%, var(--bg)); }\n.milestone-date-notice b { display: block; font-size: 10px; }\n.milestone-date-notice p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }\n.milestone-editor { grid-column: 2 / -1; margin-top: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--surface); }\n.milestone-editor .milestone-description, .milestone-editor .form-actions { grid-column: 1 / -1; }\n.milestone-editor .milestone-visibility { align-self: end; min-height: 42px; }\n.resource-row, .item-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); }\n.resource-row a { color: var(--ink); font-size: 11px; font-weight: 650; text-decoration: none; }\n.resource-row a > span { color: var(--blue); margin-left: 6px; }\n.resource-row p, .item-row p { color: var(--muted); font-size: 9px; margin: 2px 0 0; }\n.credential-card { padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }\n.credential-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }\n.credential-card header > span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.credential-card header > div { min-width: 0; flex: 1; }\n.credential-card header h4 { margin: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card code { color: var(--ink); }\n.secret-row { min-height: 38px; padding: 7px 8px; border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; background: var(--surface); }\n.secret-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }\n.secret-row button { width: 28px; height: 28px; border: 0; border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }\n.secret-row button:hover { color: var(--ink); background: var(--bg); }\n.credential-note { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.credential-card footer { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border); }\n.credential-card footer button, .credential-card footer a { border: 0; padding: 3px 0; display: inline-flex; align-items: center; gap: 4px; color: var(--blue); background: transparent; font-size: 9px; text-decoration: none; cursor: pointer; }\n.credential-card footer .danger-link { margin-left: auto; color: var(--danger); }\n.person a, .partner-contact a { color: var(--blue); font-size: 9px; text-decoration: none; }\n.delay-badge { margin-left: 4px; padding: 2px 6px; border-radius: 999px; color: oklch(0.43 0.12 55); background: oklch(0.95 0.045 78); font-size: 8px; }\n.recipient-source { min-height: 58px; padding: 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: var(--blue); background: var(--blue-soft); }\n.recipient-source b, .recipient-source p, .recipient-source small { display: block; margin: 0; }\n.recipient-source b { color: var(--ink); font-size: 10px; }\n.recipient-source p, .recipient-source small { margin-top: 2px; color: var(--muted); font-size: 9px; }\n.stakeholder-email-options { align-items: center; }\n.schedule-extension { margin-top: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); overflow: hidden; }\n.schedule-extension > summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }\n.schedule-extension > summary span { display: flex; align-items: center; gap: 8px; font-size: 10px; }\n.schedule-extension > form { padding: 14px; border-top: 1px solid var(--border); }\n.visibility-label { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.timeline-reply { margin-top: 12px; margin-left: 10px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: var(--blue-soft); }\n.timeline-reply b { font-size: 9px; }\n.timeline-reply p { margin: 3px 0 0 !important; }\n.notify-check { width: fit-content; padding: 9px 11px; border-radius: 9px; background: var(--blue-soft); color: var(--ink); }\n.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.template-apply { display: flex; align-items: center; gap: 7px; }\n.template-apply select { min-height: 36px; width: 150px; padding-block: 5px; font-size: 10px; }\n.template-apply .button { min-height: 36px; font-size: 10px; }\n.payments-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }\n.subsection-title { margin-bottom: 12px; font-size: 13px; }\n.invoice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.invoice-list { border-top: 1px solid var(--border); }\n.invoice-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); text-decoration: none; }\n.invoice-row > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.invoice-row b { font-size: 11px; }\n.invoice-row p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.invoice-row em { color: var(--blue); font-size: 9px; font-style: normal; }\n.receipt-link { display: inline-block; margin-top: 5px; color: var(--blue); font-size: 9px; font-weight: 650; text-decoration: none; }\n.receipt-link:hover { text-decoration: underline; }\n\n.module-page { min-height: 100%; background: var(--surface-raised); }\n.metric-grid { padding: 24px 30px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.metric-grid article { min-height: 136px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }\n.metric-grid article span { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.metric-grid article b { font-size: 34px; letter-spacing: -.05em; }\n.metric-grid article small { color: var(--muted); font-size: 10px; }\n.metric-grid .north-star { border-color: oklch(0.8 0.12 115); background: var(--lemon-soft); }\n.dashboard-grid { padding: 12px 30px 30px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }\n.dashboard-grid > section { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.section-heading h2 { margin-bottom: 3px; font-size: 15px; }\n.section-heading p { color: var(--muted); font-size: 10px; }\n.status-metrics, .money-metrics { margin-top: 16px; display: flex; flex-direction: column; }\n.status-metrics > div, .money-metrics > div { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border); }\n.status-metrics span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }\n.status-metrics b, .money-metrics b { font-size: 11px; }\n.money-metrics span { color: var(--muted); font-size: 9px; font-weight: 700; }\n.dashboard-overview { padding: 24px 30px 14px; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(430px, 1.35fr); gap: 14px; }\n.momentum-panel, .portfolio-chart, .financial-overview > section { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.momentum-panel { display: flex; align-items: center; gap: 24px; }\n.momentum-gauge { --gauge-value: 0; width: 148px; height: 148px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lemon) calc(var(--gauge-value) * 1%), var(--surface) 0); }\n.momentum-gauge::before { content: \"\"; grid-area: 1 / 1; width: 112px; height: 112px; border-radius: 50%; background: var(--bg); }\n.momentum-gauge > div { z-index: 1; grid-area: 1 / 1; text-align: center; }\n.momentum-gauge b, .momentum-gauge span { display: block; }\n.momentum-gauge b { font-size: 28px; letter-spacing: -.035em; }\n.momentum-gauge span { color: var(--muted); font-size: 9px; }\n.momentum-copy { min-width: 0; }\n.momentum-copy h2 { margin-bottom: 4px; font-size: 17px; }\n.momentum-copy > p { max-width: 34ch; color: var(--muted); font-size: 10px; }\n.momentum-copy dl { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 18px; }\n.momentum-copy dt { color: var(--muted); font-size: 8px; }\n.momentum-copy dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }\n.status-stack { height: 10px; margin: 18px 0 20px; display: flex; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-stack > i { min-width: 0; height: 100%; }\n.chart-backlog { background: var(--faint); }\n.chart-todo { background: var(--blue); }\n.chart-in-progress { background: var(--lemon); }\n.chart-blocked { background: var(--warning); }\n.chart-done { background: var(--success); }\n.status-chart-rows { display: flex; flex-direction: column; gap: 8px; }\n.status-chart-rows > div { display: grid; grid-template-columns: 92px minmax(90px, 1fr) 24px; gap: 10px; align-items: center; }\n.status-chart-rows span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.status-chart-rows > div > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-chart-rows > div > div i { display: block; height: 100%; border-radius: inherit; }\n.status-chart-rows b { font-size: 10px; text-align: right; }\n.dashboard-questions { margin: 0 30px 14px; padding: 19px 20px; border: 1px solid oklch(0.82 0.1 80); border-radius: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--lemon-soft); }\n.question-signal { width: 58px; height: 58px; border-radius: 50%; display: grid; grid-template-columns: 1fr 1fr; place-items: center; color: oklch(0.27 0.09 75); background: var(--lemon); }\n.question-signal svg { grid-column: 1 / -1; grid-row: 1; }\n.question-signal b { grid-column: 1 / -1; grid-row: 1; margin: 27px 0 0 28px; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--sidebar); font-size: 9px; }\n.question-summary h2 { margin-bottom: 3px; font-size: 15px; }\n.question-summary > p { margin-bottom: 10px; color: oklch(0.36 0.045 80); font-size: 10px; }\n.question-summary > div { display: flex; flex-wrap: wrap; gap: 7px; }\n.question-summary > div span { min-width: 150px; padding: 6px 8px; border-radius: 7px; background: oklch(1 0 0 / .52); }\n.question-summary > div b, .question-summary > div small { display: block; }\n.question-summary > div b { font-size: 9px; }\n.question-summary > div small { margin-top: 1px; color: oklch(0.4 0.035 80); font-size: 7px; }\n.financial-overview { padding: 0 30px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n.financial-overview .money-metrics > div { min-height: 44px; }\n.inbox-count { padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 10px; }\n.inbox-count.has-items { color: oklch(0.38 0.1 55); background: oklch(0.94 0.055 75); }\n.question-inbox { max-width: 900px; margin: 0 auto; padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 12px; }\n.inbox-question { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.inbox-question > header { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 11px; align-items: start; }\n.inbox-question > header button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }\n.inbox-question > header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }\n.inbox-question > header time { color: var(--faint); font-size: 8px; }\n.inbox-question blockquote { margin: 15px 0; padding: 13px 14px; border: 0; border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 11px; line-height: 1.65; }\n.inbox-question form { padding-top: 14px; border-top: 1px solid var(--border); }\n.inbox-answer-actions { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }\n\n.builder-layout { padding: 26px 30px 30px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }\n.builder-form { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.builder-form h2, .proposal-list > h2 { font-size: 16px; margin-bottom: 4px; }\n.builder-form > p { color: var(--muted); font-size: 10px; margin-bottom: 18px; }\n.proposal-list, .template-list { display: flex; flex-direction: column; gap: 10px; }\n.proposal-row { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }\n.proposal-main { width: 100%; padding: 16px; border: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; background: transparent; cursor: pointer; }\n.proposal-main span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.proposal-main h3 { margin: 3px 0; font-size: 13px; }\n.proposal-main p { margin: 0; color: var(--muted); font-size: 9px; }\n.proposal-detail { padding: 16px; border-top: 1px solid var(--border); background: var(--surface); }\n.proposal-detail pre { max-height: 300px; overflow: auto; white-space: pre-wrap; color: var(--muted); font: 10px/1.65 Inter, sans-serif; }\n.inline-builder { margin: 22px 30px 6px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-grid { padding: 22px 30px 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.recurring-card { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-card.inactive { opacity: .6; }\n.recurring-card > header { display: flex; justify-content: space-between; gap: 18px; }\n.recurring-card header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.recurring-card h2 { margin: 4px 0; font-size: 16px; }\n.recurring-card header p { color: var(--muted); font-size: 10px; }\n.recurring-card header > b { white-space: nowrap; font-size: 16px; }\n.recurring-card dl { margin: 12px 0; display: flex; gap: 18px; flex-wrap: wrap; }\n.recurring-card dl div { min-width: 100px; }\n.recurring-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-card dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.recurring-dates { margin: 14px 0 4px; padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 10px; background: var(--surface); }\n.recurring-dates small, .recurring-dates b { display: block; }\n.recurring-dates small { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-dates b { margin-top: 2px; font-size: 10px; }\n.recurring-actions { margin: 14px 0 0; display: flex; align-items: center; gap: 14px; }\n.recurring-actions .button { min-height: 34px; }\n.recurring-edit { margin-top: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }\n.recurring-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }\n.recurring-details > summary { color: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; }\n.recurring-detail-copy { margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.recurring-detail-copy p { margin: 3px 0; }\n.hour-log { display: grid; grid-template-columns: 120px 80px minmax(120px, 1fr) auto; gap: 7px; }\n.hour-log input { min-width: 0; min-height: 36px; padding: 6px 8px; font-size: 9px; }\n.hour-log .button { min-height: 36px; font-size: 9px; }\n.log-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }\n.log-history summary { color: var(--blue); font-size: 9px; cursor: pointer; }\n.log-history div { margin-top: 8px; display: flex; gap: 10px; font-size: 9px; }\n.log-history span { color: var(--muted); }\n.log-history h3 { font-size: 10px; margin: 0 0 4px; }\n.holiday-layout { padding: 24px 30px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\n.weekday-picker { margin: 0 0 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }\n.weekday-picker label { min-width: 0; cursor: pointer; }\n.weekday-picker input { position: absolute; opacity: 0; pointer-events: none; }\n.weekday-picker span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 650; }\n.weekday-picker label.selected span { color: white; background: var(--blue); border-color: var(--blue); }\n.holiday-list { margin: 14px 30px 30px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.holiday-list > header { margin-bottom: 10px; }\n.holiday-list h2 { font-size: 16px; }\n.holiday-list > header p { color: var(--muted); font-size: 10px; }\n.holiday-list article { min-height: 62px; padding: 10px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--border); }\n.holiday-date { width: 42px; height: 42px; display: grid; place-content: center; text-align: center; border-radius: 10px; color: white; background: var(--blue); }\n.holiday-date b { font-size: 13px; line-height: 1; }\n.holiday-date span { margin-top: 2px; font-size: 7px; text-transform: uppercase; }\n.holiday-list article h3 { font-size: 11px; }\n.holiday-list article p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.template-list article { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.template-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.template-list article > header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.template-list article > header button { border: 0; padding: 3px; background: transparent; font-size: 9px; cursor: pointer; }\n.template-list h3 { margin: 5px 0; font-size: 14px; }\n.template-list p, .template-list li { color: var(--muted); font-size: 10px; }\n.quick-note-library { display: flex; flex-direction: column; gap: 11px; }\n.quick-note-library article { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.quick-note-library article > header { display: flex; justify-content: space-between; gap: 14px; align-items: start; }\n.quick-note-library article > header span { color: var(--blue); font-size: 8px; font-weight: 750; }\n.quick-note-library article > header h3 { margin: 3px 0 0; font-size: 14px; }\n.quick-note-copy { margin: 13px 0; color: var(--muted); font-size: 10px; line-height: 1.65; white-space: pre-wrap; }\n.quick-note-variables { margin: -2px 0 12px; display: flex; flex-wrap: wrap; gap: 5px; }\n.quick-note-variables span { padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--blue); background: var(--blue-soft); font: 700 8px/1.2 ui-monospace, monospace; }\n.quick-note-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }\n.shortcut-input { display: flex; align-items: stretch; }\n.shortcut-input > span { min-width: 34px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-right: 0; border-radius: 8px 0 0 8px; color: var(--blue); background: var(--surface); font-weight: 750; }\n.shortcut-input input { border-radius: 0 8px 8px 0; }\n.ai-project-builder { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--blue-soft); overflow: hidden; }\n.ai-project-builder > summary { min-height: 48px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; }\n.ai-project-builder > summary span { display: flex; gap: 8px; align-items: center; }\n.ai-project-builder > div { padding: 14px; border-top: 1px solid var(--border); }\n.ai-result { margin: 10px 0 0; color: var(--success); font-size: 10px; font-weight: 650; }\n\n.client-milestone-event .node-milestone { color: oklch(0.28 0.08 115); background: var(--lemon); box-shadow: 0 0 0 4px var(--lemon-soft); }\n.milestone-callout { margin-top: 6px; padding: 16px; border: 1px solid oklch(0.82 0.12 115); border-left: 4px solid var(--lemon); border-radius: 10px; background: var(--lemon-soft); }\n.milestone-callout small { color: oklch(0.42 0.09 115); font-size: 8px; font-weight: 750; text-transform: uppercase; }\n.milestone-callout h3 { margin: 4px 0 !important; font-size: 15px !important; }\n.client-chat { min-width: 0; }\n.chat-bubble { max-width: min(88%, 540px); margin-top: 9px; padding: 11px 13px; border-radius: 12px; }\n.chat-bubble small { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 700; }\n.chat-bubble p { margin: 0; color: inherit; }\n.chat-client { margin-right: auto; border-bottom-left-radius: 3px; background: var(--surface); }\n.chat-team { margin-left: auto; border-bottom-right-radius: 3px; color: var(--ink); background: var(--blue-soft); }\n.chat-status { display: block; width: fit-content; margin-top: 8px; color: var(--warning); font-size: 8px; font-weight: 700; }\n.chat-status.resolved { color: var(--success); }\n\n.portal-access-card { margin-bottom: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }\n.portal-access-card > div { min-width: 0; }\n.portal-access-card span { display: block; color: var(--muted); font-size: 8px; margin-bottom: 4px; }\n.portal-access-card code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }\n.portal-access-card strong { font-size: 20px; letter-spacing: .1em; }\n.color-control { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }\n.color-control input[type=\"color\"] { min-height: 42px; padding: 4px; cursor: pointer; }\n.project-cc-settings .check > span,\n.project-cc-settings .check b,\n.project-cc-settings .check small { display: block; }\n.project-cc-settings .check small { margin-top: 2px; color: var(--muted); font-size: 8px; }\n.cc-directory .directory-row { min-height: 96px; }\n.fallback-note { color: var(--muted); background: var(--surface); padding: 10px 12px; border-radius: 9px; font-size: 10px; }\n.partner-brand-editor { padding: 0 30px 30px; background: var(--surface-raised); }\n.editor-close { display: flex; justify-content: flex-end; padding: 18px 0 0; }\n\n.client-nav-actions { display: flex; align-items: center; gap: 12px; }\n.client-nav-actions > button:last-child { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }\n\n@media (max-width: 980px) {\n .overview-layout { grid-template-columns: 1fr; }\n .overview-summary { position: static; }\n .partner-brand-editor { padding-inline: 20px; }\n .dashboard-grid { grid-template-columns: 1fr 1fr; }\n .dashboard-grid > section:first-child { grid-column: 1 / -1; }\n .dashboard-overview { grid-template-columns: 1fr; }\n .sidebar nav .attention-nav b { margin-left: 0; font-size: 9px; }\n .builder-layout { grid-template-columns: 1fr; }\n .holiday-layout { grid-template-columns: 1fr; }\n .hour-log { grid-template-columns: 1fr 1fr; }\n}\n\n@media (max-width: 720px) {\n .sidebar .theme-toggle { display: none; }\n .mobile-nav { overflow-x: auto; scrollbar-width: none; background: var(--bg); }\n .mobile-nav .mobile-theme { margin-left: auto; min-width: 42px; display: grid; place-items: center; padding: 0; }\n .detail-header { top: 0; min-height: auto; }\n .detail-title h2 { white-space: normal; font-size: 19px; }\n .detail-meta { gap: 4px 10px; }\n .detail-tabs { top: 135px; }\n .detail-tabs button { min-height: 44px; padding-inline: 10px; }\n .section-toolbar { align-items: center; }\n .popover-form { position: fixed; inset: auto 10px 10px; width: auto; max-height: 72vh; overflow: auto; }\n .milestone-row { grid-template-columns: 32px minmax(0, 1fr); }\n .milestone-actions { grid-column: 2; justify-content: space-between; }\n .milestone-editor { grid-column: 1 / -1; grid-template-columns: 1fr; }\n .milestone-editor .milestone-description, .milestone-editor .form-actions { grid-column: auto; }\n .resource-row, .item-row { grid-template-columns: 34px minmax(0, 1fr); }\n .resource-row > button, .item-row > button { grid-column: 2; justify-self: start; }\n .portal-access-card { grid-template-columns: 1fr; }\n .client-nav-actions .theme-toggle span { display: none; }\n .client-nav-actions .theme-toggle { padding: 0; width: 36px; justify-content: center; }\n .client-footer { gap: 20px; }\n .partner-brand-editor { padding-inline: 16px; }\n .metric-grid, .dashboard-grid, .recurring-grid { padding-inline: 16px; }\n .metric-grid { grid-template-columns: 1fr; }\n .dashboard-grid, .recurring-grid { grid-template-columns: 1fr; }\n .dashboard-grid > section:first-child { grid-column: auto; }\n .dashboard-overview { padding: 18px 16px 12px; }\n .momentum-panel { align-items: flex-start; }\n .dashboard-questions { margin-inline: 16px; grid-template-columns: auto minmax(0, 1fr); }\n .dashboard-questions > .button { grid-column: 1 / -1; width: 100%; }\n .financial-overview { padding-inline: 16px; grid-template-columns: 1fr; }\n .question-inbox { padding: 18px 16px 30px; }\n .inbox-answer-actions { align-items: stretch; flex-direction: column; }\n .inbox-answer-actions .button { width: 100%; }\n .page-skeleton { padding-inline: 16px; }\n .builder-layout { padding: 18px 16px; }\n .quick-note-menu button { grid-template-columns: 1fr; gap: 3px; }\n .holiday-layout { padding: 18px 16px 6px; }\n .holiday-list { margin-inline: 16px; }\n .inline-builder { margin-inline: 16px; }\n .payments-layout { grid-template-columns: 1fr; }\n .toolbar-actions { justify-content: stretch; width: 100%; }\n .template-apply { width: 100%; }\n .template-apply select { flex: 1; width: auto; }\n}\n\n@media (max-width: 450px) {\n .auth-theme { top: 18px; right: 18px; }\n .section-toolbar { align-items: stretch; flex-direction: column; }\n .add-menu > summary { width: 100%; justify-content: center; }\n .client-brand small { display: none; }\n .client-nav-actions > button:last-child { font-size: 0; gap: 0; width: 34px; height: 34px; justify-content: center; }\n .client-footer { align-items: flex-start; flex-direction: column; }\n .hour-log { grid-template-columns: 1fr; }\n .momentum-panel { flex-direction: column; }\n .momentum-gauge { width: 132px; height: 132px; align-self: center; }\n .momentum-gauge::before { width: 100px; height: 100px; }\n .status-chart-rows > div { grid-template-columns: 82px minmax(70px, 1fr) 22px; }\n .dashboard-questions { grid-template-columns: 1fr; text-align: center; }\n .question-signal { margin: 0 auto; }\n .question-summary > div { justify-content: center; }\n .inbox-question > header { grid-template-columns: 8px minmax(0, 1fr); }\n .inbox-question > header time { grid-column: 2; }\n .phone-control { grid-template-columns: 102px minmax(0, 1fr); gap: 6px; }\n .row-actions { flex-wrap: wrap; }\n}\n\r\n",[],[198,260],"b1258ecb-87f0-4d5c-8448-d7d85848d499","index.tsx","019fada5-614d-738d-bbb2-82a7c44fa0b5",["D",1785326040637],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render(<React.StrictMode><App /></React.StrictMode>);\n",[],[198,269],"e9365ea7-d39e-4ef7-9241-1d55f5c2d54f","index.html","019fada5-614d-738d-bbb2-7d56377a4366",["D",1786653143386],"<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n <meta name=\"theme-color\" content=\"#ffffff\">\n <meta name=\"description\" content=\"AFLABS project management\">\n <title>AFLABS PM</title>\n <link rel=\"icon\" href=\"/frontend/logo.png\" type=\"image/png\">\n <link rel=\"stylesheet\" href=\"/frontend/styles.css\">\n <link rel=\"stylesheet\" href=\"/frontend/growth.css\">\n </head>\n <body>\n <div id=\"root\"></div>\n <script src=\"https://esm.town/v/std/catch\"></script>\n <script src=\"/frontend/index.tsx\" type=\"module\"></script>\n </body>\n</html>\n",[],[198,276],"b02090d6-df4c-4eba-acb0-97fad341146e","growth.css","17234b62-9756-11f1-bd2f-1607ee4eb77e",117,["D",1786657999910],3,":root {\n --growth-green: oklch(0.57 0.14 145);\n --growth-amber: oklch(0.72 0.15 75);\n --growth-red: oklch(0.55 0.19 25);\n --growth-violet: oklch(0.52 0.11 285);\n --growth-page-gutter: 30px;\n --faint: oklch(0.56 0.012 245);\n --success-ink: oklch(0.50 0.14 145);\n --warning-ink: oklch(0.50 0.15 75);\n}\n\n.growth-page {\n min-width: 0;\n min-height: 100%;\n padding: 28px var(--growth-page-gutter) 40px;\n display: grid;\n align-content: start;\n gap: 20px;\n background: var(--bg);\n}\n.growth-page-head {\n min-height: 76px;\n padding-bottom: 20px;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 28px;\n border-bottom: 1px solid var(--border);\n}\n.growth-page-head > div:first-child { max-width: 720px; }\n.growth-page-head h1 {\n margin: 0 0 7px;\n color: var(--ink);\n font-size: clamp(25px, 3vw, 34px);\n font-weight: 750;\n letter-spacing: -.03em;\n line-height: 1.08;\n text-wrap: balance;\n}\n.growth-page-head > div > span {\n display: block;\n max-width: 70ch;\n color: var(--muted);\n font-size: 13px;\n line-height: 1.55;\n}\n.growth-button {\n min-height: 40px;\n padding: 0 16px;\n border: 0;\n border-radius: 10px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n background: var(--ink);\n color: var(--bg);\n cursor: pointer;\n font: inherit;\n font-size: 12px;\n font-weight: 750;\n line-height: 1;\n transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;\n}\n.growth-button:hover { transform: translateY(-1px); }\n.growth-button:focus-visible { outline: 3px solid color-mix(in oklch, var(--blue) 22%, transparent); outline-offset: 2px; }\n.growth-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }\n.growth-button-secondary { border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); }\n.growth-button-danger { background: var(--danger); color: white; }\n\n.growth-panel {\n min-width: 0;\n padding: 22px;\n border: 1px solid var(--border);\n border-radius: 14px;\n background: var(--surface-raised);\n}\n.growth-panel > h2 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.015em; }\n.growth-panel > p { max-width: 70ch; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }\n.growth-stack { display: grid; gap: 16px; }\n.growth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }\n.growth-span-2 { grid-column: 1 / -1; }\n.growth-form-actions { display: flex; justify-content: flex-end; padding-top: 2px; }\n.growth-field {\n min-width: 0;\n display: grid;\n align-content: start;\n gap: 7px;\n color: var(--ink);\n font-size: 11px;\n font-weight: 700;\n}\n.growth-field > span { line-height: 1.25; }\n.growth-field small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }\n.growth-field input,\n.growth-field select,\n.growth-field textarea,\n.growth-filters input,\n.growth-filters select,\n.availability-form input,\n.availability-form select,\n.availability-form textarea,\n.followup-form input,\n.attach-form select,\n.message-form textarea,\n.invoice-item input,\n.partner-picker {\n width: 100%;\n min-height: 42px;\n padding: 9px 11px;\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n background: var(--bg);\n color: var(--ink);\n font: inherit;\n font-size: 12px;\n outline: 0;\n}\n.growth-field textarea,\n.message-form textarea { resize: vertical; line-height: 1.55; }\n.growth-field input:focus,\n.growth-field select:focus,\n.growth-field textarea:focus,\n.growth-filters input:focus,\n.growth-filters select:focus,\n.availability-form input:focus,\n.availability-form select:focus,\n.followup-form input:focus,\n.message-form textarea:focus,\n.invoice-item input:focus {\n border-color: var(--blue);\n box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 12%, transparent);\n}\n.growth-field input::placeholder,\n.growth-field textarea::placeholder,\n.growth-filters input::placeholder,\n.message-form textarea::placeholder { color: var(--faint); }\n.growth-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 11px; line-height: 1.4; }\n.growth-check input { margin-top: 2px; accent-color: var(--blue); }\n.growth-muted { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }\n.growth-section-title {\n margin: 0 0 18px;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 18px;\n}\n.growth-section-title h2,\n.growth-section-title h3,\n.growth-section-title p { margin: 0; }\n.growth-section-title h2 { font-size: 18px; letter-spacing: -.015em; }\n.growth-section-title h3 { font-size: 15px; }\n.growth-section-title p { max-width: 64ch; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }\n.growth-section-title > b {\n min-width: 30px;\n height: 30px;\n padding: 0 8px;\n border-radius: 8px;\n display: grid;\n place-items: center;\n background: var(--surface);\n color: var(--blue);\n font-size: 10px;\n}\n.growth-empty {\n min-height: 180px;\n padding: 32px;\n border: 1px dashed var(--border-strong);\n border-radius: 14px;\n display: grid;\n place-items: center;\n align-content: center;\n gap: 7px;\n color: var(--muted);\n text-align: center;\n}\n.growth-empty h3,\n.growth-empty p { margin: 0; }\n.growth-empty h3 { color: var(--ink); font-size: 14px; }\n.growth-empty p { max-width: 46ch; font-size: 11px; line-height: 1.5; }\n.growth-loading { padding: 30px; display: grid; gap: 10px; }\n.growth-loading i {\n height: 68px;\n border-radius: 12px;\n background: linear-gradient(90deg, var(--surface), var(--surface-raised), var(--surface));\n background-size: 220% 100%;\n animation: growth-shimmer 1.5s linear infinite;\n}\n@keyframes growth-shimmer { to { background-position: -220% 0; } }\n\n/* Markdown and project context */\n.markdown-block {\n max-width: 72ch;\n color: var(--ink);\n font-size: 13px;\n line-height: 1.72;\n overflow-wrap: anywhere;\n}\n.markdown-block > :first-child { margin-top: 0; }\n.markdown-block > :last-child { margin-bottom: 0; }\n.markdown-block h1,\n.markdown-block h2,\n.markdown-block h3 {\n margin: 1.6em 0 .55em;\n color: var(--ink);\n letter-spacing: -.02em;\n line-height: 1.25;\n}\n.markdown-block h1 { font-size: 24px; }\n.markdown-block h2 { padding-bottom: 7px; border-bottom: 1px solid var(--border); font-size: 18px; }\n.markdown-block h3 { font-size: 15px; }\n.markdown-block p,\n.markdown-block ul,\n.markdown-block ol,\n.markdown-block table { margin: .7em 0; }\n.markdown-block ul,\n.markdown-block ol { padding-left: 22px; }\n.markdown-block li + li { margin-top: .25em; }\n.markdown-block blockquote { margin: 1em 0; padding: 1px 0 1px 14px; border-left: 1px solid var(--blue); color: var(--muted); }\n.markdown-block code { padding: 2px 5px; border-radius: 5px; background: var(--surface); font-size: .9em; }\n.markdown-block pre { overflow: auto; padding: 14px; border-radius: 10px; background: var(--surface); }\n.markdown-block pre code { padding: 0; background: transparent; }\n.markdown-block a { color: var(--blue); text-underline-offset: 2px; }\n.markdown-block table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.markdown-block th,\n.markdown-block td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }\n.project-markdown-field textarea { min-height: 260px; font-family: ui-monospace, \"Cascadia Code\", Consolas, monospace; font-size: 12px; line-height: 1.6; }\n.project-markdown-notes {\n margin-top: 22px;\n padding: 0;\n border: 1px solid var(--border);\n border-radius: 12px;\n overflow: hidden;\n background: var(--bg);\n}\n.project-markdown-notes > header {\n min-height: 58px;\n padding: 12px 15px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--surface);\n}\n.project-markdown-notes > header h4,\n.project-markdown-notes > header p { margin: 0; }\n.project-markdown-notes > header h4 { font-size: 12px; }\n.project-markdown-notes > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.project-markdown-notes > header > span { color: var(--blue); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }\n.project-markdown-notes > .markdown-block { padding: 20px; }\n\n/* Commercials */\n.commercial-preview {\n grid-column: 1 / -1;\n overflow: hidden;\n border: 1px solid color-mix(in oklch, var(--success) 35%, var(--border));\n border-radius: 12px;\n background: var(--surface-raised);\n}\n.commercial-preview header,\n.commercial-preview footer,\n.commercial-preview > div {\n min-height: 42px;\n padding: 9px 14px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n font-size: 11px;\n}\n.commercial-preview header { background: color-mix(in oklch, var(--success-soft) 45%, var(--surface-raised)); }\n.commercial-preview header span { color: var(--success-ink); font-weight: 800; }\n.commercial-preview > div span { color: var(--muted); }\n.commercial-preview footer { border-bottom: 0; background: var(--surface); font-size: 12px; }\n.commercial-preview footer strong { color: var(--success-ink); font-size: 17px; }\n\n/* Dashboard additions */\n.growth-dashboard { margin-top: 18px; display: grid; gap: 14px; }\n.growth-metrics {\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n overflow: hidden;\n background: var(--surface-raised);\n}\n.growth-metrics article { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); display: grid; gap: 5px; }\n.growth-metrics article:last-child { border-right: 0; }\n.growth-metrics article > span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }\n.growth-metrics article > b { overflow: hidden; font-size: 20px; letter-spacing: -.025em; text-overflow: ellipsis; }\n.growth-metrics article small { color: var(--muted); font-size: 10px; }\n.growth-metrics article.risk > b { color: var(--danger); }\n.growth-metrics article.attention > b { color: var(--warning-ink); }\n.partner-target-strip {\n padding: 18px;\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: minmax(180px, 1.1fr) repeat(4, minmax(120px, 1fr));\n gap: 20px;\n background: var(--surface-raised);\n}\n.partner-target-strip header span { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }\n.partner-target-strip header h3 { margin: 4px 0; font-size: 16px; }\n.partner-target-strip header small { color: var(--muted); font-size: 10px; }\n.target-progress { min-width: 0; display: grid; align-content: center; gap: 7px; }\n.target-progress > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }\n.target-progress > div:first-child span { color: var(--muted); }\n.target-progress > div:nth-child(2) { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.target-progress > div:nth-child(2) i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }\n.target-progress small { color: var(--muted); font-size: 9px; }\n\n/* Leads */\n.lead-create { border-color: color-mix(in oklch, var(--blue) 30%, var(--border)); }\n.pipeline-eagle { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.pipeline-eagle > header {\n min-height: 66px;\n padding: 15px 18px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n}\n.pipeline-eagle > header h2,\n.pipeline-eagle > header p { margin: 0; }\n.pipeline-eagle > header h2 { font-size: 17px; }\n.pipeline-eagle > header p { margin-top: 4px; color: var(--muted); font-size: 10px; }\n.pipeline-eagle > header > b { color: var(--blue); font-size: 10px; }\n.pipeline-track { min-width: 780px; padding: 0 12px; display: grid; grid-template-columns: repeat(8, minmax(92px, 1fr)); border-bottom: 1px solid var(--border); }\n.pipeline-stage { min-width: 0; padding: 13px 9px 12px; border-right: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }\n.pipeline-stage:last-child { border-right: 0; }\n.pipeline-stage span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 750; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; }\n.pipeline-stage b { font-size: 11px; }\n.pipeline-stage i { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: var(--blue); opacity: .24; }\n.stage-contacted i { opacity: .34; }\n.stage-qualified i { opacity: .46; }\n.stage-discovery i { opacity: .58; }\n.stage-proposal i { opacity: .7; }\n.stage-negotiation i { opacity: .82; }\n.stage-won i { background: var(--success); opacity: 1; }\n.stage-lost i { background: var(--danger); opacity: .62; }\n.pipeline-columns {\n min-width: 1480px;\n padding: 12px;\n display: grid;\n grid-template-columns: repeat(8, minmax(170px, 1fr));\n gap: 8px;\n}\n.pipeline-columns > section { min-height: 118px; padding: 9px; border-radius: 10px; background: var(--surface); }\n.pipeline-columns > section > header { margin-bottom: 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }\n.pipeline-columns button {\n width: 100%;\n padding: 9px;\n border: 1px solid transparent;\n border-radius: 9px;\n display: grid;\n gap: 4px;\n background: var(--surface-raised);\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n}\n.pipeline-columns button + button { margin-top: 6px; }\n.pipeline-columns button:hover { border-color: var(--border-strong); }\n.pipeline-columns button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }\n.pipeline-columns button small { color: var(--muted); font-size: 9px; }\n.pipeline-eagle { overflow-x: auto; scrollbar-width: thin; }\n.lead-filter-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.lead-filter-panel > header {\n min-height: 52px;\n padding: 11px 14px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--surface);\n}\n.lead-filter-panel > header h2,\n.lead-filter-panel > header p { margin: 0; }\n.lead-filter-panel > header h2 { font-size: 13px; }\n.lead-filter-panel > header p { margin-top: 2px; color: var(--muted); font-size: 9px; }\n.lead-filter-panel > header button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }\n.growth-filters { padding: 13px 14px 14px; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .7fr)); gap: 10px; }\n.growth-filters label { min-width: 0; display: grid; gap: 5px; }\n.growth-filters label > span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }\n.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }\n.lead-card {\n min-width: 0;\n min-height: 180px;\n padding: 16px;\n border: 1px solid var(--border);\n border-radius: 13px;\n display: grid;\n align-content: start;\n gap: 10px;\n background: var(--surface-raised);\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n transition: border-color 180ms ease-out, transform 180ms ease-out;\n}\n.lead-card:hover { border-color: var(--blue); transform: translateY(-1px); }\n.lead-card:focus-visible { outline: 3px solid color-mix(in oklch, var(--blue) 18%, transparent); outline-offset: 2px; }\n.lead-card header,\n.lead-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.lead-priority,\n.lead-card header em { font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.lead-priority { color: var(--muted); }\n.lead-card header em { color: var(--blue); }\n.priority-high,\n.priority-urgent { color: var(--danger); }\n.lead-card h3,\n.lead-card p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }\n.lead-card h3 { font-size: 16px; letter-spacing: -.015em; }\n.lead-card p { color: var(--muted); font-size: 11px; }\n.lead-card dl { margin: 1px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.lead-card dl div { padding: 9px; border-radius: 9px; background: var(--surface); }\n.lead-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.lead-card dd { margin: 3px 0 0; font-size: 11px; font-weight: 750; }\n.lead-card footer { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }\n.lead-card footer b { color: var(--ink); }\n.lead-card footer b.overdue { color: var(--danger); }\n\n.growth-drawer-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; justify-content: flex-end; background: color-mix(in oklch, var(--ink) 36%, transparent); }\n.growth-drawer { width: min(820px, 96vw); height: 100%; overflow: auto; background: var(--bg); box-shadow: -20px 0 55px color-mix(in oklch, var(--ink) 18%, transparent); }\n.growth-drawer-head {\n position: sticky;\n z-index: 5;\n top: 0;\n min-height: 74px;\n padding: 15px 20px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--bg);\n}\n.growth-drawer-head span { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }\n.growth-drawer-head h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.02em; }\n.growth-drawer-head button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); color: var(--muted); cursor: pointer; font-size: 20px; }\n.lead-detail { padding: 20px; display: grid; gap: 16px; }\n.lead-contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }\n.lead-contact-strip > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 11px; display: grid; gap: 3px; background: var(--surface-raised); }\n.lead-contact-strip span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }\n.lead-contact-strip b,\n.lead-contact-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lead-contact-strip b { font-size: 11px; }\n.lead-contact-strip small { color: var(--muted); font-size: 9px; }\n.growth-accordion { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }\n.growth-accordion > summary { min-height: 46px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--ink); font-size: 11px; font-weight: 750; }\n.growth-accordion > form { padding: 16px; border-top: 1px solid var(--border); }\n.lead-two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }\n.followup-form { display: grid; grid-template-columns: minmax(180px, 1fr) 170px auto; gap: 8px; }\n.followup-list,\n.lead-projects { margin-top: 13px; display: grid; gap: 7px; }\n.followup-list article { min-height: 49px; padding: 9px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }\n.followup-list article:last-child { border-bottom: 0; }\n.followup-list article > span { width: 18px; color: var(--success-ink); font-size: 15px; }\n.followup-list article > div { min-width: 0; flex: 1; display: grid; gap: 2px; }\n.followup-list article b { font-size: 10px; }\n.followup-list article small { color: var(--muted); font-size: 9px; }\n.followup-list article button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 750; }\n.followup-list article.overdue small { color: var(--danger); }\n.lead-projects button { width: 100%; min-height: 54px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; }\n.lead-projects button > div { min-width: 0; flex: 1; display: grid; gap: 3px; }\n.lead-projects button b,\n.lead-projects button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lead-projects button b { font-size: 10px; }\n.lead-projects small { color: var(--muted); font-size: 9px; }\n.lead-projects em { color: var(--blue); font-size: 9px; font-style: normal; }\n.project-state { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }\n.state-in-progress { background: var(--blue); }\n.state-done { background: var(--success); }\n.state-blocked { background: var(--danger); }\n.attach-form { display: flex; gap: 8px; }\n.attach-form select { flex: 1; }\n.timeline-panel { padding-bottom: 6px; }\n.lead-timeline { position: relative; max-width: 700px; padding-left: 23px; display: grid; }\n.lead-timeline::before { position: absolute; top: 8px; bottom: 28px; left: 7px; width: 1px; background: var(--border-strong); content: \"\"; }\n.lead-timeline article { position: relative; padding: 0 0 18px 15px; }\n.timeline-node { position: absolute; top: 9px; left: -20px; width: 10px; height: 10px; border: 3px solid var(--surface-raised); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }\n.lead-timeline article > div:last-child { padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }\n.lead-timeline header,\n.lead-timeline footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.lead-timeline header { justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; }\n.lead-timeline h4 { margin: 7px 0 0; font-size: 12px; }\n.lead-timeline p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; white-space: pre-wrap; }\n.lead-timeline footer { margin-top: 10px; color: var(--muted); font-size: 8px; }\n.lead-timeline footer em { padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--blue); font-style: normal; }\n\n/* Conversations */\n.chat-page { min-height: 100vh; }\n.chat-create-panel { padding: 20px 22px; }\n.chat-layout {\n min-height: 590px;\n height: min(720px, calc(100vh - 190px));\n overflow: hidden;\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: 300px minmax(0, 1fr);\n background: var(--surface-raised);\n}\n.thread-list { min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface); }\n.thread-list-head { position: sticky; z-index: 2; top: 0; min-height: 60px; padding: 13px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface-raised); }\n.thread-list-head h2,\n.thread-list-head p { margin: 0; }\n.thread-list-head h2 { font-size: 14px; }\n.thread-list-head p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.thread-list > button {\n position: relative;\n width: 100%;\n min-height: 88px;\n padding: 13px 15px;\n border: 0;\n border-bottom: 1px solid var(--border);\n display: grid;\n align-content: center;\n gap: 4px;\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n}\n.thread-list > button:hover { background: color-mix(in oklch, var(--blue-soft) 38%, transparent); }\n.thread-list > button.active { background: var(--surface-raised); box-shadow: inset 2px 0 0 var(--blue); }\n.thread-list > button > span { overflow: hidden; color: var(--blue); font-size: 8px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; letter-spacing: .04em; }\n.thread-list h3,\n.thread-list p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }\n.thread-list h3 { padding-right: 12px; font-size: 12px; }\n.thread-list p { color: var(--muted); font-size: 9px; }\n.thread-list small { color: var(--faint); font-size: 8px; }\n.thread-list button.unread h3 { font-weight: 850; }\n.thread-list button.unread i { position: absolute; top: 17px; right: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }\n.thread-list .growth-empty { min-height: 240px; margin: 12px; padding: 20px; }\n.chat-thread { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); }\n.chat-thread > header { min-height: 72px; padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface-raised); }\n.chat-thread > header span { color: var(--blue); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.chat-thread > header h2,\n.chat-thread > header p { margin: 0; }\n.chat-thread > header h2 { margin-top: 4px; font-size: 17px; letter-spacing: -.015em; }\n.chat-thread > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.chat-thread > header > b { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 8px; white-space: nowrap; }\n.message-list { min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }\n.message-list article { align-self: flex-start; width: fit-content; max-width: min(70ch, 78%); padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--surface); }\n.message-list article.mine { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: var(--blue-soft); }\n.message-list article > div { display: flex; justify-content: space-between; gap: 18px; font-size: 8px; }\n.message-list article time { color: var(--muted); }\n.message-list article p { margin: 6px 0 0; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }\n.message-form { padding: 12px 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; background: var(--surface-raised); }\n.message-form label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }\n.message-form textarea { min-height: 68px; max-height: 160px; background: var(--bg); }\n\n/* Meetings */\n.meeting-quota { min-width: 150px; padding: 10px 12px; border-radius: 10px; display: grid; justify-items: end; background: var(--surface); }\n.meeting-quota b { font-size: 17px; }\n.meeting-quota span { color: var(--muted); font-size: 9px; }\n.availability-form { display: grid; grid-template-columns: 110px 1fr 1fr 1.3fr auto; gap: 8px; }\n.slot-list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }\n.slot-chip { padding: 6px 8px 6px 10px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.slot-chip b { color: var(--success-ink); }\n.slot-chip.blocked b { color: var(--danger); }\n.slot-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }\n.meeting-layout { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(380px, 1.15fr); gap: 14px; align-items: start; }\n.booking-list { display: grid; }\n.booking-list article { padding: 13px 0; border-bottom: 1px solid var(--border); display: grid; gap: 7px; }\n.booking-list article:last-child { border-bottom: 0; }\n.booking-list header,\n.booking-list footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.booking-list header span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; }\n.booking-list time,\n.booking-list p { color: var(--muted); font-size: 9px; }\n.booking-list h3,\n.booking-list p { margin: 0; }\n.booking-list h3 { font-size: 12px; }\n.booking-list footer a { color: var(--blue); font-size: 10px; font-weight: 750; }\n\n/* MoU and targets */\n.partner-picker-field { min-width: 240px; display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.partner-picker { min-height: 42px; text-transform: none; letter-spacing: 0; }\n.mou-document {\n width: min(840px, 100%);\n margin-inline: auto;\n overflow: hidden;\n border: 1px solid var(--border-strong);\n border-radius: 14px;\n background: var(--surface-raised);\n}\n.mou-document > header { min-height: 112px; padding: 26px 34px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: var(--surface); }\n.mou-document > header span { color: var(--blue); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }\n.mou-document > header h2 { margin: 8px 0 0; font-size: 23px; letter-spacing: -.025em; }\n.mou-document > header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }\n.mou-document > header b { color: var(--muted); font-size: 10px; white-space: nowrap; }\n.mou-document > section { padding: 28px 34px; }\n.mou-document > section + section { border-top: 1px solid var(--border); }\n.mou-document > section h3 { margin: 0 0 16px; font-size: 15px; }\n.mou-document .markdown-block { max-width: 68ch; }\n.target-board { width: min(960px, 100%); margin-inline: auto; }\n.target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }\n.mou-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }\n.mou-admin-grid > :last-child { grid-column: 1 / -1; }\n.target-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }\n.target-history article { padding: 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 4px; background: var(--bg); }\n.target-history span { color: var(--blue); font-size: 9px; font-weight: 800; }\n.target-history b { font-size: 10px; }\n.target-history p { margin: 0; color: var(--muted); font-size: 10px; }\n.target-history small { color: var(--faint); font-size: 8px; }\n\n/* AI pitch */\n.idea-layout { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 14px; align-items: start; }\n.idea-builder { position: sticky; top: 18px; }\n.idea-builder .growth-form-grid { grid-template-columns: 1fr; }\n.idea-builder .growth-span-2 { grid-column: auto; }\n.idea-builder textarea { min-height: 104px; }\n.budget-input { display: grid; grid-template-columns: 94px 1fr; gap: 7px; }\n.idea-list { min-height: 520px; padding: 0; overflow: hidden; }\n.idea-list > .growth-section-title { min-height: 64px; margin: 0; padding: 15px 18px; border-bottom: 1px solid var(--border); align-items: center; background: var(--surface); }\n.idea-card { background: var(--surface-raised); }\n.idea-card + .idea-card { border-top: 1px solid var(--border); }\n.idea-card > button { width: 100%; min-height: 78px; padding: 14px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }\n.idea-card > button:hover { background: var(--surface); }\n.idea-card > button span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.idea-card h3 { margin: 5px 0 3px; font-size: 13px; }\n.idea-card small { color: var(--muted); font-size: 9px; }\n.idea-card > button > b { color: var(--blue); font-size: 9px; text-transform: uppercase; }\n.idea-output { padding: 24px 24px 20px; border-top: 1px solid var(--border); background: var(--bg); }\n.idea-output .markdown-block { max-width: 74ch; }\n.idea-output footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }\n.idea-output footer span { color: var(--success-ink); font-size: 10px; font-weight: 800; }\n.prompt-settings summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; }\n.prompt-settings summary span { display: grid; gap: 3px; }\n.prompt-settings summary b { font-size: 12px; }\n.prompt-settings summary small { color: var(--muted); font-size: 9px; font-weight: 500; }\n.prompt-settings summary em { color: var(--blue); font-size: 9px; font-style: normal; font-weight: 750; text-transform: uppercase; }\n.prompt-settings form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }\n\n/* Invoice composer */\n.invoice-composer { min-width: 0; display: grid; gap: 22px; }\n.invoice-composer-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }\n.invoice-composer-head h3,\n.invoice-composer-head p { margin: 0; }\n.invoice-composer-head h3 { font-size: 19px; letter-spacing: -.02em; }\n.invoice-composer-head p { margin-top: 5px; color: var(--muted); font-size: 10px; }\n.invoice-composer-head > span { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; }\n.invoice-line-section,\n.invoice-settings { display: grid; gap: 12px; }\n.invoice-section-head,\n.invoice-settings > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }\n.invoice-section-head h4,\n.invoice-section-head p,\n.invoice-settings h4,\n.invoice-settings p { margin: 0; }\n.invoice-section-head h4,\n.invoice-settings h4 { font-size: 13px; }\n.invoice-section-head p,\n.invoice-settings p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.invoice-item-head,\n.invoice-item { display: grid; grid-template-columns: minmax(200px, 1fr) 76px 116px 118px 58px; align-items: center; gap: 8px; }\n.invoice-item-head { padding: 0 2px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.invoice-items { border-top: 1px solid var(--border); }\n.invoice-item { min-height: 58px; padding: 8px 2px; border-bottom: 1px solid var(--border); }\n.invoice-item label { min-width: 0; }\n.invoice-item label > span { display: none; }\n.invoice-item input { min-width: 0; }\n.invoice-item > b { text-align: right; font-size: 10px; }\n.growth-icon-danger { border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; }\n.invoice-settings { padding: 16px; border-radius: 12px; background: var(--surface); }\n.invoice-milestones { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }\n.invoice-milestones legend { padding: 0 5px; font-size: 10px; font-weight: 750; }\n.invoice-milestones > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }\n.invoice-composer-footer { padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }\n.invoice-totals { width: min(360px, 100%); display: grid; }\n.invoice-totals > div { padding: 5px 0; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }\n.invoice-totals .total { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13px; }\n.invoice-totals strong { color: var(--success-ink); font-size: 18px; }\n.invoice-add-menu { position: relative; }\n.invoice-add-menu[open] { z-index: 120; }\n.invoice-add-menu[open]::before { position: fixed; z-index: 110; inset: 0; background: color-mix(in oklch, var(--ink) 38%, transparent); content: \"\"; }\n.invoice-composer-wrap {\n position: fixed;\n z-index: 120;\n top: 28px;\n right: 28px;\n bottom: 28px;\n width: min(840px, calc(100vw - 56px));\n overflow: auto;\n padding: 24px;\n border-radius: 15px;\n background: var(--surface-raised);\n box-shadow: 0 22px 70px color-mix(in oklch, var(--ink) 24%, transparent);\n}\n.growth-partner-editor { padding: 20px; border: 1px solid var(--border); border-radius: 13px; display: grid; gap: 18px; background: var(--surface-raised); }\n.growth-partner-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }\n.growth-partner-editor > header h3,\n.growth-partner-editor > header p { margin: 0; }\n.growth-partner-editor > header h3 { font-size: 15px; }\n.growth-partner-editor > header p { max-width: 58ch; margin-top: 4px; color: var(--muted); font-size: 10px; }\n.growth-partner-editor > header span { color: var(--blue); font-size: 9px; font-weight: 750; }\n.growth-partner-editor > footer { display: flex; justify-content: flex-end; }\n\n/* Partner permission editor */\n.permission-package-fieldset,\n.custom-permission-fieldset { margin: 0; padding: 0; border: 0; }\n.permission-package-fieldset > legend,\n.custom-permission-fieldset > legend { margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 750; }\n.permission-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.permission-package-grid > label {\n min-width: 0;\n min-height: 102px;\n padding: 12px;\n border: 1px solid var(--border);\n border-radius: 11px;\n display: flex;\n align-items: flex-start;\n gap: 9px;\n background: var(--bg);\n cursor: pointer;\n}\n.permission-package-grid > label.selected { border-color: var(--blue); background: var(--blue-soft); }\n.permission-package-grid input { margin-top: 2px; accent-color: var(--blue); }\n.permission-package-grid span { min-width: 0; display: grid; gap: 5px; }\n.permission-package-grid b { font-size: 11px; }\n.permission-package-grid small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }\n.custom-permission-fieldset { padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }\n.partner-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.partner-permission-grid .check { min-height: 38px; padding: 8px 9px; border-radius: 9px; align-items: center; background: var(--bg); }\n.partner-permission-editor { padding: 0 0 22px; border-bottom: 1px solid var(--border); }\n.partner-permission-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }\n.partner-permission-editor > header h3,\n.partner-permission-editor > header p { margin: 0; }\n.partner-permission-editor > header h3 { font-size: 17px; }\n.partner-permission-editor > header p { margin-top: 4px; color: var(--muted); font-size: 10px; }\n.partner-permission-editor > header > span { padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 750; }\n.partner-permission-editor > footer { display: flex; gap: 8px; }\n\n/* Proposal workspace */\n.proposal-workspace .page-heading p { display: none; }\n.proposal-layout { padding: 20px 30px 36px; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }\n.proposal-builder,\n.proposal-library { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.proposal-builder { position: sticky; top: 18px; padding: 22px; }\n.proposal-builder > header h2,\n.proposal-builder > header p { margin: 0; }\n.proposal-builder > header h2 { font-size: 18px; letter-spacing: -.015em; }\n.proposal-builder > header p { margin: 5px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n.proposal-builder textarea { min-height: 300px; }\n.proposal-library { overflow: hidden; }\n.proposal-library > header { min-height: 66px; padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); }\n.proposal-library > header h2,\n.proposal-library > header p { margin: 0; }\n.proposal-library > header h2 { font-size: 17px; }\n.proposal-library > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.proposal-row + .proposal-row { border-top: 1px solid var(--border); }\n.proposal-main { width: 100%; min-height: 82px; padding: 14px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }\n.proposal-main:hover { background: var(--surface); }\n.proposal-main span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.proposal-main h3,\n.proposal-main p { margin: 0; }\n.proposal-main h3 { margin-top: 4px; font-size: 13px; }\n.proposal-main p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.proposal-row.open .proposal-main { background: var(--surface); }\n.proposal-detail { padding: 0 20px 20px; background: var(--surface); }\n.proposal-document { max-height: 520px; overflow: auto; padding: 22px; border-radius: 11px; background: var(--bg); }\n.proposal-detail > footer { padding-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }\n.proposal-converted { color: var(--success-ink); font-size: 10px; font-weight: 750; }\n\n/* Project filters */\n.project-filter-panel { margin: 16px 22px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.project-filter-panel-head { min-height: 46px; padding: 9px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); }\n.project-filter-panel-title { min-width: 0; display: flex; align-items: center; gap: 9px; }\n.project-filter-panel-title > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }\n.project-filter-panel-title > strong { font-size: 11px; white-space: nowrap; }\n.project-filter-panel-title > strong small { color: var(--muted); font-size: 9px; font-weight: 550; }\n.project-filter-panel-title > b { padding: 3px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-weight: 800; }\n.project-filter-clear { padding: 5px 3px; border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 9px; font-weight: 750; }\n.project-filter-controls { padding: 12px 13px 13px; display: grid; grid-template-columns: repeat(4, minmax(145px, 190px)); justify-content: start; gap: 10px; }\n.project-filter-controls label { min-width: 0; display: grid; gap: 5px; }\n.project-filter-controls label > span { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.project-filter-controls select { width: 100%; min-height: 36px; padding: 0 31px 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; font-size: 10px; outline: 0; }\n.project-filter-controls select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 12%, transparent); }\n.project-filter-panel + .kanban { height: calc(100vh - 234px); }\n\n@media (max-width: 1180px) {\n .growth-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .growth-metrics article:nth-child(2) { border-right: 0; }\n .growth-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }\n .partner-target-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .partner-target-strip header { grid-column: 1 / -1; }\n .growth-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .idea-layout,\n .proposal-layout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }\n .project-filter-controls { grid-template-columns: repeat(2, minmax(145px, 190px)); }\n}\n@media (max-width: 900px) {\n .growth-page { --growth-page-gutter: 20px; padding-top: 22px; }\n .lead-two-col,\n .meeting-layout,\n .idea-layout,\n .proposal-layout { grid-template-columns: 1fr; }\n .idea-builder,\n .proposal-builder { position: static; }\n .proposal-layout { padding-inline: 20px; }\n .mou-admin-grid { grid-template-columns: 1fr; }\n .mou-admin-grid > :last-child { grid-column: auto; }\n .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .chat-layout { grid-template-columns: 270px minmax(0, 1fr); }\n .invoice-item-head,\n .invoice-item { grid-template-columns: minmax(180px, 1fr) 70px 105px 105px 52px; }\n}\n@media (max-width: 700px) {\n .growth-page { --growth-page-gutter: 16px; padding-top: 18px; gap: 16px; }\n .growth-page-head { min-height: 0; padding-bottom: 16px; align-items: stretch; flex-direction: column; gap: 14px; }\n .growth-page-head .growth-button { width: 100%; }\n .growth-form-grid,\n .lead-contact-strip,\n .target-grid,\n .growth-metrics,\n .partner-target-strip,\n .permission-package-grid,\n .partner-permission-grid,\n .invoice-milestones > div { grid-template-columns: 1fr; }\n .growth-span-2 { grid-column: auto; }\n .growth-panel { padding: 17px; }\n .growth-filters { grid-template-columns: 1fr; }\n .lead-grid { grid-template-columns: 1fr; }\n .growth-drawer { width: 100vw; }\n .lead-detail { padding: 13px; }\n .lead-contact-strip { grid-template-columns: 1fr; }\n .followup-form,\n .availability-form { grid-template-columns: 1fr; }\n .attach-form { flex-direction: column; }\n .chat-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }\n .thread-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); }\n .chat-thread { min-height: 520px; }\n .message-list { padding: 16px; }\n .message-list article { max-width: 90%; }\n .message-form { grid-template-columns: 1fr; }\n .message-form .growth-button { width: 100%; }\n .partner-picker-field { width: 100%; min-width: 0; }\n .mou-document > header { padding: 22px; flex-direction: column; }\n .mou-document > section { padding: 22px; }\n .idea-builder textarea { min-height: 120px; }\n .invoice-composer-wrap { inset: 10px; width: auto; padding: 18px; }\n .invoice-item-head { display: none; }\n .invoice-item { padding: 12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }\n .invoice-item label:first-child { grid-column: 1 / -1; }\n .invoice-item label > span { margin-bottom: 5px; display: block; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }\n .invoice-item > b { align-self: center; text-align: left; }\n .growth-icon-danger { justify-self: end; }\n .invoice-composer-footer { align-items: stretch; flex-direction: column; }\n .invoice-composer-footer .growth-button { width: 100%; }\n .project-filter-panel { margin: 12px 16px 0; }\n .project-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .project-filter-panel + .kanban { height: auto; min-height: calc(100vh - 330px); }\n .proposal-layout { padding: 14px 16px 28px; }\n .proposal-builder { padding: 18px; }\n .proposal-document { padding: 17px; }\n}\n@media (max-width: 480px) {\n .project-filter-panel-head,\n .project-filter-panel-title { align-items: flex-start; }\n .project-filter-panel-title { flex-wrap: wrap; }\n .project-filter-controls { grid-template-columns: 1fr; }\n .pipeline-eagle > header { align-items: flex-start; flex-direction: column; }\n .growth-drawer-head h2 { font-size: 18px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .growth-button,\n .lead-card { transition-duration: 1ms; }\n .growth-button:hover,\n .lead-card:hover { transform: none; }\n .growth-loading i { animation: none; }\n}\n\n\n/* Finish-review corrections */\n.growth-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n}\n.growth-dialog {\n width: auto;\n max-width: none;\n height: 100vh;\n max-height: 100vh;\n margin: 0 0 0 auto;\n padding: 0;\n border: 0;\n overflow: visible;\n background: transparent;\n}\n.growth-dialog::backdrop { background: color-mix(in oklch, var(--ink) 38%, transparent); }\n.growth-dialog .growth-drawer { height: 100vh; }\n.growth-button { min-height: 44px; font-size: 13px; }\n.growth-field { font-size: 12px; }\n.growth-field small,\n.growth-panel > p,\n.growth-section-title p,\n.growth-page-head > div > span { font-size: 12px; }\n.growth-field input,\n.growth-field select,\n.growth-field textarea,\n.growth-filters input,\n.growth-filters select,\n.availability-form input,\n.availability-form select,\n.availability-form textarea,\n.followup-form input,\n.attach-form select,\n.message-form textarea,\n.invoice-item input,\n.partner-picker { min-height: 44px; font-size: 14px; }\n.growth-section-title h3,\n.lead-card h3,\n.chat-thread > header h2,\n.idea-card h3,\n.proposal-main h3 { font-size: 14px; }\n.pipeline-eagle > header p,\n.lead-filter-panel > header p,\n.lead-card p,\n.lead-card footer,\n.lead-card dt,\n.lead-card dd,\n.followup-list article b,\n.followup-list article small,\n.lead-projects button b,\n.lead-projects button small,\n.lead-projects em,\n.lead-timeline header,\n.lead-timeline p,\n.lead-timeline footer,\n.thread-list-head p,\n.thread-list > button > span,\n.thread-list p,\n.thread-list small,\n.chat-thread > header span,\n.chat-thread > header p,\n.chat-thread > header > b,\n.message-list article > div,\n.meeting-quota span,\n.booking-list header span,\n.booking-list time,\n.booking-list p,\n.partner-picker-field,\n.mou-document > header span,\n.mou-document > header p,\n.mou-document > header b,\n.target-history span,\n.target-history b,\n.target-history p,\n.target-history small,\n.idea-card > button span,\n.idea-card small,\n.idea-card > button > b,\n.prompt-settings summary small,\n.prompt-settings summary em,\n.invoice-composer-head p,\n.invoice-composer-head > span,\n.invoice-section-head p,\n.invoice-settings p,\n.invoice-item-head,\n.growth-icon-danger,\n.permission-package-grid small,\n.partner-permission-editor > header p,\n.partner-permission-editor > header > span,\n.proposal-builder > header p,\n.proposal-library > header p,\n.proposal-main span,\n.proposal-main p,\n.proposal-converted,\n.project-filter-panel-title > span,\n.project-filter-panel-title > strong,\n.project-filter-panel-title > strong small,\n.project-filter-panel-title > b,\n.project-filter-clear,\n.project-filter-controls label > span,\n.project-filter-controls select { font-size: 12px; }\n.pipeline-track { min-width: 1040px; grid-template-columns: repeat(8, minmax(120px, 1fr)); }\n.pipeline-stage span,\n.pipeline-stage b,\n.pipeline-columns button strong,\n.pipeline-columns button small { font-size: 12px; }\n.thread-list > button { min-height: 102px; }\n.message-list article p { font-size: 14px; }\n.message-form label { font-size: 12px; }\n.markdown-block { font-size: 14px; }\n.growth-drawer-head button { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 12px; font-weight: 750; }\n.lead-filter-panel > header button,\n.followup-list article button,\n.growth-icon-danger,\n.project-filter-clear { min-height: 40px; padding-inline: 8px; }\n.proposal-convert { display: flex; align-items: flex-end; gap: 8px; }\n.proposal-convert label { min-width: 190px; display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }\n.proposal-convert select { width: 100%; min-height: 44px; padding: 0 34px 0 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }\n\n@media (max-width: 700px) {\n .growth-dialog,\n .growth-dialog .growth-drawer { width: 100vw; }\n .lead-filter-panel > header button,\n .followup-list article button,\n .growth-icon-danger,\n .project-filter-clear { min-width: 44px; min-height: 44px; }\n .proposal-detail > footer,\n .proposal-convert { align-items: stretch; flex-direction: column; }\n .proposal-convert label { min-width: 0; }\n}\n\n/* Focused workflow refinements */\n.growth-dialog:has(.lead-dialog-shell),\n.growth-dialog:has(.idea-dialog) {\n width: min(1180px, calc(100vw - 40px));\n height: min(900px, calc(100vh - 40px));\n max-height: calc(100vh - 40px);\n margin: auto;\n border: 1px solid var(--border-strong);\n border-radius: 14px;\n overflow: hidden;\n background: var(--bg);\n box-shadow: 0 24px 70px color-mix(in oklch, var(--ink) 22%, transparent);\n}\n.lead-dialog-shell,\n.idea-dialog { height: 100%; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }\n.lead-dialog-shell .growth-drawer-head { position: relative; }\n.lead-dialog-shell .lead-detail { min-height: 0; overflow-y: auto; padding: 24px; }\n.lead-dialog-shell .lead-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\n.followup-form { grid-template-columns: minmax(0, 1fr) minmax(210px, .65fr) auto; align-items: end; }\n.followup-form .growth-field { min-width: 0; }\n.followup-list article { min-height: 64px; padding: 10px 0; align-items: center; }\n.followup-status { width: 10px !important; height: 10px; flex: 0 0 10px; border: 2px solid var(--success-ink); border-radius: 50%; }\n.followup-list article.overdue .followup-status { border-color: var(--danger); background: var(--danger); }\n.followup-list article small { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.followup-list article small em { padding: 3px 6px; border-radius: 999px; background: var(--surface); color: var(--muted); font-style: normal; font-weight: 750; }\n.followup-list article.overdue small time { color: var(--danger); }\n\n.thread-list-head { min-height: 104px; align-items: stretch; justify-content: center; flex-direction: column; gap: 10px; }\n.thread-list-head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }\n.thread-context-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 9px; background: var(--surface); }\n.thread-context-filter button { min-height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }\n.thread-context-filter button.active { background: var(--bg); color: var(--ink); box-shadow: 0 2px 8px color-mix(in oklch, var(--ink) 8%, transparent); }\n\n.availability-manager { display: grid; gap: 18px; }\n.availability-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.availability-mode button { min-height: 70px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; display: grid; gap: 4px; background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; }\n.availability-mode button b { font-size: 14px; }\n.availability-mode button span { color: var(--muted); font-size: 12px; }\n.availability-mode button.active { border-color: var(--success-ink); background: color-mix(in oklch, var(--success) 7%, var(--bg)); }\n.availability-mode button.active.blocked { border-color: var(--danger); background: color-mix(in oklch, var(--danger) 6%, var(--bg)); }\n.availability-form { grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(220px, 1.2fr) auto; align-items: end; }\n.availability-list { border-top: 1px solid var(--border); display: grid; }\n.availability-list > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.availability-list > header h3 { margin: 0; font-size: 14px; }\n.availability-list > header span { color: var(--muted); font-size: 12px; }\n.availability-list article { min-height: 62px; padding: 10px 0; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; }\n.availability-list article > div { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, auto) minmax(120px, 1fr); align-items: center; gap: 12px; }\n.availability-list article b { color: var(--success-ink); font-size: 12px; }\n.availability-list article.blocked b { color: var(--danger); }\n.availability-list article time { font-size: 13px; font-weight: 650; }\n.availability-list article small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }\n.availability-list article > button { min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--danger); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }\n\n.idea-dialog { grid-template-rows: auto minmax(0, 1fr) auto; }\n.idea-dialog > header { min-height: 84px; padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: var(--surface); }\n.idea-dialog > header span { color: var(--blue); font-size: 12px; font-weight: 800; }\n.idea-dialog > header h2 { margin: 5px 0 3px; font-size: 22px; letter-spacing: -.02em; }\n.idea-dialog > header p { margin: 0; color: var(--muted); font-size: 12px; }\n.idea-dialog > header button { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }\n.idea-dialog-content { min-height: 0; overflow-y: auto; padding: 28px 32px; }\n.idea-dialog-content .markdown-block { max-width: 74ch; margin-inline: auto; }\n.idea-dialog > footer { min-height: 68px; padding: 12px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; background: var(--surface); }\n.idea-dialog > footer span { color: var(--success-ink); font-size: 13px; font-weight: 750; }\n\n@media (max-width: 900px) {\n .lead-dialog-shell .lead-two-col,\n .availability-form { grid-template-columns: 1fr; }\n .availability-list article > div { grid-template-columns: 78px minmax(0, 1fr); }\n .availability-list article small { grid-column: 2; }\n}\n@media (max-width: 700px) {\n .growth-dialog:has(.lead-dialog-shell),\n .growth-dialog:has(.idea-dialog) { width: 100vw; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }\n .lead-dialog-shell .lead-detail { padding: 16px; }\n .followup-form,\n .availability-mode { grid-template-columns: 1fr; }\n .followup-list article { align-items: flex-start; flex-wrap: wrap; }\n .followup-list article button { margin-left: 20px; }\n .availability-list article { align-items: flex-start; }\n .availability-list article > div { grid-template-columns: 1fr; gap: 4px; }\n .availability-list article small { grid-column: auto; white-space: normal; }\n .idea-dialog > header,\n .idea-dialog-content,\n .idea-dialog > footer { padding-inline: 16px; }\n}",[],[198,283],"792cd95e-3b1b-44e6-8f8a-d1be5f910593","favicon.svg","019fada5-614d-738d-bbb2-7b9783b42d7c",7,["D",1785326044201],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"32\" height=\"32\" rx=\"9\" fill=\"#15191f\"/>\n <path d=\"M9 23 15.2 8h3.4L25 23h-4.1l-1.1-3H14l-1.1 3H9Zm6.2-6.4h3.5L17 11.7l-1.8 4.9Z\" fill=\"#c7ec46\"/>\n</svg>\n",[],[198,292],"db8f96aa-885f-431a-9199-ea488cd03d68","019fada5-614d-738d-bbb2-75aad905c767",["D",1786658319884],[],[198,304,34],"components","1b80791e-f782-4aa4-b4a4-e3450e79f45d","Counter.tsx","019fada5-614d-738d-bbb2-71801d3e7075",["D",1785324724390],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n <div class=\"flex items-center gap-3\">\n <span class=\"text-lg\">Clicked</span>\n <button\n onClick={() => setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n </button>\n <span class=\"text-lg\">times</span>\n </div>\n );\n}\n",[],[198,304,306],"d0ac396a-142e-4d95-b731-b56520302bbf",["D",1786658319884],28,[],[198,304,49],"10f61a74-b9f9-436c-9448-3524b7b0a8e1",["D",1785324724390],[224,225,226],[198,304],["D",1785324724390],[223,227,228,229,230,231],[198],["D",1785343198085],[],[204],["D",1785324724390],["D",1789492855745],{"_115":114,"_123":119},{"_115":114,"_116":117,"_118":119,"_18":66,"_120":121,"_122":26},{"_13":100,"_33":101,"_53":44,"_102":54,"_103":104,"_105":106,"_107":60,"_108":109,"_110":111,"_112":55,"_113":114},"ctx",{"_93":-5,"_145":365,"_366":367,"_368":369,"_370":26,"_371":26,"_372":26,"_373":70,"_374":-5,"_375":-7,"_376":-7,"_377":74,"_378":26,"_379":26,"_380":-5,"_381":26,"_382":26,"_383":26,"_384":-5},"ENV",{"_336":337,"_338":339,"_340":101,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Diff · v118