[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_298":299,"_300":301},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_115":92,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_20":-5,"_127":128,"_129":130,"_131":25,"_132":133,"_134":61,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",105,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","019fada5-614d-738d-bbb2-6e31626896ea","name","App.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\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string;\n name: string;\n role: string;\n permissions: Record;\n};\ntype Project = Record;\n\nconst statusMeta: Record = {\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 = {\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 = {\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 = {\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 }>();\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/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();\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.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 todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\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 \n $\"\"/$ \n ;\n}\n\nfunction Icon({ name, size = 18 }: { name: string; size?: number }) {\n const paths: Record = {\n board: <>,\n plus: ,\n archive: <>,\n users: <>,\n partner: <>,\n logout: <>,\n search: <>,\n close: ,\n link: <>,\n copy: <>,\n more: <>,\n check: ,\n clock: <>,\n message: ,\n rupee: <>,\n chevron: ,\n settings: <>,\n update: <>,\n meeting: <>,\n blocker: <>,\n work: <>,\n \"mail-out\": <>,\n \"mail-in\": <>,\n payment: <>,\n question: <>,\n note: <>,\n milestone: <>,\n sun: <>,\n moon: ,\n globe: <>,\n mail: <>,\n eye: <>,\n key: <>,\n };\n return ;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return ;\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 ?

Working…

: null;\n}\nfunction PageSkeleton({ rows = 3, chart = false }: { rows?: number; chart?: boolean }) {\n return
\n
\n {chart &&
}\n {Array.from({ length: rows }).map((_, index) =>
)}\n
;\n}\nfunction BoardSkeleton() {\n return
\n {Array.from({ length: 5 }).map((_, column) =>
{Array.from({ length: 2 }).map((_, card) =>
)}
)}\n
;\n}\nfunction Field({ label, hint, children }: any) {\n return {label}{children}{hint && {hint}};\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}\n
\n \n setNumber(e.target.value)} required autoFocus={autoFocus} placeholder={selected.placeholder} inputMode=\"tel\"/>\n \n
\n ;\n}\nfunction ThemeToggle({ theme, toggle }: any) {\n return ;\n}\nfunction Empty({ title, text, action }: any) {\n return
{title}
{text}
{action}
;\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 ?
{value.message}
: null;\n}\n\nfunction AuthShell({ children, title, subtitle, theme, toggleTheme }: any) {\n return
\n
\n AFLABS PM\n
\n Project delivery, made visible.\n
One calm place for every moving part.
\n
Run the work internally. Keep partners aligned. Give clients a clear sense of momentum.
\n
\n
Built for focused teams, not process theatre.
\n
\n
{title}
{subtitle}
{children}
\n
;\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 \n
\n {error &&
{error}
}\n \n \n \n \n \n \n
;\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 \n {!clientToken &&
\n \n \n
}\n
\n {error &&
{error}
}\n {mode !== \"client\" && }\n \n \n \n {!clientToken &&
Access is provisioned by an AFLABS administrator. There is no public signup or password recovery.
}\n ;\n}\n\nfunction ProjectForm({ actor, config, partners, 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 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
\n {error &&
{error}
}\n \n {!compact && }\n </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\" defaultValue={initial.currency || \"INR\"}><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\" defaultValue={initial.regular_cost || 0}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" defaultValue={initial.partner_cost || 0}/></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\" defaultValue={initial.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(initial.tax_inclusive)}/> Project cost already includes tax</label>\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 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(); 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\"><textarea name=\"body\" required rows={3} placeholder=\"Share what changed and what comes next.\"/></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.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 <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>{prettyDate(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), [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.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=\"Description\"><textarea name=\"description\" rows={5} defaultValue={p.description}/></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\"><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\"><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 <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>About this project</h3><p>{p.description || \"No description yet.\"}</p></div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d</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 {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><div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Create invoice</summary><form className=\"popover-form quick-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const fd = new FormData(form); const data: any = Object.fromEntries(fd); data.milestone_ids = fd.getAll(\"milestone_ids\"); await post(`/api/projects/${p.id}/invoices`, data); form.reset(); await load(); notify(\"Invoice created\"); }}><Field label=\"Invoice type\"><select name=\"invoice_type\"><option value=\"milestone\">Milestone payment</option><option value=\"final\">Project completed / final</option><option value=\"custom\">Custom</option></select></Field><Field label={`Amount (${p.currency})`}><input name=\"amount\" type=\"number\" min=\"0\" step=\".01\" required/></Field><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field>{detail.milestones.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"milestone_ids\" value={x.id}/>{x.title}</label>)}<Field label=\"Custom notes\"><textarea name=\"notes\" rows={3}/></Field><Button>Create invoice</Button></form></details>}</div><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.amount, x.currency)}</p></div><em>PDF ↗</em></a>)}</div>{!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}</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 [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\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 await post(\"/api/admin/partners\", Object.fromEntries(new FormData(form)));\n form.reset();\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 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\"), email: formData.get(\"email\"),\n user_id: formData.get(\"user_id\"), default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\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 <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>{p.brand_name || \"Using default branding\"} · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Branding</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>{editingPartner.name} branding</h2><p>Preview and customize this partner’s client portal.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><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>Create a reusable recipient that admins can select per project. Mapping follows an internal user’s work email.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Email fallback\"><input name=\"email\" type=\"email\" placeholder=\"finance@company.com\"/></Field><Field label=\"Map to internal user\"><select name=\"user_id\" defaultValue=\"\"><option value=\"\">No user mapping</option>{ccUsers.filter((x: any) => x.active).map((x: any) => <option value={x.id}>{x.name}{x.email ? ` · ${x.email}` : \" · email not set\"}</option>)}</select></Field><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 || \"Mapped user needs an email\"}</p><small>{mapped ? `Mapped to ${mapped.name}` : \"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({ 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 </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(\"\");\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\">\n <header className=\"page-heading\"><div><p>Admin tools</p><h1>Proposals</h1><span>Turn rough notes into a saved quotation, branded PDF, and a ready-to-run project.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>Build with AI</h2><p>Paste rough notes or Markdown. Supplied facts are preserved; missing facts stay blank.</p><form className=\"stack\" onSubmit={create}><Field label=\"Quotation title\"><input name=\"title\" placeholder=\"Optional — AI can name it\"/></Field><div className=\"form-row\"><Field label=\"Partner brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</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></div><Field label=\"Rough notes or Markdown\"><textarea name=\"notes\" rows={12} required placeholder=\"Client, problem, proposed scope, deliverables, dates, pricing, commercial terms…\"/></Field><Button disabled={busy}>{busy ? \"Building quotation…\" : \"Generate & save quotation\"}</Button></form></section>\n <section className=\"proposal-list\"><h2>Saved proposals</h2>{items.map((x) => <article className=\"proposal-row\"><button className=\"proposal-main\" onClick={() => setOpenId(openId === x.id ? \"\" : x.id)}><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\"/></button>{openId === x.id && <div className=\"proposal-detail\"><pre>{x.markdown_content}</pre><div className=\"row-actions\"><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open branded PDF</span></a>{!x.project_id && <Button onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: owners[0]?.id }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button>}</div></div>}</article>)}{!items.length && <Empty title=\"No proposals yet\" text=\"Your saved AI quotations will appear here.\"/>}</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 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 [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\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 === \"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) => `${p.title} ${p.description} ${p.partner_name}`.toLowerCase().includes(search.toLowerCase()));\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\" || canActor(actor, \"create_projects\");\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><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button><button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>{(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>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button><button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>{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 === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}</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\"><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Metrics</button><button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>{(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` · ${unansweredCount}` : \"\"}</button>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button><button onClick={() => { setView(\"board\"); setArchived(true); }} className={view === \"board\" && archived ? \"active\" : \"\"}>Archive</button>{actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Branding</button>}<button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button></div>\n {view === \"dashboard\" ? <Dashboard notify={notify} onQuestions={() => setView(\"questions\")}/> : 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 === \"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 {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} 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 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.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></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>}<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></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 if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}><div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{prettyDate(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}`}><div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{prettyDate(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}`}><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>{prettyDate(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","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\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/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.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 todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\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}`}><span>{value.message}</span><button 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, 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 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 {!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=\"Description\"><textarea name=\"description\" rows={3} placeholder=\"Brief context, scope, and expected outcome\" defaultValue={initial.description || \"\"}/></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\" defaultValue={initial.currency || \"INR\"}><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\" defaultValue={initial.regular_cost || 0}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" defaultValue={initial.partner_cost || 0}/></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\" defaultValue={initial.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(initial.tax_inclusive)}/> Project cost already includes tax</label>\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 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(); 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\"><textarea name=\"body\" required rows={3} placeholder=\"Share what changed and what comes next.\"/></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 <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>{prettyDate(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), [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=\"Description\"><textarea name=\"description\" rows={5} defaultValue={p.description}/></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\"><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\"><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 <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>About this project</h3><p>{p.description || \"No description yet.\"}</p></div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d</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 {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><div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Create invoice</summary><form className=\"popover-form quick-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const fd = new FormData(form); const data: any = Object.fromEntries(fd); data.milestone_ids = fd.getAll(\"milestone_ids\"); await post(`/api/projects/${p.id}/invoices`, data); form.reset(); await load(); notify(\"Invoice created\"); }}><Field label=\"Invoice type\"><select name=\"invoice_type\"><option value=\"milestone\">Milestone payment</option><option value=\"final\">Project completed / final</option><option value=\"custom\">Custom</option></select></Field><Field label={`Amount (${p.currency})`}><input name=\"amount\" type=\"number\" min=\"0\" step=\".01\" required/></Field><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field>{detail.milestones.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"milestone_ids\" value={x.id}/>{x.title}</label>)}<Field label=\"Custom notes\"><textarea name=\"notes\" rows={3}/></Field><Button>Create invoice</Button></form></details>}</div><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.amount, x.currency)}</p></div><em>PDF ↗</em></a>)}</div>{!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}</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 [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\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 await post(\"/api/admin/partners\", Object.fromEntries(new FormData(form)));\n form.reset();\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 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\"), email: formData.get(\"email\"),\n user_id: formData.get(\"user_id\"), default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\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 <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>{p.brand_name || \"Using default branding\"} · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Branding</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>{editingPartner.name} branding</h2><p>Preview and customize this partner’s client portal.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><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>Create a reusable recipient that admins can select per project. Mapping follows an internal user’s work email.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Email fallback\"><input name=\"email\" type=\"email\" placeholder=\"finance@company.com\"/></Field><Field label=\"Map to internal user\"><select name=\"user_id\" defaultValue=\"\"><option value=\"\">No user mapping</option>{ccUsers.filter((x: any) => x.active).map((x: any) => <option value={x.id}>{x.name}{x.email ? ` · ${x.email}` : \" · email not set\"}</option>)}</select></Field><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 || \"Mapped user needs an email\"}</p><small>{mapped ? `Mapped to ${mapped.name}` : \"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({ 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 </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(\"\");\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\">\n <header className=\"page-heading\"><div><p>Admin tools</p><h1>Proposals</h1><span>Turn rough notes into a saved quotation, branded PDF, and a ready-to-run project.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>Build with AI</h2><p>Paste rough notes or Markdown. Supplied facts are preserved; missing facts stay blank.</p><form className=\"stack\" onSubmit={create}><Field label=\"Quotation title\"><input name=\"title\" placeholder=\"Optional — AI can name it\"/></Field><div className=\"form-row\"><Field label=\"Partner brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</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></div><Field label=\"Rough notes or Markdown\"><textarea name=\"notes\" rows={12} required placeholder=\"Client, problem, proposed scope, deliverables, dates, pricing, commercial terms…\"/></Field><Button disabled={busy}>{busy ? \"Building quotation…\" : \"Generate & save quotation\"}</Button></form></section>\n <section className=\"proposal-list\"><h2>Saved proposals</h2>{items.map((x) => <article className=\"proposal-row\"><button className=\"proposal-main\" onClick={() => setOpenId(openId === x.id ? \"\" : x.id)}><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\"/></button>{openId === x.id && <div className=\"proposal-detail\"><pre>{x.markdown_content}</pre><div className=\"row-actions\"><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open branded PDF</span></a>{!x.project_id && <Button onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: owners[0]?.id }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button>}</div></div>}</article>)}{!items.length && <Empty title=\"No proposals yet\" text=\"Your saved AI quotations will appear here.\"/>}</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 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 [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\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 === \"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) => `${p.title} ${p.description} ${p.partner_name}`.toLowerCase().includes(search.toLowerCase()));\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\" || canActor(actor, \"create_projects\");\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><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button><button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>{(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>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button><button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>{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 === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}</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\"><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Metrics</button><button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>{(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` · ${unansweredCount}` : \"\"}</button>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button><button onClick={() => { setView(\"board\"); setArchived(true); }} className={view === \"board\" && archived ? \"active\" : \"\"}>Archive</button>{actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Branding</button>}<button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button></div>\n {view === \"dashboard\" ? <Dashboard notify={notify} onQuestions={() => setView(\"questions\")}/> : 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 === \"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 {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} 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></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>}<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 if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}><div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{prettyDate(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}`}><div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{prettyDate(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}`}><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>{prettyDate(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","createdAt",["D",1785361919193],"branchVersion","branchId","ec297ab1-9bec-46a6-a3e9-7163c0e2fcfa","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=1789595999&sig=659c1605ab66b813ba471b5f83c97b7a479d52214ad2dab2d5c6e13d3ca66aa3","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",1789579918261],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_18":57,"_111":112,"_113":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"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",{"_44":45,"_32":46,"_39":293,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":294,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":295,"_86":296,"_88":297,"_90":25},"tree",[206,207,215,217,218],"files",[206,207,208,209,210,211,212,213,214,215,216,217,218],"counts",{"_194":65,"_195":196,"_197":65,"_198":199,"_200":201},"contents",[151,152,153,154,155],"upstreamProject",{"_44":100,"_32":146,"_53":147,"_55":148,"_50":51,"_84":149},"upstreamBranch",{"_44":95,"_39":139,"_140":141,"_32":92,"_93":100,"_13":142,"_94":-5,"_96":-5,"_143":144,"_48":-5,"_90":25,"_50":51,"_104":145,"_66":102,"_103":146},"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=1789595999&sig=18aeddca3c1af95e36337c6aea2eb1cd1f097b3d06250b7665ca0274d3dfffd8",{"_106":145,"_114":150},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789595999&sig=5ce53d553f31a4c291a4ca5660b7f712b9aba9a0d43f432f1aaacd8970ef293d",{"_44":188,"_32":189,"_30":190,"_158":-5,"_42":43,"_41":191,"_160":61,"_39":192,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_27":193},{"_44":182,"_32":183,"_30":184,"_158":-5,"_42":43,"_41":185,"_160":61,"_39":186,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_27":187},{"_44":175,"_32":176,"_30":177,"_158":-5,"_42":43,"_41":178,"_160":61,"_39":179,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_27":181},{"_44":167,"_32":168,"_30":169,"_158":-5,"_42":43,"_41":170,"_160":25,"_39":171,"_13":172,"_34":20,"_36":173,"_24":25,"_165":-5,"_27":174},{"_44":156,"_32":157,"_30":59,"_158":-5,"_42":43,"_41":159,"_160":25,"_39":161,"_13":162,"_34":163,"_36":164,"_24":25,"_165":46,"_27":166},"56636490-a841-4dda-b14e-d5f753d4e315","index.ts","parentId",101,"latest",["D",1785357572727],30,"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\";\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 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;\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) >= 2) {\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 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 ]).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',2,?)\n ON CONFLICT(migration_key) DO UPDATE SET version=excluded.version,updated_at=excluded.updated_at`,\n args: [now()],\n });\n await markDatabaseSchemaReady(2);\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: {} } : 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 id: str(x.id) || uid(),\n label: str(x.label) || str(x.email) || \"CC recipient\",\n email: emailList([x.email])[0] || \"\",\n user_id: str(x.user_id) || \"\",\n default_selected: Boolean(x.default_selected),\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\") 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\")) 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 : 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 response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: \"Turn rough commercial notes into a concise, professional project quotation and extract a reusable project record. Preserve supplied facts. 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 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,status,archived,start_date,end_date,project_type,partner_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(31).fill(\"?\").join(\",\")})`,\n args: [projectId, str(data.title) || \"Untitled project\", str(data.description), 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,\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 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 });\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 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 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 const projectId = uid(), t = now();\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(b.partner_id) || null;\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,status,archived,start_date,end_date,project_type,partner_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(31).fill(\"?\").join(\",\")})`,\n args: [projectId, title, str(b.description), status, 0, str(b.start_date) || null, str(b.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : \"Billable\", partnerId, 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 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, []) })),\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 !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"edit_projects\");\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 (b.status !== undefined) {\n requireCan(a, \"move_projects\");\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 = 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=?,status=?,archived=?,start_date=?,end_date=?,\n project_type=?,partner_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), 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,\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 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 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.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 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) 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), Number(b.amount) || 0,\n p.currency, str(b.due_date) || null, a.actorId, t, t],\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 content = [\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.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 recipients = (Array.isArray(b.recipients) ? b.recipients : []).map((x: any) => ({\n id: str(x.id) || uid(),\n label: str(x.label) || str(x.email) || \"CC recipient\",\n email: emailList([x.email])[0] || \"\",\n user_id: str(x.user_id) || \"\",\n default_selected: Boolean(x.default_selected),\n })).filter((x: any) => x.email || x.user_id);\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), 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 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,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, 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 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=?,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 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\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",[157],"83e658a3-6621-4b73-a058-dee6480d526a","README.md","019fada5-614d-738d-bbb2-8864d623b645",96,["D",1785356838867],3,"# AFLABS PM\n\nA minimal Val Town project-management application for AFLABS administrators, internal users, partners, and clients.\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\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.\nChanging `DATABASE_PROVIDER` later will fail safely instead of silently switching databases.\nThe cache switch controls both Redis-backed API response caching and browser API caching;\nRedis login rate limiting remains active independently.\n\n## Main capabilities\n\n- Permission-aware internal Kanban across backlog, todo, in progress, blocked, and done\n- Admin-only completion and token-confirmed permanent deletion\n- Partner project submission, comments, branding, and payment updates\n- Client order-status portal with progress, milestones, timeline, links, and stakeholder questions\n- Historical timeline entries, partial payments, credentials, stakeholders, links, archival, and unread activity\n\nThe app contains no public source-code link.\n",[168],"df509fd1-3004-4668-a9be-ed6d1763e40b","scripts","f6625940-f161-4cf0-b862-081103dfd8b4",14,["D",1785327805216],"directory",[176],"c48219a0-f722-4a49-9b6b-09e7d2e33882","frontend","019fada5-614d-738d-bbb2-876b78247f7e",1,["D",1785324724390],[183],"78f06f1e-991f-49fa-8ebd-6802aa5a8e90","diagnostics","b2481c4f-69e8-451f-8db5-a88ab58ba99c",52,["D",1785343198085],[189],"pulls","branches",10,"forks","envVars",{"_202":204,"_205":65},"connections",{"_202":65,"_203":65},"count","unfilledCount",12,"emptyCount",{"_44":188,"_32":189,"_30":190,"_158":-5,"_42":43,"_41":191,"_160":61,"_39":290,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_220":291,"_27":292},{"_44":182,"_32":183,"_30":184,"_158":-5,"_42":43,"_41":185,"_160":61,"_39":287,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_220":288,"_27":289},{"_44":283,"_32":277,"_30":272,"_158":184,"_42":43,"_41":185,"_160":61,"_39":284,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_220":285,"_27":286},{"_44":278,"_32":33,"_30":31,"_158":272,"_42":43,"_41":14,"_160":25,"_39":279,"_13":280,"_34":35,"_36":38,"_24":25,"_165":-5,"_220":281,"_27":282},{"_44":269,"_32":270,"_30":271,"_158":272,"_42":43,"_41":185,"_160":61,"_39":273,"_13":65,"_34":35,"_36":274,"_24":25,"_165":-5,"_220":275,"_27":276},{"_44":261,"_32":262,"_30":263,"_158":184,"_42":43,"_41":264,"_160":61,"_39":265,"_13":185,"_34":20,"_36":266,"_24":25,"_165":-5,"_220":267,"_27":268},{"_44":253,"_32":254,"_30":255,"_158":184,"_42":43,"_41":256,"_160":25,"_39":257,"_13":172,"_34":20,"_36":258,"_24":25,"_165":-5,"_220":259,"_27":260},{"_44":246,"_32":247,"_30":248,"_158":184,"_42":43,"_41":231,"_160":61,"_39":249,"_13":185,"_34":35,"_36":250,"_24":25,"_165":-5,"_220":251,"_27":252},{"_44":238,"_32":239,"_30":240,"_158":184,"_42":43,"_41":241,"_160":25,"_39":242,"_13":178,"_34":20,"_36":243,"_24":25,"_165":-5,"_220":244,"_27":245},{"_44":175,"_32":176,"_30":177,"_158":-5,"_42":43,"_41":178,"_160":61,"_39":235,"_13":65,"_34":180,"_36":-5,"_24":25,"_165":-5,"_220":236,"_27":237},{"_44":226,"_32":227,"_30":228,"_158":177,"_42":43,"_41":229,"_160":61,"_39":230,"_13":231,"_34":35,"_36":232,"_24":25,"_165":-5,"_220":233,"_27":234},{"_44":167,"_32":168,"_30":169,"_158":-5,"_42":43,"_41":170,"_160":25,"_39":223,"_13":172,"_34":20,"_36":173,"_24":25,"_165":-5,"_220":224,"_27":225},{"_44":156,"_32":157,"_30":59,"_158":-5,"_42":43,"_41":159,"_160":25,"_39":219,"_13":162,"_34":163,"_36":164,"_24":25,"_165":46,"_220":221,"_27":222},["D",1785357572727],"children",[],[157],["D",1785356838867],[],[168],"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",[],[176,227],["D",1785327805216],[216],[176],"f1a112ac-860e-415a-82be-1bbe37f41d29","styles.css","2bc34f40-8b44-11f1-9ddb-1607ee4eb77e",104,["D",1785361910047],":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.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-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-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 { display: flex; background: white; border-bottom: 1px solid var(--border); padding: 0 14px; }\n .mobile-nav button { border: 0; border-bottom: 2px solid transparent; background: none; min-height: 42px; color: var(--muted); font-size: 10px; font-weight: 650; padding: 0 10px; }\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.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 { display: block; margin: 0; }\n.recipient-source b { color: var(--ink); font-size: 10px; }\n.recipient-source p { 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.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 .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",[],[183,239],"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",[],[183,247],"9574fc7d-d60d-44c0-9a06-b24e3942dd62","index.html","019fada5-614d-738d-bbb2-7d56377a4366",18,["D",1785328256802],"<!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 </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",[],[183,254],"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",[],[183,262],"1b80791e-f782-4aa4-b4a4-e3450e79f45d","Counter.tsx","019fada5-614d-738d-bbb2-71801d3e7075","019fada5-614d-738d-bbb2-75aad905c767",["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",[],[183,277,270],"components","fd79ff68-ba23-460b-a321-733d1a8dc119",["D",1785361919193],21,[],[183,277,33],"10f61a74-b9f9-436c-9448-3524b7b0a8e1",["D",1785324724390],[209,210],[183,277],["D",1785324724390],[208,211,212,213,214],[183],["D",1785343198085],[],[189],["D",1785324724390],["D",1789579918261],{"_106":105,"_114":110},{"_106":105,"_107":108,"_109":110,"_18":57,"_111":112,"_113":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"ctx",{"_84":-5,"_136":331,"_332":333,"_334":335,"_336":25,"_337":25,"_338":25,"_339":61,"_340":-5,"_341":-7,"_342":-7,"_343":65,"_344":25,"_345":25,"_346":-5,"_347":25,"_348":25,"_349":25,"_350":-5},"ENV",{"_302":303,"_304":305,"_306":92,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v105