' + safeHtml(subject) + \"

\",\n '

' + safeHtml(comment.body) + \"

\",\n '

Added by ' + safeHtml(comment.author_name) + \" · \" + safeHtml(comment.event_date) + \"

\",\n projectUrl ? 'Check Project Update →' : \"\",\n \"

\",\n ].join(\"\");\n const logId = uid(), t = now();\n try {\n const response = await fetch(\"https://api.resend.com/emails\", {\n method: \"POST\",\n headers: { Authorization: `Bearer ${env.resend}`, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n from: `${branding.name} Updates <${senderEmail}>`,\n to: recipient, ...(cc.length ? { cc } : {}), subject, html,\n }),\n });\n const result = await response.json();\n if (!response.ok) throw new Error(str(result?.message || result?.name) || `Resend returned ${response.status}`);\n await db.execute({\n sql: \"INSERT INTO email_logs(id,project_id,comment_id,recipient,cc,subject,status,provider_id,created_at) VALUES(?,?,?,?,?,?, 'sent',?,?)\",\n args: [logId, p.id, comment.id || null, recipient, JSON.stringify(cc), subject, str(result?.id) || null, t],\n });\n return { sent: true, id: result?.id };\n } catch (e) {\n const message = e instanceof Error ? e.message : String(e);\n await db.execute({\n sql: \"INSERT INTO email_logs(id,project_id,comment_id,recipient,cc,subject,status,error,created_at) VALUES(?,?,?,?,?,?,'failed',?,?)\",\n args: [logId, p.id, comment.id || null, recipient, JSON.stringify(cc), subject, message, t],\n });\n return { sent: false, error: message };\n }\n}\nasync function addPdfHeader(doc: jsPDF, branding: any, title: string, subtitle: string, origin = \"\") {\n const [r, g, b] = hexRgb(branding.accent_color);\n doc.setFillColor(22, 27, 34); doc.rect(0, 0, 210, 38, \"F\");\n let brandX = 16;\n const logoUrl = str(branding.logo_url);\n if (logoUrl) {\n try {\n const resolved = /^https?:\\/\\//.test(logoUrl) ? logoUrl : logoUrl.startsWith(\"/\") && origin ? `${origin}${logoUrl}` : \"\";\n if (resolved) {\n const response = await fetch(resolved);\n const contentType = response.headers.get(\"content-type\") || \"\";\n if (response.ok && /image\\/(png|jpe?g)/i.test(contentType)) {\n const format = /jpe?g/i.test(contentType) ? \"JPEG\" : \"PNG\";\n doc.addImage(new Uint8Array(await response.arrayBuffer()), format, 16, 8, 22, 22, undefined, \"FAST\");\n brandX = 44;\n }\n }\n } catch {\n // A remote partner logo should never prevent document generation.\n }\n }\n doc.setTextColor(255, 255, 255); doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(15);\n doc.text(str(branding.name || \"AFLABS\"), brandX, 16);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(8); doc.setTextColor(210, 217, 225);\n doc.text(str(branding.portal_label || \"Project delivery\"), brandX, 23);\n const header = str(branding.document_header);\n if (header) {\n doc.setFontSize(7.5); doc.setTextColor(220, 226, 232);\n const lines = doc.splitTextToSize(header, 76).slice(0, 3);\n doc.text(lines, 194, 12, { align: \"right\" });\n }\n doc.setFillColor(r, g, b); doc.rect(0, 38, 210, 2.5, \"F\");\n doc.setTextColor(24, 31, 39); doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(21); doc.text(title, 16, 57);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(94, 105, 116); doc.text(subtitle, 16, 65);\n}\nfunction addPdfLines(doc: jsPDF, content: string, startY = 76, branding?: any) {\n let y = startY;\n const pageHeight = 297;\n for (const raw of content.split(\"\\n\")) {\n const line = raw.trimEnd();\n if (y > pageHeight - 26) {\n doc.addPage();\n y = 23;\n doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(8); doc.setTextColor(94, 105, 116);\n doc.text(str(branding?.name || \"AFLABS\"), 16, 13);\n const [r, g, b] = hexRgb(branding?.accent_color);\n doc.setDrawColor(r, g, b); doc.setLineWidth(.6); doc.line(16, 17, 194, 17);\n }\n if (/^#{1,3}\\s/.test(line)) {\n y += 3; doc.setFont(\"helvetica\", \"bold\"); doc.setFontSize(line.startsWith(\"# \") ? 15 : 11); doc.setTextColor(24, 31, 39);\n const text = line.replace(/^#{1,3}\\s+/, \"\");\n const wrapped = doc.splitTextToSize(text, 177); doc.text(wrapped, 16, y); y += wrapped.length * 6 + 3;\n } else if (/^[-*]\\s/.test(line)) {\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(50, 59, 68);\n const wrapped = doc.splitTextToSize(\"• \" + line.replace(/^[-*]\\s+/, \"\"), 171); doc.text(wrapped, 20, y); y += wrapped.length * 4.8 + 2;\n } else if (line) {\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(9); doc.setTextColor(50, 59, 68);\n const wrapped = doc.splitTextToSize(line.replaceAll(\"**\", \"\"), 177); doc.text(wrapped, 16, y); y += wrapped.length * 4.8 + 2;\n } else y += 3;\n }\n}\nfunction addPdfFooter(doc: jsPDF, branding: any) {\n const pageCount = doc.getNumberOfPages();\n const footer = str(branding.document_footer);\n const contact = [str(branding.contact_info), str(branding.website_url)].filter(Boolean).join(\" · \");\n for (let page = 1; page <= pageCount; page++) {\n doc.setPage(page);\n doc.setDrawColor(218, 223, 228); doc.setLineWidth(.25); doc.line(16, 278, 194, 278);\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(7); doc.setTextColor(105, 115, 125);\n const footerText = footer || contact || str(branding.name || \"AFLABS\");\n doc.text(doc.splitTextToSize(footerText, 137).slice(0, 2), 16, 284);\n if (contact && footer) doc.text(doc.splitTextToSize(contact, 137).slice(0, 1), 16, 291);\n doc.text(`Page ${page} of ${pageCount}`, 194, 286, { align: \"right\" });\n }\n}\nfunction addPdfSummaryCard(doc: jsPDF, rows: Array<[string, string]>, startY: number, branding: any) {\n const [r, g, b] = hexRgb(branding.accent_color);\n const height = 13 + rows.length * 10;\n doc.setFillColor(247, 249, 251); doc.roundedRect(16, startY, 178, height, 3, 3, \"F\");\n doc.setDrawColor(r, g, b); doc.setLineWidth(1); doc.line(16, startY, 16, startY + height);\n rows.forEach(([label, value], index) => {\n const y = startY + 10 + index * 10;\n doc.setFont(\"helvetica\", \"normal\"); doc.setFontSize(8); doc.setTextColor(94, 105, 116); doc.text(label, 22, y);\n doc.setFont(\"helvetica\", \"bold\"); doc.setTextColor(24, 31, 39); doc.text(value, 188, y, { align: \"right\" });\n });\n return startY + height + 8;\n}\nfunction pdfResponse(doc: jsPDF, filename: string) {\n return new Response(doc.output(\"arraybuffer\"), {\n headers: {\n \"Content-Type\": \"application/pdf\",\n \"Content-Disposition\": `inline; filename=\"${filename.replace(/[^a-z0-9._-]/gi, \"-\")}\"`,\n \"Cache-Control\": \"private, no-store\",\n },\n });\n}\nconst projectDraftSchema = {\n type: \"object\",\n properties: {\n title: { type: \"string\" }, description: { type: \"string\" },\n start_date: { type: \"string\" }, end_date: { type: \"string\" },\n project_type: { type: \"string\", enum: [\"Billable\", \"R&D\", \"Community\"] },\n currency: { type: \"string\" }, regular_cost: { type: \"number\" }, partner_cost: { type: \"number\" },\n contact_email: { type: \"string\" }, cc_emails: { type: \"array\", items: { type: \"string\" } },\n stakeholders: { type: \"array\", items: { type: \"object\", properties: {\n name: { type: \"string\" }, phone: { type: \"string\" }, email: { type: \"string\" },\n role: { type: \"string\" }, is_main_poc: { type: \"boolean\" }, email_cc: { type: \"boolean\" },\n }, required: [\"name\", \"phone\", \"email\", \"role\", \"is_main_poc\", \"email_cc\"], additionalProperties: false } },\n resources: { type: \"array\", items: { type: \"object\", properties: {\n label: { type: \"string\" }, url: { type: \"string\" }, link_type: { type: \"string\" },\n }, required: [\"label\", \"url\", \"link_type\"], additionalProperties: false } },\n credentials: { type: \"array\", items: { type: \"object\", properties: {\n label: { type: \"string\" }, username: { type: \"string\" }, secret: { type: \"string\" },\n url: { type: \"string\" }, notes: { type: \"string\" },\n }, required: [\"label\", \"username\", \"secret\", \"url\", \"notes\"], additionalProperties: false } },\n milestones: { type: \"array\", items: { type: \"object\", properties: {\n title: { type: \"string\" }, tag: { type: \"string\" }, description: { type: \"string\" },\n due_date: { type: \"string\" },\n }, required: [\"title\", \"tag\", \"description\", \"due_date\"], additionalProperties: false } },\n },\n required: [\"title\", \"description\", \"start_date\", \"end_date\", \"project_type\", \"currency\", \"regular_cost\",\n \"partner_cost\", \"contact_email\", \"cc_emails\", \"stakeholders\", \"resources\", \"credentials\", \"milestones\"],\n additionalProperties: false,\n};\nasync function aiProjectDraft(notes: string) {\n const response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: \"Extract a practical project record from rough notes. Do not invent unknown contact details, credentials, URLs, money, or dates: return empty strings, zero, or empty arrays. Dates must be YYYY-MM-DD. Do not create timeline comments.\",\n input: notes,\n text: { format: { type: \"json_schema\", name: \"project_draft\", schema: projectDraftSchema } },\n });\n return JSON.parse(response.output_text);\n}\nconst quotationSchema = {\n type: \"object\",\n properties: {\n title: { type: \"string\" },\n executive_summary: { type: \"string\" },\n scope: { type: \"array\", items: { type: \"string\" } },\n deliverables: { type: \"array\", items: { type: \"string\" } },\n assumptions: { type: \"array\", items: { type: \"string\" } },\n terms: { type: \"array\", items: { type: \"string\" } },\n pricing: { type: \"array\", items: { type: \"object\", properties: {\n item: { type: \"string\" }, amount: { type: \"number\" },\n }, required: [\"item\", \"amount\"], additionalProperties: false } },\n project: projectDraftSchema,\n },\n required: [\"title\", \"executive_summary\", \"scope\", \"deliverables\", \"assumptions\", \"terms\", \"pricing\", \"project\"],\n additionalProperties: false,\n};\nfunction quotationMarkdown(value: any, currency = \"INR\") {\n const section = (title: string, items: unknown[]) => items?.length\n ? `\\n## ${title}\\n${items.map((x) => `- ${str(x)}`).join(\"\\n\")}\\n` : \"\";\n const pricing = (value.pricing || []).map((x: any) => `- ${str(x.item)} — ${currency} ${Number(x.amount || 0).toLocaleString()}`).join(\"\\n\");\n const total = (value.pricing || []).reduce((sum: number, x: any) => sum + Number(x.amount || 0), 0);\n return [\n `# ${str(value.title) || \"Project quotation\"}`,\n value.executive_summary || \"\",\n section(\"Scope\", value.scope || []),\n section(\"Deliverables\", value.deliverables || []),\n pricing ? `\\n## Investment\\n${pricing}\\n\\n**Total — ${currency} ${total.toLocaleString()}**\\n` : \"\",\n section(\"Assumptions\", value.assumptions || []),\n section(\"Commercial terms\", value.terms || []),\n ].join(\"\\n\").trim();\n}\nasync function aiQuotation(notes: string) {\n const promptResult = await db.execute({ sql: \"SELECT setting_value FROM app_settings WHERE setting_key='proposal_prompt'\", args: [] });\n const prompt = str((promptResult.rows[0] as any)?.setting_value) ||\n \"Turn rough commercial notes into a concise, professional, ROI-aware project quotation and extract a reusable project record. Preserve supplied facts. Label assumptions. Do not invent dates, contact details, credentials, URLs, or money. Dates must be YYYY-MM-DD. Pricing amounts are numbers. Do not add timeline comments.\";\n const response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: prompt,\n input: notes,\n text: { format: { type: \"json_schema\", name: \"project_quotation\", schema: quotationSchema } },\n });\n return JSON.parse(response.output_text);\n}\nfunction projectInsertStatements(projectId: string, data: any, context: {\n actorType: string; actorId: string; ownerId: string; partnerId: string | null; status?: string;\n}) {\n const t = now();\n const clientPin = /^\\d{4,8}$/.test(str(data.client_pin)) ? str(data.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,markdown_details,status,archived,start_date,end_date,project_type,partner_id,lead_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(33).fill(\"?\").join(\",\")})`,\n args: [projectId, str(data.title) || \"Untitled project\", str(data.description), str(data.markdown_details), context.status || \"backlog\", 0,\n str(data.start_date) || null, str(data.end_date) || null,\n projectTypes.includes(data.project_type) ? data.project_type : \"Billable\", context.partnerId, str(data.lead_id) || null,\n Number(data.regular_cost) || 0, context.partnerId ? Number(data.partner_cost) || 0 : 0, str(data.currency) || \"INR\", 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin,\n context.partnerId ? str(data.commission_document_url) || null : null,\n str(data.contact_email) || null, JSON.stringify(emailList(data.cc_emails)),\n JSON.stringify(Array.isArray(data.notification_cc_ids) ? data.notification_cc_ids.map(str).filter(Boolean) : []),\n str(data.tax_label) || \"GST\", Math.max(0, Number(data.tax_rate) || 0), int(data.tax_inclusive),\n null, null, null, \"light\",\n context.ownerId || null,\n context.actorType, context.actorId, t, t],\n }];\n for (const x of Array.isArray(data.resources) ? data.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(data.credentials) ? data.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(data.stakeholders) ? data.stakeholders : []) {\n const stakeholderPhone = optionalPhone(x.phone);\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (str(x.name) && stakeholderPhone && stakeholderEmail) {\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), stakeholderPhone, stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(data.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(data.milestones) ? data.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n return { statements, clientPin };\n}\nfunction present(p: any, a: Actor) {\n const activeBlockedDays = p.blocked_since\n ? Math.max(1, Math.ceil((Date.now() - Date.parse(String(p.blocked_since))) / dayMs))\n : 0;\n const deliveryDelayDays = Math.max(0, Number(p.blocked_days) || 0) + activeBlockedDays;\n const baseCost = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const taxRate = Math.max(0, Number(p.tax_rate) || 0);\n const clientCost = Number(p.tax_inclusive) ? baseCost : baseCost * (1 + taxRate / 100);\n const x: any = {\n id: p.id, title: p.title, description: p.description, status: p.status,\n archived: Boolean(p.archived), start_date: p.start_date, end_date: p.end_date,\n lead_id: p.lead_id,\n project_type: p.project_type, partner_id: p.partner_id, partner_name: p.partner_name,\n progress: Number(p.progress), currency: p.currency, created_at: p.created_at,\n updated_at: p.updated_at,\n owner_user_id: p.owner_user_id, owner_name: p.owner_name,\n blocked_since: p.blocked_since, delivery_delay_days: deliveryDelayDays,\n forecast_end_date: p.end_date && deliveryDelayDays ? addDateDays(p.end_date, deliveryDelayDays) : p.end_date,\n client_cost: clientCost, tax_label: p.tax_label || \"GST\", tax_rate: taxRate,\n tax_inclusive: Boolean(p.tax_inclusive), branding: null,\n };\n if (a.actorType !== \"client\") Object.assign(x, {\n contact_email: p.contact_email, cc_emails: emailList(p.cc_emails),\n markdown_details: p.markdown_details || \"\",\n });\n if (a.actorType === \"internal\") Object.assign(x, {\n regular_cost: Number(p.regular_cost), partner_cost: Number(p.partner_cost),\n client_token: p.client_token, client_pin: p.client_pin,\n commission_document_url: p.commission_document_url,\n notification_cc_ids: parseJson(p.notification_cc_ids, []),\n });\n if (a.actorType === \"partner\" && p.status !== \"backlog\") Object.assign(x, {\n client_token: p.client_token, client_pin: p.client_pin,\n });\n return x;\n}\nfunction error(c: any, e: unknown) {\n const message = e instanceof Error ? e.message : \"Unexpected error\";\n if (message === \"AUTH_REQUIRED\") return c.json({ error: \"Please sign in to continue\" }, 401);\n if (/permission|Admins only|not available/.test(message)) return c.json({ error: message }, 403);\n if (/not found/i.test(message)) return c.json({ error: message }, 404);\n if (/required|invalid|select|must be|cannot|already exists/i.test(message)) return c.json({ error: message }, 400);\n console.error(e);\n return c.json({ error: message }, 400);\n}\n\napp.use(\"/api/*\", async (c, next) => {\n try { await migrate(); await growthSuite.migrate(); await next(); } catch (e) { return error(c, e); }\n});\napp.use(\"/api/*\", cachedApiResponse);\napp.get(\"/api/health\", (c) => c.json({ ok: true }));\napp.get(\"/api/config\", async (c) => {\n const [r, currentActor, databaseProvider] = await Promise.all([\n db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\"),\n session(c),\n lockedDatabaseProvider(),\n ]);\n return c.json({\n initialized: Number((r.rows[0] as any)?.count) > 0,\n actor: currentActor,\n databaseProvider,\n cacheEnabled: env.cacheEnabled,\n permissions: permissionDefinitions.map(([key, label]) => ({ key, label })),\n partnerPermissions: partnerPermissionDefinitions.map(([key, label]) => ({ key, label })),\n partnerPermissionPresets,\n projectTypes, statuses, commentTypes,\n countries: [{ code: \"+91\", label: \"India\" }, { code: \"+966\", label: \"Saudi Arabia\" }, { code: \"+971\", label: \"UAE\" }],\n });\n});\napp.post(\"/api/bootstrap\", async (c) => {\n const b = await body(c);\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count)) throw new Error(\"Bootstrap is no longer available\");\n if (str(b.token) !== env.bootstrap) throw new Error(\"Invalid bootstrap token\");\n const p = phone(b.phone), code = pin(b.pin), t = now(), userId = uid();\n await db.execute({\n sql: `INSERT INTO internal_users(id,name,phone,pin_hash,role,permissions,all_project_access,active,created_at,updated_at)\n VALUES(?,?,?,?,'admin',?,1,1,?,?)\n ON CONFLICT(phone) DO UPDATE SET name=excluded.name,pin_hash=excluded.pin_hash,role='admin',\n permissions=excluded.permissions,all_project_access=1,active=1,updated_at=excluded.updated_at`,\n args: [userId, str(b.name) || \"AFLABS Admin\", p, await hashPin(p, code), JSON.stringify(fullPermissions), t, t],\n });\n const adminRow = await db.execute({ sql: \"SELECT id FROM internal_users WHERE phone=?\", args: [p] });\n await newSession(c, \"internal\", String((adminRow.rows[0] as any).id));\n return c.json({ ok: true }, 201);\n});\napp.post(\"/api/auth/login\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"team\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"internal\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/partner\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"partner\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"partner\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/client\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"client\", b.token);\n if (limited) return limited;\n const r = await db.execute({ sql: \"SELECT id,client_pin FROM projects WHERE client_token=?\", args: [str(b.token)] });\n const p = r.rows[0] as any;\n if (!p || str(b.pin) !== String(p.client_pin)) return c.json({ error: \"Invalid project link or PIN\" }, 401);\n await newSession(c, \"client\", `client:${p.id}`, String(p.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/logout\", async (c) => {\n const raw = getCookie(c, \"aflabs_session\");\n if (raw) await db.execute({ sql: \"DELETE FROM sessions WHERE token_hash=?\", args: [await sha(`${env.session}:session:${raw}`)] });\n deleteCookie(c, \"aflabs_session\", { path: \"/\" });\n return c.json({ ok: true });\n});\napp.get(\"/api/me\", async (c) => c.json({ actor: await session(c) }));\napp.get(\"/api/user-options\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT id,name,role FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name\");\n return c.json({ users: r.rows });\n});\napp.get(\"/api/dashboard\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Dashboard is not available\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid FROM payments GROUP BY project_id\n ), recent_projects AS (\n SELECT DISTINCT project_id FROM comments WHERE created_at>=?\n )\n SELECT p.id,p.status,p.progress,p.currency,p.end_date,p.regular_cost,p.partner_cost,p.partner_id,\n COALESCE(pt.paid,0) paid,CASE WHEN rp.project_id IS NULL THEN 0 ELSE 1 END recent_activity\n FROM projects p LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN recent_projects rp ON rp.project_id=p.id WHERE p.archived=0`;\n const args: any[] = [new Date(Date.now() - 14 * 86400000).toISOString()];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n const rows = (await db.execute({ sql, args })).rows as any[];\n const active = rows.filter((x) => x.status !== \"done\");\n let unansweredQuestions: any[] = [];\n if ((a.actorType === \"partner\" || can(a, \"manage_comments\")) && rows.length) {\n const projectIds = rows.map((x) => String(x.id));\n const questions = await db.execute({\n sql: `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n s.role stakeholder_role FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL\n AND c.project_id IN (${projectIds.map(() => \"?\").join(\",\")})\n ORDER BY c.created_at DESC`,\n args: projectIds,\n });\n unansweredQuestions = questions.rows as any[];\n }\n const nextStart = new Date(); nextStart.setUTCDate(1); nextStart.setUTCMonth(nextStart.getUTCMonth() + 1);\n const nextEnd = new Date(nextStart); nextEnd.setUTCMonth(nextEnd.getUTCMonth() + 1);\n const sumByCurrency = (items: any[], value: (x: any) => number) => Object.entries(items.reduce((all: any, x) => {\n all[x.currency] = (all[x.currency] || 0) + value(x); return all;\n }, {})).map(([currency, amount]) => ({ currency, amount: Number(amount) }));\n return c.json({\n active_count: active.length,\n status_counts: Object.fromEntries(statuses.map((status) => [status, rows.filter((x) => x.status === status).length])),\n average_completion: active.length ? Math.round(active.reduce((sum, x) => sum + Number(x.progress), 0) / active.length) : 0,\n north_star: active.length ? Math.round(active.filter((x) => Number(x.recent_activity)).length / active.length * 100) : 0,\n unanswered_count: unansweredQuestions.length,\n unanswered_questions: unansweredQuestions.slice(0, 3),\n earnings: sumByCurrency(rows, (x) => Number(x.paid)),\n next_month: sumByCurrency(active.filter((x) => {\n const end = x.end_date ? new Date(`${String(x.end_date).slice(0, 10)}T00:00:00Z`) : null;\n return end && end >= nextStart && end < nextEnd;\n }), (x) => Math.max(0, Number(x.partner_id ? x.partner_cost : x.regular_cost) - Number(x.paid))),\n });\n});\n\napp.get(\"/api/questions\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Questions are available to the project team\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n let sql = `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n p.status project_status,s.role stakeholder_role\n FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE p.archived=0 AND c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL`;\n const args: any[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND p.partner_id=? AND p.status<>'backlog'\";\n args.push(a.actorId);\n } else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY c.created_at ASC\";\n const result = await db.execute({ sql, args });\n return c.json({ questions: result.rows });\n});\n\napp.get(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project list is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"view_projects\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid_amount FROM payments GROUP BY project_id\n ), question_totals AS (\n SELECT project_id,COUNT(*) unanswered_count FROM comments\n WHERE comment_type='question' AND parent_id IS NULL AND resolved_at IS NULL GROUP BY project_id\n ), unread_totals AS (\n SELECT c.project_id,COUNT(*) unread_count FROM comments c\n LEFT JOIN activity_reads r ON r.project_id=c.project_id AND r.actor_type=? AND r.actor_id=?\n WHERE c.created_at>COALESCE(r.last_read_at,'1970-01-01') GROUP BY c.project_id\n )\n SELECT p.*,pa.name partner_name,ou.name owner_name,COALESCE(pt.paid_amount,0) paid_amount,\n COALESCE(ut.unread_count,0) unread_count,COALESCE(qt.unanswered_count,0) unanswered_count\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id\n LEFT JOIN internal_users ou ON ou.id=p.owner_user_id\n LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN question_totals qt ON qt.project_id=p.id\n LEFT JOIN unread_totals ut ON ut.project_id=p.id\n WHERE p.archived=?`;\n const args: any[] = [a.actorType, a.actorId, c.req.query(\"archived\") === \"1\" ? 1 : 0];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (a.actorType === \"internal\" && !a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY p.updated_at DESC\";\n const r = await db.execute({ sql, args });\n return c.json({ projects: r.rows.map((p: any) => ({\n ...present(p, a), paid_amount: Number(p.paid_amount), unread_count: Number(p.unread_count),\n unanswered_count: Number(p.unanswered_count),\n })) });\n});\napp.post(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project creation is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"create_projects\");\n const b = await body(c), title = str(b.title);\n if (!title) throw new Error(\"Project title is required\");\n if (a.actorType === \"partner\" && !can(a, \"create_projects\")) throw new Error(\"You do not have permission for this action\");\n const leadId = str(b.lead_id);\n if (!leadId) throw new Error(\"Select the lead that started this project\");\n const leadResult = await db.execute({ sql: \"SELECT id,partner_id FROM leads WHERE id=?\", args: [leadId] });\n const sourceLead = leadResult.rows[0] as any;\n if (!sourceLead || (a.actorType === \"partner\" && String(sourceLead.partner_id || \"\") !== a.actorId)) throw new Error(\"Lead not found\");\n const projectId = uid(), t = now();\n if (!str(b.description).includes(\"\\n\")) b.description = str(b.description).slice(0, 240);\n else throw new Error(\"Project description must be a single line; use Markdown details for longer notes\");\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(b.partner_id || sourceLead.partner_id) || null;\n if (sourceLead.partner_id && partnerId && String(sourceLead.partner_id) !== partnerId) throw new Error(\"Project partner must match the lead partner\");\n b.lead_id = leadId;\n const status = a.actorType === \"partner\" ? \"backlog\" : statuses.includes(b.status) ? b.status : \"backlog\";\n if (status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n const clientPin = /^\\d{4,8}$/.test(str(b.client_pin)) ? str(b.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const notificationCcIds = Array.isArray(b.notification_cc_ids)\n ? b.notification_cc_ids.map(str).filter(Boolean)\n : (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id);\n let ownerId = a.actorType === \"internal\" ? str(b.owner_user_id) || (admin(a) ? \"\" : a.actorId) : \"\";\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id) || \"\";\n }\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,markdown_details,status,archived,start_date,end_date,project_type,partner_id,lead_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(33).fill(\"?\").join(\",\")})`,\n args: [projectId, title, str(b.description), str(b.markdown_details), status, 0, str(b.start_date) || null, str(b.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : \"Billable\", partnerId, str(b.lead_id) || null, Number(b.regular_cost) || 0,\n partnerId ? Number(b.partner_cost) || 0 : 0, str(b.currency) || \"INR\",\n status === \"done\" ? 100 : admin(a) ? Math.max(0, Math.min(100, Number(b.progress) || 0)) : 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin, partnerId ? str(b.commission_document_url) || null : null,\n str(b.contact_email) || null, JSON.stringify(emailList(b.cc_emails)), JSON.stringify(notificationCcIds),\n str(b.tax_label) || \"GST\", Math.max(0, Number(b.tax_rate) || 0), int(b.tax_inclusive),\n null, null, null, \"light\",\n ownerId || null, a.actorType, a.actorId, t, t],\n }];\n if (a.actorType === \"internal\" && !admin(a)) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [a.actorId, projectId],\n });\n for (const x of Array.isArray(b.resources) ? b.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(b.credentials) ? b.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(b.stakeholders) ? b.stakeholders : []) {\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (!str(x.name) || !str(x.phone) || !stakeholderEmail) continue;\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), phone(x.phone), stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(b.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(b.milestones) ? b.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n statements.push(\n { sql: \"UPDATE leads SET stage='won',updated_at=? WHERE id=?\", args: [t, leadId] },\n { sql: \"INSERT INTO lead_events(id,lead_id,event_type,title,details,metadata,actor_type,actor_id,actor_name,occurred_at,created_at) VALUES(?,?,'project','Project created from lead',?,?,?,?,?,?,?)\", args: [uid(), leadId, title, JSON.stringify({ project_id: projectId }), a.actorType, a.actorId, a.name, t, t] },\n );\n await db.batch(statements);\n return c.json({ ok: true, id: projectId, client_pin: clientPin }, 201);\n});\n\napp.get(\"/api/projects/:id\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const projectId = String(p.id);\n const visibility = a.actorType === \"client\" ? \"AND visibility IN ('client','both')\" :\n a.actorType === \"partner\" ? \"AND (visibility IN ('client','both') OR (author_type='partner' AND author_id=?))\" : \"\";\n const [links, credentials, stakeholders, milestones, comments, payments, invoices, notificationCcOptions] = await Promise.all([\n db.execute({ sql: `SELECT * FROM project_links WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY created_at DESC`, args: [projectId] }),\n (a.actorType === \"internal\" && can(a, \"view_credentials\")) || a.actorType === \"partner\"\n ? db.execute({ sql: \"SELECT * FROM project_credentials WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] })\n : Promise.resolve({ rows: [] }),\n db.execute({ sql: \"SELECT * FROM stakeholders WHERE project_id=? ORDER BY name\", args: [projectId] }),\n db.execute({ sql: `SELECT * FROM milestones WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY COALESCE(completed_date,due_date,created_at),created_at`, args: [projectId] }),\n db.execute({\n sql: `SELECT c.*,s.name stakeholder_name,s.role stakeholder_role FROM comments c\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id WHERE c.project_id=? ${visibility}\n ORDER BY c.event_date DESC,c.created_at DESC`,\n args: a.actorType === \"partner\" ? [projectId, a.actorId] : [projectId],\n }),\n db.execute({ sql: \"SELECT * FROM payments WHERE project_id=? ORDER BY paid_date DESC,created_at DESC\", args: [projectId] }),\n a.actorType === \"client\" ? Promise.resolve({ rows: [] }) :\n db.execute({ sql: \"SELECT * FROM invoices WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] }),\n a.actorType === \"internal\" && admin(a) ? ccRecipients() : Promise.resolve([]),\n ]);\n const paid = payments.rows.reduce((sum: number, x: any) => sum + Number(x.amount), 0);\n const baseTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const total = Number(p.tax_inclusive) ? baseTotal : baseTotal * (1 + Math.max(0, Number(p.tax_rate) || 0) / 100);\n const commentRows = [...comments.rows] as any[];\n for (const payment of payments.rows as any[]) {\n const represented = commentRows.some((comment: any) =>\n String(comment.payment_id || \"\") === String(payment.id) ||\n (!comment.payment_id && comment.comment_type === \"payment\" && comment.event_date === payment.paid_date &&\n String(comment.body || \"\").includes(Number(payment.amount).toLocaleString()))\n );\n if (!represented) commentRows.push({\n id: `payment-${payment.id}`,\n project_id: projectId,\n author_type: payment.created_by_type,\n author_id: payment.created_by_id,\n author_name: payment.created_by_type === \"partner\" ? (p.partner_name || \"Partner\") : \"Project team\",\n body: `Payment received: ${payment.currency} ${Number(payment.amount).toLocaleString()}${payment.note ? ` · ${payment.note}` : \"\"}`,\n comment_type: \"payment\",\n visibility: \"both\",\n event_date: payment.paid_date,\n payment_id: payment.id,\n created_at: payment.created_at,\n });\n }\n commentRows.sort((a: any, b: any) =>\n String(b.event_date).localeCompare(String(a.event_date)) || String(b.created_at).localeCompare(String(a.created_at))\n );\n const project = present(p, a);\n const [baseBranding, currentHoliday] = await Promise.all([\n getClientBranding(),\n a.actorType === \"client\" ? holidayStatus() : Promise.resolve(null),\n ]);\n project.branding = p.partner_id ? effectivePartnerBranding(p, baseBranding) : baseBranding;\n return c.json({\n project, links: links.rows, credentials: credentials.rows,\n stakeholders: a.actorType === \"client\"\n ? stakeholders.rows.map((x: any) => ({ id: x.id, name: x.name, role: x.role }))\n : stakeholders.rows,\n milestones: milestones.rows, comments: commentRows,\n payments: a.actorType === \"client\" ? [] : payments.rows,\n invoices: invoices.rows.map((x: any) => ({ ...x, milestone_ids: parseJson(x.milestone_ids, []), items: parseJson(x.items, []), total: Number(x.total || x.amount) })),\n paymentSummary: { total, paid, pending: Math.max(0, total - paid), currency: p.currency },\n notificationCcOptions,\n holiday: currentHoliday,\n });\n});\napp.patch(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"edit_projects\");\n else if (!can(a, \"edit_owned_projects\")) throw new Error(\"You do not have permission for this action\");\n const p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const b = await body(c);\n if (a.actorType === \"partner\" && [\"partner_id\", \"lead_id\", \"regular_cost\", \"partner_cost\", \"currency\", \"tax_rate\", \"tax_inclusive\", \"owner_user_id\", \"progress\", \"archived\"].some((key) => b[key] !== undefined)) {\n throw new Error(\"Partners cannot change ownership or internal commercial fields\");\n }\n if (b.status !== undefined) {\n if (a.actorType === \"internal\") requireCan(a, \"move_projects\");\n else if (!can(a, \"manage_owned_projects\")) throw new Error(\"You do not have permission for this action\");\n if (!statuses.includes(b.status)) throw new Error(\"Invalid project status\");\n if (b.status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n }\n if (b.progress !== undefined && !admin(a)) throw new Error(\"Admins only can change project completion\");\n if (b.archived !== undefined) requireCan(a, \"archive_projects\");\n const t = now();\n const nextStatus = b.status ?? p.status;\n const nextPartnerId = a.actorType === \"partner\" ? p.partner_id : b.partner_id === undefined ? p.partner_id : str(b.partner_id) || null;\n let blockedSince = p.blocked_since || null;\n let blockedDays = Math.max(0, Number(p.blocked_days) || 0);\n const statements: any[] = [];\n if (p.status !== \"blocked\" && nextStatus === \"blocked\") {\n blockedSince = t;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'blocker','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n \"Project moved to Blocked. The delivery forecast will show the active delay until this blocker is cleared.\",\n t.slice(0, 10), t],\n });\n } else if (p.status === \"blocked\" && nextStatus !== \"blocked\") {\n const elapsed = Math.max(1, dateDays(blockedSince || t, t));\n blockedDays += elapsed;\n blockedSince = null;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'update','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n `Blocker cleared after ${elapsed} ${elapsed === 1 ? \"day\" : \"days\"}. The delivery forecast now includes ${blockedDays} delayed ${blockedDays === 1 ? \"day\" : \"days\"}.`,\n t.slice(0, 10), t],\n });\n }\n const nextProgress = nextStatus === \"done\"\n ? 100\n : b.progress === undefined ? Number(p.progress) : Math.max(0, Math.min(100, Number(b.progress) || 0));\n statements.unshift({\n sql: `UPDATE projects SET title=?,description=?,markdown_details=?,status=?,archived=?,start_date=?,end_date=?,\n project_type=?,partner_id=?,lead_id=?,regular_cost=?,partner_cost=?,currency=?,progress=?,client_pin=?,\n commission_document_url=?,contact_email=?,cc_emails=?,notification_cc_ids=?,\n tax_label=?,tax_rate=?,tax_inclusive=?,owner_user_id=?,blocked_since=?,blocked_days=?,updated_at=? WHERE id=?`,\n args: [\n str(b.title ?? p.title) || p.title, str(b.description ?? p.description).replace(/[\\r\\n]+/g, \" \").slice(0, 240), str(b.markdown_details ?? p.markdown_details), nextStatus,\n b.archived === undefined ? Number(p.archived) : int(b.archived),\n str(b.start_date ?? p.start_date) || null, str(b.end_date ?? p.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : p.project_type,\n nextPartnerId, b.lead_id === undefined ? p.lead_id : str(b.lead_id) || null,\n b.regular_cost === undefined ? Number(p.regular_cost) : Number(b.regular_cost) || 0,\n nextPartnerId ? (b.partner_cost === undefined ? Number(p.partner_cost) : Number(b.partner_cost) || 0) : 0,\n str(b.currency ?? p.currency) || \"INR\",\n nextProgress,\n b.client_pin === undefined ? p.client_pin : pin(b.client_pin),\n nextPartnerId\n ? (b.commission_document_url === undefined ? p.commission_document_url : str(b.commission_document_url) || null)\n : null,\n b.contact_email === undefined ? p.contact_email : str(b.contact_email) || null,\n b.cc_emails === undefined ? p.cc_emails : JSON.stringify(emailList(b.cc_emails)),\n !admin(a) || b.notification_cc_ids === undefined\n ? p.notification_cc_ids\n : JSON.stringify(Array.isArray(b.notification_cc_ids) ? b.notification_cc_ids.map(str).filter(Boolean) : []),\n str(b.tax_label ?? p.tax_label) || \"GST\",\n b.tax_rate === undefined ? Number(p.tax_rate) : Math.max(0, Number(b.tax_rate) || 0),\n b.tax_inclusive === undefined ? Number(p.tax_inclusive) : int(b.tax_inclusive),\n b.owner_user_id === undefined ? p.owner_user_id : str(b.owner_user_id) || null,\n blockedSince, blockedDays, t, p.id,\n ],\n });\n await db.batch(statements);\n return c.json({ ok: true, progress: nextProgress, delivery_delay_days: blockedDays });\n});\napp.post(\"/api/projects/:id/extensions\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"edit_projects\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const previousEndDate = str(p.end_date).slice(0, 10);\n const newEndDate = str(b.new_end_date).slice(0, 10);\n const reason = str(b.reason);\n if (!previousEndDate) throw new Error(\"Set a project end date before extending it\");\n const days = dateDays(previousEndDate, newEndDate);\n if (!newEndDate || days < 1) throw new Error(\"The new end date must be later than the current end date\");\n if (!reason) throw new Error(\"Explain the external reason for this extension\");\n const t = now(), extensionId = uid();\n await db.batch([\n {\n sql: \"UPDATE projects SET end_date=?,updated_at=? WHERE id=?\",\n args: [newEndDate, t, p.id],\n },\n {\n sql: `INSERT INTO schedule_extensions(id,project_id,previous_end_date,new_end_date,days,reason,created_by_type,created_by_id,created_at)\n VALUES(?,?,?,?,?,?,?,?,?)`,\n args: [extensionId, p.id, previousEndDate, newEndDate, days, reason, a.actorType, a.actorId, t],\n },\n {\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'schedule-extension','both',?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name,\n `Target date extended by ${days} ${days === 1 ? \"day\" : \"days\"}, from ${previousEndDate} to ${newEndDate}. Reason: ${reason}`,\n str(b.event_date).slice(0, 10) || t.slice(0, 10), t],\n },\n ]);\n return c.json({ ok: true, days, end_date: newEndDate });\n});\napp.delete(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete projects\");\n const confirmation = await body(c);\n const left = Number(confirmation.left), right = Number(confirmation.right), answer = Number(confirmation.answer);\n if (!Number.isInteger(left) || !Number.isInteger(right) || left < 2 || left > 20 || right < 2 || right > 20 || answer !== left + right) {\n throw new Error(\"Incorrect deletion confirmation answer\");\n }\n if (!await allowedProject(c.req.param(\"id\"), a)) throw new Error(\"Project not found\");\n const projectId = c.req.param(\"id\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM activity_reads WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM user_project_access WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_links WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_credentials WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM email_logs WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM invoices WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM schedule_extensions WHERE project_id=?\", args: [projectId] },\n { sql: \"UPDATE proposals SET project_id=NULL,status=CASE WHEN status='converted' THEN 'draft' ELSE status END WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM milestones WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM comments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM payments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM stakeholders WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM projects WHERE id=?\", args: [projectId] },\n ]);\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/read\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n await db.execute({\n sql: `INSERT INTO activity_reads(actor_type,actor_id,project_id,last_read_at) VALUES(?,?,?,?)\n ON CONFLICT(actor_type,actor_id,project_id) DO UPDATE SET last_read_at=excluded.last_read_at`,\n args: [a.actorType, a.actorId, p.id, now()],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/comments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n requirePartnerReady(a, p);\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const b = await body(c), text = str(b.body);\n if (!text) throw new Error(\"Comment text is required\");\n let stakeholderId = str(b.stakeholder_id) || null, authorName = a.name;\n if (a.actorType === \"client\") {\n if (!stakeholderId) throw new Error(\"Select the stakeholder asking this question\");\n const s = await db.execute({ sql: \"SELECT name FROM stakeholders WHERE id=? AND project_id=?\", args: [stakeholderId, p.id] });\n if (!s.rows[0]) throw new Error(\"Stakeholder not found\");\n authorName = String((s.rows[0] as any).name);\n }\n const t = now(), commentId = uid();\n const commentType = a.actorType === \"client\" ? \"question\" : commentTypes.includes(b.comment_type) ? b.comment_type : \"update\";\n const eventDate = str(b.event_date) || t.slice(0, 10);\n await db.execute({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,stakeholder_id,\n body,comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [commentId, p.id, str(b.parent_id) || null, a.actorType, a.actorId, authorName, stakeholderId, text,\n commentType,\n a.actorType === \"client\" ? \"both\" : [\"admin\", \"client\", \"both\"].includes(b.visibility) ? b.visibility : \"both\",\n eventDate, t],\n });\n const email = a.actorType !== \"client\" && b.send_email\n ? await sendProjectEmail(p, { id: commentId, body: text, author_name: authorName, comment_type: commentType, event_date: eventDate }, \"update\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email }, 201);\n});\napp.post(\"/api/comments/:id/resolve\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const r = await db.execute({ sql: \"SELECT * FROM comments WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = r.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Comment not found\");\n requirePartnerReady(a, p);\n const b = await body(c), t = now(), statements: any[] = [\n { sql: \"UPDATE comments SET resolved_at=? WHERE id=?\", args: [t, item.id] },\n ];\n const replyId = uid();\n if (str(b.reply)) statements.push({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,body,\n comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,'update','both',?,?)`,\n args: [replyId, item.project_id, item.id, a.actorType, a.actorId, a.name, str(b.reply), t.slice(0, 10), t],\n });\n await db.batch(statements);\n const email = b.send_email && str(b.reply)\n ? await sendProjectEmail(p, { id: replyId, body: str(b.reply), author_name: a.name, comment_type: \"update\", event_date: t.slice(0, 10) }, \"reply\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email });\n});\n\napp.post(\"/api/projects/:id/links\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_links\");\n requirePartnerReady(a, p);\n if (!str(b.label) || !/^https?:\\/\\//.test(str(b.url))) throw new Error(\"A label and valid URL are required\");\n await db.execute({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.url), str(b.link_type) || \"reference\", int(b.client_visible !== false), now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/links/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_links\");\n await db.execute({ sql: \"DELETE FROM project_links WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/credentials\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_credentials\");\n requirePartnerReady(a, p);\n if (!str(b.label)) throw new Error(\"Credential label is required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.username) || null, str(b.secret) || null, str(b.url) || null, str(b.notes) || null, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/credentials/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_credentials\");\n await db.execute({ sql: \"DELETE FROM project_credentials WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/stakeholders\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n if (!str(b.name)) throw new Error(\"Stakeholder name is required\");\n const stakeholderEmail = emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const existing = await db.execute({ sql: \"SELECT COUNT(*) count FROM stakeholders WHERE project_id=?\", args: [p.id] });\n const main = Boolean(b.is_main_poc) || !Number((existing.rows[0] as any)?.count);\n const stakeholderId = uid();\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [p.id] });\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [stakeholderId, p.id, str(b.name), phone(b.phone), stakeholderEmail, str(b.role), int(main), int(!main && b.email_cc), now()],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(p.id));\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n const b = await body(c);\n const stakeholderEmail = b.email === undefined ? item.email : emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const main = b.is_main_poc === undefined ? Boolean(item.is_main_poc) : Boolean(b.is_main_poc);\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [item.project_id] });\n statements.push({\n sql: `UPDATE stakeholders SET name=?,phone=?,email=?,role=?,is_main_poc=?,email_cc=? WHERE id=?`,\n args: [\n str(b.name ?? item.name) || item.name,\n b.phone === undefined ? item.phone : phone(b.phone),\n stakeholderEmail,\n str(b.role ?? item.role),\n int(main),\n int(!main && (b.email_cc === undefined ? Boolean(item.email_cc) : Boolean(b.email_cc))),\n item.id,\n ],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\napp.delete(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n await db.execute({ sql: \"DELETE FROM stakeholders WHERE id=?\", args: [item.id] });\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/milestones\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (!str(b.title)) throw new Error(\"Milestone title is required\");\n const t = now();\n await db.execute({\n sql: `INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,completed_date,\n client_visible,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?)`,\n args: [uid(), p.id, str(b.title), str(b.tag) || \"Milestone\", str(b.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : \"upcoming\",\n str(b.due_date) || null, str(b.completed_date) || null, int(b.client_visible !== false), t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const r = await db.execute({ sql: \"SELECT * FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || !await allowedProject(String(x.project_id), a)) throw new Error(\"Milestone not found\");\n await db.execute({\n sql: \"UPDATE milestones SET title=?,tag=?,description=?,status=?,due_date=?,completed_date=?,client_visible=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? x.title) || x.title, str(b.tag ?? x.tag) || \"Milestone\", str(b.description ?? x.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : x.status,\n str(b.due_date ?? x.due_date) || null, str(b.completed_date ?? x.completed_date) || null,\n b.client_visible === undefined ? Number(x.client_visible) : int(b.client_visible), now(), x.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n await db.execute({ sql: \"DELETE FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/payments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_payments\");\n const b = await body(c), amount = Number(b.amount);\n if (!(amount > 0)) throw new Error(\"Payment amount must be greater than zero\");\n const sums = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) paid FROM payments WHERE project_id=?\", args: [p.id] });\n const total = Number(p.partner_id ? p.partner_cost : p.regular_cost), paid = Number((sums.rows[0] as any)?.paid);\n if (total > 0 && paid + amount > total + .0001) throw new Error(`Payment exceeds the pending amount of ${p.currency} ${Math.max(0, total - paid)}`);\n const t = now(), date = str(b.paid_date) || t.slice(0, 10), note = str(b.note), paymentId = uid();\n const pending = Math.max(0, total - paid - amount);\n const paymentBody = `Payment received: ${p.currency} ${amount.toLocaleString()}${note ? ` · ${note}` : \"\"}. Pending: ${p.currency} ${pending.toLocaleString()}.`;\n await db.batch([\n { sql: \"INSERT INTO payments(id,project_id,amount,currency,paid_date,note,created_by_type,created_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [paymentId, p.id, amount, p.currency, date, note, a.actorType, a.actorId, t] },\n { sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,payment_id,created_at)\n VALUES(?,?,?,?,?,?,'payment','both',?,?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name, paymentBody, date, paymentId, t] },\n ]);\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/payments/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_payments\");\n await db.batch([\n { sql: \"DELETE FROM comments WHERE payment_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM payments WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/admin/ai/project-draft\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create projects with AI\");\n const notes = str((await body(c)).notes);\n if (notes.length < 10) throw new Error(\"Add a little more project context for AI extraction\");\n return c.json({ draft: await aiProjectDraft(notes) });\n});\napp.get(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage proposals\");\n const r = await db.execute(`SELECT q.*,p.name partner_name FROM proposals q\n LEFT JOIN partners p ON p.id=q.partner_id ORDER BY q.updated_at DESC`);\n return c.json({ proposals: r.rows.map((x: any) => ({ ...x, structured_data: parseJson(x.structured_data, {}) })) });\n});\napp.post(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create proposals\");\n const b = await body(c), notes = str(b.notes || b.markdown_content);\n if (notes.length < 10) throw new Error(\"Add rough notes or Markdown for the proposal\");\n const structured = b.use_ai === false ? (b.structured_data || { project: {} }) : await aiQuotation(notes);\n const currency = str(b.currency || structured?.project?.currency) || \"INR\";\n const markdown = str(b.markdown_content) || quotationMarkdown(structured, currency);\n const total = Number(b.total) || (structured.pricing || []).reduce((sum: number, x: any) => sum + Number(x.amount || 0), 0);\n const id = uid(), t = now();\n await db.execute({\n sql: `INSERT INTO proposals(id,title,markdown_content,structured_data,partner_id,currency,total,status,\n created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,'draft',?,?,?)`,\n args: [id, str(b.title || structured.title) || \"Project quotation\", markdown, JSON.stringify(structured),\n str(b.partner_id) || null, currency, total, a.actorId, t, t],\n });\n return c.json({ ok: true, id }, 201);\n});\napp.patch(\"/api/admin/proposals/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can update proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n await db.execute({\n sql: \"UPDATE proposals SET title=?,markdown_content=?,partner_id=?,currency=?,total=?,status=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? q.title) || q.title, str(b.markdown_content ?? q.markdown_content),\n b.partner_id === undefined ? q.partner_id : str(b.partner_id) || null,\n str(b.currency ?? q.currency) || \"INR\", b.total === undefined ? Number(q.total) : Number(b.total) || 0,\n [\"draft\", \"sent\", \"accepted\", \"declined\", \"converted\"].includes(b.status) ? b.status : q.status, now(), q.id],\n });\n return c.json({ ok: true });\n});\napp.get(\"/api/admin/proposals/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can view proposal PDFs\");\n const r = await db.execute({ sql: `SELECT q.*,p.brand_name,p.logo_url,p.accent_color,p.contact_info,p.website_url,\n p.document_header,p.document_footer\n FROM proposals q LEFT JOIN partners p ON p.id=q.partner_id WHERE q.id=?`, args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any;\n if (!q) throw new Error(\"Proposal not found\");\n const branding = q.partner_id ? effectivePartnerBranding(q, await getClientBranding()) : await getClientBranding();\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, q.title, `Quotation · ${q.currency} ${Number(q.total).toLocaleString()}`, new URL(c.req.url).origin);\n addPdfLines(doc, q.markdown_content, 76, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${q.title}-quotation.pdf`);\n});\napp.post(\"/api/admin/proposals/:id/convert\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can convert proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n if (q.project_id) return c.json({ ok: true, id: q.project_id, existing: true });\n const structured = parseJson(q.structured_data, {});\n const draft = { ...(structured.project || {}), title: structured.project?.title || q.title,\n currency: structured.project?.currency || q.currency,\n notification_cc_ids: (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id) };\n let ownerId = str(b.owner_user_id);\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id);\n }\n const requestedLeadId = str(b.lead_id || draft.lead_id);\n const existingLead = requestedLeadId ? (await db.execute({ sql: \"SELECT id FROM leads WHERE id=?\", args: [requestedLeadId] })).rows[0] : null;\n const leadId = existingLead ? requestedLeadId : uid();\n draft.lead_id = leadId;\n draft.markdown_details = str(draft.markdown_details || q.markdown_content);\n const projectId = uid();\n const built = projectInsertStatements(projectId, draft, {\n actorType: \"internal\", actorId: a.actorId, ownerId, partnerId: str(q.partner_id) || null, status: \"backlog\",\n });\n if (!existingLead) built.statements.unshift({\n sql: \"INSERT INTO leads(id,title,company_name,contact_name,contact_email,contact_phone,category,business_type,source,stage,priority,expected_budget,currency,partner_id,owner_user_id,requirements_markdown,pain_points,inside_info,use_case_hint,created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,'won','medium',?,?,?,?,?,?,?,?,?,?,?,?)\",\n args: [leadId, str(draft.title || q.title), str(draft.client_brand_name), \"\", str(draft.contact_email), \"\", str(draft.project_type), \"\", \"Proposal conversion\", Number(q.total) || 0, str(q.currency) || \"INR\", str(q.partner_id) || null, ownerId || null, q.markdown_content, str(draft.description), \"\", \"\", \"internal\", a.actorId, now(), now()],\n });\n built.statements.push({\n sql: \"UPDATE proposals SET project_id=?,status='converted',updated_at=? WHERE id=?\",\n args: [projectId, now(), q.id],\n });\n await db.batch(built.statements);\n return c.json({ ok: true, id: projectId, client_pin: built.clientPin }, 201);\n});\n\napp.get(\"/api/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT * FROM milestone_templates WHERE active=1 ORDER BY name\");\n return c.json({ templates: r.rows.map((x: any) => ({ ...x, items: parseJson(x.items, []) })) });\n});\napp.post(\"/api/admin/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create milestone templates\");\n const b = await body(c);\n const items = (Array.isArray(b.items) ? b.items : str(b.items).split(\"\\n\").map((title) => ({ title })))\n .map((x: any) => typeof x === \"string\" ? { title: str(x), tag: \"Milestone\", description: \"\" } : {\n title: str(x.title), tag: str(x.tag) || \"Milestone\", description: str(x.description),\n }).filter((x: any) => x.title);\n if (!str(b.name) || !items.length) throw new Error(\"Template name and at least one milestone are required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO milestone_templates(id,name,description,items,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), str(b.name), str(b.description), JSON.stringify(items), a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/admin/milestone-templates/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete milestone templates\");\n const result = await db.execute({\n sql: \"UPDATE milestone_templates SET active=0,updated_at=? WHERE id=? AND active=1\",\n args: [now(), c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Milestone template not found\");\n return c.json({ ok: true });\n});\napp.get(\"/api/quick-notes\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute(\n \"SELECT id,title,shortcut,body,created_at,updated_at FROM quick_notes WHERE active=1 ORDER BY title\",\n );\n return c.json({ quick_notes: result.rows });\n});\napp.post(\"/api/admin/quick-notes\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create quick notes\");\n const b = await body(c);\n const title = str(b.title);\n const noteBody = str(b.body);\n const shortcut = (str(b.shortcut) || title).toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\").slice(0, 40);\n if (!title || !noteBody || !shortcut) throw new Error(\"Title, shortcut, and note content are required\");\n const existing = await db.execute({ sql: \"SELECT id FROM quick_notes WHERE shortcut=?\", args: [shortcut] });\n if (existing.rows.length) throw new Error(`The /${shortcut} shortcut is already in use`);\n const t = now();\n await db.execute({\n sql: \"INSERT INTO quick_notes(id,title,shortcut,body,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), title, shortcut, noteBody, a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/admin/quick-notes/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can edit quick notes\");\n const b = await body(c);\n const title = str(b.title);\n const noteBody = str(b.body);\n const shortcut = (str(b.shortcut) || title).toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\").slice(0, 40);\n if (!title || !noteBody || !shortcut) throw new Error(\"Title, shortcut, and note content are required\");\n const duplicate = await db.execute({\n sql: \"SELECT id FROM quick_notes WHERE shortcut=? AND id<>?\",\n args: [shortcut, c.req.param(\"id\")],\n });\n if (duplicate.rows.length) throw new Error(`The /${shortcut} shortcut is already in use`);\n const result = await db.execute({\n sql: \"UPDATE quick_notes SET title=?,shortcut=?,body=?,updated_at=? WHERE id=? AND active=1\",\n args: [title, shortcut, noteBody, now(), c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Quick note not found\");\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/quick-notes/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete quick notes\");\n const result = await db.execute({\n sql: \"DELETE FROM quick_notes WHERE id=?\",\n args: [c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Quick note not found\");\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/apply-milestone-template\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const r = await db.execute({ sql: \"SELECT items FROM milestone_templates WHERE id=? AND active=1\", args: [str(b.template_id)] });\n const items = parseJson((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((settingResult.rows[0] as any)?.weekly_days, [5, 6]),\n today,\n });\n});\napp.post(\"/api/admin/holidays\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n const b = await body(c), holidayDate = str(b.holiday_date);\n if (!str(b.name)) throw new Error(\"Holiday name is required\");\n if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(holidayDate)) throw new Error(\"A valid holiday date is required\");\n await db.execute({\n sql: \"INSERT INTO holidays(id,name,holiday_date,created_at) VALUES(?,?,?,?)\",\n args: [uid(), str(b.name), holidayDate, now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/admin/holidays/settings\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n const b = await body(c);\n const weeklyDays = (Array.isArray(b.weekly_days) ? b.weekly_days : [])\n .map(Number).filter((day: number) => Number.isInteger(day) && day >= 0 && day <= 6);\n await db.execute({\n sql: `INSERT INTO holiday_settings(id,weekly_days,updated_at) VALUES('default',?,?)\n ON CONFLICT(id) DO UPDATE SET weekly_days=excluded.weekly_days,updated_at=excluded.updated_at`,\n args: [JSON.stringify([...new Set(weeklyDays)]), now()],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/holidays/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage holidays\");\n await db.execute({ sql: \"DELETE FROM holidays WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\n\napp.get(\"/api/recurring\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Recurring work is not available\");\n let sql = `SELECT r.*,p.name partner_name,u.name owner_name,\n COALESCE((SELECT SUM(hours) FROM recurring_logs l WHERE l.recurring_id=r.id AND l.period=?),0) period_hours\n FROM recurring_projects r LEFT JOIN partners p ON p.id=r.partner_id\n LEFT JOIN internal_users u ON u.id=r.owner_user_id WHERE 1=1`;\n const period = new Date().toISOString().slice(0, 7), args: any[] = [period];\n if (a.actorType === \"partner\") { sql += \" AND r.partner_id=?\"; args.push(a.actorId); }\n else if (!a.allProjectAccess) {\n sql += \" AND r.owner_user_id=?\"; args.push(a.actorId);\n }\n sql += \" ORDER BY r.active DESC,r.updated_at DESC\";\n const rows = (await db.execute({ sql, args })).rows;\n const logs = rows.length ? await db.execute({\n sql: `SELECT * FROM recurring_logs WHERE recurring_id IN (${rows.map(() => \"?\").join(\",\")})\n ORDER BY period DESC,created_at DESC LIMIT 200`, args: rows.map((x: any) => x.id),\n }) : { rows: [] };\n return c.json({ recurring: rows.map((x: any) => ({\n ...x, active: Boolean(x.active), cc_emails: emailList(x.cc_emails),\n period_hours: Number(x.period_hours), logs: logs.rows.filter((l: any) => l.recurring_id === x.id),\n })) });\n});\napp.post(\"/api/recurring\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Recurring work is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"create_projects\");\n const b = await body(c);\n if (!str(b.title)) throw new Error(\"Recurring project title is required\");\n const billing = b.billing_type === \"hourly\" ? \"hourly\" : \"monthly\";\n let ownerId = a.actorType === \"internal\" ? admin(a) ? str(b.owner_user_id) || a.actorId : a.actorId : \"\";\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id);\n }\n const t = now();\n await db.execute({\n sql: `INSERT INTO recurring_projects(id,title,description,partner_id,owner_user_id,contact_email,cc_emails,\n billing_type,monthly_amount,hourly_rate,included_hours,currency,start_date,end_date,active,\n created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,1,?,?,?,?)`,\n args: [uid(), str(b.title), str(b.description), a.actorType === \"partner\" ? a.actorId : str(b.partner_id) || null,\n ownerId || null, str(b.contact_email) || null, JSON.stringify(emailList(b.cc_emails)), billing,\n Number(b.monthly_amount) || 0, Number(b.hourly_rate) || 0, Number(b.included_hours) || 0,\n str(b.currency) || \"INR\", str(b.start_date) || null, str(b.end_date) || null,\n a.actorType, a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/recurring/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n requireCan(a, \"edit_projects\");\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n await db.execute({\n sql: `UPDATE recurring_projects SET title=?,description=?,partner_id=?,owner_user_id=?,contact_email=?,cc_emails=?,\n billing_type=?,monthly_amount=?,hourly_rate=?,included_hours=?,currency=?,start_date=?,end_date=?,active=?,updated_at=? WHERE id=?`,\n args: [str(b.title ?? x.title) || x.title, str(b.description ?? x.description),\n a.actorType === \"internal\" && admin(a) && b.partner_id !== undefined ? str(b.partner_id) || null : x.partner_id,\n b.owner_user_id === undefined ? x.owner_user_id : str(b.owner_user_id) || null,\n b.contact_email === undefined ? x.contact_email : str(b.contact_email) || null,\n b.cc_emails === undefined ? x.cc_emails : JSON.stringify(emailList(b.cc_emails)),\n b.billing_type === \"hourly\" ? \"hourly\" : b.billing_type === \"monthly\" ? \"monthly\" : x.billing_type,\n b.monthly_amount === undefined ? Number(x.monthly_amount) : Number(b.monthly_amount) || 0,\n b.hourly_rate === undefined ? Number(x.hourly_rate) : Number(b.hourly_rate) || 0,\n b.included_hours === undefined ? Number(x.included_hours) : Number(b.included_hours) || 0,\n str(b.currency ?? x.currency) || \"INR\", str(b.start_date ?? x.start_date) || null,\n str(b.end_date ?? x.end_date) || null, b.active === undefined ? Number(x.active) : int(b.active), now(), x.id],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/recurring/:id/logs\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n const hours = Number(b.hours);\n if (!(hours > 0)) throw new Error(\"Logged hours must be greater than zero\");\n const workDate = /^\\d{4}-\\d{2}-\\d{2}$/.test(str(b.work_date)) ? str(b.work_date) : dateInIndia();\n const period = workDate.slice(0, 7);\n await db.execute({\n sql: \"INSERT INTO recurring_logs(id,recurring_id,period,work_date,hours,note,logged_by_type,logged_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), x.id, period, workDate, hours, str(b.note), a.actorType, a.actorId, now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/recurring/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const r = await db.execute({ sql: \"SELECT * FROM recurring_projects WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any;\n if (!x || (a.actorType === \"partner\" && String(x.partner_id) !== a.actorId)) throw new Error(\"Recurring project not found\");\n if (a.actorType === \"internal\") {\n requireCan(a, \"edit_projects\");\n if (!a.allProjectAccess && String(x.owner_user_id) !== a.actorId) throw new Error(\"Recurring project not found\");\n }\n await db.batch([\n { sql: \"DELETE FROM recurring_logs WHERE recurring_id=?\", args: [x.id] },\n { sql: \"DELETE FROM recurring_projects WHERE id=?\", args: [x.id] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/invoices\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create invoices\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const count = await db.execute(\"SELECT COUNT(*) count FROM invoices\");\n const invoiceNumber = str(b.invoice_number) || `INV-${new Date().getUTCFullYear()}-${String(Number((count.rows[0] as any)?.count) + 1).padStart(4, \"0\")}`;\n const items = (Array.isArray(b.items) ? b.items : []).map((item: any) => {\n const quantity = Math.max(0, Number(item.quantity) || 0);\n const unitPrice = Math.max(0, Number(item.unit_price) || 0);\n return { description: str(item.description) || \"Service\", quantity, unit_price: unitPrice, amount: quantity * unitPrice };\n }).filter((item: any) => item.quantity > 0);\n if (!items.length && Number(b.amount) > 0) items.push({ description: str(b.notes) || \"Professional services\", quantity: 1, unit_price: Number(b.amount), amount: Number(b.amount) });\n if (!items.length) throw new Error(\"Add at least one invoice item\");\n const subtotal = items.reduce((sum: number, item: any) => sum + item.amount, 0);\n const discount = Math.max(0, Number(b.discount) || 0);\n const arrears = Math.max(0, Number(b.arrears) || 0);\n const taxable = Math.max(0, subtotal - discount + arrears);\n const taxRate = Math.max(0, Number(b.tax_rate) || 0);\n const taxAmount = taxable * taxRate / 100;\n const total = taxable + taxAmount;\n const t = now();\n await db.execute({\n sql: `INSERT INTO invoices(id,project_id,invoice_number,invoice_type,milestone_ids,notes,amount,currency,\n due_date,status,created_by_id,created_at,updated_at,items,subtotal,discount,arrears,tax_label,tax_rate,tax_amount,total)\n VALUES(?,?,?,?,?,?,?,?,?,'issued',?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [uid(), p.id, invoiceNumber, [\"milestone\", \"final\", \"custom\"].includes(b.invoice_type) ? b.invoice_type : \"custom\",\n JSON.stringify(Array.isArray(b.milestone_ids) ? b.milestone_ids : []), str(b.notes), total,\n p.currency, str(b.due_date) || null, a.actorId, t, t, JSON.stringify(items), subtotal, discount, arrears,\n str(b.tax_label) || p.tax_label || \"Tax\", taxRate, taxAmount, total],\n });\n return c.json({ ok: true }, 201);\n});\napp.get(\"/api/invoices/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Invoices are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM invoices WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any;\n const p = x ? await allowedProject(String(x.project_id), a) : null;\n if (!x || !p) throw new Error(\"Invoice not found\");\n const branding = await brandingForProject(p);\n const paid = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [x.project_id] });\n const selected = parseJson(x.milestone_ids, []);\n const milestones = selected.length ? await db.execute({\n sql: `SELECT title,status,completed_date FROM milestones WHERE project_id=? AND id IN (${selected.map(() => \"?\").join(\",\")})`,\n args: [x.project_id, ...selected],\n }) : { rows: [] };\n const invoiceItems = parseJson(x.items, []);\n const lineItems = invoiceItems.length\n ? [\"## Invoice items\", ...invoiceItems.map((item: any, index: number) => `${index + 1}. ${item.description} — ${Number(item.quantity).toLocaleString()} × ${x.currency} ${Number(item.unit_price).toLocaleString()} = ${x.currency} ${Number(item.amount).toLocaleString()}`), \"\"]\n : [];\n const content = [\n ...lineItems,\n \"## Calculation\",\n `Subtotal: ${x.currency} ${Number(x.subtotal || x.amount).toLocaleString()}`,\n `Discount: − ${x.currency} ${Number(x.discount || 0).toLocaleString()}`,\n `Arrears: + ${x.currency} ${Number(x.arrears || 0).toLocaleString()}`,\n `${x.tax_label || \"Tax\"} (${Number(x.tax_rate || 0)}%): + ${x.currency} ${Number(x.tax_amount || 0).toLocaleString()}`,\n `Total due: ${x.currency} ${Number(x.total || x.amount).toLocaleString()}`,\n \"\",\n ...(milestones.rows.length ? [\"## Covered milestones\", ...milestones.rows.map((m: any) => `- ${m.title} — ${titleCase(m.status)}`), \"\"] : []),\n x.notes ? `## Notes\\n${x.notes}` : \"\",\n `\\n## Payment summary\\nReceived to date: ${x.currency} ${Number((paid.rows[0] as any)?.total).toLocaleString()}`,\n ].join(\"\\n\");\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Project invoice\", `${x.invoice_number} · Issued ${prettyDateForServer(x.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Invoice type\", titleCase(x.invoice_type)],\n [\"Amount due\", `${x.currency} ${Number(x.total || x.amount).toLocaleString()}`],\n [\"Due date\", x.due_date ? prettyDateForServer(x.due_date) : \"Due on receipt\"],\n ], 76, branding);\n addPdfLines(doc, content, contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${x.invoice_number}.pdf`);\n});\n\napp.get(\"/api/payments/:id/receipt.pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Receipts are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM payments WHERE id=?\", args: [c.req.param(\"id\")] });\n const payment = r.rows[0] as any;\n const p = payment ? await allowedProject(String(payment.project_id), a) : null;\n if (!payment || !p) throw new Error(\"Payment not found\");\n const [branding, paidResult] = await Promise.all([\n brandingForProject(p),\n db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [p.id] }),\n ]);\n const projectTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const paid = Number((paidResult.rows[0] as any)?.total);\n const receiptNumber = `RCT-${String(payment.paid_date).slice(0, 4)}-${String(payment.id).slice(0, 8).toUpperCase()}`;\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Payment receipt\", `${receiptNumber} · Issued ${prettyDateForServer(payment.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Payment received\", `${payment.currency} ${Number(payment.amount).toLocaleString()}`],\n [\"Payment date\", prettyDateForServer(payment.paid_date)],\n [\"Total received\", `${payment.currency} ${paid.toLocaleString()}`],\n [\"Balance pending\", `${payment.currency} ${Math.max(0, projectTotal - paid).toLocaleString()}`],\n ], 76, branding);\n const note = str(payment.note);\n addPdfLines(doc, [\n \"## Receipt acknowledgement\",\n `This receipt confirms payment of ${payment.currency} ${Number(payment.amount).toLocaleString()} toward ${p.title}.`,\n note ? `\\n## Payment note\\n${note}` : \"\",\n ].join(\"\\n\"), contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${receiptNumber}.pdf`);\n});\n\napp.get(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n const partner = r.rows[0] as any;\n if (!partner) throw new Error(\"Partner not found\");\n const base = await getClientBranding();\n return c.json({\n branding: effectivePartnerBranding(partner, base),\n overrides: {\n name: partner.brand_name || \"\",\n logo_url: partner.logo_url || \"\",\n accent_color: partner.accent_color || \"\",\n contact_info: partner.contact_info || \"\",\n website_url: partner.website_url || \"\",\n portal_label: \"\",\n welcome_message: \"\",\n document_header: partner.document_header || \"\",\n document_footer: partner.document_footer || \"\",\n },\n });\n});\napp.patch(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const b = await body(c);\n await db.execute({\n sql: \"UPDATE partners SET brand_name=?,logo_url=?,accent_color=?,contact_info=?,website_url=?,document_header=?,document_footer=?,updated_at=? WHERE id=?\",\n args: [\n str(b.name) || null,\n /^https?:\\/\\//.test(str(b.logo_url)) ? str(b.logo_url) : null,\n color(b.accent_color) || null,\n str(b.contact_info) || null,\n /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null,\n str(b.document_footer) || null,\n now(), a.actorId,\n ],\n });\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n return c.json({ ok: true, branding: effectivePartnerBranding(r.rows[0], await getClientBranding()) });\n});\n\napp.get(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const [users, assignments, projects] = await Promise.all([\n db.execute(\"SELECT id,name,phone,email,role,permissions,all_project_access,active,created_at,updated_at FROM internal_users ORDER BY role,name\"),\n db.execute(\"SELECT user_id,project_id FROM user_project_access\"),\n db.execute(\"SELECT id,title,status,archived FROM projects ORDER BY archived,title\"),\n ]);\n return c.json({ users: users.rows.map((u: any) => ({\n ...u, active: Boolean(u.active), all_project_access: Boolean(u.all_project_access),\n permissions: parseJson(u.permissions, {}),\n project_ids: assignments.rows.filter((x: any) => x.user_id === u.id).map((x: any) => x.project_id),\n })), projects: projects.rows.map((x: any) => ({ ...x, archived: Boolean(x.archived) })) });\n});\napp.post(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), userId = uid(), t = now();\n const role = b.role === \"admin\" ? \"admin\" : \"user\";\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...(b.permissions ?? {}) };\n const all = b.all_project_access !== false;\n const statements: any[] = [{\n sql: \"INSERT INTO internal_users(id,name,phone,email,pin_hash,role,permissions,all_project_access,active,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,1,?,?)\",\n args: [userId, str(b.name) || \"Team member\", p, emailList([b.email])[0] || null, await hashPin(p, code), role, JSON.stringify(permissions), int(all), t, t],\n }];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [userId, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true, id: userId }, 201);\n});\napp.patch(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = r.rows[0] as any, b = await body(c);\n if (!u) throw new Error(\"User not found\");\n const requestedRole = b.role === \"admin\" ? \"admin\" : b.role === \"user\" ? \"user\" : u.role;\n const requestedActive = b.active === undefined ? Boolean(u.active) : Boolean(b.active);\n if (a.actorId === String(u.id) && (!requestedActive || requestedRole !== \"admin\")) {\n throw new Error(\"You cannot revoke or demote your own administrator account\");\n }\n if (u.role === \"admin\" && u.active && (!requestedActive || requestedRole !== \"admin\")) {\n const admins = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((admins.rows[0] as any)?.count) <= 1) {\n throw new Error(\"At least one active administrator is required\");\n }\n }\n const p = b.phone === undefined ? String(u.phone) : phone(b.phone);\n const role = requestedRole;\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...parseJson(u.permissions, {}), ...(b.permissions ?? {}) };\n const all = b.all_project_access === undefined ? Boolean(u.all_project_access) : Boolean(b.all_project_access);\n const statements: any[] = [\n { sql: \"UPDATE internal_users SET name=?,phone=?,email=?,pin_hash=?,role=?,permissions=?,all_project_access=?,active=?,updated_at=? WHERE id=?\",\n args: [str(b.name ?? u.name) || u.name, p,\n b.email === undefined ? u.email : emailList([b.email])[0] || null,\n b.pin ? await hashPin(p, pin(b.pin)) : u.pin_hash,\n role, JSON.stringify(permissions), int(all), b.active === undefined ? Number(u.active) : int(b.active), now(), u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n ];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [u.id, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove users\");\n if (a.actorId === c.req.param(\"id\")) throw new Error(\"You cannot remove your own account\");\n const target = await db.execute({ sql: \"SELECT role,active FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = target.rows[0] as any;\n if (!u) throw new Error(\"User not found\");\n if (u.role === \"admin\" && u.active) {\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count) <= 1) throw new Error(\"At least one active admin is required\");\n }\n const fallback = await db.execute({\n sql: \"SELECT id FROM internal_users WHERE id<>? AND active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\",\n args: [c.req.param(\"id\")],\n });\n const fallbackId = str((fallback.rows[0] as any)?.id);\n if (!fallbackId) throw new Error(\"Assign another active user before removing this account\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='internal' AND actor_id=?\", args: [u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n { sql: \"UPDATE projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"UPDATE recurring_projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"DELETE FROM internal_users WHERE id=?\", args: [u.id] },\n ]);\n return c.json({ ok: true });\n});\n\napp.get(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const [recipients, users] = await Promise.all([\n ccRecipients(),\n db.execute(\"SELECT id,name,email,active FROM internal_users ORDER BY name\"),\n ]);\n return c.json({\n recipients,\n users: users.rows.map((x: any) => ({ ...x, active: Boolean(x.active) })),\n });\n});\napp.patch(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const b = await body(c);\n const users = await db.execute(\"SELECT id,email FROM internal_users WHERE active=1\");\n const userEmails = new Map((users.rows as any[]).map((x) => [str(x.id), emailList([x.email])[0] || \"\"]));\n const recipients = [];\n for (const x of Array.isArray(b.recipients) ? b.recipients : []) {\n const userId = str(x.user_id) || \"\";\n const standaloneEmail = userId ? \"\" : emailList([x.email])[0] || \"\";\n if (userId && !userEmails.get(userId)) throw new Error(\"Mapped internal users must have a valid work email\");\n if (!userId && !standaloneEmail) throw new Error(\"A standalone recipient needs a valid email address\");\n recipients.push({\n id: str(x.id) || uid(),\n label: str(x.label) || standaloneEmail || \"CC recipient\",\n email: standaloneEmail,\n user_id: userId,\n default_selected: Boolean(x.default_selected),\n });\n }\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('notification_cc_recipients',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(recipients), now()],\n });\n return c.json({ ok: true, recipients });\n});\n\napp.get(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute(`SELECT p.*,(SELECT COUNT(*) FROM projects x WHERE x.partner_id=p.id) project_count FROM partners p ORDER BY p.name`);\n return c.json({ partners: r.rows.map((p: any) => ({ ...p, active: Boolean(p.active), project_count: Number(p.project_count), permissions: parseJson(p.permissions, {}), pin_hash: undefined })) });\n});\napp.get(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n return c.json({ branding: await getClientBranding() });\n});\napp.patch(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n const b = await body(c);\n const branding = {\n name: str(b.name) || defaultBranding.name,\n logo_url: str(b.logo_url) || defaultBranding.logo_url,\n accent_color: color(b.accent_color) || defaultBranding.accent_color,\n contact_info: str(b.contact_info),\n website_url: /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : \"\",\n portal_label: str(b.portal_label) || defaultBranding.portal_label,\n welcome_message: str(b.welcome_message) || defaultBranding.welcome_message,\n document_header: str(b.document_header) || defaultBranding.document_header,\n document_footer: str(b.document_footer) || defaultBranding.document_footer,\n };\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('client_branding',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(branding), now()],\n });\n brandingCache = null;\n return c.json({ ok: true, branding });\n});\napp.post(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), partnerId = uid(), t = now();\n const permissionLevel = [\"basic\", \"advanced\", \"custom\"].includes(b.permission_level) ? b.permission_level : \"basic\";\n const customPermissions = permissionLevel === \"custom\"\n ? Object.fromEntries(partnerPermissionDefinitions.map(([key]) => [key, b.permissions?.[key] === true]))\n : {};\n await db.execute({\n sql: `INSERT INTO partners(id,name,phone,pin_hash,brand_name,logo_url,accent_color,contact_info,website_url,\n document_header,document_footer,permission_level,permissions,active,created_at,updated_at)\n VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,1,?,?)`,\n args: [partnerId, str(b.name) || \"Partner\", p, await hashPin(p, code),\n str(b.brand_name) || null, str(b.logo_url) || null, color(b.accent_color) || null,\n str(b.contact_info) || null, /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null, str(b.document_footer) || null, permissionLevel, JSON.stringify(customPermissions), t, t],\n });\n return c.json({ ok: true, id: partnerId }, 201);\n});\napp.patch(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [c.req.param(\"id\")] });\n const p = r.rows[0] as any, b = await body(c);\n if (!p) throw new Error(\"Partner not found\");\n const ph = b.phone === undefined ? String(p.phone) : phone(b.phone);\n const permissionLevel = b.permission_level === undefined ? String(p.permission_level || \"basic\")\n : [\"basic\", \"advanced\", \"custom\"].includes(b.permission_level) ? b.permission_level : \"basic\";\n const customPermissions = permissionLevel === \"custom\"\n ? Object.fromEntries(partnerPermissionDefinitions.map(([key]) => [key, b.permissions === undefined ? parseJson(p.permissions, {})[key] === true : b.permissions?.[key] === true]))\n : {};\n await db.execute({\n sql: `UPDATE partners SET name=?,phone=?,pin_hash=?,brand_name=?,logo_url=?,accent_color=?,contact_info=?,\n website_url=?,document_header=?,document_footer=?,permission_level=?,permissions=?,active=?,updated_at=? WHERE id=?`,\n args: [str(b.name ?? p.name) || p.name, ph, b.pin ? await hashPin(ph, pin(b.pin)) : p.pin_hash,\n str(b.brand_name ?? p.brand_name) || null, str(b.logo_url ?? p.logo_url) || null,\n color(b.accent_color ?? p.accent_color) || null, str(b.contact_info ?? p.contact_info) || null,\n b.website_url === undefined ? p.website_url : /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n b.document_header === undefined ? p.document_header : str(b.document_header) || null,\n b.document_footer === undefined ? p.document_footer : str(b.document_footer) || null,\n permissionLevel, JSON.stringify(customPermissions),\n b.active === undefined ? Number(p.active) : int(b.active), now(), p.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove partners\");\n const linked = await db.execute({\n sql: `SELECT (SELECT COUNT(*) FROM projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM recurring_projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM proposals WHERE partner_id=?) count`,\n args: [c.req.param(\"id\"), c.req.param(\"id\"), c.req.param(\"id\")],\n });\n if (Number((linked.rows[0] as any)?.count)) throw new Error(\"Deactivate this partner or unlink their projects before deletion\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='partner' AND actor_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM partners WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\ngrowthSuite.register(app);\n\napp.get(\"/frontend/logo.png\", async () => {\n const logo = await blob.get(\"assets/aflabs-logo.png\");\n return new Response(logo.body, {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=86400\" },\n });\n});\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\napp.get(\"*\", () => serveFile(\"/frontend/index.html\"));\napp.onError((e, c) => c.req.path.startsWith(\"/api/\") ? error(c, e) : Promise.reject(e));\nexport default app.fetch;\n","children",[],[206],["D",1786655332090],[],[18],"29d2726b-b51e-4dc3-afb4-09eb0ee2c107","README.md","019ffcf4-d6e8-704a-9308-436334f72bdf",["D",1786655332090],"# AFLABS PM\n\nA full Val Town operations workspace for AFLABS administrators, internal users, and partners.\n\n## Runtime\n\n- Val Town React + Hono\n- Selectable Neon Postgres or Turso/libSQL database\n- Phone-and-PIN authentication for internal users and partners\n- Secret project URL plus PIN for clients\n- Cookie-backed sessions\n- Val Town `std/openai` for AI project extraction, proposals, and business pitch generation\n\n## Required environment variables\n\n- `DATABASE_PROVIDER` (`neon` or `turso`)\n- `NEON_DATABASE_URL` when using Neon\n- `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN` when using Turso\n- `CACHE_ENABLED` (`true` or `false`)\n- `APP_BOOTSTRAP_TOKEN`\n- `SESSION_SECRET`\n\nThe selected database provider is permanently recorded in Val-scoped blob storage on first use. Changing `DATABASE_PROVIDER` later fails safely.\n\n## Main capabilities\n\n- Lead pipeline with stage overview, reminders, requirements, complete audit timeline, and one-to-many project conversion\n- Mandatory lead origin for new projects and attachment flow for legacy projects\n- Project filters for type, due date, stage, and partner\n- Scoped one-to-one AFLABS ↔ partner conversation threads for a single lead or project\n- Project one-line summaries plus Markdown working notes\n- Basic, advanced, and custom partner permission packages\n- Itemized invoice PDFs with quantity, unit price, discount, arrears, optional tax, and totals\n- Commercial cost preview for regular cost, partner-managed cost, spread, tax, and client total\n- AI Business Idea Pitch Generator for admins and eligible partners\n- Admin-configurable AI pitch and proposal prompts stored in application settings\n- Partner MoU templates, published agreement versions, monthly targets, achievement metrics, and target history\n- Admin and partner dashboards with pipeline, delivery risks, revenue, meetings, unread threads, and target trajectory\n- Meeting availability and blocking, quota enforcement, collision prevention, lead/project context, and online/offline venue\n- Existing delivery Kanban, milestones, stakeholders, payments, branded proposals, recurring projects, client portal, and activity history\n\n## Data evolution\n\nThe growth-suite schema is created idempotently on authenticated API requests. Existing project records remain valid and can be attached to a lead later; all newly created projects require an originating lead.\n",[],[218],"2b7f9b8a-b857-459f-9dca-4e5b6ffcc96e","neon-connection-test.ts","019ffcf4-d6e8-704a-9308-3b247e8602e9","019ffcf4-d6e8-704a-9308-3c0918e9224b",["D",1786655332090],"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",[],[232,225],"scripts","c18a4e99-dbf4-4709-97d6-d84b68450db3",["D",1786655332090],"directory",[201],[232],"b0b6b7b2-fb94-4fa4-917c-2f553fc836c4","styles.css","019ffcf4-d6e8-704a-9308-3210234dafbe","019ffcf4-d6e8-704a-9308-3675ec496845",8,["D",1786655944914],":root {\n --bg: oklch(1 0 0);\n --surface: oklch(0.975 0.004 240);\n --surface-raised: oklch(0.992 0.002 240);\n --ink: oklch(0.18 0.012 245);\n --muted: oklch(0.46 0.018 245);\n --faint: oklch(0.65 0.012 245);\n --border: oklch(0.9 0.008 240);\n --border-strong: oklch(0.82 0.012 240);\n --blue: oklch(0.55 0.12 245);\n --blue-dark: oklch(0.48 0.13 245);\n --blue-soft: oklch(0.95 0.025 245);\n --lemon: oklch(0.88 0.18 115);\n --lemon-soft: oklch(0.96 0.08 115);\n --danger: oklch(0.55 0.19 25);\n --danger-soft: oklch(0.96 0.025 25);\n --warning: oklch(0.72 0.15 75);\n --success: oklch(0.57 0.14 145);\n --success-soft: oklch(0.95 0.035 145);\n --sidebar: oklch(0.155 0.012 245);\n --z-dropdown: 20;\n --z-sticky: 30;\n --z-backdrop: 40;\n --z-modal: 50;\n --z-toast: 60;\n color: var(--ink);\n background: var(--bg);\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n font-synthesis: none;\n line-height: 1.5;\n text-rendering: optimizeLegibility;\n}\n\n* { box-sizing: border-box; }\nhtml, body, #root { min-height: 100%; margin: 0; }\nbody { min-width: 320px; background: var(--bg); }\nbutton, input, textarea, select { font: inherit; }\nbutton, a { -webkit-tap-highlight-color: transparent; }\nbutton { color: inherit; }\na { color: inherit; }\n.icon { flex: 0 0 auto; }\nh1, h2, h3, h4, p { margin-top: 0; }\nh1, h2, h3 { letter-spacing: -0.025em; text-wrap: balance; }\np { text-wrap: pretty; }\n\n.button {\n min-height: 40px;\n border: 0;\n border-radius: 10px;\n padding: 0 15px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 650;\n cursor: pointer;\n transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, opacity 180ms ease-out;\n}\n.button:active { transform: translateY(1px); }\n.button:disabled { cursor: wait; opacity: .58; }\n.button-primary, .button-primary span { color: white !important; }\n.button-primary { background: var(--blue); }\n.button-primary:hover { background: var(--blue-dark); }\n.button-secondary { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }\n.button-secondary:hover { background: oklch(0.95 0.008 240); }\n.button-danger { color: var(--danger); background: var(--danger-soft); }\n.button-danger:hover { background: oklch(0.93 0.045 25); }\n.icon-button {\n width: 38px;\n height: 38px;\n border: 0;\n border-radius: 9px;\n background: transparent;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n.icon-button:hover { background: var(--surface); }\nbutton:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {\n outline: 3px solid oklch(0.72 0.12 245 / .35);\n outline-offset: 2px;\n}\n\n.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.field > span, fieldset legend {\n color: oklch(0.3 0.018 245);\n font-size: 12px;\n font-weight: 650;\n}\n.field small { color: var(--muted); font-size: 11px; }\ninput, textarea, select {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n padding: 9px 11px;\n transition: border-color 160ms ease-out, box-shadow 160ms ease-out;\n}\ninput, select { min-height: 42px; }\ntextarea { resize: vertical; line-height: 1.5; }\ninput::placeholder, textarea::placeholder { color: oklch(0.51 0.012 245); opacity: 1; }\ninput:hover, textarea:hover, select:hover { border-color: oklch(0.72 0.025 245); }\ninput:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.55 0.12 245 / .12); outline: 0; }\n.stack { display: flex; flex-direction: column; gap: 16px; }\n.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }\n.form-row > .field { flex: 1 1 180px; }\n.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.form-grid > .field:nth-of-type(3) { grid-column: 1 / -1; }\n.full { grid-column: 1 / -1; }\n.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }\n.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }\n.check input { width: 16px; min-height: 16px; height: 16px; accent-color: var(--blue); }\nfieldset { border: 0; padding: 0; margin: 0; }\nfieldset legend { margin-bottom: 10px; }\n\n.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }\n.brand b { color: var(--lemon); font-weight: 700; }\n.brand-mark {\n width: 31px;\n height: 31px;\n background: oklch(0.18 0.015 245);\n border-radius: 8px;\n display: grid;\n place-items: center;\n overflow: hidden;\n}\n.brand-mark img { width: 100%; height: 100%; object-fit: contain; }\n.brand-mark-large { width: 38px; height: 38px; border-radius: 10px; }\n.brand-large { font-size: 17px; }\n.brand-large .brand-mark { width: 38px; height: 38px; border-radius: 10px; }\n.alert { border-radius: 10px; padding: 10px 12px; font-size: 12px; }\n.alert-error { color: oklch(0.42 0.17 25); background: var(--danger-soft); }\n.alert-warning { color: oklch(0.38 0.1 65); background: oklch(0.95 0.045 78); }\n\n.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .95fr) minmax(430px, 1.05fr); }\n.auth-brand {\n color: white;\n background: var(--sidebar);\n padding: 44px clamp(36px, 6vw, 92px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 100vh;\n}\n.auth-statement { max-width: 580px; }\n.auth-statement .signal { color: oklch(0.82 0.03 245); font-size: 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }\n.auth-statement .signal i { width: 7px; height: 7px; background: var(--lemon); border-radius: 50%; box-shadow: 0 0 0 5px oklch(0.88 0.18 115 / .12); }\n.auth-statement h1 { font-size: clamp(2.7rem, 5vw, 5.25rem); line-height: .99; max-width: 10ch; letter-spacing: -.04em; margin-bottom: 26px; }\n.auth-statement p { color: oklch(0.78 0.02 245); font-size: 16px; max-width: 49ch; line-height: 1.7; }\n.auth-foot { color: oklch(0.65 0.02 245); font-size: 12px; }\n.auth-panel { display: grid; place-items: center; padding: 40px; background: var(--bg); }\n.auth-card { width: min(100%, 410px); }\n.auth-heading { margin-bottom: 28px; }\n.auth-heading h2 { font-size: 28px; margin-bottom: 8px; }\n.auth-heading p, .auth-note { color: var(--muted); font-size: 13px; line-height: 1.6; }\n.auth-note { text-align: center; margin-top: 20px; }\n.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface); border-radius: 11px; margin-bottom: 22px; }\n.segmented button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }\n.segmented button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px oklch(0.18 0.012 245 / .1); }\n.app-loading, .client-loading { min-height: 100vh; display: grid; place-content: center; gap: 24px; }\n.loading-line { width: 180px; height: 2px; background: var(--border); overflow: hidden; }\n.loading-line i { display: block; width: 48%; height: 100%; background: var(--blue); animation: loading 1.2s infinite ease-in-out; }\n@keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } }\n.network-activity { position: fixed; top: 10px; left: 50%; z-index: var(--z-toast); min-height: 28px; padding: 0 10px 0 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: white; background: var(--sidebar); border-radius: 8px; font-size: 9px; font-weight: 650; }\n.network-activity i { width: 7px; height: 7px; border-radius: 50%; background: var(--lemon); animation: activity-pulse .9s ease-in-out infinite alternate; }\n@keyframes activity-pulse { to { opacity: .38; transform: scale(.82); } }\n.page-skeleton { min-height: 520px; padding: 34px 30px; background: var(--surface-raised); }\n.page-skeleton .skeleton { max-width: 980px; margin: 12px 0; }\n.skeleton-row { height: 74px; }\n.skeleton-chart { width: min(100%, 760px); height: 190px; }\n.skeleton-column-title { width: 55%; height: 20px; margin: 8px 4px 18px; }\n.skeleton-card { height: 138px; margin-bottom: 10px; background: var(--bg); }\n\n.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); background: var(--surface); }\n.sidebar {\n position: sticky;\n top: 0;\n height: 100vh;\n color: white;\n background: var(--sidebar);\n padding: 22px 14px 16px;\n display: flex;\n flex-direction: column;\n z-index: var(--z-sticky);\n}\n.sidebar > .brand { padding: 0 10px; margin-bottom: 34px; }\n.sidebar nav { display: flex; flex-direction: column; gap: 4px; }\n.sidebar nav button {\n min-height: 42px;\n color: oklch(0.78 0.018 245);\n background: transparent;\n border: 0;\n border-radius: 9px;\n padding: 0 11px;\n display: flex;\n align-items: center;\n gap: 11px;\n font-size: 12px;\n font-weight: 570;\n text-align: left;\n cursor: pointer;\n}\n.sidebar nav button:hover { color: white; background: oklch(0.22 0.014 245); }\n.sidebar nav button.active { color: var(--sidebar); background: var(--lemon); font-weight: 700; }\n.sidebar-foot { margin-top: auto; }\n.sidebar-foot > a { color: oklch(0.65 0.018 245); font-size: 11px; padding: 10px; display: flex; align-items: center; gap: 8px; text-decoration: none; }\n.account { border-top: 1px solid oklch(1 0 0 / .1); padding: 16px 4px 0; margin-top: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 9px; align-items: center; }\n.account > span { width: 34px; height: 34px; border-radius: 9px; background: oklch(0.28 0.025 245); display: grid; place-items: center; font-size: 11px; font-weight: 700; }\n.account div { min-width: 0; }\n.account b, .account small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.account b { font-size: 11px; }\n.account small { color: oklch(0.6 0.02 245); font-size: 10px; text-transform: capitalize; }\n.account button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: oklch(0.65 0.02 245); border-radius: 7px; cursor: pointer; }\n.account button:hover { background: oklch(1 0 0 / .08); color: white; }\n\n.workspace { min-width: 0; overflow: hidden; }\n.workspace-head, .page-heading { padding: 29px 30px 24px; background: white; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: end; gap: 24px; }\n.workspace-head > div:first-child, .page-heading > div { max-width: 650px; }\n.workspace-head p, .page-heading p { color: var(--blue); font-size: 11px; font-weight: 700; margin-bottom: 5px; }\n.workspace-head h1, .page-heading h1 { font-size: 25px; margin-bottom: 4px; }\n.workspace-head span, .page-heading span { color: var(--muted); font-size: 12px; }\n.head-actions { display: flex; gap: 10px; align-items: center; }\n.search { width: min(260px, 25vw); position: relative; }\n.search svg { position: absolute; left: 12px; top: 12px; color: var(--faint); }\n.search input { padding-left: 36px; background: var(--surface); border-color: transparent; }\n.mobile-nav { display: none; }\n\n.kanban { height: calc(100vh - 114px); padding: 20px 22px 24px; display: flex; gap: 12px; overflow-x: auto; align-items: stretch; }\n.kanban-column { flex: 0 0 282px; min-width: 0; display: flex; flex-direction: column; }\n.kanban-column > header { padding: 4px 5px 13px; }\n.kanban-column > header > div { display: flex; align-items: center; gap: 7px; }\n.kanban-column h2 { margin: 0; font-size: 13px; letter-spacing: -.01em; }\n.kanban-column header b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--muted); background: oklch(0.91 0.008 240); font-size: 10px; display: grid; place-items: center; }\n.kanban-column header p { color: var(--muted); font-size: 10px; margin: 4px 0 0 17px; }\n.status-symbol { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }\n.column-todo .status-symbol { background: var(--blue); }\n.column-in-progress .status-symbol { background: var(--lemon); box-shadow: 0 0 0 3px oklch(0.88 0.18 115 / .18); }\n.column-blocked .status-symbol { background: var(--warning); }\n.column-done .status-symbol { background: var(--success); }\n.kanban-list { flex: 1; min-height: 100px; padding: 3px; overflow-y: auto; scrollbar-width: thin; }\n.kanban-card {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 14px;\n text-align: left;\n margin-bottom: 9px;\n cursor: pointer;\n transition: border-color 180ms ease-out, transform 180ms ease-out;\n}\n.kanban-card:hover { border-color: var(--blue); transform: translateY(-1px); }\n.kanban-card:active { transform: translateY(0); }\n.card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }\n.type-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }\n.type-rd { background: oklch(0.55 0.16 310); }\n.type-community { background: var(--success); }\n.project-type { color: var(--muted); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.unread { margin-left: auto; min-width: 18px; height: 18px; border-radius: 999px; color: var(--sidebar); background: var(--lemon); font-size: 9px; font-weight: 750; display: grid; place-items: center; }\n.question-attention { margin-left: auto; min-height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; color: oklch(0.35 0.12 55); background: oklch(0.94 0.055 75); font-size: 9px; font-weight: 750; }\n.question-attention + .unread { margin-left: 2px; }\n.kanban-card h3 { font-size: 14px; line-height: 1.35; margin-bottom: 6px; }\n.kanban-card > p { height: 34px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 14px; }\n.card-progress { height: 3px; border-radius: 999px; background: var(--surface); overflow: hidden; }\n.card-progress span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }\n.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: var(--muted); }\n.card-meta span { display: flex; align-items: center; gap: 5px; font-size: 9px; }\n.card-meta b { font-size: 10px; color: var(--ink); }\n.deadline-countdown { width: fit-content; margin-top: 8px; padding: 3px 7px; border-radius: 999px; color: oklch(0.38 0.1 245); background: var(--blue-soft); font-size: 8px; font-weight: 700; }\n.deadline-countdown.overdue { color: oklch(0.45 0.16 28); background: var(--danger-soft); }\n.partner-chip { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.partner-chip span { width: 20px; height: 20px; border-radius: 6px; color: white; background: var(--sidebar); display: grid; place-items: center; font-size: 7px; font-weight: 700; }\n.column-empty { color: var(--faint); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 22px 12px; text-align: center; font-size: 10px; }\n\n.empty { margin: 30px auto; max-width: 380px; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; }\n.empty-mark { width: 48px; height: 48px; border-radius: 14px; color: var(--blue); background: var(--blue-soft); display: grid; place-items: center; margin-bottom: 15px; }\n.empty h3 { font-size: 16px; margin-bottom: 5px; }\n.empty p { color: var(--muted); font-size: 12px; max-width: 36ch; margin-bottom: 16px; }\n\n.modal { width: min(620px, calc(100vw - 32px)); max-height: min(880px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: white; overflow: hidden; }\n.modal-wide { width: min(1100px, calc(100vw - 32px)); }\n.modal::backdrop { background: oklch(0.1 0.01 245 / .6); }\n.modal[open] { animation: modal-in 180ms cubic-bezier(.2,.8,.2,1); }\n@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }\n.modal-inner { max-height: inherit; overflow: auto; }\n.modal-head { min-height: 86px; padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }\n.modal-head h2 { font-size: 20px; margin-bottom: 4px; }\n.modal-head p { color: var(--muted); font-size: 12px; margin: 0; }\n.modal-content { padding: 22px; }\n\n.detail { min-height: min(780px, calc(100vh - 32px)); display: flex; flex-direction: column; }\n.detail-loading { min-height: 500px; padding: 32px; }\n.skeleton { height: 58px; border-radius: 8px; background: var(--surface); margin: 12px 0; animation: pulse 1.5s infinite ease-in-out; }\n.skeleton-title { width: 45%; height: 28px; }\n@keyframes pulse { 50% { opacity: .48; } }\n.detail-header { min-height: 118px; padding: 22px 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 240px 38px; align-items: center; gap: 24px; }\n.detail-title { min-width: 0; }\n.detail-title h2 { font-size: 23px; margin: 5px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.detail-title p { color: var(--muted); font-size: 11px; margin: 0; }\n.detail-status { color: var(--muted); font-size: 10px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.deadline-badge { color: var(--blue); background: var(--blue-soft); }\n.deadline-badge.overdue { color: var(--danger); background: var(--danger-soft); }\n.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }\n.status-todo { background: var(--blue); }\n.status-in-progress { background: var(--lemon); }\n.status-blocked { background: var(--warning); }\n.status-done { background: var(--success); }\n.detail-progress > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 7px; }\n.detail-progress b { color: var(--ink); font-size: 13px; }\n.progress { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }\n.progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.detail-tabs { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; overflow-x: auto; }\n.detail-tabs button { min-height: 46px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; text-transform: capitalize; cursor: pointer; white-space: nowrap; }\n.detail-tabs button.active { color: var(--ink); border-bottom-color: var(--blue); }\n.detail-body { flex: 1; background: var(--surface-raised); }\n.detail-section, .timeline-wrap { padding: 24px; }\n.read-overview > p { max-width: 70ch; color: var(--muted); line-height: 1.75; }\n.read-overview dl { display: flex; flex-wrap: wrap; gap: 14px; }\n.read-overview dl div { min-width: 150px; padding: 14px; background: var(--surface); border-radius: 10px; }\n.read-overview dt { color: var(--muted); font-size: 10px; }\n.read-overview dd { margin: 3px 0 0; font-size: 13px; font-weight: 650; }\n.read-overview dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }\n.quick-form { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: white; display: flex; flex-direction: column; gap: 13px; }\n.quick-form .button { align-self: flex-start; }\n.section-heading { margin-bottom: 16px; }\n.section-heading h3 { font-size: 16px; margin-bottom: 3px; }\n.section-heading p { color: var(--muted); font-size: 11px; margin: 0; }\n.split-section { display: grid; grid-template-columns: 1fr; gap: 30px; }\n.split-section > section + section { padding-top: 26px; border-top: 1px solid var(--border); }\n\n.timeline { max-width: 740px; margin: 24px auto 0; }\n.timeline-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 22px; }\n.timeline-item::before { content: \"\"; position: absolute; left: 16px; top: 25px; bottom: -2px; width: 1px; background: var(--border); }\n.timeline-item:last-child::before { display: none; }\n.timeline-future-gap { position: absolute; z-index: 2; left: -9px; top: 42px; width: 51px; padding: 3px 2px; border-radius: 6px; color: var(--blue); background: var(--bg); font-size: 7px; font-weight: 700; line-height: 1.2; text-align: center; }\n.timeline-node { position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 10px; background: var(--surface); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; }\n.timeline-payment .timeline-node { color: var(--success); background: var(--success-soft); }\n.timeline-blocker .timeline-node { color: oklch(0.55 0.14 60); background: oklch(0.95 0.04 75); }\n.timeline-milestone .timeline-node { color: var(--blue); background: var(--blue-soft); }\n.timeline-schedule-extension .timeline-node { color: oklch(0.48 0.13 245); background: oklch(0.94 0.035 245); }\n.timeline-content { padding: 0 0 4px; }\n.timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }\n.timeline-head time { color: var(--faint); font-size: 9px; }\n.event-type { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }\n.timeline-content h4 { font-size: 12px; margin-bottom: 4px; }\n.timeline-content p { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 0; max-width: 68ch; }\n.resolved { color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; }\n.text-action, .text-danger { border: 0; background: none; padding: 0; font-size: 10px; font-weight: 650; cursor: pointer; }\n.text-action { color: var(--blue); margin-top: 7px; }\n.text-danger { color: var(--danger); }\n.reply-box { margin-top: 10px; display: flex; gap: 8px; align-items: end; }\n.reply-box textarea { min-height: 70px; }\n.reply-box .button { flex: 0 0 auto; }\n\n.item-list { display: flex; flex-direction: column; }\n.item-row { min-height: 62px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 4px; }\n.item-row > div { min-width: 0; flex: 1; }\n.item-row b, .item-row a { color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }\n.item-row a:hover { color: var(--blue); }\n.item-row p { color: var(--muted); font-size: 9px; margin: 3px 0 0; }\n.item-row small { color: var(--muted); font-size: 10px; display: block; margin-top: 4px; }\n.resource-icon, .milestone-state { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.milestone-state { font-weight: 700; }\n.state-complete { color: var(--success); background: var(--success-soft); }\n.state-active { color: var(--sidebar); background: var(--lemon-soft); }\n.credential-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.credential { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: white; }\n.credential div b, .credential div span { display: block; }\n.credential b { font-size: 11px; }\n.credential span { color: var(--muted); font-size: 9px; }\n.credential code { grid-column: 1 / -1; padding: 7px; background: var(--surface); border-radius: 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }\n.credential a, .credential button { color: var(--blue); border: 0; background: none; font-size: 9px; padding: 0; cursor: pointer; text-decoration: none; }\n.credential button { color: var(--danger); }\n.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.person { position: relative; min-height: 112px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 13px; display: flex; gap: 11px; align-items: flex-start; }\n.person-main { border-color: oklch(0.78 0.08 115); background: var(--lemon-soft); }\n.person > span, .avatar { width: 38px; height: 38px; border-radius: 10px; color: white; background: var(--blue); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }\n.person > div { min-width: 0; flex: 1; }\n.person header { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }\n.person header em { padding: 2px 5px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 7px; font-style: normal; font-weight: 700; }\n.person b, .person p, .person small { display: block; }\n.person b { font-size: 11px; }\n.person p, .person small { color: var(--muted); font-size: 9px; margin: 1px 0; }\n.person > button { position: absolute; right: 7px; top: 6px; border: 0; background: none; color: var(--faint); cursor: pointer; }\n.person a { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }\n.person-actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }\n.person-actions button { border: 0; padding: 4px 7px; border-radius: 6px; color: var(--blue); background: var(--surface); font-size: 8px; cursor: pointer; }\n.person-actions .danger-link { color: var(--danger); }\n.person-editor { margin-top: 9px; }\n.person-editor > summary { width: fit-content; color: var(--blue); font-size: 8px; font-weight: 700; cursor: pointer; list-style-position: inside; }\n.person-editor > form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }\n.person-editor .button { width: 100%; min-height: 34px; }\n.payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-radius: 11px; overflow: hidden; margin-bottom: 20px; }\n.payment-summary > div { background: white; padding: 16px; }\n.payment-summary span, .payment-summary b { display: block; }\n.payment-summary span { color: var(--muted); font-size: 9px; }\n.payment-summary b { font-size: 16px; margin-top: 3px; }\n.payment-summary .pending { background: var(--lemon-soft); }\n.access-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 28px; }\n.copy-field { display: flex; gap: 8px; margin-bottom: 18px; }\n.copy-field code { flex: 1; min-width: 0; padding: 11px; border-radius: 8px; background: var(--surface); font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.inline-form { display: flex; gap: 8px; align-items: end; max-width: 360px; }\n.inline-form .field { flex: 1; }\n.privacy-note { color: oklch(0.37 0.02 245); background: var(--surface); border-radius: 12px; padding: 18px; align-self: start; }\n.privacy-note h3 { font-size: 13px; }\n.privacy-note ul { padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.9; }\n\n.directory { min-height: 100vh; background: white; }\n.directory-tabs { display: flex; gap: 4px; padding: 18px 30px 0; border-bottom: 1px solid var(--border); }\n.directory-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; background: none; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; }\n.directory-tabs button.active { color: var(--ink); border-color: var(--blue); }\n.directory-tabs b { margin-left: 6px; color: var(--faint); }\n.directory-layout { display: grid; grid-template-columns: minmax(370px, .75fr) minmax(480px, 1.25fr); min-height: calc(100vh - 174px); }\n.directory-form { padding: 28px 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.directory-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.directory-form > p { color: var(--muted); font-size: 11px; margin-bottom: 22px; max-width: 55ch; }\n.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }\n.project-checks { max-height: 100px; overflow: auto; margin-top: 8px; padding-left: 24px; display: flex; flex-direction: column; gap: 5px; }\n.directory-list { padding: 12px 24px; }\n.directory-row { min-height: 86px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); }\n.directory-row h3 { font-size: 12px; margin: 0 0 2px; }\n.directory-row h3 em { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 6px; margin-left: 7px; font-size: 8px; font-style: normal; text-transform: capitalize; }\n.directory-row p, .directory-row small { color: var(--muted); font-size: 9px; margin: 0; }\n.row-actions { display: flex; gap: 10px; align-items: center; }\n.row-actions .button { min-height: 32px; padding: 0 10px; font-size: 10px; }\n.partner-avatar { background: var(--sidebar); }\n.self-label { color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 7px 9px; border-radius: 8px; font-size: 9px; white-space: nowrap; }\n.visibility-editor fieldset { min-width: 0; }\n.scope-toggle { min-height: 68px; padding: 13px; border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; }\n.scope-toggle input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--blue); }\n.scope-toggle span, .scope-toggle b, .scope-toggle small { display: block; }\n.scope-toggle b { font-size: 12px; }\n.scope-toggle small, .field-note { color: var(--muted); font-size: 9px; }\n.project-visibility-list { max-height: 320px; margin-top: 10px; overflow: auto; border-top: 1px solid var(--border); }\n.project-visibility-list .check { width: 100%; min-height: 54px; padding: 9px 4px; border-bottom: 1px solid var(--border); }\n.project-visibility-list .check > span { min-width: 0; flex: 1; }\n.project-visibility-list b, .project-visibility-list small { display: block; }\n.project-visibility-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 10px; }\n.project-visibility-list small { margin-top: 2px; font-size: 8px; }\n.branding-layout { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(320px, .72fr); min-height: calc(100vh - 174px); }\n.branding-form { padding: 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.branding-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.branding-form > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 24px; max-width: 62ch; }\n.branding-preview { --preview-accent: var(--lemon); align-self: start; margin: 30px; padding: 22px; color: white; background: var(--sidebar); border: 1px solid oklch(1 0 0 / .08); border-radius: 14px; }\n.preview-label { display: block; color: oklch(0.72 0.02 245); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }\n.preview-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }\n.preview-brand img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: oklch(0.15 0.012 245); }\n.preview-brand b, .preview-brand small { display: block; }\n.preview-brand b { font-size: 12px; }\n.preview-brand small { color: oklch(0.72 0.02 245); font-size: 8px; margin-top: 2px; }\n.preview-project > span { color: var(--preview-accent); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.preview-project h3 { font-size: 25px; letter-spacing: -.025em; margin: 7px 0 9px; }\n.preview-project p { color: oklch(0.76 0.02 245); font-size: 10px; line-height: 1.6; min-height: 32px; }\n.preview-project > div { height: 5px; margin-top: 25px; border-radius: 999px; background: oklch(1 0 0 / .12); overflow: hidden; }\n.preview-project > div i { display: block; width: 64%; height: 100%; background: var(--preview-accent); }\n.preview-contact { display: block; color: oklch(0.67 0.02 245); font-size: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid oklch(1 0 0 / .09); }\n.document-branding-fields { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }\n.document-preview { margin-top: 22px; padding: 13px; border-radius: 9px; color: oklch(0.2 0.012 245); background: oklch(0.98 0.004 240); }\n.document-preview > small { display: block; margin-bottom: 10px; color: oklch(0.48 0.018 245); font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }\n.document-preview header { min-height: 42px; padding: 8px; border-radius: 6px; display: flex; gap: 9px; align-items: center; color: white; background: oklch(0.18 0.012 245); }\n.document-preview header img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }\n.document-preview header b, .document-preview header span { display: block; }\n.document-preview header b { font-size: 8px; }\n.document-preview header span { max-width: 23ch; margin-top: 2px; color: oklch(0.77 0.015 245); font-size: 6px; line-height: 1.35; white-space: pre-line; }\n.document-preview section { min-height: 76px; padding: 14px 8px; }\n.document-preview section i { display: block; width: 34px; height: 3px; margin-bottom: 10px; background: var(--preview-accent); }\n.document-preview section strong { display: block; font-size: 9px; }\n.document-preview section p { margin: 5px 0 0; color: oklch(0.48 0.018 245); font-size: 7px; line-height: 1.5; }\n.document-preview footer { min-height: 22px; padding: 7px 8px 0; border-top: 1px solid oklch(0.9 0.008 240); color: oklch(0.5 0.015 245); font-size: 6px; line-height: 1.4; white-space: pre-line; }\n\n.toast {\n position: fixed;\n top: 18px;\n right: 18px;\n z-index: var(--z-toast);\n min-width: 260px;\n max-width: min(420px, calc(100vw - 36px));\n min-height: 44px;\n color: white;\n background: var(--sidebar);\n border-radius: 11px;\n padding: 10px 10px 10px 14px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-size: 11px;\n animation: toast-in 180ms ease-out;\n}\n.toast-error { background: oklch(0.38 0.14 25); }\n.toast button { width: 25px; height: 25px; border: 0; border-radius: 6px; color: white; background: oklch(1 0 0 / .1); display: grid; place-items: center; cursor: pointer; }\n@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }\n\n.client-portal { --partner-accent: var(--blue); min-height: 100vh; color: var(--ink); background: white; }\n.client-nav { height: 76px; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }\n.client-brand { display: flex; align-items: center; gap: 10px; }\n.client-brand img, .client-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; }\n.client-logo { color: white; background: var(--partner-accent); display: grid; place-items: center; font-size: 10px; font-weight: 750; }\n.client-brand b, .client-brand small { display: block; }\n.client-brand b { font-size: 12px; }\n.client-brand small { color: var(--muted); font-size: 9px; }\n.client-nav > button { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-hero { max-width: 850px; margin: 0 auto; padding: 66px 24px 38px; text-align: center; }\n.client-blocked .client-nav {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 1132px) / 2));\n color: white;\n background: oklch(0.43 0.16 38);\n border-bottom-color: oklch(0.34 0.13 38);\n}\n.client-blocked .client-brand small,\n.client-blocked .client-nav-actions > button:last-child { color: oklch(0.94 0.025 55); }\n.client-blocked .client-nav-actions .theme-toggle { color: white; border-color: oklch(1 0 0 / .45); }\n.client-blocked .client-hero {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 802px) / 2));\n background: oklch(0.97 0.025 62);\n border-bottom: 1px solid oklch(0.88 0.05 55);\n}\n.client-blocked-notice {\n max-width: 590px;\n margin: 0 auto 25px;\n padding: 13px 15px;\n display: flex;\n align-items: flex-start;\n gap: 11px;\n color: oklch(0.33 0.12 38);\n background: oklch(0.92 0.07 60);\n border: 1px solid oklch(0.79 0.1 52);\n border-radius: 11px;\n text-align: left;\n}\n.client-blocked-notice svg { flex: 0 0 auto; margin-top: 1px; }\n.client-blocked-notice b,\n.client-blocked-notice span { display: block; }\n.client-blocked-notice b { margin-bottom: 2px; font-size: 12px; }\n.client-blocked-notice span { font-size: 10px; line-height: 1.55; }\n.client-status { width: fit-content; margin: 0 auto 16px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 5px 9px; font-size: 9px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.client-status em { padding-left: 6px; border-left: 1px solid var(--border-strong); color: oklch(0.48 0.13 55); font-style: normal; }\n.client-hero h1 { font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 18px; }\n.client-hero > p { max-width: 66ch; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.75; }\n.client-dates { margin: 30px auto 0; display: flex; justify-content: center; align-items: center; gap: 18px; }\n.client-dates > span { text-align: left; }\n.client-dates small, .client-dates b { display: block; }\n.client-dates small { color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }\n.client-dates b { font-size: 11px; }\n.client-dates em { display: block; margin-top: 2px; color: var(--faint); font-size: 8px; font-style: normal; }\n.client-deadline { display: block; width: fit-content; margin-top: 6px; padding: 3px 7px; border-radius: 999px; color: var(--partner-accent); background: color-mix(in oklch, var(--partner-accent) 12%, white); font-size: 8px; }\n.client-deadline.overdue { color: var(--danger); background: var(--danger-soft); }\n.client-dates svg { color: var(--faint); }\n.client-progress-block { max-width: 930px; margin: 0 auto; padding: 28px 40px; background: var(--sidebar); color: white; border-radius: 14px; }\n.client-progress-copy { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }\n.client-progress-copy span { color: oklch(0.75 0.02 245); font-size: 11px; }\n.client-progress-copy b { font-size: 26px; }\n.client-progress { position: relative; height: 8px; border-radius: 999px; background: oklch(1 0 0 / .13); }\n.client-progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.client-progress > span { position: absolute; width: 16px; height: 16px; top: -4px; margin-left: -8px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 4px oklch(0.88 0.18 115 / .18); }\n.client-stages { display: flex; justify-content: space-between; color: oklch(0.53 0.02 245); font-size: 8px; margin-top: 10px; }\n.client-stages .passed { color: white; }\n.client-next-milestone { margin-top: 18px; padding-top: 16px; border-top: 1px solid oklch(1 0 0 / .16); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; }\n.client-next-milestone > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--sidebar); background: var(--lemon); }\n.client-next-milestone small, .client-next-milestone b { display: block; }\n.client-next-milestone small { color: oklch(0.76 0.02 245); font-size: 8px; }\n.client-next-milestone b { margin-top: 2px; color: white; font-size: 11px; }\n.client-next-milestone p { max-width: 62ch; margin: 4px 0 0; color: oklch(0.78 0.02 245); font-size: 9px; line-height: 1.45; }\n.client-next-milestone time { min-width: 116px; text-align: right; }\n.client-next-milestone time b { font-size: 10px; }\n.client-next-milestone time small { margin-top: 2px; color: var(--lemon); }\n.client-grid { max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 72px; }\n.client-section-head h2, .client-panel h2 { font-size: 20px; margin-bottom: 4px; }\n.client-section-head p, .client-panel > p { color: var(--muted); font-size: 11px; }\n.client-timeline { margin-top: 34px; }\n.client-timeline article { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-bottom: 30px; }\n.client-timeline article::before { content: \"\"; position: absolute; left: 20px; top: 35px; bottom: 0; width: 1px; background: var(--border); }\n.client-timeline article:last-child::before { display: none; }\n.client-future-gap { position: absolute; z-index: 2; left: -5px; top: 51px; width: 51px; padding: 3px 2px; border-radius: 6px; color: var(--blue); background: var(--bg); font-size: 7px; font-weight: 700; line-height: 1.2; text-align: center; }\n.client-node { width: 41px; height: 41px; border-radius: 12px; color: var(--muted); background: var(--surface); display: grid; place-items: center; z-index: 1; font-size: 12px; font-weight: 700; }\n.node-milestone { color: var(--blue); background: var(--blue-soft); }\n.node-payment { color: var(--success); background: var(--success-soft); }\n.node-blocker { color: oklch(0.5 0.15 60); background: oklch(0.95 0.04 75); }\n.client-timeline header { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 5px; }\n.client-timeline header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }\n.client-timeline time { color: var(--faint); font-size: 9px; }\n.client-timeline h3 { font-size: 13px; margin-bottom: 5px; }\n.client-timeline p { color: var(--muted); font-size: 11px; line-height: 1.7; max-width: 66ch; }\n.client-aside { display: flex; flex-direction: column; gap: 14px; }\n.client-panel { background: var(--surface); border-radius: 12px; padding: 18px; }\n.client-panel h2 { font-size: 14px; }\n.client-milestones { display: flex; flex-direction: column; margin-top: 14px; }\n.client-milestones > div { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding-bottom: 16px; }\n.client-milestones > div::before { content: \"\"; position: absolute; left: 10px; top: 21px; bottom: 0; width: 1px; background: var(--border-strong); }\n.client-milestones > div:last-child::before { display: none; }\n.client-milestones > div > span { width: 21px; height: 21px; border: 1px solid var(--border-strong); border-radius: 50%; background: white; display: grid; place-items: center; font-size: 9px; z-index: 1; }\n.client-milestones > div.complete > span { color: var(--sidebar); background: var(--lemon); border-color: var(--lemon); }\n.client-milestones > div.active > span { border-color: var(--blue); box-shadow: inset 0 0 0 5px white; background: var(--blue); }\n.client-milestones b, .client-milestones small { display: block; }\n.client-milestones b { font-size: 10px; }\n.client-milestones small { color: var(--muted); font-size: 8px; margin-top: 2px; }\n.muted { color: var(--muted); font-size: 10px; }\n.payment-panel > div:first-child { display: flex; justify-content: space-between; align-items: center; }\n.payment-panel span { color: var(--muted); font-size: 9px; }\n.payment-panel > div:first-child b { font-size: 18px; }\n.mini-progress { height: 4px; border-radius: 999px; background: white; margin: 10px 0 13px; overflow: hidden; }\n.mini-progress i { display: block; height: 100%; background: var(--blue); }\n.payment-panel dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.payment-panel dl div { padding-top: 9px; border-top: 1px solid var(--border); }\n.payment-panel dt { color: var(--muted); font-size: 8px; }\n.payment-panel dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.links-panel { padding: 0; overflow: hidden; }\n.links-panel > button { width: 100%; border: 0; padding: 15px 16px; background: transparent; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }\n.links-panel > button > div { display: flex; align-items: center; gap: 10px; text-align: left; }\n.links-panel > button b, .links-panel > button small { display: block; }\n.links-panel > button b { font-size: 10px; }\n.links-panel > button small { color: var(--muted); font-size: 8px; }\n.client-links { padding: 0 16px 12px; display: flex; flex-direction: column; }\n.client-links a { padding: 9px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--blue); font-size: 9px; text-decoration: none; }\n.question-panel { background: white; border: 1px solid var(--border); }\n.client-holiday-banner { max-width: 590px; margin: -36px auto 28px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; color: oklch(0.34 0.1 85); background: oklch(0.96 0.05 92); border: 1px solid oklch(0.86 0.09 90); border-radius: 11px; text-align: left; }\n.client-holiday-banner svg { flex: 0 0 auto; margin-top: 1px; }\n.client-holiday-banner b, .client-holiday-banner span { display: block; }\n.client-holiday-banner b { font-size: 11px; margin-bottom: 2px; }\n.client-holiday-banner span { font-size: 9px; line-height: 1.5; }\n.holiday-question-note { margin: 12px 0 14px; padding: 10px; display: flex; gap: 8px; align-items: flex-start; color: oklch(0.4 0.09 80); background: oklch(0.96 0.045 90); border-radius: 9px; font-size: 9px; line-height: 1.5; }\n.holiday-question-note svg { flex: 0 0 auto; }\n.partner-contact { color: var(--muted); font-size: 8px; text-align: center; }\n.client-footer { max-width: 1180px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; }\n.client-footer a { text-decoration: none; }\n.client-skeleton { width: min(680px, 80vw); height: 220px; }\n\n@media (max-width: 980px) {\n .auth-page { grid-template-columns: .85fr 1.15fr; }\n .auth-brand { padding: 36px; }\n .auth-statement h1 { font-size: 3.3rem; }\n .app-shell { grid-template-columns: 72px minmax(0, 1fr); }\n .sidebar { padding-inline: 10px; }\n .sidebar > .brand span:last-child, .sidebar nav button:not(.active) { font-size: 0; }\n .sidebar nav button { justify-content: center; padding: 0; }\n .sidebar nav button.active { font-size: 0; }\n .sidebar nav button .icon { width: 19px; height: 19px; }\n .sidebar-foot > a { justify-content: center; font-size: 0; }\n .account { grid-template-columns: 34px; justify-content: center; }\n .account div, .account button { display: none; }\n .directory-layout { grid-template-columns: 1fr; }\n .directory-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-layout { grid-template-columns: 1fr; }\n .branding-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-preview { width: min(520px, calc(100% - 60px)); }\n .client-progress-block { border-radius: 0; }\n .client-grid { gap: 40px; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); }\n}\n\n@media (max-width: 720px) {\n .auth-page { display: block; background: var(--sidebar); }\n .auth-brand { min-height: auto; padding: 24px; }\n .auth-statement, .auth-foot { display: none; }\n .auth-panel { min-height: calc(100vh - 86px); padding: 30px 20px 60px; border-radius: 16px 16px 0 0; align-items: start; }\n .auth-card { margin-top: 26px; }\n .app-shell { display: block; }\n .sidebar { position: static; width: 100%; height: 66px; padding: 0 15px; flex-direction: row; align-items: center; }\n .sidebar > .brand { padding: 0; margin: 0; }\n .sidebar > .brand span:last-child { display: inline; font-size: 14px; }\n .sidebar nav { display: none; }\n .sidebar-foot { margin: 0 0 0 auto; }\n .sidebar-foot > a { display: none; }\n .account { padding: 0; margin: 0; border: 0; display: flex; }\n .account div { display: block; }\n .account button { display: grid; }\n .workspace-head, .page-heading { padding: 23px 18px 18px; display: block; }\n .workspace-head h1, .page-heading h1 { font-size: 22px; }\n .workspace-head span, .page-heading span { display: block; max-width: 48ch; }\n .head-actions { margin-top: 16px; }\n .search { width: auto; flex: 1; }\n .mobile-nav { position: sticky; z-index: var(--z-sticky); top: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; background: white; border-bottom: 1px solid var(--border); padding: 0 8px; }\n .mobile-nav button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }\n .mobile-nav button.active { color: var(--ink); border-color: var(--blue); }\n .kanban { height: auto; min-height: calc(100vh - 210px); padding: 16px; }\n .kanban-column { flex-basis: 264px; }\n .modal, .modal-wide { width: 100vw; max-width: none; height: min(92vh, 900px); max-height: none; margin: auto 0 0; border-radius: 14px 14px 0 0; }\n .modal-inner, .detail { height: 100%; min-height: 0; }\n .form-grid { grid-template-columns: 1fr; }\n .form-grid > .field:nth-of-type(3), .full { grid-column: auto; }\n .detail-header { grid-template-columns: minmax(0, 1fr) 38px; padding: 16px; gap: 12px; }\n .detail-progress { grid-column: 1 / -1; grid-row: 2; }\n .detail-tabs { padding: 0 6px; }\n .detail-section, .timeline-wrap { padding: 16px; }\n .payment-summary { grid-template-columns: 1fr; }\n .access-grid { grid-template-columns: 1fr; }\n .reply-box { flex-direction: column; align-items: stretch; }\n .directory-tabs { padding-inline: 16px; }\n .directory-form, .directory-list { padding: 20px 16px; }\n .directory-row { grid-template-columns: 38px minmax(0, 1fr); padding: 11px 0; }\n .row-actions { grid-column: 2; }\n .permission-grid { grid-template-columns: 1fr; }\n .branding-form { padding: 22px 16px; }\n .branding-preview { width: auto; margin: 20px 16px; }\n .client-nav { height: 66px; padding: 0 17px; }\n .client-hero { padding: 48px 20px 30px; }\n .client-blocked .client-nav { padding-inline: 17px; }\n .client-blocked .client-hero { padding-inline: 20px; }\n .client-hero h1 { font-size: 2.45rem; }\n .client-progress-block { padding: 24px 20px; }\n .client-grid { grid-template-columns: 1fr; padding: 50px 18px 60px; gap: 40px; }\n .client-aside { grid-row: 1; }\n .client-main { grid-row: 2; }\n .client-stages { font-size: 7px; }\n}\n\n@media (max-width: 450px) {\n .account div { display: none; }\n .head-actions { align-items: stretch; flex-direction: column; }\n .head-actions .button { width: 100%; }\n .form-row { flex-direction: column; align-items: stretch; }\n .form-row > .field { flex-basis: auto; }\n .copy-field, .inline-form { flex-direction: column; align-items: stretch; }\n .credential-list, .people-grid { grid-template-columns: 1fr; }\n .client-dates { gap: 10px; }\n .client-progress-copy b { font-size: 22px; }\n .client-progress-block { padding-inline: 16px; }\n .client-next-milestone { grid-template-columns: 32px minmax(0, 1fr); }\n .client-next-milestone time { grid-column: 2; min-width: 0; text-align: left; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }\n}\n\n/* Interaction, detail and theme refinements */\nhtml[data-theme=\"dark\"] {\n --bg: oklch(0.16 0.012 245);\n --surface: oklch(0.205 0.014 245);\n --surface-raised: oklch(0.185 0.013 245);\n --ink: oklch(0.94 0.008 245);\n --muted: oklch(0.72 0.014 245);\n --faint: oklch(0.55 0.012 245);\n --border: oklch(0.29 0.014 245);\n --border-strong: oklch(0.37 0.016 245);\n --blue: oklch(0.7 0.11 245);\n --blue-dark: oklch(0.64 0.12 245);\n --blue-soft: oklch(0.25 0.04 245);\n --lemon-soft: oklch(0.28 0.07 115);\n --danger-soft: oklch(0.25 0.055 25);\n --success-soft: oklch(0.25 0.045 145);\n color-scheme: dark;\n}\nhtml[data-theme=\"dark\"] input,\nhtml[data-theme=\"dark\"] textarea,\nhtml[data-theme=\"dark\"] select,\nhtml[data-theme=\"dark\"] .workspace-head,\nhtml[data-theme=\"dark\"] .page-heading,\nhtml[data-theme=\"dark\"] .kanban-card,\nhtml[data-theme=\"dark\"] .modal,\nhtml[data-theme=\"dark\"] .quick-form,\nhtml[data-theme=\"dark\"] .payment-summary > div,\nhtml[data-theme=\"dark\"] .directory,\nhtml[data-theme=\"dark\"] .client-portal,\nhtml[data-theme=\"dark\"] .question-panel,\nhtml[data-theme=\"dark\"] .client-milestones > div > span,\nhtml[data-theme=\"dark\"] .person,\nhtml[data-theme=\"dark\"] .mobile-nav {\n background: var(--bg);\n}\nhtml[data-theme=\"dark\"] .person-main { background: var(--lemon-soft); }\nhtml[data-theme=\"dark\"] .client-blocked .client-hero { background: oklch(0.22 0.045 38); border-bottom-color: oklch(0.36 0.07 42); }\nhtml[data-theme=\"dark\"] .client-blocked-notice { color: oklch(0.95 0.025 60); background: oklch(0.3 0.07 42); border-color: oklch(0.48 0.1 45); }\nhtml[data-theme=\"dark\"] .client-holiday-banner,\nhtml[data-theme=\"dark\"] .holiday-question-note { color: oklch(0.9 0.05 90); background: oklch(0.28 0.045 85); border-color: oklch(0.42 0.07 85); }\nhtml[data-theme=\"dark\"] .segmented button.active,\nhtml[data-theme=\"dark\"] .mini-progress {\n background: var(--surface-raised);\n}\nhtml[data-theme=\"dark\"] .field > span,\nhtml[data-theme=\"dark\"] fieldset legend { color: var(--ink); }\nhtml[data-theme=\"dark\"] .button-primary { color: white; }\n\n.phone-field { min-width: 0; }\n.form-row > .phone-field { flex: 1 1 260px; }\n.phone-control {\n display: grid;\n grid-template-columns: 108px minmax(0, 1fr);\n gap: 8px;\n width: 100%;\n min-width: 0;\n align-items: stretch;\n}\n.phone-control select, .phone-control input:not([type=\"hidden\"]) { height: 42px; min-width: 0; margin: 0; }\n.phone-control select { padding-inline: 7px; font-size: 11px; }\n.phone-control input[type=\"hidden\"] { display: none; }\n.theme-toggle {\n min-height: 36px;\n border: 1px solid currentColor;\n border-radius: 9px;\n padding: 0 10px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: transparent;\n color: inherit;\n font-size: 10px;\n cursor: pointer;\n opacity: .82;\n}\n.theme-toggle:hover { opacity: 1; }\n.auth-panel { position: relative; }\n.auth-theme { position: absolute; top: 24px; right: 24px; color: var(--muted); }\n.sidebar .theme-toggle { width: 100%; justify-content: flex-start; color: oklch(0.7 0.02 245); border-color: oklch(1 0 0 / .12); margin-bottom: 8px; }\n.sidebar nav .attention-nav b { margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: oklch(0.27 0.1 65); background: oklch(0.9 0.12 85); font-size: 9px; }\n.head-actions .button-primary { min-width: 118px; color: white; white-space: nowrap; box-shadow: 0 5px 15px oklch(0.4 0.1 245 / .18); }\n.head-actions .new-project-button {\n color: oklch(0.16 0.02 115) !important;\n background: var(--lemon);\n box-shadow: 0 6px 18px oklch(0.72 0.16 115 / .22);\n}\n.head-actions .new-project-button span { color: oklch(0.16 0.02 115) !important; }\n.head-actions .new-project-button:hover { background: oklch(0.83 0.19 115); }\n\n.detail-header { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--border); }\n.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 10px; }\n.detail-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); text-decoration: none; }\n.progress-controls { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 8px; align-items: center; }\n.progress-controls input[type=\"range\"] { padding: 0; min-height: 28px; border: 0; box-shadow: none; accent-color: var(--blue); background: transparent; cursor: pointer; }\n.progress-controls .button { min-height: 32px; padding-inline: 10px; font-size: 10px; }\n.detail-tabs { position: sticky; top: 118px; z-index: 3; background: var(--bg); scrollbar-width: none; }\n.detail-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.detail-tabs button b { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); background: var(--surface); font-size: 8px; }\n.detail-body { min-height: 480px; }\n\n.overview-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: 28px; align-items: start; }\n.overview-form { min-width: 0; }\n.form-section-title { padding: 3px 0 10px; margin: 5px 0 2px; border-bottom: 1px solid var(--border); }\n.form-section-title h3 { font-size: 14px; margin-bottom: 2px; }\n.form-section-title p { color: var(--muted); font-size: 10px; margin: 0; }\n.overview-summary { position: sticky; top: 184px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.overview-summary h3 { font-size: 14px; margin-bottom: 15px; }\n.overview-summary dl { margin: 0; display: flex; flex-direction: column; }\n.overview-summary dl div { padding: 10px 0; display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); }\n.overview-summary dt { color: var(--muted); font-size: 10px; }\n.overview-summary dd { margin: 0; font-size: 11px; font-weight: 650; text-align: right; }\n.notice { margin-top: 14px; padding: 12px; border-left: 3px solid var(--blue); color: var(--muted); background: var(--blue-soft); font-size: 10px; line-height: 1.6; }\n\n.section-toolbar { min-height: 54px; margin-bottom: 17px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }\n.section-toolbar h3 { font-size: 16px; margin-bottom: 3px; }\n.section-toolbar p { color: var(--muted); font-size: 10px; margin: 0; }\n.composer { max-width: 760px; margin: 0 auto 20px; }\n.quick-note-composer { position: relative; }\n.quick-note-composer textarea { width: 100%; }\n.quick-note-hint { display: block; margin-top: 5px; color: var(--faint); font-size: 8px; }\n.quick-note-menu {\n position: absolute;\n z-index: var(--z-dropdown);\n right: 0;\n left: 0;\n top: calc(100% - 17px);\n max-height: 260px;\n padding: 6px;\n overflow: auto;\n border: 1px solid var(--border-strong);\n border-radius: 11px;\n background: var(--bg);\n box-shadow: 0 16px 38px oklch(0.15 0.02 245 / .2);\n}\n.quick-note-menu button {\n width: 100%;\n padding: 10px;\n border: 0;\n border-radius: 8px;\n display: grid;\n grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);\n gap: 12px;\n color: var(--ink);\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.quick-note-menu button.active { background: var(--blue-soft); }\n.quick-note-menu button span { min-width: 0; display: flex; align-items: baseline; gap: 7px; }\n.quick-note-menu button b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }\n.quick-note-menu button small { color: var(--blue); font-size: 8px; font-weight: 700; }\n.quick-note-menu button p { margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }\n.quick-note-empty { padding: 16px 12px; color: var(--muted); font-size: 10px; text-align: center; }\n.add-menu { position: relative; flex: 0 0 auto; }\n.add-menu > summary {\n min-height: 36px;\n padding: 0 11px;\n border: 1px solid var(--border);\n border-radius: 9px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n color: var(--ink);\n background: var(--bg);\n font-size: 10px;\n font-weight: 650;\n cursor: pointer;\n list-style: none;\n}\n.add-menu > summary::-webkit-details-marker { display: none; }\n.add-menu[open] > summary { border-color: var(--blue); }\n.popover-form {\n position: absolute;\n right: 0;\n top: 44px;\n z-index: var(--z-dropdown);\n width: min(430px, calc(100vw - 56px));\n padding: 14px;\n border: 1px solid var(--border);\n border-radius: 12px;\n background: var(--bg);\n box-shadow: 0 18px 60px oklch(0.12 0.02 245 / .18);\n}\n.popover-form .quick-form { padding: 0; margin: 0; border: 0; }\n\n.milestone-list, .resource-list, .item-list { border-top: 1px solid var(--border); }\n.milestone-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--border); }\n.milestone-state, .resource-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--surface); }\n.state-active .milestone-state { color: var(--blue); background: var(--blue-soft); }\n.state-complete .milestone-state { color: var(--success); background: var(--success-soft); }\n.milestone-copy header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }\n.milestone-copy h4 { font-size: 12px; margin: 0; }\n.milestone-copy header span { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.milestone-copy header .milestone-undated { color: oklch(0.47 0.13 62); background: oklch(0.95 0.045 78); }\n.milestone-copy p, .milestone-copy small { color: var(--muted); font-size: 9px; margin: 3px 0 0; }\n.milestone-actions { display: flex; align-items: center; gap: 10px; }\n.milestone-actions select { width: 112px; min-height: 34px; padding: 5px 8px; font-size: 9px; }\n.text-action { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 650; cursor: pointer; }\n.text-danger { border: 0; background: transparent; color: var(--danger); font-size: 9px; cursor: pointer; }\n.milestone-date-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--lemon) 42%, var(--border)); border-radius: 11px; display: flex; align-items: flex-start; gap: 10px; background: var(--lemon-soft); }\n.milestone-date-notice > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: oklch(0.4 0.1 115); background: color-mix(in oklab, var(--lemon) 24%, var(--bg)); }\n.milestone-date-notice b { display: block; font-size: 10px; }\n.milestone-date-notice p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }\n.milestone-editor { grid-column: 2 / -1; margin-top: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--surface); }\n.milestone-editor .milestone-description, .milestone-editor .form-actions { grid-column: 1 / -1; }\n.milestone-editor .milestone-visibility { align-self: end; min-height: 42px; }\n.resource-row, .item-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); }\n.resource-row a { color: var(--ink); font-size: 11px; font-weight: 650; text-decoration: none; }\n.resource-row a > span { color: var(--blue); margin-left: 6px; }\n.resource-row p, .item-row p { color: var(--muted); font-size: 9px; margin: 2px 0 0; }\n.credential-card { padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }\n.credential-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }\n.credential-card header > span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.credential-card header > div { min-width: 0; flex: 1; }\n.credential-card header h4 { margin: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card code { color: var(--ink); }\n.secret-row { min-height: 38px; padding: 7px 8px; border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; background: var(--surface); }\n.secret-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }\n.secret-row button { width: 28px; height: 28px; border: 0; border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }\n.secret-row button:hover { color: var(--ink); background: var(--bg); }\n.credential-note { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.credential-card footer { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border); }\n.credential-card footer button, .credential-card footer a { border: 0; padding: 3px 0; display: inline-flex; align-items: center; gap: 4px; color: var(--blue); background: transparent; font-size: 9px; text-decoration: none; cursor: pointer; }\n.credential-card footer .danger-link { margin-left: auto; color: var(--danger); }\n.person a, .partner-contact a { color: var(--blue); font-size: 9px; text-decoration: none; }\n.delay-badge { margin-left: 4px; padding: 2px 6px; border-radius: 999px; color: oklch(0.43 0.12 55); background: oklch(0.95 0.045 78); font-size: 8px; }\n.recipient-source { min-height: 58px; padding: 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: var(--blue); background: var(--blue-soft); }\n.recipient-source b, .recipient-source p, .recipient-source small { display: block; margin: 0; }\n.recipient-source b { color: var(--ink); font-size: 10px; }\n.recipient-source p, .recipient-source small { margin-top: 2px; color: var(--muted); font-size: 9px; }\n.stakeholder-email-options { align-items: center; }\n.schedule-extension { margin-top: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); overflow: hidden; }\n.schedule-extension > summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }\n.schedule-extension > summary span { display: flex; align-items: center; gap: 8px; font-size: 10px; }\n.schedule-extension > form { padding: 14px; border-top: 1px solid var(--border); }\n.visibility-label { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.timeline-reply { margin-top: 12px; margin-left: 10px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: var(--blue-soft); }\n.timeline-reply b { font-size: 9px; }\n.timeline-reply p { margin: 3px 0 0 !important; }\n.notify-check { width: fit-content; padding: 9px 11px; border-radius: 9px; background: var(--blue-soft); color: var(--ink); }\n.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.template-apply { display: flex; align-items: center; gap: 7px; }\n.template-apply select { min-height: 36px; width: 150px; padding-block: 5px; font-size: 10px; }\n.template-apply .button { min-height: 36px; font-size: 10px; }\n.payments-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }\n.subsection-title { margin-bottom: 12px; font-size: 13px; }\n.invoice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.invoice-list { border-top: 1px solid var(--border); }\n.invoice-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); text-decoration: none; }\n.invoice-row > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.invoice-row b { font-size: 11px; }\n.invoice-row p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.invoice-row em { color: var(--blue); font-size: 9px; font-style: normal; }\n.receipt-link { display: inline-block; margin-top: 5px; color: var(--blue); font-size: 9px; font-weight: 650; text-decoration: none; }\n.receipt-link:hover { text-decoration: underline; }\n\n.module-page { min-height: 100%; background: var(--surface-raised); }\n.metric-grid { padding: 24px 30px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.metric-grid article { min-height: 136px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }\n.metric-grid article span { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.metric-grid article b { font-size: 34px; letter-spacing: -.05em; }\n.metric-grid article small { color: var(--muted); font-size: 10px; }\n.metric-grid .north-star { border-color: oklch(0.8 0.12 115); background: var(--lemon-soft); }\n.dashboard-grid { padding: 12px 30px 30px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }\n.dashboard-grid > section { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.section-heading h2 { margin-bottom: 3px; font-size: 15px; }\n.section-heading p { color: var(--muted); font-size: 10px; }\n.status-metrics, .money-metrics { margin-top: 16px; display: flex; flex-direction: column; }\n.status-metrics > div, .money-metrics > div { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border); }\n.status-metrics span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }\n.status-metrics b, .money-metrics b { font-size: 11px; }\n.money-metrics span { color: var(--muted); font-size: 9px; font-weight: 700; }\n.dashboard-overview { padding: 24px 30px 14px; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(430px, 1.35fr); gap: 14px; }\n.momentum-panel, .portfolio-chart, .financial-overview > section { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.momentum-panel { display: flex; align-items: center; gap: 24px; }\n.momentum-gauge { --gauge-value: 0; width: 148px; height: 148px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lemon) calc(var(--gauge-value) * 1%), var(--surface) 0); }\n.momentum-gauge::before { content: \"\"; grid-area: 1 / 1; width: 112px; height: 112px; border-radius: 50%; background: var(--bg); }\n.momentum-gauge > div { z-index: 1; grid-area: 1 / 1; text-align: center; }\n.momentum-gauge b, .momentum-gauge span { display: block; }\n.momentum-gauge b { font-size: 28px; letter-spacing: -.035em; }\n.momentum-gauge span { color: var(--muted); font-size: 9px; }\n.momentum-copy { min-width: 0; }\n.momentum-copy h2 { margin-bottom: 4px; font-size: 17px; }\n.momentum-copy > p { max-width: 34ch; color: var(--muted); font-size: 10px; }\n.momentum-copy dl { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 18px; }\n.momentum-copy dt { color: var(--muted); font-size: 8px; }\n.momentum-copy dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }\n.status-stack { height: 10px; margin: 18px 0 20px; display: flex; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-stack > i { min-width: 0; height: 100%; }\n.chart-backlog { background: var(--faint); }\n.chart-todo { background: var(--blue); }\n.chart-in-progress { background: var(--lemon); }\n.chart-blocked { background: var(--warning); }\n.chart-done { background: var(--success); }\n.status-chart-rows { display: flex; flex-direction: column; gap: 8px; }\n.status-chart-rows > div { display: grid; grid-template-columns: 92px minmax(90px, 1fr) 24px; gap: 10px; align-items: center; }\n.status-chart-rows span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.status-chart-rows > div > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-chart-rows > div > div i { display: block; height: 100%; border-radius: inherit; }\n.status-chart-rows b { font-size: 10px; text-align: right; }\n.dashboard-questions { margin: 0 30px 14px; padding: 19px 20px; border: 1px solid oklch(0.82 0.1 80); border-radius: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--lemon-soft); }\n.question-signal { width: 58px; height: 58px; border-radius: 50%; display: grid; grid-template-columns: 1fr 1fr; place-items: center; color: oklch(0.27 0.09 75); background: var(--lemon); }\n.question-signal svg { grid-column: 1 / -1; grid-row: 1; }\n.question-signal b { grid-column: 1 / -1; grid-row: 1; margin: 27px 0 0 28px; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--sidebar); font-size: 9px; }\n.question-summary h2 { margin-bottom: 3px; font-size: 15px; }\n.question-summary > p { margin-bottom: 10px; color: oklch(0.36 0.045 80); font-size: 10px; }\n.question-summary > div { display: flex; flex-wrap: wrap; gap: 7px; }\n.question-summary > div span { min-width: 150px; padding: 6px 8px; border-radius: 7px; background: oklch(1 0 0 / .52); }\n.question-summary > div b, .question-summary > div small { display: block; }\n.question-summary > div b { font-size: 9px; }\n.question-summary > div small { margin-top: 1px; color: oklch(0.4 0.035 80); font-size: 7px; }\n.financial-overview { padding: 0 30px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n.financial-overview .money-metrics > div { min-height: 44px; }\n.inbox-count { padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 10px; }\n.inbox-count.has-items { color: oklch(0.38 0.1 55); background: oklch(0.94 0.055 75); }\n.question-inbox { max-width: 900px; margin: 0 auto; padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 12px; }\n.inbox-question { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.inbox-question > header { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 11px; align-items: start; }\n.inbox-question > header button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }\n.inbox-question > header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }\n.inbox-question > header time { color: var(--faint); font-size: 8px; }\n.inbox-question blockquote { margin: 15px 0; padding: 13px 14px; border: 0; border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 11px; line-height: 1.65; }\n.inbox-question form { padding-top: 14px; border-top: 1px solid var(--border); }\n.inbox-answer-actions { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }\n\n.builder-layout { padding: 26px 30px 30px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }\n.builder-form { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.builder-form h2, .proposal-list > h2 { font-size: 16px; margin-bottom: 4px; }\n.builder-form > p { color: var(--muted); font-size: 10px; margin-bottom: 18px; }\n.proposal-list, .template-list { display: flex; flex-direction: column; gap: 10px; }\n.proposal-row { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }\n.proposal-main { width: 100%; padding: 16px; border: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; background: transparent; cursor: pointer; }\n.proposal-main span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.proposal-main h3 { margin: 3px 0; font-size: 13px; }\n.proposal-main p { margin: 0; color: var(--muted); font-size: 9px; }\n.proposal-detail { padding: 16px; border-top: 1px solid var(--border); background: var(--surface); }\n.proposal-detail pre { max-height: 300px; overflow: auto; white-space: pre-wrap; color: var(--muted); font: 10px/1.65 Inter, sans-serif; }\n.inline-builder { margin: 22px 30px 6px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-grid { padding: 22px 30px 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.recurring-card { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-card.inactive { opacity: .6; }\n.recurring-card > header { display: flex; justify-content: space-between; gap: 18px; }\n.recurring-card header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.recurring-card h2 { margin: 4px 0; font-size: 16px; }\n.recurring-card header p { color: var(--muted); font-size: 10px; }\n.recurring-card header > b { white-space: nowrap; font-size: 16px; }\n.recurring-card dl { margin: 12px 0; display: flex; gap: 18px; flex-wrap: wrap; }\n.recurring-card dl div { min-width: 100px; }\n.recurring-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-card dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.recurring-dates { margin: 14px 0 4px; padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 10px; background: var(--surface); }\n.recurring-dates small, .recurring-dates b { display: block; }\n.recurring-dates small { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-dates b { margin-top: 2px; font-size: 10px; }\n.recurring-actions { margin: 14px 0 0; display: flex; align-items: center; gap: 14px; }\n.recurring-actions .button { min-height: 34px; }\n.recurring-edit { margin-top: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }\n.recurring-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }\n.recurring-details > summary { color: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; }\n.recurring-detail-copy { margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.recurring-detail-copy p { margin: 3px 0; }\n.hour-log { display: grid; grid-template-columns: 120px 80px minmax(120px, 1fr) auto; gap: 7px; }\n.hour-log input { min-width: 0; min-height: 36px; padding: 6px 8px; font-size: 9px; }\n.hour-log .button { min-height: 36px; font-size: 9px; }\n.log-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }\n.log-history summary { color: var(--blue); font-size: 9px; cursor: pointer; }\n.log-history div { margin-top: 8px; display: flex; gap: 10px; font-size: 9px; }\n.log-history span { color: var(--muted); }\n.log-history h3 { font-size: 10px; margin: 0 0 4px; }\n.holiday-layout { padding: 24px 30px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\n.weekday-picker { margin: 0 0 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }\n.weekday-picker label { min-width: 0; cursor: pointer; }\n.weekday-picker input { position: absolute; opacity: 0; pointer-events: none; }\n.weekday-picker span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 650; }\n.weekday-picker label.selected span { color: white; background: var(--blue); border-color: var(--blue); }\n.holiday-list { margin: 14px 30px 30px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.holiday-list > header { margin-bottom: 10px; }\n.holiday-list h2 { font-size: 16px; }\n.holiday-list > header p { color: var(--muted); font-size: 10px; }\n.holiday-list article { min-height: 62px; padding: 10px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--border); }\n.holiday-date { width: 42px; height: 42px; display: grid; place-content: center; text-align: center; border-radius: 10px; color: white; background: var(--blue); }\n.holiday-date b { font-size: 13px; line-height: 1; }\n.holiday-date span { margin-top: 2px; font-size: 7px; text-transform: uppercase; }\n.holiday-list article h3 { font-size: 11px; }\n.holiday-list article p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.template-list article { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.template-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.template-list article > header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.template-list article > header button { border: 0; padding: 3px; background: transparent; font-size: 9px; cursor: pointer; }\n.template-list h3 { margin: 5px 0; font-size: 14px; }\n.template-list p, .template-list li { color: var(--muted); font-size: 10px; }\n.quick-note-library { display: flex; flex-direction: column; gap: 11px; }\n.quick-note-library article { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.quick-note-library article > header { display: flex; justify-content: space-between; gap: 14px; align-items: start; }\n.quick-note-library article > header span { color: var(--blue); font-size: 8px; font-weight: 750; }\n.quick-note-library article > header h3 { margin: 3px 0 0; font-size: 14px; }\n.quick-note-copy { margin: 13px 0; color: var(--muted); font-size: 10px; line-height: 1.65; white-space: pre-wrap; }\n.quick-note-variables { margin: -2px 0 12px; display: flex; flex-wrap: wrap; gap: 5px; }\n.quick-note-variables span { padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--blue); background: var(--blue-soft); font: 700 8px/1.2 ui-monospace, monospace; }\n.quick-note-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }\n.shortcut-input { display: flex; align-items: stretch; }\n.shortcut-input > span { min-width: 34px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-right: 0; border-radius: 8px 0 0 8px; color: var(--blue); background: var(--surface); font-weight: 750; }\n.shortcut-input input { border-radius: 0 8px 8px 0; }\n.ai-project-builder { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--blue-soft); overflow: hidden; }\n.ai-project-builder > summary { min-height: 48px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; }\n.ai-project-builder > summary span { display: flex; gap: 8px; align-items: center; }\n.ai-project-builder > div { padding: 14px; border-top: 1px solid var(--border); }\n.ai-result { margin: 10px 0 0; color: var(--success); font-size: 10px; font-weight: 650; }\n\n.client-milestone-event .node-milestone { color: oklch(0.28 0.08 115); background: var(--lemon); box-shadow: 0 0 0 4px var(--lemon-soft); }\n.milestone-callout { margin-top: 6px; padding: 16px; border: 1px solid oklch(0.82 0.12 115); border-left: 4px solid var(--lemon); border-radius: 10px; background: var(--lemon-soft); }\n.milestone-callout small { color: oklch(0.42 0.09 115); font-size: 8px; font-weight: 750; text-transform: uppercase; }\n.milestone-callout h3 { margin: 4px 0 !important; font-size: 15px !important; }\n.client-chat { min-width: 0; }\n.chat-bubble { max-width: min(88%, 540px); margin-top: 9px; padding: 11px 13px; border-radius: 12px; }\n.chat-bubble small { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 700; }\n.chat-bubble p { margin: 0; color: inherit; }\n.chat-client { margin-right: auto; border-bottom-left-radius: 3px; background: var(--surface); }\n.chat-team { margin-left: auto; border-bottom-right-radius: 3px; color: var(--ink); background: var(--blue-soft); }\n.chat-status { display: block; width: fit-content; margin-top: 8px; color: var(--warning); font-size: 8px; font-weight: 700; }\n.chat-status.resolved { color: var(--success); }\n\n.portal-access-card { margin-bottom: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }\n.portal-access-card > div { min-width: 0; }\n.portal-access-card span { display: block; color: var(--muted); font-size: 8px; margin-bottom: 4px; }\n.portal-access-card code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }\n.portal-access-card strong { font-size: 20px; letter-spacing: .1em; }\n.color-control { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }\n.color-control input[type=\"color\"] { min-height: 42px; padding: 4px; cursor: pointer; }\n.project-cc-settings .check > span,\n.project-cc-settings .check b,\n.project-cc-settings .check small { display: block; }\n.project-cc-settings .check small { margin-top: 2px; color: var(--muted); font-size: 8px; }\n.cc-directory .directory-row { min-height: 96px; }\n.fallback-note { color: var(--muted); background: var(--surface); padding: 10px 12px; border-radius: 9px; font-size: 10px; }\n.partner-brand-editor { padding: 0 30px 30px; background: var(--surface-raised); }\n.editor-close { display: flex; justify-content: flex-end; padding: 18px 0 0; }\n\n.client-nav-actions { display: flex; align-items: center; gap: 12px; }\n.client-nav-actions > button:last-child { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }\n\n@media (max-width: 980px) {\n .overview-layout { grid-template-columns: 1fr; }\n .overview-summary { position: static; }\n .partner-brand-editor { padding-inline: 20px; }\n .dashboard-grid { grid-template-columns: 1fr 1fr; }\n .dashboard-grid > section:first-child { grid-column: 1 / -1; }\n .dashboard-overview { grid-template-columns: 1fr; }\n .sidebar nav .attention-nav b { margin-left: 0; font-size: 9px; }\n .builder-layout { grid-template-columns: 1fr; }\n .holiday-layout { grid-template-columns: 1fr; }\n .hour-log { grid-template-columns: 1fr 1fr; }\n}\n\n@media (max-width: 720px) {\n .sidebar .theme-toggle { display: none; }\n .mobile-nav { overflow-x: auto; scrollbar-width: none; background: var(--bg); }\n .mobile-nav .mobile-theme { margin-left: auto; min-width: 42px; display: grid; place-items: center; padding: 0; }\n .detail-header { top: 0; min-height: auto; }\n .detail-title h2 { white-space: normal; font-size: 19px; }\n .detail-meta { gap: 4px 10px; }\n .detail-tabs { top: 135px; }\n .detail-tabs button { min-height: 44px; padding-inline: 10px; }\n .section-toolbar { align-items: center; }\n .popover-form { position: fixed; inset: auto 10px 10px; width: auto; max-height: 72vh; overflow: auto; }\n .milestone-row { grid-template-columns: 32px minmax(0, 1fr); }\n .milestone-actions { grid-column: 2; justify-content: space-between; }\n .milestone-editor { grid-column: 1 / -1; grid-template-columns: 1fr; }\n .milestone-editor .milestone-description, .milestone-editor .form-actions { grid-column: auto; }\n .resource-row, .item-row { grid-template-columns: 34px minmax(0, 1fr); }\n .resource-row > button, .item-row > button { grid-column: 2; justify-self: start; }\n .portal-access-card { grid-template-columns: 1fr; }\n .client-nav-actions .theme-toggle span { display: none; }\n .client-nav-actions .theme-toggle { padding: 0; width: 36px; justify-content: center; }\n .client-footer { gap: 20px; }\n .partner-brand-editor { padding-inline: 16px; }\n .metric-grid, .dashboard-grid, .recurring-grid { padding-inline: 16px; }\n .metric-grid { grid-template-columns: 1fr; }\n .dashboard-grid, .recurring-grid { grid-template-columns: 1fr; }\n .dashboard-grid > section:first-child { grid-column: auto; }\n .dashboard-overview { padding: 18px 16px 12px; }\n .momentum-panel { align-items: flex-start; }\n .dashboard-questions { margin-inline: 16px; grid-template-columns: auto minmax(0, 1fr); }\n .dashboard-questions > .button { grid-column: 1 / -1; width: 100%; }\n .financial-overview { padding-inline: 16px; grid-template-columns: 1fr; }\n .question-inbox { padding: 18px 16px 30px; }\n .inbox-answer-actions { align-items: stretch; flex-direction: column; }\n .inbox-answer-actions .button { width: 100%; }\n .page-skeleton { padding-inline: 16px; }\n .builder-layout { padding: 18px 16px; }\n .quick-note-menu button { grid-template-columns: 1fr; gap: 3px; }\n .holiday-layout { padding: 18px 16px 6px; }\n .holiday-list { margin-inline: 16px; }\n .inline-builder { margin-inline: 16px; }\n .payments-layout { grid-template-columns: 1fr; }\n .toolbar-actions { justify-content: stretch; width: 100%; }\n .template-apply { width: 100%; }\n .template-apply select { flex: 1; width: auto; }\n}\n\n@media (max-width: 450px) {\n .auth-theme { top: 18px; right: 18px; }\n .section-toolbar { align-items: stretch; flex-direction: column; }\n .add-menu > summary { width: 100%; justify-content: center; }\n .client-brand small { display: none; }\n .client-nav-actions > button:last-child { font-size: 0; gap: 0; width: 34px; height: 34px; justify-content: center; }\n .client-footer { align-items: flex-start; flex-direction: column; }\n .hour-log { grid-template-columns: 1fr; }\n .momentum-panel { flex-direction: column; }\n .momentum-gauge { width: 132px; height: 132px; align-self: center; }\n .momentum-gauge::before { width: 100px; height: 100px; }\n .status-chart-rows > div { grid-template-columns: 82px minmax(70px, 1fr) 22px; }\n .dashboard-questions { grid-template-columns: 1fr; text-align: center; }\n .question-signal { margin: 0 auto; }\n .question-summary > div { justify-content: center; }\n .inbox-question > header { grid-template-columns: 8px minmax(0, 1fr); }\n .inbox-question > header time { grid-column: 2; }\n .phone-control { grid-template-columns: 102px minmax(0, 1fr); gap: 6px; }\n .row-actions { flex-wrap: wrap; }\n}\n\r\n",[],[247,239],"frontend","28900d68-462c-4c83-95a9-de6bc239f4f9","index.tsx","019ffcf4-d6e8-704a-9308-2f44898ffe2c",["D",1786655332090],"/** @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();\n",[],[247,249],"b63d2518-8257-4b5f-976d-66e65a916a3c","index.html","019ffcf4-d6e8-704a-9308-28994b62a9cd",["D",1786655332090],"\n\n \n \n \n \n \n AFLABS PM\n \n \n \n \n \n

\n \n \n \n\n",[],[247,256],"26d3a6e2-b36e-4c7b-87b6-244b01dd8754","growth.css","019ffcf4-d6e8-704a-9308-272e3a0e39e6",7,["D",1786655924695],2,":root {\n --growth-green: oklch(0.57 0.14 145);\n --growth-amber: oklch(0.72 0.15 75);\n --growth-red: oklch(0.55 0.19 25);\n --growth-violet: oklch(0.52 0.11 285);\n --growth-page-gutter: 30px;\n --faint: oklch(0.56 0.012 245);\n --success-ink: oklch(0.50 0.14 145);\n --warning-ink: oklch(0.50 0.15 75);\n}\n\n.growth-page {\n min-width: 0;\n min-height: 100%;\n padding: 28px var(--growth-page-gutter) 40px;\n display: grid;\n align-content: start;\n gap: 20px;\n background: var(--bg);\n}\n.growth-page-head {\n min-height: 76px;\n padding-bottom: 20px;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 28px;\n border-bottom: 1px solid var(--border);\n}\n.growth-page-head > div:first-child { max-width: 720px; }\n.growth-page-head h1 {\n margin: 0 0 7px;\n color: var(--ink);\n font-size: clamp(25px, 3vw, 34px);\n font-weight: 750;\n letter-spacing: -.03em;\n line-height: 1.08;\n text-wrap: balance;\n}\n.growth-page-head > div > span {\n display: block;\n max-width: 70ch;\n color: var(--muted);\n font-size: 13px;\n line-height: 1.55;\n}\n.growth-button {\n min-height: 40px;\n padding: 0 16px;\n border: 0;\n border-radius: 10px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n background: var(--ink);\n color: var(--bg);\n cursor: pointer;\n font: inherit;\n font-size: 12px;\n font-weight: 750;\n line-height: 1;\n transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;\n}\n.growth-button:hover { transform: translateY(-1px); }\n.growth-button:focus-visible { outline: 3px solid color-mix(in oklch, var(--blue) 22%, transparent); outline-offset: 2px; }\n.growth-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }\n.growth-button-secondary { border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); }\n.growth-button-danger { background: var(--danger); color: white; }\n\n.growth-panel {\n min-width: 0;\n padding: 22px;\n border: 1px solid var(--border);\n border-radius: 14px;\n background: var(--surface-raised);\n}\n.growth-panel > h2 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.015em; }\n.growth-panel > p { max-width: 70ch; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }\n.growth-stack { display: grid; gap: 16px; }\n.growth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }\n.growth-span-2 { grid-column: 1 / -1; }\n.growth-form-actions { display: flex; justify-content: flex-end; padding-top: 2px; }\n.growth-field {\n min-width: 0;\n display: grid;\n align-content: start;\n gap: 7px;\n color: var(--ink);\n font-size: 11px;\n font-weight: 700;\n}\n.growth-field > span { line-height: 1.25; }\n.growth-field small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }\n.growth-field input,\n.growth-field select,\n.growth-field textarea,\n.growth-filters input,\n.growth-filters select,\n.availability-form input,\n.availability-form select,\n.availability-form textarea,\n.followup-form input,\n.attach-form select,\n.message-form textarea,\n.invoice-item input,\n.partner-picker {\n width: 100%;\n min-height: 42px;\n padding: 9px 11px;\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n background: var(--bg);\n color: var(--ink);\n font: inherit;\n font-size: 12px;\n outline: 0;\n}\n.growth-field textarea,\n.message-form textarea { resize: vertical; line-height: 1.55; }\n.growth-field input:focus,\n.growth-field select:focus,\n.growth-field textarea:focus,\n.growth-filters input:focus,\n.growth-filters select:focus,\n.availability-form input:focus,\n.availability-form select:focus,\n.followup-form input:focus,\n.message-form textarea:focus,\n.invoice-item input:focus {\n border-color: var(--blue);\n box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 12%, transparent);\n}\n.growth-field input::placeholder,\n.growth-field textarea::placeholder,\n.growth-filters input::placeholder,\n.message-form textarea::placeholder { color: var(--faint); }\n.growth-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 11px; line-height: 1.4; }\n.growth-check input { margin-top: 2px; accent-color: var(--blue); }\n.growth-muted { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }\n.growth-section-title {\n margin: 0 0 18px;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 18px;\n}\n.growth-section-title h2,\n.growth-section-title h3,\n.growth-section-title p { margin: 0; }\n.growth-section-title h2 { font-size: 18px; letter-spacing: -.015em; }\n.growth-section-title h3 { font-size: 15px; }\n.growth-section-title p { max-width: 64ch; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }\n.growth-section-title > b {\n min-width: 30px;\n height: 30px;\n padding: 0 8px;\n border-radius: 8px;\n display: grid;\n place-items: center;\n background: var(--surface);\n color: var(--blue);\n font-size: 10px;\n}\n.growth-empty {\n min-height: 180px;\n padding: 32px;\n border: 1px dashed var(--border-strong);\n border-radius: 14px;\n display: grid;\n place-items: center;\n align-content: center;\n gap: 7px;\n color: var(--muted);\n text-align: center;\n}\n.growth-empty h3,\n.growth-empty p { margin: 0; }\n.growth-empty h3 { color: var(--ink); font-size: 14px; }\n.growth-empty p { max-width: 46ch; font-size: 11px; line-height: 1.5; }\n.growth-loading { padding: 30px; display: grid; gap: 10px; }\n.growth-loading i {\n height: 68px;\n border-radius: 12px;\n background: linear-gradient(90deg, var(--surface), var(--surface-raised), var(--surface));\n background-size: 220% 100%;\n animation: growth-shimmer 1.5s linear infinite;\n}\n@keyframes growth-shimmer { to { background-position: -220% 0; } }\n\n/* Markdown and project context */\n.markdown-block {\n max-width: 72ch;\n color: var(--ink);\n font-size: 13px;\n line-height: 1.72;\n overflow-wrap: anywhere;\n}\n.markdown-block > :first-child { margin-top: 0; }\n.markdown-block > :last-child { margin-bottom: 0; }\n.markdown-block h1,\n.markdown-block h2,\n.markdown-block h3 {\n margin: 1.6em 0 .55em;\n color: var(--ink);\n letter-spacing: -.02em;\n line-height: 1.25;\n}\n.markdown-block h1 { font-size: 24px; }\n.markdown-block h2 { padding-bottom: 7px; border-bottom: 1px solid var(--border); font-size: 18px; }\n.markdown-block h3 { font-size: 15px; }\n.markdown-block p,\n.markdown-block ul,\n.markdown-block ol,\n.markdown-block table { margin: .7em 0; }\n.markdown-block ul,\n.markdown-block ol { padding-left: 22px; }\n.markdown-block li + li { margin-top: .25em; }\n.markdown-block blockquote { margin: 1em 0; padding: 1px 0 1px 14px; border-left: 1px solid var(--blue); color: var(--muted); }\n.markdown-block code { padding: 2px 5px; border-radius: 5px; background: var(--surface); font-size: .9em; }\n.markdown-block pre { overflow: auto; padding: 14px; border-radius: 10px; background: var(--surface); }\n.markdown-block pre code { padding: 0; background: transparent; }\n.markdown-block a { color: var(--blue); text-underline-offset: 2px; }\n.markdown-block table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.markdown-block th,\n.markdown-block td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }\n.project-markdown-field textarea { min-height: 260px; font-family: ui-monospace, \"Cascadia Code\", Consolas, monospace; font-size: 12px; line-height: 1.6; }\n.project-markdown-notes {\n margin-top: 22px;\n padding: 0;\n border: 1px solid var(--border);\n border-radius: 12px;\n overflow: hidden;\n background: var(--bg);\n}\n.project-markdown-notes > header {\n min-height: 58px;\n padding: 12px 15px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--surface);\n}\n.project-markdown-notes > header h4,\n.project-markdown-notes > header p { margin: 0; }\n.project-markdown-notes > header h4 { font-size: 12px; }\n.project-markdown-notes > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.project-markdown-notes > header > span { color: var(--blue); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }\n.project-markdown-notes > .markdown-block { padding: 20px; }\n\n/* Commercials */\n.commercial-preview {\n grid-column: 1 / -1;\n overflow: hidden;\n border: 1px solid color-mix(in oklch, var(--success) 35%, var(--border));\n border-radius: 12px;\n background: var(--surface-raised);\n}\n.commercial-preview header,\n.commercial-preview footer,\n.commercial-preview > div {\n min-height: 42px;\n padding: 9px 14px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n font-size: 11px;\n}\n.commercial-preview header { background: color-mix(in oklch, var(--success-soft) 45%, var(--surface-raised)); }\n.commercial-preview header span { color: var(--success-ink); font-weight: 800; }\n.commercial-preview > div span { color: var(--muted); }\n.commercial-preview footer { border-bottom: 0; background: var(--surface); font-size: 12px; }\n.commercial-preview footer strong { color: var(--success-ink); font-size: 17px; }\n\n/* Dashboard additions */\n.growth-dashboard { margin-top: 18px; display: grid; gap: 14px; }\n.growth-metrics {\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n overflow: hidden;\n background: var(--surface-raised);\n}\n.growth-metrics article { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); display: grid; gap: 5px; }\n.growth-metrics article:last-child { border-right: 0; }\n.growth-metrics article > span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }\n.growth-metrics article > b { overflow: hidden; font-size: 20px; letter-spacing: -.025em; text-overflow: ellipsis; }\n.growth-metrics article small { color: var(--muted); font-size: 10px; }\n.growth-metrics article.risk > b { color: var(--danger); }\n.growth-metrics article.attention > b { color: var(--warning-ink); }\n.partner-target-strip {\n padding: 18px;\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: minmax(180px, 1.1fr) repeat(4, minmax(120px, 1fr));\n gap: 20px;\n background: var(--surface-raised);\n}\n.partner-target-strip header span { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }\n.partner-target-strip header h3 { margin: 4px 0; font-size: 16px; }\n.partner-target-strip header small { color: var(--muted); font-size: 10px; }\n.target-progress { min-width: 0; display: grid; align-content: center; gap: 7px; }\n.target-progress > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }\n.target-progress > div:first-child span { color: var(--muted); }\n.target-progress > div:nth-child(2) { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.target-progress > div:nth-child(2) i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }\n.target-progress small { color: var(--muted); font-size: 9px; }\n\n/* Leads */\n.lead-create { border-color: color-mix(in oklch, var(--blue) 30%, var(--border)); }\n.pipeline-eagle { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.pipeline-eagle > header {\n min-height: 66px;\n padding: 15px 18px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n}\n.pipeline-eagle > header h2,\n.pipeline-eagle > header p { margin: 0; }\n.pipeline-eagle > header h2 { font-size: 17px; }\n.pipeline-eagle > header p { margin-top: 4px; color: var(--muted); font-size: 10px; }\n.pipeline-eagle > header > b { color: var(--blue); font-size: 10px; }\n.pipeline-track { min-width: 780px; padding: 0 12px; display: grid; grid-template-columns: repeat(8, minmax(92px, 1fr)); border-bottom: 1px solid var(--border); }\n.pipeline-stage { min-width: 0; padding: 13px 9px 12px; border-right: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }\n.pipeline-stage:last-child { border-right: 0; }\n.pipeline-stage span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 750; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; }\n.pipeline-stage b { font-size: 11px; }\n.pipeline-stage i { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: var(--blue); opacity: .24; }\n.stage-contacted i { opacity: .34; }\n.stage-qualified i { opacity: .46; }\n.stage-discovery i { opacity: .58; }\n.stage-proposal i { opacity: .7; }\n.stage-negotiation i { opacity: .82; }\n.stage-won i { background: var(--success); opacity: 1; }\n.stage-lost i { background: var(--danger); opacity: .62; }\n.pipeline-columns {\n min-width: 1480px;\n padding: 12px;\n display: grid;\n grid-template-columns: repeat(8, minmax(170px, 1fr));\n gap: 8px;\n}\n.pipeline-columns > section { min-height: 118px; padding: 9px; border-radius: 10px; background: var(--surface); }\n.pipeline-columns > section > header { margin-bottom: 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }\n.pipeline-columns button {\n width: 100%;\n padding: 9px;\n border: 1px solid transparent;\n border-radius: 9px;\n display: grid;\n gap: 4px;\n background: var(--surface-raised);\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n}\n.pipeline-columns button + button { margin-top: 6px; }\n.pipeline-columns button:hover { border-color: var(--border-strong); }\n.pipeline-columns button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }\n.pipeline-columns button small { color: var(--muted); font-size: 9px; }\n.pipeline-eagle { overflow-x: auto; scrollbar-width: thin; }\n.lead-filter-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.lead-filter-panel > header {\n min-height: 52px;\n padding: 11px 14px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--surface);\n}\n.lead-filter-panel > header h2,\n.lead-filter-panel > header p { margin: 0; }\n.lead-filter-panel > header h2 { font-size: 13px; }\n.lead-filter-panel > header p { margin-top: 2px; color: var(--muted); font-size: 9px; }\n.lead-filter-panel > header button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }\n.growth-filters { padding: 13px 14px 14px; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .7fr)); gap: 10px; }\n.growth-filters label { min-width: 0; display: grid; gap: 5px; }\n.growth-filters label > span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }\n.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }\n.lead-card {\n min-width: 0;\n min-height: 180px;\n padding: 16px;\n border: 1px solid var(--border);\n border-radius: 13px;\n display: grid;\n align-content: start;\n gap: 10px;\n background: var(--surface-raised);\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n transition: border-color 180ms ease-out, transform 180ms ease-out;\n}\n.lead-card:hover { border-color: var(--blue); transform: translateY(-1px); }\n.lead-card:focus-visible { outline: 3px solid color-mix(in oklch, var(--blue) 18%, transparent); outline-offset: 2px; }\n.lead-card header,\n.lead-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.lead-priority,\n.lead-card header em { font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.lead-priority { color: var(--muted); }\n.lead-card header em { color: var(--blue); }\n.priority-high,\n.priority-urgent { color: var(--danger); }\n.lead-card h3,\n.lead-card p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }\n.lead-card h3 { font-size: 16px; letter-spacing: -.015em; }\n.lead-card p { color: var(--muted); font-size: 11px; }\n.lead-card dl { margin: 1px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.lead-card dl div { padding: 9px; border-radius: 9px; background: var(--surface); }\n.lead-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.lead-card dd { margin: 3px 0 0; font-size: 11px; font-weight: 750; }\n.lead-card footer { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }\n.lead-card footer b { color: var(--ink); }\n.lead-card footer b.overdue { color: var(--danger); }\n\n.growth-drawer-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; justify-content: flex-end; background: color-mix(in oklch, var(--ink) 36%, transparent); }\n.growth-drawer { width: min(820px, 96vw); height: 100%; overflow: auto; background: var(--bg); box-shadow: -20px 0 55px color-mix(in oklch, var(--ink) 18%, transparent); }\n.growth-drawer-head {\n position: sticky;\n z-index: 5;\n top: 0;\n min-height: 74px;\n padding: 15px 20px;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--bg);\n}\n.growth-drawer-head span { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }\n.growth-drawer-head h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.02em; }\n.growth-drawer-head button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-raised); color: var(--muted); cursor: pointer; font-size: 20px; }\n.lead-detail { padding: 20px; display: grid; gap: 16px; }\n.lead-contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }\n.lead-contact-strip > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 11px; display: grid; gap: 3px; background: var(--surface-raised); }\n.lead-contact-strip span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }\n.lead-contact-strip b,\n.lead-contact-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lead-contact-strip b { font-size: 11px; }\n.lead-contact-strip small { color: var(--muted); font-size: 9px; }\n.growth-accordion { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }\n.growth-accordion > summary { min-height: 46px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--ink); font-size: 11px; font-weight: 750; }\n.growth-accordion > form { padding: 16px; border-top: 1px solid var(--border); }\n.lead-two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }\n.followup-form { display: grid; grid-template-columns: minmax(180px, 1fr) 170px auto; gap: 8px; }\n.followup-list,\n.lead-projects { margin-top: 13px; display: grid; gap: 7px; }\n.followup-list article { min-height: 49px; padding: 9px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }\n.followup-list article:last-child { border-bottom: 0; }\n.followup-list article > span { width: 18px; color: var(--success-ink); font-size: 15px; }\n.followup-list article > div { min-width: 0; flex: 1; display: grid; gap: 2px; }\n.followup-list article b { font-size: 10px; }\n.followup-list article small { color: var(--muted); font-size: 9px; }\n.followup-list article button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 750; }\n.followup-list article.overdue small { color: var(--danger); }\n.lead-projects button { width: 100%; min-height: 54px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; }\n.lead-projects button > div { min-width: 0; flex: 1; display: grid; gap: 3px; }\n.lead-projects button b,\n.lead-projects button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lead-projects button b { font-size: 10px; }\n.lead-projects small { color: var(--muted); font-size: 9px; }\n.lead-projects em { color: var(--blue); font-size: 9px; font-style: normal; }\n.project-state { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }\n.state-in-progress { background: var(--blue); }\n.state-done { background: var(--success); }\n.state-blocked { background: var(--danger); }\n.attach-form { display: flex; gap: 8px; }\n.attach-form select { flex: 1; }\n.timeline-panel { padding-bottom: 6px; }\n.lead-timeline { position: relative; max-width: 700px; padding-left: 23px; display: grid; }\n.lead-timeline::before { position: absolute; top: 8px; bottom: 28px; left: 7px; width: 1px; background: var(--border-strong); content: \"\"; }\n.lead-timeline article { position: relative; padding: 0 0 18px 15px; }\n.timeline-node { position: absolute; top: 9px; left: -20px; width: 10px; height: 10px; border: 3px solid var(--surface-raised); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }\n.lead-timeline article > div:last-child { padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }\n.lead-timeline header,\n.lead-timeline footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.lead-timeline header { justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; }\n.lead-timeline h4 { margin: 7px 0 0; font-size: 12px; }\n.lead-timeline p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; white-space: pre-wrap; }\n.lead-timeline footer { margin-top: 10px; color: var(--muted); font-size: 8px; }\n.lead-timeline footer em { padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--blue); font-style: normal; }\n\n/* Conversations */\n.chat-page { min-height: 100vh; }\n.chat-create-panel { padding: 20px 22px; }\n.chat-layout {\n min-height: 590px;\n height: min(720px, calc(100vh - 190px));\n overflow: hidden;\n border: 1px solid var(--border);\n border-radius: 14px;\n display: grid;\n grid-template-columns: 300px minmax(0, 1fr);\n background: var(--surface-raised);\n}\n.thread-list { min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface); }\n.thread-list-head { position: sticky; z-index: 2; top: 0; min-height: 60px; padding: 13px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface-raised); }\n.thread-list-head h2,\n.thread-list-head p { margin: 0; }\n.thread-list-head h2 { font-size: 14px; }\n.thread-list-head p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.thread-list > button {\n position: relative;\n width: 100%;\n min-height: 88px;\n padding: 13px 15px;\n border: 0;\n border-bottom: 1px solid var(--border);\n display: grid;\n align-content: center;\n gap: 4px;\n background: transparent;\n color: var(--ink);\n cursor: pointer;\n text-align: left;\n}\n.thread-list > button:hover { background: color-mix(in oklch, var(--blue-soft) 38%, transparent); }\n.thread-list > button.active { background: var(--surface-raised); box-shadow: inset 2px 0 0 var(--blue); }\n.thread-list > button > span { overflow: hidden; color: var(--blue); font-size: 8px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; letter-spacing: .04em; }\n.thread-list h3,\n.thread-list p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }\n.thread-list h3 { padding-right: 12px; font-size: 12px; }\n.thread-list p { color: var(--muted); font-size: 9px; }\n.thread-list small { color: var(--faint); font-size: 8px; }\n.thread-list button.unread h3 { font-weight: 850; }\n.thread-list button.unread i { position: absolute; top: 17px; right: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }\n.thread-list .growth-empty { min-height: 240px; margin: 12px; padding: 20px; }\n.chat-thread { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); }\n.chat-thread > header { min-height: 72px; padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface-raised); }\n.chat-thread > header span { color: var(--blue); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.chat-thread > header h2,\n.chat-thread > header p { margin: 0; }\n.chat-thread > header h2 { margin-top: 4px; font-size: 17px; letter-spacing: -.015em; }\n.chat-thread > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.chat-thread > header > b { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 8px; white-space: nowrap; }\n.message-list { min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }\n.message-list article { align-self: flex-start; width: fit-content; max-width: min(70ch, 78%); padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--surface); }\n.message-list article.mine { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: var(--blue-soft); }\n.message-list article > div { display: flex; justify-content: space-between; gap: 18px; font-size: 8px; }\n.message-list article time { color: var(--muted); }\n.message-list article p { margin: 6px 0 0; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }\n.message-form { padding: 12px 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; background: var(--surface-raised); }\n.message-form label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }\n.message-form textarea { min-height: 68px; max-height: 160px; background: var(--bg); }\n\n/* Meetings */\n.meeting-quota { min-width: 150px; padding: 10px 12px; border-radius: 10px; display: grid; justify-items: end; background: var(--surface); }\n.meeting-quota b { font-size: 17px; }\n.meeting-quota span { color: var(--muted); font-size: 9px; }\n.availability-form { display: grid; grid-template-columns: 110px 1fr 1fr 1.3fr auto; gap: 8px; }\n.slot-list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }\n.slot-chip { padding: 6px 8px 6px 10px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.slot-chip b { color: var(--success-ink); }\n.slot-chip.blocked b { color: var(--danger); }\n.slot-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }\n.meeting-layout { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(380px, 1.15fr); gap: 14px; align-items: start; }\n.booking-list { display: grid; }\n.booking-list article { padding: 13px 0; border-bottom: 1px solid var(--border); display: grid; gap: 7px; }\n.booking-list article:last-child { border-bottom: 0; }\n.booking-list header,\n.booking-list footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.booking-list header span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; }\n.booking-list time,\n.booking-list p { color: var(--muted); font-size: 9px; }\n.booking-list h3,\n.booking-list p { margin: 0; }\n.booking-list h3 { font-size: 12px; }\n.booking-list footer a { color: var(--blue); font-size: 10px; font-weight: 750; }\n\n/* MoU and targets */\n.partner-picker-field { min-width: 240px; display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.partner-picker { min-height: 42px; text-transform: none; letter-spacing: 0; }\n.mou-document {\n width: min(840px, 100%);\n margin-inline: auto;\n overflow: hidden;\n border: 1px solid var(--border-strong);\n border-radius: 14px;\n background: var(--surface-raised);\n}\n.mou-document > header { min-height: 112px; padding: 26px 34px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: var(--surface); }\n.mou-document > header span { color: var(--blue); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }\n.mou-document > header h2 { margin: 8px 0 0; font-size: 23px; letter-spacing: -.025em; }\n.mou-document > header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }\n.mou-document > header b { color: var(--muted); font-size: 10px; white-space: nowrap; }\n.mou-document > section { padding: 28px 34px; }\n.mou-document > section + section { border-top: 1px solid var(--border); }\n.mou-document > section h3 { margin: 0 0 16px; font-size: 15px; }\n.mou-document .markdown-block { max-width: 68ch; }\n.target-board { width: min(960px, 100%); margin-inline: auto; }\n.target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }\n.mou-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }\n.mou-admin-grid > :last-child { grid-column: 1 / -1; }\n.target-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }\n.target-history article { padding: 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 4px; background: var(--bg); }\n.target-history span { color: var(--blue); font-size: 9px; font-weight: 800; }\n.target-history b { font-size: 10px; }\n.target-history p { margin: 0; color: var(--muted); font-size: 10px; }\n.target-history small { color: var(--faint); font-size: 8px; }\n\n/* AI pitch */\n.idea-layout { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 14px; align-items: start; }\n.idea-builder { position: sticky; top: 18px; }\n.idea-builder .growth-form-grid { grid-template-columns: 1fr; }\n.idea-builder .growth-span-2 { grid-column: auto; }\n.idea-builder textarea { min-height: 104px; }\n.budget-input { display: grid; grid-template-columns: 94px 1fr; gap: 7px; }\n.idea-list { min-height: 520px; padding: 0; overflow: hidden; }\n.idea-list > .growth-section-title { min-height: 64px; margin: 0; padding: 15px 18px; border-bottom: 1px solid var(--border); align-items: center; background: var(--surface); }\n.idea-card { background: var(--surface-raised); }\n.idea-card + .idea-card { border-top: 1px solid var(--border); }\n.idea-card > button { width: 100%; min-height: 78px; padding: 14px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }\n.idea-card > button:hover { background: var(--surface); }\n.idea-card > button span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.idea-card h3 { margin: 5px 0 3px; font-size: 13px; }\n.idea-card small { color: var(--muted); font-size: 9px; }\n.idea-card > button > b { color: var(--blue); font-size: 9px; text-transform: uppercase; }\n.idea-output { padding: 24px 24px 20px; border-top: 1px solid var(--border); background: var(--bg); }\n.idea-output .markdown-block { max-width: 74ch; }\n.idea-output footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }\n.idea-output footer span { color: var(--success-ink); font-size: 10px; font-weight: 800; }\n.prompt-settings summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; }\n.prompt-settings summary span { display: grid; gap: 3px; }\n.prompt-settings summary b { font-size: 12px; }\n.prompt-settings summary small { color: var(--muted); font-size: 9px; font-weight: 500; }\n.prompt-settings summary em { color: var(--blue); font-size: 9px; font-style: normal; font-weight: 750; text-transform: uppercase; }\n.prompt-settings form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }\n\n/* Invoice composer */\n.invoice-composer { min-width: 0; display: grid; gap: 22px; }\n.invoice-composer-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }\n.invoice-composer-head h3,\n.invoice-composer-head p { margin: 0; }\n.invoice-composer-head h3 { font-size: 19px; letter-spacing: -.02em; }\n.invoice-composer-head p { margin-top: 5px; color: var(--muted); font-size: 10px; }\n.invoice-composer-head > span { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; }\n.invoice-line-section,\n.invoice-settings { display: grid; gap: 12px; }\n.invoice-section-head,\n.invoice-settings > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }\n.invoice-section-head h4,\n.invoice-section-head p,\n.invoice-settings h4,\n.invoice-settings p { margin: 0; }\n.invoice-section-head h4,\n.invoice-settings h4 { font-size: 13px; }\n.invoice-section-head p,\n.invoice-settings p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.invoice-item-head,\n.invoice-item { display: grid; grid-template-columns: minmax(200px, 1fr) 76px 116px 118px 58px; align-items: center; gap: 8px; }\n.invoice-item-head { padding: 0 2px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.invoice-items { border-top: 1px solid var(--border); }\n.invoice-item { min-height: 58px; padding: 8px 2px; border-bottom: 1px solid var(--border); }\n.invoice-item label { min-width: 0; }\n.invoice-item label > span { display: none; }\n.invoice-item input { min-width: 0; }\n.invoice-item > b { text-align: right; font-size: 10px; }\n.growth-icon-danger { border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; }\n.invoice-settings { padding: 16px; border-radius: 12px; background: var(--surface); }\n.invoice-milestones { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }\n.invoice-milestones legend { padding: 0 5px; font-size: 10px; font-weight: 750; }\n.invoice-milestones > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }\n.invoice-composer-footer { padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }\n.invoice-totals { width: min(360px, 100%); display: grid; }\n.invoice-totals > div { padding: 5px 0; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }\n.invoice-totals .total { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13px; }\n.invoice-totals strong { color: var(--success-ink); font-size: 18px; }\n.invoice-add-menu { position: relative; }\n.invoice-add-menu[open] { z-index: 120; }\n.invoice-add-menu[open]::before { position: fixed; z-index: 110; inset: 0; background: color-mix(in oklch, var(--ink) 38%, transparent); content: \"\"; }\n.invoice-composer-wrap {\n position: fixed;\n z-index: 120;\n top: 28px;\n right: 28px;\n bottom: 28px;\n width: min(840px, calc(100vw - 56px));\n overflow: auto;\n padding: 24px;\n border-radius: 15px;\n background: var(--surface-raised);\n box-shadow: 0 22px 70px color-mix(in oklch, var(--ink) 24%, transparent);\n}\n.growth-partner-editor { padding: 20px; border: 1px solid var(--border); border-radius: 13px; display: grid; gap: 18px; background: var(--surface-raised); }\n.growth-partner-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }\n.growth-partner-editor > header h3,\n.growth-partner-editor > header p { margin: 0; }\n.growth-partner-editor > header h3 { font-size: 15px; }\n.growth-partner-editor > header p { max-width: 58ch; margin-top: 4px; color: var(--muted); font-size: 10px; }\n.growth-partner-editor > header span { color: var(--blue); font-size: 9px; font-weight: 750; }\n.growth-partner-editor > footer { display: flex; justify-content: flex-end; }\n\n/* Partner permission editor */\n.permission-package-fieldset,\n.custom-permission-fieldset { margin: 0; padding: 0; border: 0; }\n.permission-package-fieldset > legend,\n.custom-permission-fieldset > legend { margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 750; }\n.permission-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.permission-package-grid > label {\n min-width: 0;\n min-height: 102px;\n padding: 12px;\n border: 1px solid var(--border);\n border-radius: 11px;\n display: flex;\n align-items: flex-start;\n gap: 9px;\n background: var(--bg);\n cursor: pointer;\n}\n.permission-package-grid > label.selected { border-color: var(--blue); background: var(--blue-soft); }\n.permission-package-grid input { margin-top: 2px; accent-color: var(--blue); }\n.permission-package-grid span { min-width: 0; display: grid; gap: 5px; }\n.permission-package-grid b { font-size: 11px; }\n.permission-package-grid small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }\n.custom-permission-fieldset { padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }\n.partner-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.partner-permission-grid .check { min-height: 38px; padding: 8px 9px; border-radius: 9px; align-items: center; background: var(--bg); }\n.partner-permission-editor { padding: 0 0 22px; border-bottom: 1px solid var(--border); }\n.partner-permission-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }\n.partner-permission-editor > header h3,\n.partner-permission-editor > header p { margin: 0; }\n.partner-permission-editor > header h3 { font-size: 17px; }\n.partner-permission-editor > header p { margin-top: 4px; color: var(--muted); font-size: 10px; }\n.partner-permission-editor > header > span { padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 750; }\n.partner-permission-editor > footer { display: flex; gap: 8px; }\n\n/* Proposal workspace */\n.proposal-workspace .page-heading p { display: none; }\n.proposal-layout { padding: 20px 30px 36px; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }\n.proposal-builder,\n.proposal-library { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.proposal-builder { position: sticky; top: 18px; padding: 22px; }\n.proposal-builder > header h2,\n.proposal-builder > header p { margin: 0; }\n.proposal-builder > header h2 { font-size: 18px; letter-spacing: -.015em; }\n.proposal-builder > header p { margin: 5px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n.proposal-builder textarea { min-height: 300px; }\n.proposal-library { overflow: hidden; }\n.proposal-library > header { min-height: 66px; padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); }\n.proposal-library > header h2,\n.proposal-library > header p { margin: 0; }\n.proposal-library > header h2 { font-size: 17px; }\n.proposal-library > header p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.proposal-row + .proposal-row { border-top: 1px solid var(--border); }\n.proposal-main { width: 100%; min-height: 82px; padding: 14px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }\n.proposal-main:hover { background: var(--surface); }\n.proposal-main span { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.proposal-main h3,\n.proposal-main p { margin: 0; }\n.proposal-main h3 { margin-top: 4px; font-size: 13px; }\n.proposal-main p { margin-top: 3px; color: var(--muted); font-size: 9px; }\n.proposal-row.open .proposal-main { background: var(--surface); }\n.proposal-detail { padding: 0 20px 20px; background: var(--surface); }\n.proposal-document { max-height: 520px; overflow: auto; padding: 22px; border-radius: 11px; background: var(--bg); }\n.proposal-detail > footer { padding-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }\n.proposal-converted { color: var(--success-ink); font-size: 10px; font-weight: 750; }\n\n/* Project filters */\n.project-filter-panel { margin: 16px 22px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }\n.project-filter-panel-head { min-height: 46px; padding: 9px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); }\n.project-filter-panel-title { min-width: 0; display: flex; align-items: center; gap: 9px; }\n.project-filter-panel-title > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }\n.project-filter-panel-title > strong { font-size: 11px; white-space: nowrap; }\n.project-filter-panel-title > strong small { color: var(--muted); font-size: 9px; font-weight: 550; }\n.project-filter-panel-title > b { padding: 3px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 8px; font-weight: 800; }\n.project-filter-clear { padding: 5px 3px; border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 9px; font-weight: 750; }\n.project-filter-controls { padding: 12px 13px 13px; display: grid; grid-template-columns: repeat(4, minmax(145px, 190px)); justify-content: start; gap: 10px; }\n.project-filter-controls label { min-width: 0; display: grid; gap: 5px; }\n.project-filter-controls label > span { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }\n.project-filter-controls select { width: 100%; min-height: 36px; padding: 0 31px 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; font-size: 10px; outline: 0; }\n.project-filter-controls select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 12%, transparent); }\n.project-filter-panel + .kanban { height: calc(100vh - 234px); }\n\n@media (max-width: 1180px) {\n .growth-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .growth-metrics article:nth-child(2) { border-right: 0; }\n .growth-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }\n .partner-target-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .partner-target-strip header { grid-column: 1 / -1; }\n .growth-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .idea-layout,\n .proposal-layout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }\n .project-filter-controls { grid-template-columns: repeat(2, minmax(145px, 190px)); }\n}\n@media (max-width: 900px) {\n .growth-page { --growth-page-gutter: 20px; padding-top: 22px; }\n .lead-two-col,\n .meeting-layout,\n .idea-layout,\n .proposal-layout { grid-template-columns: 1fr; }\n .idea-builder,\n .proposal-builder { position: static; }\n .proposal-layout { padding-inline: 20px; }\n .mou-admin-grid { grid-template-columns: 1fr; }\n .mou-admin-grid > :last-child { grid-column: auto; }\n .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .chat-layout { grid-template-columns: 270px minmax(0, 1fr); }\n .invoice-item-head,\n .invoice-item { grid-template-columns: minmax(180px, 1fr) 70px 105px 105px 52px; }\n}\n@media (max-width: 700px) {\n .growth-page { --growth-page-gutter: 16px; padding-top: 18px; gap: 16px; }\n .growth-page-head { min-height: 0; padding-bottom: 16px; align-items: stretch; flex-direction: column; gap: 14px; }\n .growth-page-head .growth-button { width: 100%; }\n .growth-form-grid,\n .lead-contact-strip,\n .target-grid,\n .growth-metrics,\n .partner-target-strip,\n .permission-package-grid,\n .partner-permission-grid,\n .invoice-milestones > div { grid-template-columns: 1fr; }\n .growth-span-2 { grid-column: auto; }\n .growth-panel { padding: 17px; }\n .growth-filters { grid-template-columns: 1fr; }\n .lead-grid { grid-template-columns: 1fr; }\n .growth-drawer { width: 100vw; }\n .lead-detail { padding: 13px; }\n .lead-contact-strip { grid-template-columns: 1fr; }\n .followup-form,\n .availability-form { grid-template-columns: 1fr; }\n .attach-form { flex-direction: column; }\n .chat-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }\n .thread-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); }\n .chat-thread { min-height: 520px; }\n .message-list { padding: 16px; }\n .message-list article { max-width: 90%; }\n .message-form { grid-template-columns: 1fr; }\n .message-form .growth-button { width: 100%; }\n .partner-picker-field { width: 100%; min-width: 0; }\n .mou-document > header { padding: 22px; flex-direction: column; }\n .mou-document > section { padding: 22px; }\n .idea-builder textarea { min-height: 120px; }\n .invoice-composer-wrap { inset: 10px; width: auto; padding: 18px; }\n .invoice-item-head { display: none; }\n .invoice-item { padding: 12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }\n .invoice-item label:first-child { grid-column: 1 / -1; }\n .invoice-item label > span { margin-bottom: 5px; display: block; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }\n .invoice-item > b { align-self: center; text-align: left; }\n .growth-icon-danger { justify-self: end; }\n .invoice-composer-footer { align-items: stretch; flex-direction: column; }\n .invoice-composer-footer .growth-button { width: 100%; }\n .project-filter-panel { margin: 12px 16px 0; }\n .project-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .project-filter-panel + .kanban { height: auto; min-height: calc(100vh - 330px); }\n .proposal-layout { padding: 14px 16px 28px; }\n .proposal-builder { padding: 18px; }\n .proposal-document { padding: 17px; }\n}\n@media (max-width: 480px) {\n .project-filter-panel-head,\n .project-filter-panel-title { align-items: flex-start; }\n .project-filter-panel-title { flex-wrap: wrap; }\n .project-filter-controls { grid-template-columns: 1fr; }\n .pipeline-eagle > header { align-items: flex-start; flex-direction: column; }\n .growth-drawer-head h2 { font-size: 18px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .growth-button,\n .lead-card { transition-duration: 1ms; }\n .growth-button:hover,\n .lead-card:hover { transform: none; }\n .growth-loading i { animation: none; }\n}\n\n\n/* Finish-review corrections */\n.growth-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n}\n.growth-dialog {\n width: auto;\n max-width: none;\n height: 100vh;\n max-height: 100vh;\n margin: 0 0 0 auto;\n padding: 0;\n border: 0;\n overflow: visible;\n background: transparent;\n}\n.growth-dialog::backdrop { background: color-mix(in oklch, var(--ink) 38%, transparent); }\n.growth-dialog .growth-drawer { height: 100vh; }\n.growth-button { min-height: 44px; font-size: 13px; }\n.growth-field { font-size: 12px; }\n.growth-field small,\n.growth-panel > p,\n.growth-section-title p,\n.growth-page-head > div > span { font-size: 12px; }\n.growth-field input,\n.growth-field select,\n.growth-field textarea,\n.growth-filters input,\n.growth-filters select,\n.availability-form input,\n.availability-form select,\n.availability-form textarea,\n.followup-form input,\n.attach-form select,\n.message-form textarea,\n.invoice-item input,\n.partner-picker { min-height: 44px; font-size: 14px; }\n.growth-section-title h3,\n.lead-card h3,\n.chat-thread > header h2,\n.idea-card h3,\n.proposal-main h3 { font-size: 14px; }\n.pipeline-eagle > header p,\n.lead-filter-panel > header p,\n.lead-card p,\n.lead-card footer,\n.lead-card dt,\n.lead-card dd,\n.followup-list article b,\n.followup-list article small,\n.lead-projects button b,\n.lead-projects button small,\n.lead-projects em,\n.lead-timeline header,\n.lead-timeline p,\n.lead-timeline footer,\n.thread-list-head p,\n.thread-list > button > span,\n.thread-list p,\n.thread-list small,\n.chat-thread > header span,\n.chat-thread > header p,\n.chat-thread > header > b,\n.message-list article > div,\n.meeting-quota span,\n.booking-list header span,\n.booking-list time,\n.booking-list p,\n.partner-picker-field,\n.mou-document > header span,\n.mou-document > header p,\n.mou-document > header b,\n.target-history span,\n.target-history b,\n.target-history p,\n.target-history small,\n.idea-card > button span,\n.idea-card small,\n.idea-card > button > b,\n.prompt-settings summary small,\n.prompt-settings summary em,\n.invoice-composer-head p,\n.invoice-composer-head > span,\n.invoice-section-head p,\n.invoice-settings p,\n.invoice-item-head,\n.growth-icon-danger,\n.permission-package-grid small,\n.partner-permission-editor > header p,\n.partner-permission-editor > header > span,\n.proposal-builder > header p,\n.proposal-library > header p,\n.proposal-main span,\n.proposal-main p,\n.proposal-converted,\n.project-filter-panel-title > span,\n.project-filter-panel-title > strong,\n.project-filter-panel-title > strong small,\n.project-filter-panel-title > b,\n.project-filter-clear,\n.project-filter-controls label > span,\n.project-filter-controls select { font-size: 12px; }\n.pipeline-track { min-width: 1040px; grid-template-columns: repeat(8, minmax(120px, 1fr)); }\n.pipeline-stage span,\n.pipeline-stage b,\n.pipeline-columns button strong,\n.pipeline-columns button small { font-size: 12px; }\n.thread-list > button { min-height: 102px; }\n.message-list article p { font-size: 14px; }\n.message-form label { font-size: 12px; }\n.markdown-block { font-size: 14px; }\n.growth-drawer-head button { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 12px; font-weight: 750; }\n.lead-filter-panel > header button,\n.followup-list article button,\n.growth-icon-danger,\n.project-filter-clear { min-height: 40px; padding-inline: 8px; }\n.proposal-convert { display: flex; align-items: flex-end; gap: 8px; }\n.proposal-convert label { min-width: 190px; display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }\n.proposal-convert select { width: 100%; min-height: 44px; padding: 0 34px 0 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }\n\n@media (max-width: 700px) {\n .growth-dialog,\n .growth-dialog .growth-drawer { width: 100vw; }\n .lead-filter-panel > header button,\n .followup-list article button,\n .growth-icon-danger,\n .project-filter-clear { min-width: 44px; min-height: 44px; }\n .proposal-detail > footer,\n .proposal-convert { align-items: stretch; flex-direction: column; }\n .proposal-convert label { min-width: 0; }\n}\n",[],[247,263],"68429be9-b19d-4df9-b07f-7dd4d7facf87","favicon.svg","019ffcf4-d6e8-704a-9308-20cdc2da6fa6",["D",1786655332090],"\n\n",[],[247,272],"d80fbab9-ae45-4bbc-a43a-82f291cb4382","GrowthSuite.tsx","019ffcf4-d6e8-704a-9308-1a52f95c11c4","019ffcf4-d6e8-704a-9308-1fe097c128bc",5,["D",1786655900907],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.7\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.2.4\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n name: string;\n role: string;\n permissions: Record;\n};\n\nasync function api(path: string, options: RequestInit = {}) {\n const headers = { ...(options.body ? { \"Content-Type\": \"application/json\" } : {}), ...(options.headers || {}) };\n const response = await fetch(path, { ...options, headers, cache: \"no-store\" });\n const type = response.headers.get(\"content-type\") || \"\";\n const data = type.includes(\"application/json\") ? await response.json() : await response.text();\n if (!response.ok) throw new Error(data?.error || data || \"Request failed\");\n return data;\n}\nconst post = (path: string, data: any) => api(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any) => api(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string) => api(path, { method: \"DELETE\" });\nconst formData = (form: HTMLFormElement) => Object.fromEntries(new FormData(form));\nconst titleCase = (value: unknown) => String(value || \"\").replaceAll(\"-\", \" \").replace(/\\b\\w/g, (letter) => letter.toUpperCase());\nconst shortDate = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(value)) : \"Not set\";\nconst shortDateTime = (value?: string) => value ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", hour: \"numeric\", minute: \"2-digit\" }).format(new Date(value)) : \"Not set\";\nconst money = (value: unknown, currency = \"INR\") => new Intl.NumberFormat(\"en-IN\", { style: \"currency\", currency, maximumFractionDigits: 2 }).format(Number(value) || 0);\nconst pct = (value: number, total: number) => total > 0 ? Math.min(100, Math.round(value / total * 100)) : 0;\n\nfunction Field({ label, hint, children, className = \"\" }: any) {\n return {label}{children}{hint && {hint}};\n}\nfunction Button({ children, variant = \"\", className = \"\", ...props }: any) {\n return ;\n}\nfunction Empty({ title, text }: any) {\n return

{title}

{text}

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

Loading content

;\n}\nfunction GrowthDialog({ open, close, label, children }: any) {\n const ref = useRef(null);\n useEffect(() => {\n const node = ref.current;\n if (!node) return;\n if (open && !node.open) node.showModal();\n if (!open && node.open) node.close();\n }, [open]);\n return { event.preventDefault(); close(); }} onClick={(event) => { if (event.target === ref.current) close(); }}>{children};\n}\nfunction Progress({ value, total, label }: any) {\n const percent = pct(Number(value), Number(total));\n return
{label}{value} / {total}
{percent}% achieved
;\n}\n\nexport function MarkdownBlock({ value, empty = \"No detailed notes yet.\" }: { value?: string; empty?: string }) {\n const html = useMemo(() => DOMPurify.sanitize(String(marked.parse(value || \"\", { async: false }))), [value]);\n if (!value) return
{empty}
;\n return
;\n}\n\nexport function CommercialPreview({ partnerId, regularCost, partnerCost, currency, taxRate, taxInclusive }: any) {\n const regular = Math.max(0, Number(regularCost) || 0);\n const managed = partnerId ? Math.max(0, Number(partnerCost) || 0) : regular;\n const rate = Math.max(0, Number(taxRate) || 0);\n const tax = taxInclusive ? managed - managed / (1 + rate / 100 || 1) : managed * rate / 100;\n const clientTotal = taxInclusive ? managed : managed + tax;\n const partnerMargin = partnerId ? Math.max(0, managed - regular) : 0;\n return
\n
Commercial preview{money(clientTotal, currency)}
\n
Regular delivery cost{money(regular, currency)}
\n {partnerId &&
Partner-managed client cost{money(managed, currency)}
}\n {partnerId &&
Partner commercial spread{money(partnerMargin, currency)}
}\n
{taxInclusive ? \"Tax included in cost\" : \"Tax added\"} · {rate}%{money(tax, currency)}
\n
Client invoice total{money(clientTotal, currency)}
\n
;\n}\n\nexport function InvoiceComposer({ project, detail, onDone, notify }: any) {\n const [items, setItems] = useState([{ description: \"\", quantity: 1, unit_price: 0 }]);\n const [discount, setDiscount] = useState(0);\n const [arrears, setArrears] = useState(0);\n const [taxRate, setTaxRate] = useState(Number(project.tax_rate) || 0);\n const [busy, setBusy] = useState(false);\n const subtotal = items.reduce((sum, item) => sum + (Number(item.quantity) || 0) * (Number(item.unit_price) || 0), 0);\n const taxable = Math.max(0, subtotal - discount + arrears);\n const tax = taxable * taxRate / 100;\n const total = taxable + tax;\n const update = (index: number, key: string, value: any) => setItems((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, [key]: value } : item));\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n const data: any = formData(event.currentTarget);\n data.milestone_ids = new FormData(event.currentTarget).getAll(\"milestone_ids\");\n data.items = items;\n data.discount = discount;\n data.arrears = arrears;\n data.tax_rate = taxRate;\n await post(\"/api/projects/\" + project.id + \"/invoices\", data);\n notify(\"Itemized invoice created\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return
\n
\n
Create invoice
Build a clear, itemized document for {project.title}.
\n {project.currency}\n
\n
\n
Line items
Add each deliverable or charge separately.
\n
DescriptionQtyUnit priceAmount
\n
{items.map((item, index) =>
\n Description update(index, \"description\", event.target.value)} required/>\n Quantity update(index, \"quantity\", event.target.value)} required/>\n Unit price update(index, \"unit_price\", event.target.value)} required/>\n {money(Number(item.quantity) * Number(item.unit_price), project.currency)}\n {items.length > 1 ? : }\n
)}
\n
\n
\n
Invoice details
Set timing, adjustments, and tax treatment.
\n
\n \n \n setDiscount(Number(event.target.value))}/>\n setArrears(Number(event.target.value))}/>\n \n setTaxRate(Number(event.target.value))}/>\n
\n
\n {detail.milestones?.length > 0 &&
Covered milestones
{detail.milestones.map((milestone: any) => {milestone.title})}
}\n </Field>\n <footer className=\"invoice-composer-footer\">\n <div className=\"invoice-totals\"><div><span>Subtotal</span><b>{money(subtotal, project.currency)}</b></div><div><span>Discount</span><b>− {money(discount, project.currency)}</b></div><div><span>Arrears</span><b>+ {money(arrears, project.currency)}</b></div><div><span>Tax</span><b>+ {money(tax, project.currency)}</b></div><div className=\"total\"><span>Total</span><strong>{money(total, project.currency)}</strong></div></div>\n <Button disabled={busy || !items.some((item) => item.description && Number(item.quantity) > 0)}>{busy ? \"Creating invoice…\" : \"Create invoice PDF\"}</Button>\n </footer>\n </form>;\n}\n\nexport function PartnerProjectEditor({ project, onDone, notify }: any) {\n const [busy, setBusy] = useState(false);\n const submit = async (event: any) => {\n event.preventDefault();\n setBusy(true);\n try {\n await patch(\"/api/projects/\" + project.id, formData(event.currentTarget));\n notify(\"Project details updated\");\n onDone();\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n return <form className=\"growth-partner-editor\" onSubmit={submit}>\n <header><div><h3>Edit project details</h3><p>Update the delivery summary and working notes your AFLABS team will use.</p></div><span>Partner access</span></header>\n <div className=\"growth-form-grid\">\n <Field label=\"Project title\"><input name=\"title\" defaultValue={project.title} required/></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={project.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line summary\" className=\"growth-span-2\" hint=\"Keep this concise; use the notes field for full context.\"><input name=\"description\" defaultValue={project.description || \"\"} maxLength={240}/></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={project.start_date || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\" defaultValue={project.end_date || \"\"}/></Field>\n <Field label=\"Project email\" className=\"growth-span-2\"><input name=\"contact_email\" type=\"email\" defaultValue={project.contact_email || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"growth-span-2 project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, and code.\"><textarea name=\"markdown_details\" rows={12} defaultValue={project.markdown_details || \"\"} placeholder={\"# Context\\n\\n## Requirements\\n- Add working notes here\"}/></Field>\n </div>\n <footer><Button disabled={busy}>{busy ? \"Saving changes…\" : \"Save project details\"}</Button></footer>\n </form>;\n}\n\nexport function GrowthDashboard({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { api(\"/api/growth/dashboard\").then(setData).catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n return <section className=\"growth-dashboard\">\n <div className=\"growth-metrics\">\n <article><span>Open pipeline</span><b>{money(data.pipeline_value, data.pipeline_currency)}</b><small>{data.leads_total} leads · {data.conversion_rate}% converted</small></article>\n <article className={data.overdue_projects ? \"risk\" : \"\"}><span>Delivery health</span><b>{data.active_projects}</b><small>{data.overdue_projects} overdue projects</small></article>\n <article><span>Upcoming meetings</span><b>{data.upcoming_meetings}</b><small>Booked or confirmed</small></article>\n <article className={data.unread_conversations ? \"attention\" : \"\"}><span>Unread threads</span><b>{data.unread_conversations}</b><small>Scoped partner conversations</small></article>\n </div>\n {actor.actorType === \"partner\" && data.target?.target && <div className=\"partner-target-strip\">\n <header><div><span>Monthly trajectory</span><h3>{data.target.month}</h3></div><small>Stay ahead of the gap before month-end.</small></header>\n <Progress label=\"Leads\" value={data.target.achieved.leads} total={data.target.target.leads_target}/>\n <Progress label=\"Projects\" value={data.target.achieved.projects} total={data.target.target.projects_target}/>\n <Progress label={\"Revenue · \" + data.target.target.revenue_currency} value={data.target.achieved.revenue} total={data.target.target.revenue_target}/>\n <Progress label=\"Meetings used\" value={data.target.achieved.meetings} total={data.target.target.meetings_allowed}/>\n </div>}\n </section>;\n}\n\nfunction LeadWorkspace({ actor, notify, onOpenProject }: any) {\n const [data, setData] = useState<any>(null);\n const [selectedId, setSelectedId] = useState(\"\");\n const [detail, setDetail] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [stage, setStage] = useState(\"\");\n const [partner, setPartner] = useState(\"\");\n const [due, setDue] = useState(\"\");\n const [creating, setCreating] = useState(false);\n const load = async () => setData(await api(\"/api/leads\"));\n const loadDetail = async (id: string) => { setSelectedId(id); setDetail(await api(\"/api/leads/\" + id)); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const visible = data.leads.filter((lead: any) => {\n const haystack = [lead.title, lead.company_name, lead.contact_name, lead.category, lead.partner_name].join(\" \").toLowerCase();\n if (search && !haystack.includes(search.toLowerCase())) return false;\n if (stage && lead.stage !== stage) return false;\n if (partner && String(lead.partner_id || \"\") !== partner) return false;\n if (due === \"overdue\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now())) return false;\n if (due === \"upcoming\" && !(lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) >= Date.now())) return false;\n if (due === \"none\" && lead.next_follow_up_at) return false;\n return true;\n });\n const activeFilterCount = [search, stage, partner, due].filter(Boolean).length;\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setCreating(true);\n try {\n const result = await post(\"/api/leads\", formData(form));\n form.reset();\n setCreateOpen(false);\n await load();\n await loadDetail(result.id);\n notify(\"Lead created\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setCreating(false); }\n };\n const refreshDetail = async () => { await load(); if (selectedId) await loadDetail(selectedId); };\n return <div className=\"growth-page\">\n <header className=\"growth-page-head\"><div><h1>Leads</h1><span>Qualify opportunities, preserve every interaction, and move requirements into delivery.</span></div>{(actor.actorType === \"internal\" || actor.permissions.create_leads) && <Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"New lead\"}</Button>}</header>\n {createOpen && <section className=\"growth-panel lead-create\"><header className=\"growth-section-title\"><div><h2>Create lead</h2><p>Capture the commercial context now; refine requirements as discovery progresses.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={creating}>\n <Field label=\"Lead title\"><input name=\"title\" required placeholder=\"Retail automation opportunity\"/></Field>\n <Field label=\"Customer / brand\"><input name=\"company_name\" required/></Field>\n <Field label=\"Contact name\"><input name=\"contact_name\"/></Field>\n <Field label=\"Contact email\"><input name=\"contact_email\" type=\"email\"/></Field>\n <Field label=\"Contact phone\"><input name=\"contact_phone\"/></Field>\n <Field label=\"Source\"><input name=\"source\" placeholder=\"Referral, event, inbound…\"/></Field>\n <Field label=\"Category\"><input name=\"category\" placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" placeholder=\"B2B, D2C, services…\"/></Field>\n <Field label=\"Expected budget\"><input name=\"expected_budget\" type=\"number\" min=\"0\"/></Field>\n <Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"internal\" && <Field label=\"Owner\"><select name=\"owner_user_id\"><option value=\"\">Me / default</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4}/></Field>\n <Field label=\"Initial use-case hint\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" rows={3}/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={creating}>{creating ? \"Creating lead…\" : \"Create lead\"}</Button></div>\n </form></section>}\n <section className=\"pipeline-eagle\">\n <header><div><h2>Pipeline overview</h2><p>Stage distribution and connected delivery health at a glance.</p></div><b>{data.leads.length} leads</b></header>\n <div className=\"pipeline-track\">{data.stage_order.map((name: string) => <div className={\"pipeline-stage stage-\" + name} key={name}><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b><i/></div>)}</div>\n <div className=\"pipeline-columns\">{data.stage_order.map((name: string) => <section key={name}><header><span>{titleCase(name)}</span><b>{data.stages[name] || 0}</b></header>{data.leads.filter((lead: any) => lead.stage === name).slice(0, 5).map((lead: any) => <button key={lead.id} onClick={() => loadDetail(lead.id)}><strong>{lead.company_name || lead.title}</strong><small>{money(lead.expected_budget, lead.currency)} · {lead.project_count} project{Number(lead.project_count) === 1 ? \"\" : \"s\"}</small></button>)}</section>)}</div>\n </section>\n <section className=\"lead-filter-panel\">\n <header><div><h2>Lead directory</h2><p>{visible.length} of {data.leads.length} leads shown</p></div>{activeFilterCount > 0 && <button type=\"button\" onClick={() => { setSearch(\"\"); setStage(\"\"); setPartner(\"\"); setDue(\"\"); }}>Clear filters</button>}</header>\n <div className=\"growth-filters\">\n <label className=\"growth-filter-search\"><span>Search</span><input aria-label=\"Search leads\" value={search} onChange={(event) => setSearch(event.target.value)} placeholder=\"Company, contact, or category\"/></label>\n <label><span>Stage</span><select aria-label=\"Filter leads by stage\" value={stage} onChange={(event) => setStage(event.target.value)}><option value=\"\">All stages</option>{data.stage_order.map((item: string) => <option key={item} value={item}>{titleCase(item)}</option>)}</select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter leads by partner\" value={partner} onChange={(event) => setPartner(event.target.value)}><option value=\"\">All partners</option>{data.options.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}\n <label><span>Follow-up</span><select aria-label=\"Filter leads by follow-up\" value={due} onChange={(event) => setDue(event.target.value)}><option value=\"\">Any follow-up</option><option value=\"overdue\">Overdue</option><option value=\"upcoming\">Upcoming</option><option value=\"none\">Not scheduled</option></select></label>\n </div>\n </section>\n <div className=\"lead-grid\">{visible.map((lead: any) => <button className=\"lead-card\" key={lead.id} onClick={() => loadDetail(lead.id)}>\n <header><span className={\"lead-priority priority-\" + lead.priority}>{lead.priority}</span><em>{titleCase(lead.stage)}</em></header>\n <h3>{lead.company_name || lead.title}</h3><p>{lead.title}</p>\n <dl><div><dt>Potential</dt><dd>{money(lead.expected_budget, lead.currency)}</dd></div><div><dt>Projects</dt><dd>{lead.project_count}</dd></div></dl>\n <footer><span>{lead.partner_name || \"Direct AFLABS\"}</span><b className={lead.next_follow_up_at && Date.parse(lead.next_follow_up_at) < Date.now() ? \"overdue\" : \"\"}>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"No follow-up\"}</b></footer>\n </button>)}</div>\n {!visible.length && <Empty title=\"No leads match\" text=\"Change the filters or capture a new lead.\"/>}\n <GrowthDialog open={Boolean(selectedId)} label={detail ? \"Lead details for \" + (detail.lead.company_name || detail.lead.title) : \"Loading lead details\"} close={() => { setSelectedId(\"\"); setDetail(null); }}><aside className=\"growth-drawer\">\n <header className=\"growth-drawer-head\"><div><span>{detail ? titleCase(detail.lead.stage) : \"Loading\"}</span><h2>{detail?.lead.company_name || detail?.lead.title || \"Lead details\"}</h2></div><button type=\"button\" aria-label=\"Close lead details\" onClick={() => { setSelectedId(\"\"); setDetail(null); }}>Close</button></header>\n {!detail ? <Loading/> : <LeadDetail detail={detail} actor={actor} notify={notify} refresh={refreshDetail} onOpenProject={onOpenProject}/>}\n </aside></GrowthDialog>\n </div>;\n}\n\nfunction LeadDetail({ detail, actor, notify, refresh, onOpenProject }: any) {\n const lead = detail.lead;\n const editable = actor.actorType === \"internal\" || actor.permissions.edit_leads;\n const convertible = actor.actorType === \"internal\" || (actor.permissions.convert_leads && actor.permissions.create_projects);\n const update = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/leads/\" + lead.id, formData(event.currentTarget)); await refresh(); notify(\"Lead updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const addFollowup = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/leads/\" + lead.id + \"/followups\", formData(form)); form.reset(); await refresh(); notify(\"Follow-up scheduled\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const createProject = async (event: any) => {\n event.preventDefault();\n try {\n const result = await post(\"/api/leads/\" + lead.id + \"/projects\", { ...formData(event.currentTarget), copy_stakeholder: true });\n await refresh();\n notify(\"Project created from lead\");\n onOpenProject(result.id);\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const attach = async (event: any) => {\n event.preventDefault();\n try { await post(\"/api/leads/\" + lead.id + \"/attach-project\", { ...formData(event.currentTarget), copy_stakeholder: true }); await refresh(); notify(\"Project attached to lead\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"lead-detail\">\n <section className=\"lead-contact-strip\"><div><span>Contact</span><b>{lead.contact_name || \"Not set\"}</b><small>{lead.contact_email || lead.contact_phone || \"No contact details\"}</small></div><div><span>Potential</span><b>{money(lead.expected_budget, lead.currency)}</b><small>{lead.partner_name || \"Direct AFLABS\"}</small></div><div><span>Next action</span><b>{lead.next_follow_up_at ? shortDateTime(lead.next_follow_up_at) : \"Not scheduled\"}</b><small>{lead.owner_name || \"No owner\"}</small></div></section>\n {editable && <details className=\"growth-accordion\" open><summary>Lead & requirement details</summary><form className=\"growth-form-grid\" onSubmit={update}>\n <Field label=\"Title\"><input name=\"title\" defaultValue={lead.title} required/></Field>\n <Field label=\"Stage\"><select name=\"stage\" defaultValue={lead.stage}>{[\"new\",\"contacted\",\"qualified\",\"discovery\",\"proposal\",\"negotiation\",\"won\",\"lost\"].map((item) => <option value={item}>{titleCase(item)}</option>)}</select></Field>\n <Field label=\"Priority\"><select name=\"priority\" defaultValue={lead.priority}><option>low</option><option>medium</option><option>high</option><option>urgent</option></select></Field>\n <Field label=\"Budget\"><input name=\"expected_budget\" type=\"number\" defaultValue={lead.expected_budget}/></Field>\n <Field label=\"Next follow-up\"><input name=\"next_follow_up_at\" type=\"datetime-local\" defaultValue={lead.next_follow_up_at?.slice(0,16) || \"\"}/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" defaultValue={lead.partner_id || \"\"}><option value=\"\">Direct AFLABS</option>{detail.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" rows={4} defaultValue={lead.pain_points || \"\"}/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={3} defaultValue={lead.inside_info || \"\"}/></Field>\n <Field label=\"Requirements · Markdown\" className=\"growth-span-2\"><textarea name=\"requirements_markdown\" rows={12} defaultValue={lead.requirements_markdown || \"\"} placeholder=\"# Requirements - Current workflow - Constraints - Success metrics\"/></Field>\n <div className=\"growth-span-2\"><Button>Save lead</Button></div>\n </form></details>}\n <div className=\"lead-two-col\">\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Follow-ups & reminders</h3><p>Keep the next commitment visible.</p></div><b>{detail.followups.filter((item: any) => item.status === \"open\").length} open</b></header>\n {editable && <form className=\"followup-form\" onSubmit={addFollowup}><input name=\"note\" required placeholder=\"Call after budget review\"/><input name=\"due_at\" type=\"datetime-local\" required/><Button>Schedule</Button></form>}\n <div className=\"followup-list\">{detail.followups.map((item: any) => <article className={item.overdue ? \"overdue\" : \"\"}><span>{item.status === \"completed\" ? \"✓\" : \"○\"}</span><div><b>{item.note}</b><small>{shortDateTime(item.due_at)} · {titleCase(item.status)}</small></div>{editable && item.status === \"open\" && <button onClick={async () => { await patch(\"/api/lead-followups/\" + item.id, { completed: true }); await refresh(); }}>Complete</button>}</article>)}</div>\n </section>\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h3>Connected delivery</h3><p>One lead can create several projects.</p></div><b>{detail.projects.length}</b></header>\n <div className=\"lead-projects\">{detail.projects.map((project: any) => <button onClick={() => onOpenProject(project.id)}><span className={\"project-state state-\" + project.status}/><div><b>{project.title}</b><small>{titleCase(project.status)} · {project.progress}% · {project.end_date ? shortDate(project.end_date) : \"No due date\"}</small></div><em>Open ↗</em></button>)}</div>\n {convertible && <details className=\"growth-accordion\"><summary>Create a project from requirements</summary><form className=\"growth-form-grid\" onSubmit={createProject}>\n <Field label=\"Project title\"><input name=\"title\" required defaultValue={lead.company_name ? lead.company_name + \" solution\" : lead.title}/></Field>\n <Field label=\"Type\"><select name=\"project_type\"><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"One-line description\"><input name=\"description\" defaultValue={lead.pain_points?.split(\"\\n\")[0] || \"\"}/></Field>\n <Field label=\"Target date\"><input name=\"end_date\" type=\"date\"/></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" defaultValue={lead.expected_budget || 0}/></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={lead.currency}><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field>\n <Field label=\"Markdown working notes\" className=\"growth-span-2\"><textarea name=\"markdown_details\" rows={8} defaultValue={lead.requirements_markdown || \"\"}/></Field>\n <div className=\"growth-span-2\"><Button>Create linked project</Button></div>\n </form></details>}\n {editable && <details className=\"growth-accordion\"><summary>Attach an existing project</summary><form className=\"attach-form\" onSubmit={attach}><select name=\"project_id\" required><option value=\"\">Select unattached project</option>{detail.options.projects.filter((project: any) => !project.lead_id).map((project: any) => <option value={project.id}>{project.title}</option>)}</select><Button>Attach & copy stakeholder</Button></form></details>}\n </section>\n </div>\n <section className=\"growth-panel timeline-panel\"><header className=\"growth-section-title\"><div><h3>Complete history</h3><p>What happened, when, and how long the lead waited between events.</p></div></header>\n <div className=\"lead-timeline\">{detail.events.map((event: any) => <article key={event.id}><div className=\"timeline-node\"/><div><header><span>{titleCase(event.event_type)}</span><time>{shortDateTime(event.occurred_at)}</time></header><h4>{event.title}</h4>{event.details && <p>{event.details}</p>}<footer><span>{event.actor_name}</span><b>{event.days_ago === 0 ? \"Today\" : event.days_ago + \" days ago\"}</b>{event.days_since_previous > 0 && <em>+{event.days_since_previous} days since prior event</em>}</footer></div></article>)}</div>\n </section>\n </div>;\n}\n\nfunction ChatWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [activeId, setActiveId] = useState(\"\");\n const [thread, setThread] = useState<any>(null);\n const [createOpen, setCreateOpen] = useState(false);\n const [contextType, setContextType] = useState(\"lead\");\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\n const [actionBusy, setActionBusy] = useState<\"\" | \"create\" | \"send\">(\"\");\n const load = async () => setData(await api(\"/api/conversations\"));\n const open = async (id: string) => { setActiveId(id); setThread(await api(\"/api/conversations/\" + id + \"/messages\")); await load(); };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const contexts = contextType === \"lead\" ? data.options.leads : data.options.projects;\n const filteredContexts = partnerId ? contexts.filter((item: any) => String(item.partner_id || \"\") === partnerId) : contexts;\n const create = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"create\");\n try {\n const payload: any = formData(form);\n payload.context_type = contextType;\n payload.partner_id = partnerId;\n const result = await post(\"/api/conversations\", payload);\n form.reset();\n setCreateOpen(false);\n await load();\n await open(result.id);\n notify(\"Conversation thread started\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const send = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"send\");\n try { await post(\"/api/conversations/\" + activeId + \"/messages\", formData(form)); form.reset(); await open(activeId); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page chat-page\"><header className=\"growth-page-head\"><div><h1>Conversations</h1><span>Focused one-to-one threads attached to a lead or project.</span></div><Button onClick={() => setCreateOpen(!createOpen)}>{createOpen ? \"Close form\" : \"Start conversation\"}</Button></header>\n {createOpen && <section className=\"growth-panel chat-create-panel\"><header className=\"growth-section-title\"><div><h2>Start a conversation</h2><p>Choose one partner, one business context, and a clear subject.</p></div></header><form className=\"growth-form-grid\" onSubmit={create} aria-busy={actionBusy === \"create\"}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select value={partnerId} onChange={(event) => setPartnerId(event.target.value)} required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" && <Field label=\"AFLABS person\"><select name=\"internal_user_id\" required><option value=\"\">Select person</option>{data.options.users.map((item: any) => <option value={item.id}>{item.name} · {titleCase(item.role)}</option>)}</select></Field>}\n <Field label=\"Context type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n <Field label=\"Lead / project\"><select name=\"context_id\" required><option value=\"\">Select context</option>{filteredContexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>\n <Field label=\"Thread subject\"><input name=\"subject\" required placeholder=\"Budget approval questions\"/></Field>\n <Field label=\"Opening message\" className=\"growth-span-2\"><textarea name=\"message\" rows={4} required/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"create\" ? \"Starting conversation…\" : \"Start conversation\"}</Button></div>\n </form></section>}\n <div className=\"chat-layout\"><aside className=\"thread-list\"><header className=\"thread-list-head\"><div><h2>Threads</h2><p>{data.conversations.length} conversation{data.conversations.length === 1 ? \"\" : \"s\"}</p></div></header>{data.conversations.map((item: any) => <button key={item.id} className={(activeId === item.id ? \"active \" : \"\") + (item.unread ? \"unread\" : \"\")} onClick={() => open(item.id)}><span>{titleCase(item.context_type)} · {item.context_title}</span><h3>{item.subject}</h3><p>{actor.actorType === \"partner\" ? item.internal_name : item.partner_name}{item.last_message ? \" · \" + item.last_message.slice(0, 72) : \"\"}</p><small>{item.updated_at ? shortDateTime(item.updated_at) : \"\"}</small>{item.unread && <i aria-label=\"Unread\"/>}</button>)}{!data.conversations.length && <Empty title=\"No conversations yet\" text=\"Start a focused thread for a lead or project.\"/>}</aside>\n <section className=\"chat-thread\">{!thread ? <Empty title=\"Select a conversation\" text=\"Choose a thread from the list to see its full context and replies.\"/> : <><header><div><span>{titleCase(thread.conversation.context_type)} conversation</span><h2>{thread.conversation.subject}</h2><p>{thread.conversation.context_title || \"Scoped business context\"}</p></div><b>Private · 1 to 1</b></header><div className=\"message-list\">{thread.messages.map((message: any) => <article key={message.id} className={message.sender_type === actor.actorType && message.sender_id === actor.actorId ? \"mine\" : \"\"}><div><b>{message.sender_name}</b><time>{shortDateTime(message.created_at)}</time></div><p>{message.body}</p></article>)}</div><form className=\"message-form\" onSubmit={send} aria-busy={actionBusy === \"send\"}><label><span>Reply</span><textarea name=\"body\" rows={3} required placeholder=\"Write a focused reply…\"/></label><Button disabled={Boolean(actionBusy)}>{actionBusy === \"send\" ? \"Sending…\" : \"Send reply\"}</Button></form></>}</section>\n </div>\n </div>;\n}\n\nfunction MeetingWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [slot, setSlot] = useState(\"\");\n const [contextType, setContextType] = useState(\"other\");\n const load = async () => setData(await api(\"/api/meetings\"));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const createSlot = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try { await post(\"/api/admin/meeting-slots\", formData(form)); form.reset(); await load(); notify(\"Availability updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n const book = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload: any = formData(form);\n if (slot) [payload.starts_at, payload.ends_at] = slot.split(\"|\");\n payload.context_type = contextType;\n await post(\"/api/meetings\", payload);\n form.reset();\n setSlot(\"\");\n await load();\n notify(\"Meeting booked\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const available = data.slots.filter((item: any) => item.slot_type === \"available\");\n const contexts = contextType === \"lead\" ? data.options.leads : contextType === \"project\" ? data.options.projects : [];\n return <div className=\"growth-page\"><header className=\"growth-page-head\"><div><h1>Meeting booking</h1><span>Book within shared availability without collisions or exceeding the monthly allowance.</span></div>{actor.actorType === \"partner\" && data.target?.target && <div className=\"meeting-quota\"><b>{data.target.achieved.meetings} / {data.target.target.meetings_allowed}</b><span>meetings used this month</span></div>}</header>\n {actor.role === \"admin\" && <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h2>Set or block availability</h2><p>Blocked windows always override available windows.</p></div></header><form className=\"availability-form\" onSubmit={createSlot}><select name=\"slot_type\"><option value=\"available\">Available</option><option value=\"blocked\">Blocked</option></select><input name=\"starts_at\" type=\"datetime-local\" required/><input name=\"ends_at\" type=\"datetime-local\" required/><input name=\"note\" placeholder=\"Office hours or reason\"/><Button>Add window</Button></form><div className=\"slot-list\">{data.slots.map((item: any) => <span className={\"slot-chip \" + item.slot_type}><b>{titleCase(item.slot_type)}</b>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}<button onClick={async () => { await remove(\"/api/admin/meeting-slots/\" + item.id); await load(); }}>×</button></span>)}</div></section>}\n <div className=\"meeting-layout\"><section className=\"growth-panel\"><h2>{actor.actorType === \"partner\" ? \"Book an eligible time\" : \"Book for a partner\"}</h2><form className=\"growth-form-grid\" onSubmit={book}>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\" required><option value=\"\">Select partner</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n {actor.actorType === \"partner\" ? <Field label=\"Available time\"><select value={slot} onChange={(event) => setSlot(event.target.value)} required><option value=\"\">Select a slot</option>{available.map((item: any) => <option value={item.starts_at + \"|\" + item.ends_at}>{shortDateTime(item.starts_at)} – {shortDateTime(item.ends_at)}</option>)}</select></Field> : <><Field label=\"Starts\"><input name=\"starts_at\" type=\"datetime-local\" required/></Field><Field label=\"Ends\"><input name=\"ends_at\" type=\"datetime-local\" required/></Field></>}\n <Field label=\"Agenda type\"><select value={contextType} onChange={(event) => setContextType(event.target.value)}><option value=\"other\">Other agenda</option><option value=\"lead\">Lead</option><option value=\"project\">Project</option></select></Field>\n {contextType !== \"other\" && <Field label={titleCase(contextType)}><select name=\"context_id\" required><option value=\"\">Select {contextType}</option>{contexts.map((item: any) => <option value={item.id}>{item.title || item.company_name}</option>)}</select></Field>}\n <Field label=\"Agenda\" className=\"growth-span-2\"><textarea name=\"agenda\" required rows={3}/></Field>\n <Field label=\"Meet / Zoom / Teams link\"><input name=\"join_url\" type=\"url\" placeholder=\"https://…\"/></Field>\n <Field label=\"Place\"><input name=\"place\" placeholder=\"Office, client site…\"/></Field>\n <div className=\"growth-span-2\"><Button>Book meeting</Button></div>\n </form></section>\n <section className=\"growth-panel\"><h2>Upcoming bookings</h2><div className=\"booking-list\">{data.meetings.map((meeting: any) => <article><header><span>{titleCase(meeting.status)}</span><time>{shortDateTime(meeting.starts_at)}</time></header><h3>{meeting.agenda}</h3><p>{meeting.partner_name}{meeting.internal_name ? \" ↔ \" + meeting.internal_name : \"\"}</p><footer>{meeting.join_url ? <a href={meeting.join_url} target=\"_blank\">Join online ↗</a> : <span>{meeting.place || \"Location pending\"}</span>}{actor.role === \"admin\" && <select value={meeting.status} onChange={async (event) => { await patch(\"/api/meetings/\" + meeting.id, { status: event.target.value }); await load(); }}><option>booked</option><option>confirmed</option><option>completed</option><option>cancelled</option></select>}</footer></article>)}</div>{!data.meetings.length && <Empty title=\"No upcoming meetings\" text=\"Available windows remain open until a partner books them.\"/>}</section></div>\n </div>;\n}\n\nfunction MouWorkspace({ actor, notify }: any) {\n const [partnerId, setPartnerId] = useState(actor.actorType === \"partner\" ? actor.actorId : \"\");\n const [data, setData] = useState<any>(null);\n const [actionBusy, setActionBusy] = useState(\"\");\n const load = async (id = partnerId) => setData(await api(\"/api/mou\" + (id ? \"?partner_id=\" + encodeURIComponent(id) : \"\")));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, [partnerId]);\n if (!data) return <Loading/>;\n const assign = async (event: any) => {\n event.preventDefault();\n setActionBusy(\"mou\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/mou\", formData(event.currentTarget)); await load(); notify(\"Partner MoU published\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const target = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"target\");\n try { await post(\"/api/admin/partners/\" + partnerId + \"/targets\", formData(form)); form.reset(); await load(); notify(\"New target version saved\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n const template = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setActionBusy(\"template\");\n try { await post(\"/api/admin/mou-templates\", formData(form)); form.reset(); await load(); notify(\"MoU template created\"); } catch (error: any) { notify(error.message, \"error\"); } finally { setActionBusy(\"\"); }\n };\n return <div className=\"growth-page mou-page\"><header className=\"growth-page-head\"><div><h1>MoU & targets</h1><span>Published terms, monthly commitments, achievement, and version history in one record.</span></div>{actor.role === \"admin\" && <label className=\"partner-picker-field\"><span>Partner</span><select className=\"partner-picker\" value={partnerId} onChange={(event) => setPartnerId(event.target.value)}><option value=\"\">Select partner</option>{data.partners.map((item: any) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}</header>\n {!partnerId ? <Empty title=\"Choose a partner\" text=\"Select a partner to publish their agreement and monthly targets.\"/> : <>\n {data.mou ? <article className=\"mou-document\"><header><div><span>Memorandum of Understanding</span><h2>{data.partner?.name}</h2><p>AFLABS partnership agreement</p></div><b>Effective {shortDate(data.mou.effective_from)}</b></header><section><h3>Partner commitments</h3><MarkdownBlock value={data.mou.terms_markdown}/></section><section><h3>What AFLABS provides</h3><MarkdownBlock value={data.mou.benefits_markdown}/></section></article> : <Empty title=\"MoU not published\" text={actor.role === \"admin\" ? \"Use the form below to publish the first agreement.\" : \"Your administrator has not published an agreement yet.\"}/>}\n {data.snapshot?.target && <section className=\"growth-panel target-board\"><header className=\"growth-section-title\"><div><h2>{data.snapshot.month} targets</h2><p>Live achievement against the latest target version.</p></div></header><div className=\"target-grid\"><Progress label=\"Leads\" value={data.snapshot.achieved.leads} total={data.snapshot.target.leads_target}/><Progress label=\"Projects converted\" value={data.snapshot.achieved.projects} total={data.snapshot.target.projects_target}/><Progress label={\"Revenue · \" + data.snapshot.target.revenue_currency} value={data.snapshot.achieved.revenue} total={data.snapshot.target.revenue_target}/><Progress label=\"Meeting allowance\" value={data.snapshot.achieved.meetings} total={data.snapshot.target.meetings_allowed}/></div></section>}\n {actor.role === \"admin\" && <div className=\"mou-admin-grid\"><section className=\"growth-panel\"><h2>Publish agreement</h2><form className=\"growth-stack\" onSubmit={assign} aria-busy={actionBusy === \"mou\"}><Field label=\"Use template\"><select name=\"template_id\"><option value=\"\">Write custom terms</option>{data.templates.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field><Field label=\"Effective from\"><input name=\"effective_from\" type=\"date\" required/></Field><Field label=\"Partner commitments · Markdown\"><textarea name=\"terms_markdown\" rows={10}/></Field><Field label=\"AFLABS commitments · Markdown\"><textarea name=\"benefits_markdown\" rows={7}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"mou\" ? \"Publishing…\" : \"Publish new MoU version\"}</Button></form></section>\n <section className=\"growth-panel\"><h2>Set monthly targets</h2><form className=\"growth-form-grid\" onSubmit={target} aria-busy={actionBusy === \"target\"}><Field label=\"Month\"><input name=\"target_month\" type=\"month\" required/></Field><Field label=\"Lead target\"><input name=\"leads_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Projects converted\"><input name=\"projects_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Revenue target\"><input name=\"revenue_target\" type=\"number\" min=\"0\" required/></Field><Field label=\"Currency\"><select name=\"revenue_currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select></Field><Field label=\"Meetings allowed\"><input name=\"meetings_allowed\" type=\"number\" min=\"0\" required/></Field><Field label=\"Note\" className=\"growth-span-2\"><textarea name=\"note\" rows={3}/></Field><div className=\"growth-span-2\"><Button disabled={Boolean(actionBusy)}>{actionBusy === \"target\" ? \"Saving target…\" : \"Save as new target version\"}</Button></div></form></section>\n <section className=\"growth-panel\"><h2>Create MoU template</h2><form className=\"growth-stack\" onSubmit={template} aria-busy={actionBusy === \"template\"}><Field label=\"Template name\"><input name=\"name\" required/></Field><Field label=\"Terms · Markdown\"><textarea name=\"terms_markdown\" rows={8} required/></Field><Field label=\"Benefits · Markdown\"><textarea name=\"benefits_markdown\" rows={6}/></Field><Button disabled={Boolean(actionBusy)}>{actionBusy === \"template\" ? \"Saving template…\" : \"Save template\"}</Button></form></section></div>}\n <section className=\"growth-panel\"><header className=\"growth-section-title\"><div><h2>Target history</h2><p>Every adjustment remains visible; newer rows do not overwrite older commitments.</p></div></header><div className=\"target-history\">{data.targets.map((item: any) => <article><span>{item.target_month}</span><b>{item.leads_target} leads · {item.projects_target} projects</b><p>{money(item.revenue_target, item.revenue_currency)} · {item.meetings_allowed} meetings</p><small>Set {shortDateTime(item.created_at)}{item.note ? \" · \" + item.note : \"\"}</small></article>)}</div></section>\n </>}\n </div>;\n}\n\nfunction IdeaWorkspace({ actor, notify }: any) {\n const [data, setData] = useState<any>(null);\n const [busy, setBusy] = useState(false);\n const [openId, setOpenId] = useState(\"\");\n const [prompts, setPrompts] = useState<any>(null);\n const load = async () => {\n setData(await api(\"/api/business-ideas\"));\n if (actor.role === \"admin\") setPrompts(await api(\"/api/admin/ai-prompts\"));\n };\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n if (!data) return <Loading/>;\n const generate = async (event: any) => {\n event.preventDefault();\n const form = event.currentTarget;\n setBusy(true);\n try {\n const result = await post(\"/api/business-ideas\", formData(form));\n form.reset();\n await load();\n setOpenId(result.id);\n notify(\"Business idea pitch generated\");\n } catch (error: any) { notify(error.message, \"error\"); } finally { setBusy(false); }\n };\n const savePrompts = async (event: any) => {\n event.preventDefault();\n try { await patch(\"/api/admin/ai-prompts\", formData(event.currentTarget)); await load(); notify(\"AI prompts updated\"); } catch (error: any) { notify(error.message, \"error\"); }\n };\n return <div className=\"growth-page idea-page\"><header className=\"growth-page-head\"><div><h1>Business idea pitch</h1><span>Turn grounded discovery into a practical, ROI-focused software or automation opportunity.</span></div></header>\n <div className=\"idea-layout\"><section className=\"growth-panel idea-builder\"><header className=\"growth-section-title\"><div><h2>Discovery brief</h2><p>Specific business context produces a stronger, more credible pitch.</p></div></header><form className=\"growth-form-grid\" onSubmit={generate}>\n <Field label=\"Customer / brand\"><input name=\"customer_name\" required placeholder=\"Acme Retail\"/></Field>\n <Field label=\"Pitch title\"><input name=\"title\" placeholder=\"Optional\"/></Field>\n <Field label=\"Category\"><input name=\"category\" required placeholder=\"Retail, healthcare, logistics…\"/></Field>\n <Field label=\"Business type\"><input name=\"business_type\" required placeholder=\"D2C, B2B distribution, services…\"/></Field>\n {actor.actorType === \"internal\" && <Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{data.options.partners.map((item: any) => <option value={item.id}>{item.name}</option>)}</select></Field>}\n <Field label=\"Budget\"><div className=\"budget-input\"><select name=\"currency\"><option>INR</option><option>USD</option><option>SAR</option><option>AED</option></select><input name=\"budget\" type=\"number\" min=\"0\" placeholder=\"Possible range anchor\"/></div></Field>\n <Field label=\"Pain points\" className=\"growth-span-2\"><textarea name=\"pain_points\" required rows={5} placeholder=\"Where time, revenue, customer experience, or control is being lost…\"/></Field>\n <Field label=\"Inside information\" className=\"growth-span-2\"><textarea name=\"inside_info\" rows={4} placeholder=\"Current systems, team behavior, constraints, politics, seasonal patterns…\"/></Field>\n <Field label=\"Possible business use case\" className=\"growth-span-2\"><textarea name=\"use_case_hint\" required rows={5} placeholder=\"Your hunch about software, AI, Voice AI, WhatsApp, automation, or a custom workflow…\"/></Field>\n <div className=\"growth-form-actions growth-span-2\"><Button disabled={busy}>{busy ? \"Building the pitch…\" : \"Generate pitch\"}</Button></div>\n </form></section>\n <section className=\"growth-panel idea-list\"><header className=\"growth-section-title\"><div><h2>Generated pitches</h2><p>{data.ideas.length} saved idea{data.ideas.length === 1 ? \"\" : \"s\"}</p></div></header>{data.ideas.map((idea: any) => <article className=\"idea-card\" key={idea.id}><button onClick={() => setOpenId(openId === idea.id ? \"\" : idea.id)}><div><span>{idea.partner_name || \"Direct AFLABS\"}</span><h3>{idea.title}</h3><small>{shortDateTime(idea.created_at)}</small></div><b aria-hidden=\"true\">{openId === idea.id ? \"Close\" : \"Open\"}</b></button>{openId === idea.id && <div className=\"idea-output\"><MarkdownBlock value={idea.generated_markdown}/><footer>{idea.proposal_id ? <span>Proposal draft created</span> : <Button onClick={async () => { await post(\"/api/business-ideas/\" + idea.id + \"/proposal\", {}); await load(); notify(\"Proposal generated and saved\"); }}>Turn into proposal</Button>}</footer></div>}</article>)}{!data.ideas.length && <Empty title=\"No ideas yet\" text=\"Complete the discovery form to create the first pitch.\"/>}</section></div>\n {actor.role === \"admin\" && prompts && <details className=\"growth-panel prompt-settings\"><summary><span><b>AI prompt settings</b><small>Admin only · stored in application settings</small></span><em>Configure</em></summary><form className=\"growth-form-grid\" onSubmit={savePrompts}><Field label=\"Business pitch system prompt\" className=\"growth-span-2\"><textarea name=\"business_pitch_prompt\" rows={12} defaultValue={prompts.business_pitch_prompt}/></Field><Field label=\"Proposal generator system prompt\" className=\"growth-span-2\"><textarea name=\"proposal_prompt\" rows={12} defaultValue={prompts.proposal_prompt}/></Field><div className=\"growth-span-2\"><Button>Save AI prompts</Button></div></form></details>}\n </div>;\n}\n\nexport function GrowthSuite({ section, actor, notify, onOpenProject }: any) {\n if (section === \"leads\") return <LeadWorkspace actor={actor} notify={notify} onOpenProject={onOpenProject}/>;\n if (section === \"conversations\") return <ChatWorkspace actor={actor} notify={notify}/>;\n if (section === \"meetings\") return <MeetingWorkspace actor={actor} notify={notify}/>;\n if (section === \"mou\") return <MouWorkspace actor={actor} notify={notify}/>;\n if (section === \"ideas\") return <IdeaWorkspace actor={actor} notify={notify}/>;\n return null;\n}\n\r\n",[],[247,287,279],"components","14fc5475-5c89-4b28-9c74-b0cbb820debc","Counter.tsx","019ffcf4-d6e8-704a-9308-1481c55ac1c3",["D",1786655332090],"/** @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",[],[247,287,289],"b1508921-7819-453f-a2fa-fecb50e89a88","App.tsx","019ffcf4-d6e8-704a-9308-1124b93239b7",["D",1786656082402],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CommercialPreview, GrowthDashboard, GrowthSuite, InvoiceComposer, MarkdownBlock, PartnerProjectEditor } from \"./GrowthSuite.tsx\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string;\n name: string;\n role: string;\n permissions: Record<string, boolean>;\n};\ntype Project = Record<string, any>;\n\nconst statusMeta: Record<string, { label: string; note: string }> = {\n backlog: { label: \"Backlog\", note: \"Ideas and incoming work\" },\n todo: { label: \"To do\", note: \"Ready to begin\" },\n \"in-progress\": { label: \"In progress\", note: \"Actively moving\" },\n blocked: { label: \"Blocked\", note: \"Needs attention\" },\n done: { label: \"Done\", note: \"Admin-approved delivery\" },\n};\nconst typeLabels: Record<string, string> = {\n update: \"Update\", meeting: \"Meeting\", blocker: \"Blocker\", \"major-work\": \"Major work\",\n \"mail-sent\": \"Mail sent\", \"mail-received\": \"Mail received\", payment: \"Payment\",\n question: \"Client question\", note: \"Note\", milestone: \"Milestone\", \"schedule-extension\": \"Schedule extension\",\n};\nconst eventIcons: Record<string, string> = {\n update: \"update\", meeting: \"meeting\", blocker: \"blocker\", \"major-work\": \"work\",\n \"mail-sent\": \"mail-out\", \"mail-received\": \"mail-in\", payment: \"payment\",\n question: \"question\", note: \"note\", milestone: \"milestone\", \"schedule-extension\": \"clock\",\n};\nconst countries = [\n { code: \"+91\", label: \"India\", flag: \"🇮🇳\", placeholder: \"98765 43210\" },\n { code: \"+966\", label: \"Saudi Arabia\", flag: \"🇸🇦\", placeholder: \"50 123 4567\" },\n { code: \"+971\", label: \"UAE\", flag: \"🇦🇪\", placeholder: \"50 123 4567\" },\n];\nconst userDefaults: Record<string, boolean> = {\n view_projects: true,\n create_projects: false,\n edit_projects: true,\n move_projects: true,\n archive_projects: false,\n manage_links: true,\n view_credentials: false,\n manage_credentials: false,\n manage_comments: true,\n manage_milestones: true,\n manage_stakeholders: true,\n manage_payments: false,\n};\n\nconst apiCache = new Map<string, { expires: number; value?: any; pending?: Promise<any> }>();\nlet clientCacheEnabled = true;\nfunction clientCacheTtl(path: string) {\n if (path === \"/api/config\") return 60_000;\n if (path.startsWith(\"/api/projects\")) return /^\\/api\\/projects\\/[^/?]+$/.test(path) ? 60_000 : 45_000;\n if (path === \"/api/dashboard\") return 45_000;\n if (path === \"/api/recurring\" || path === \"/api/admin/proposals\") return 60_000;\n if ([\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\"].includes(path)) return 90_000;\n if (path === \"/api/milestone-templates\" || path === \"/api/quick-notes\" || path === \"/api/holidays\") return 120_000;\n if (path === \"/api/questions\") return 30_000;\n return 15_000;\n}\nfunction invalidateClientCache(path: string) {\n if (/^\\/api\\/projects\\/[^/]+\\/read$/.test(path)) {\n for (const key of apiCache.keys()) {\n if (key === \"/api/projects\" || key.startsWith(\"/api/projects?\")) apiCache.delete(key);\n }\n return;\n }\n const prefixes = new Set<string>();\n if (path.startsWith(\"/api/projects\") || /^\\/api\\/(comments|links|credentials|stakeholders|milestones|payments|invoices)/.test(path)) {\n [\"/api/projects\", \"/api/dashboard\", \"/api/questions\"].forEach((x) => prefixes.add(x));\n }\n if (/^\\/api\\/admin\\/(users|partners|settings|branding|cc-recipients)/.test(path) || path === \"/api/partner/branding\") {\n [\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\", \"/api/projects\", \"/api/dashboard\", \"/api/config\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/admin/proposals\")) {\n [\"/api/admin/proposals\", \"/api/projects\", \"/api/dashboard\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/recurring\")) prefixes.add(\"/api/recurring\");\n if (path.startsWith(\"/api/admin/holidays\")) {\n prefixes.add(\"/api/holidays\");\n prefixes.add(\"/api/projects/\");\n }\n if (path.includes(\"milestone-template\")) prefixes.add(\"/api/milestone-templates\");\n if (path.includes(\"quick-notes\")) prefixes.add(\"/api/quick-notes\");\n if (path.startsWith(\"/api/auth/\") || path === \"/api/bootstrap\") {\n apiCache.clear();\n return;\n }\n for (const key of apiCache.keys()) if ([...prefixes].some((prefix) => key.startsWith(prefix))) apiCache.delete(key);\n}\nlet activeRequests = 0;\nfunction signalRequestActivity(delta: number) {\n activeRequests = Math.max(0, activeRequests + delta);\n if (typeof window !== \"undefined\") window.dispatchEvent(new CustomEvent(\"aflabs:requests\", { detail: activeRequests }));\n}\nasync function request(path: string, options: RequestInit = {}) {\n const method = String(options.method || \"GET\").toUpperCase();\n const cacheable = method === \"GET\" && clientCacheEnabled;\n const ttl = clientCacheTtl(path);\n if (cacheable) {\n const cached = apiCache.get(path);\n if (cached && cached.expires > Date.now()) {\n if (cached.pending) return cached.pending;\n return cached.value;\n }\n apiCache.delete(path);\n }\n signalRequestActivity(1);\n const pending = (async () => {\n try {\n const response = await fetch(path, {\n ...options,\n headers: { \"Content-Type\": \"application/json\", ...(options.headers ?? {}) },\n });\n const payload = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(payload.error || `Request failed (${response.status})`);\n return payload;\n } finally {\n signalRequestActivity(-1);\n }\n })();\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, pending });\n try {\n const payload = await pending;\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, value: payload });\n else invalidateClientCache(path);\n return payload;\n } catch (error) {\n if (cacheable) apiCache.delete(path);\n throw error;\n }\n}\nconst post = (path: string, data: any = {}) => request(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any = {}) => request(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string, data: any = {}) => request(path, { method: \"DELETE\", body: JSON.stringify(data) });\nconst money = (amount: number, currency = \"INR\") => new Intl.NumberFormat(\"en\", {\n style: \"currency\", currency, maximumFractionDigits: 2,\n}).format(Number(amount || 0));\nconst prettyDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst timelineDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { weekday: \"long\", day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\n};\nfunction daysFromToday(value?: string) {\n if (!value) return null;\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n return Math.round((target.getTime() - today.getTime()) / 86_400_000);\n}\nfunction futureDaysLabel(value?: string) {\n const days = daysFromToday(value);\n if (days === null || days <= 0) return \"\";\n return `${days} ${days === 1 ? \"day\" : \"days\"} to go`;\n}\nfunction projectDateFootnote(value: string | undefined, kind: \"start\" | \"end\") {\n const days = daysFromToday(value);\n if (days === null) return \"\";\n if (days === 0) return kind === \"start\" ? \"Starts today\" : \"Target date is today\";\n if (kind === \"start\") return days > 0\n ? `Starts in ${days} ${days === 1 ? \"day\" : \"days\"}`\n : `Started ${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} ago`;\n return days > 0\n ? `${days} ${days === 1 ? \"day\" : \"days\"} remaining`\n : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} past target`;\n}\nfunction deadlineLabel(value?: string, status?: string) {\n if (!value) return \"\";\n if (status === \"done\") return \"Completed\";\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);\n if (days === 0) return \"Due today\";\n return days > 0 ? `${days} ${days === 1 ? \"day\" : \"days\"} to go` : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} overdue`;\n}\nconst initials = (name = \"AFLABS\") => name.split(/\\s+/).slice(0, 2).map((part) => part[0]).join(\"\").toUpperCase();\nconst titleCase = (value = \"\") => value.replaceAll(\"-\", \" \").replace(/\\b\\w/g, (x) => x.toUpperCase());\n\nfunction BrandMark({ large = false }: { large?: boolean }) {\n return <span className={`brand-mark ${large ? \"brand-mark-large\" : \"\"}`}>\n <img src=\"/frontend/logo.png\" alt=\"\"/>\n </span>;\n}\n\nfunction Icon({ name, size = 18 }: { name: string; size?: number }) {\n const paths: Record<string, React.ReactNode> = {\n board: <><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M9 4v16M15 4v16\"/></>,\n plus: <path d=\"M12 5v14M5 12h14\"/>,\n archive: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M5 9v10h14V9M9 13h6\"/></>,\n users: <><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"/></>,\n partner: <><path d=\"M8 12h8M12 8v8\"/><circle cx=\"12\" cy=\"12\" r=\"9\"/></>,\n logout: <><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><path d=\"m16 17 5-5-5-5M21 12H9\"/></>,\n search: <><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-4-4\"/></>,\n close: <path d=\"M6 6l12 12M18 6 6 18\"/>,\n link: <><path d=\"M10 13a5 5 0 0 0 7.07.07l2-2A5 5 0 0 0 12 4\"/><path d=\"M14 11a5 5 0 0 0-7.07-.07l-2 2A5 5 0 0 0 12 20\"/></>,\n copy: <><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2\"/></>,\n more: <><circle cx=\"5\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/></>,\n check: <path d=\"m5 12 4 4L19 6\"/>,\n clock: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/></>,\n message: <path d=\"M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z\"/>,\n rupee: <><path d=\"M6 4h12M6 8h12M7 4c6 0 6 8 0 8h-1l9 8\"/></>,\n chevron: <path d=\"m9 18 6-6-6-6\"/>,\n settings: <><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1V21H9.6v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1-.4H3V9.6h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.17.38.38.72.6 1 .29.37.64.55 1 .6h.09v4H21c-.36.05-.71.23-1 .4-.22.28-.43.62-.6 1Z\"/></>,\n update: <><path d=\"M4 19h16\"/><path d=\"M6 15l4-4 3 3 5-6\"/></>,\n meeting: <><circle cx=\"8\" cy=\"8\" r=\"3\"/><circle cx=\"16\" cy=\"8\" r=\"3\"/><path d=\"M3 19c.6-3 2.2-5 5-5s4.4 2 5 5M11 19c.5-2.6 2.2-4.5 5-4.5s4.5 1.9 5 4.5\"/></>,\n blocker: <><path d=\"M12 3 2.8 19h18.4L12 3Z\"/><path d=\"M12 9v4M12 16h.01\"/></>,\n work: <><path d=\"m14.7 6.3 3 3M4 20l4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Z\"/></>,\n \"mail-out\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 4h6M18 1l3 3-3 3\"/></>,\n \"mail-in\": <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6M15 1v6M12 4l3 3 3-3\"/></>,\n payment: <><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M3 10h18M7 15h3\"/></>,\n question: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M9.7 9a2.5 2.5 0 1 1 3.4 2.3c-.8.35-1.1.9-1.1 1.7M12 17h.01\"/></>,\n note: <><path d=\"M5 3h11l3 3v15H5V3Z\"/><path d=\"M9 11h6M9 15h6M15 3v4h4\"/></>,\n milestone: <><path d=\"m12 3 3 6 6 .8-4.5 4.4 1.1 6.3-5.6-3-5.6 3 1.1-6.3L3 9.8 9 9l3-6Z\"/></>,\n sun: <><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"/></>,\n moon: <path d=\"M20.5 14.4A8 8 0 0 1 9.6 3.5 9 9 0 1 0 20.5 14.4Z\"/>,\n globe: <><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3c3 3.3 3 14.7 0 18M12 3c-3 3.3-3 14.7 0 18\"/></>,\n mail: <><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6\"/></>,\n eye: <><path d=\"M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z\"/><circle cx=\"12\" cy=\"12\" r=\"2.5\"/></>,\n key: <><circle cx=\"8\" cy=\"15\" r=\"4\"/><path d=\"m11 12 9-9M16 4l3 3M14 6l3 3\"/></>,\n };\n return <svg className=\"icon\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">{paths[name] ?? paths.more}</svg>;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return <button className={`button button-${variant} ${className}`} {...props}>\n {icon && <Icon name={icon} size={16}/>}<span>{children}</span>\n </button>;\n}\nfunction NetworkActivity() {\n const [count, setCount] = useState(activeRequests);\n useEffect(() => {\n const update = (event: any) => setCount(Number(event.detail) || 0);\n window.addEventListener(\"aflabs:requests\", update);\n return () => window.removeEventListener(\"aflabs:requests\", update);\n }, []);\n return count > 0 ? <div className=\"network-activity\" role=\"status\" aria-live=\"polite\"><i/><span>Working…</span></div> : null;\n}\nfunction PageSkeleton({ rows = 3, chart = false }: { rows?: number; chart?: boolean }) {\n return <div className=\"page-skeleton\" aria-label=\"Loading content\">\n <div className=\"skeleton skeleton-title\"/>\n {chart && <div className=\"skeleton skeleton-chart\"/>}\n {Array.from({ length: rows }).map((_, index) => <div className=\"skeleton skeleton-row\" key={index}/>)}\n </div>;\n}\nfunction BoardSkeleton() {\n return <div className=\"kanban board-skeleton\" aria-label=\"Loading project board\">\n {Array.from({ length: 5 }).map((_, column) => <section className=\"kanban-column\" key={column}><div className=\"skeleton skeleton-column-title\"/>{Array.from({ length: 2 }).map((_, card) => <div className=\"skeleton skeleton-card\" key={card}/>)}</section>)}\n </div>;\n}\nfunction Field({ label, hint, children }: any) {\n return <label className=\"field\"><span>{label}</span>{children}{hint && <small>{hint}</small>}</label>;\n}\nfunction PhoneField({ label = \"Mobile number\", name = \"phone\", defaultValue = \"\", autoFocus = false }: any) {\n const detected = countries.find((x) => String(defaultValue).startsWith(x.code));\n const [country, setCountry] = useState(() => detected?.code || localStorage.getItem(\"aflabs_phone_country\") || \"+91\");\n const [number, setNumber] = useState(() => detected ? String(defaultValue).slice(detected.code.length) : String(defaultValue).replace(/^\\+\\d+/, \"\"));\n const selected = countries.find((x) => x.code === country) || countries[0];\n const changeCountry = (value: string) => { setCountry(value); localStorage.setItem(\"aflabs_phone_country\", value); };\n return <label className=\"field phone-field\"><span>{label}</span>\n <div className=\"phone-control\">\n <select aria-label=\"Country\" value={country} onChange={(e) => changeCountry(e.target.value)}>\n {countries.map((x) => <option value={x.code}>{x.flag} {x.code}</option>)}\n </select>\n <input value={number} onChange={(e) => setNumber(e.target.value)} required autoFocus={autoFocus} placeholder={selected.placeholder} inputMode=\"tel\"/>\n <input type=\"hidden\" name={name} value={`${country}${number.replace(/\\D/g, \"\")}`}/>\n </div>\n </label>;\n}\nfunction ThemeToggle({ theme, toggle }: any) {\n return <button type=\"button\" className=\"theme-toggle\" onClick={toggle} aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}>\n <Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={16}/><span>{theme === \"dark\" ? \"Light\" : \"Dark\"} mode</span>\n </button>;\n}\nfunction Empty({ title, text, action }: any) {\n return <div className=\"empty\"><div className=\"empty-mark\"><Icon name=\"board\" size={21}/></div><h3>{title}</h3><p>{text}</p>{action}</div>;\n}\nfunction Toast({ value, clear }: { value: { message: string; kind: string } | null; clear: () => void }) {\n useEffect(() => { if (!value) return; const timer = setTimeout(clear, 3600); return () => clearTimeout(timer); }, [value]);\n return value ? <div className={`toast toast-${value.kind}`} role={value.kind === \"error\" ? \"alert\" : \"status\"} aria-live={value.kind === \"error\" ? \"assertive\" : \"polite\"}><span>{value.message}</span><button type=\"button\" aria-label=\"Dismiss notification\" onClick={clear}><Icon name=\"close\" size={15}/></button></div> : null;\n}\n\nfunction AuthShell({ children, title, subtitle, theme, toggleTheme }: any) {\n return <main className=\"auth-page\">\n <section className=\"auth-brand\">\n <a className=\"brand brand-large\" href=\"/\"><BrandMark large/><span>AFLABS <b>PM</b></span></a>\n <div className=\"auth-statement\">\n <span className=\"signal\"><i/> Project delivery, made visible.</span>\n <h1>One calm place for every moving part.</h1>\n <p>Run the work internally. Keep partners aligned. Give clients a clear sense of momentum.</p>\n </div>\n <div className=\"auth-foot\">Built for focused teams, not process theatre.</div>\n </section>\n <section className=\"auth-panel\"><div className=\"auth-theme\"><ThemeToggle theme={theme} toggle={toggleTheme}/></div><div className=\"auth-card\"><div className=\"auth-heading\"><h2>{title}</h2><p>{subtitle}</p></div>{children}</div></section>\n </main>;\n}\n\nfunction Bootstrap({ onDone, theme, toggleTheme }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try { await post(\"/api/bootstrap\", data); onDone(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell title=\"Set up AFLABS PM\" subtitle=\"Create the first administrator. This setup closes permanently after completion.\" theme={theme} toggleTheme={toggleTheme}>\n <form onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n <Field label=\"Private bootstrap token\"><input name=\"token\" type=\"password\" required autoFocus/></Field>\n <Field label=\"Your name\"><input name=\"name\" required placeholder=\"Administrator name\"/></Field>\n <PhoneField/>\n <Field label=\"Choose a PIN\" hint=\"4–8 digits\"><input name=\"pin\" type=\"password\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Creating administrator…\" : \"Create administrator\"}</Button>\n </form>\n </AuthShell>;\n}\n\nfunction Login({ clientToken, onDone, theme, toggleTheme }: any) {\n const initial = clientToken ? \"client\" : \"internal\";\n const [mode, setMode] = useState(initial), [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const rememberedPhone = localStorage.getItem(\"aflabs_login_phone\") || \"\";\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try {\n await post(mode === \"partner\" ? \"/api/auth/partner\" : mode === \"client\" ? \"/api/auth/client\" : \"/api/auth/login\", {\n ...data, token: clientToken,\n });\n if (mode !== \"client\" && data.phone) localStorage.setItem(\"aflabs_login_phone\", String(data.phone));\n onDone();\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <AuthShell\n title={mode === \"client\" ? \"View project\" : mode === \"partner\" ? \"Partner access\" : \"Welcome back\"}\n subtitle={mode === \"client\" ? \"Enter the project PIN shared with you.\" : \"Use your registered mobile number and PIN.\"}\n theme={theme}\n toggleTheme={toggleTheme}\n >\n {!clientToken && <div className=\"segmented\">\n <button className={mode === \"internal\" ? \"active\" : \"\"} onClick={() => { setMode(\"internal\"); setError(\"\"); }}>Team</button>\n <button className={mode === \"partner\" ? \"active\" : \"\"} onClick={() => { setMode(\"partner\"); setError(\"\"); }}>Partner</button>\n </div>}\n <form key={mode} onSubmit={submit} className=\"stack\">\n {error && <div className=\"alert alert-error\">{error}</div>}\n {mode !== \"client\" && <PhoneField autoFocus defaultValue={rememberedPhone}/>}\n <Field label={mode === \"client\" ? \"Project PIN\" : \"PIN\"}><input name=\"pin\" type=\"password\" required autoFocus={mode === \"client\"} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button disabled={busy}>{busy ? \"Checking…\" : mode === \"client\" ? \"Open project\" : \"Sign in\"}</Button>\n </form>\n {!clientToken && <p className=\"auth-note\">Access is provisioned by an AFLABS administrator. There is no public signup or password recovery.</p>}\n </AuthShell>;\n}\n\nfunction ProjectForm({ actor, config, partners, leads = [], owners = [], ccRecipients = [], initial = {}, onSave, compact = false }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const [selectedPartner, setSelectedPartner] = useState(initial.partner_id || \"\");\n const [regularCost, setRegularCost] = useState(Number(initial.regular_cost) || 0);\n const [partnerCost, setPartnerCost] = useState(Number(initial.partner_cost) || 0);\n const [currency, setCurrency] = useState(initial.currency || \"INR\");\n const [taxRate, setTaxRate] = useState(Number(initial.tax_rate) || 0);\n const [taxInclusive, setTaxInclusive] = useState(Boolean(initial.tax_inclusive));\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const form = e.currentTarget, formData = new FormData(form), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n try { await onSave(data); form.reset(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n const partner = actor.actorType === \"partner\";\n return <form className=\"form-grid\" onSubmit={submit}>\n {error && <div className=\"alert alert-error full\">{error}</div>}\n <Field label=\"Project title\"><input name=\"title\" required autoFocus placeholder=\"What are we delivering?\" defaultValue={initial.title || \"\"}/></Field>\n <Field label=\"Originating lead\" hint=\"Every new project stays linked to its commercial origin\"><select name=\"lead_id\" required defaultValue={initial.lead_id || \"\"}><option value=\"\">Select lead</option>{leads.filter((lead: any) => !selectedPartner || !lead.partner_id || String(lead.partner_id) === selectedPartner).map((lead: any) => <option value={lead.id}>{lead.company_name || lead.title} · {titleCase(lead.stage)}</option>)}</select></Field>\n {!compact && <Field label=\"Type\"><select name=\"project_type\" defaultValue={initial.project_type || \"Billable\"}>{config.projectTypes.map((x: string) => <option>{x}</option>)}</select></Field>}\n <Field label=\"One-line description\" hint=\"Keep this short for project cards and client headers\"><input name=\"description\" maxLength={240} placeholder=\"The outcome in one clear sentence\" defaultValue={initial.description || \"\"}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for headings, lists, links, tables, and code.\"><textarea name=\"markdown_details\" rows={12} placeholder={\"# Context\\n\\n## Scope\\n- Requirement\\n\\n## Decisions\"} defaultValue={initial.markdown_details || \"\"}/></Field>\n <Field label=\"Project email\" hint=\"Main POC for optional email updates\"><input name=\"contact_email\" type=\"email\" placeholder=\"project@example.com\" defaultValue={initial.contact_email || \"\"}/></Field>\n <Field label=\"CC emails\" hint=\"Comma-separated additional recipients\"><input name=\"cc_emails\" type=\"text\" placeholder=\"finance@example.com, poc@example.com\" defaultValue={(initial.cc_emails || []).join?.(\", \") || initial.cc_emails || \"\"}/></Field>\n {!partner && !compact && <>\n <Field label=\"Status\"><select name=\"status\" defaultValue={initial.status || \"backlog\"}>{config.statuses.filter((x: string) => x !== \"done\" || actor.role === \"admin\").map((x: string) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={initial.owner_user_id || actor.actorId}><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={initial.start_date || \"\"}/></Field>\n <Field label=\"Target end date\"><input name=\"end_date\" type=\"date\" defaultValue={initial.end_date || \"\"}/></Field>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" value={currency} onChange={(e) => setCurrency(e.target.value)}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular project cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={regularCost} onChange={(e) => setRegularCost(Number(e.target.value))}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" value={partnerCost} onChange={(e) => setPartnerCost(Number(e.target.value))}/></Field>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={initial.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" value={taxRate} onChange={(e) => setTaxRate(Number(e.target.value))}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" checked={taxInclusive} onChange={(e) => setTaxInclusive(e.target.checked)}/> Project cost already includes tax</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={regularCost} partnerCost={partnerCost} currency={currency} taxRate={taxRate} taxInclusive={taxInclusive}/>\n {actor.role === \"admin\" && ccRecipients.length > 0 && <fieldset className=\"full\"><legend>Mandatory email CC</legend><p className=\"field-note\">Choose the default company recipients copied on project updates.</p><div className=\"permission-grid\">{ccRecipients.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(initial.notification_cc_ids || []).includes?.(x.id) || (!initial.notification_cc_ids && x.default_selected)}/>{x.label}</label>)}</div></fieldset>}\n <Field label=\"Client portal PIN\" hint=\"Leave empty to generate a 6-digit PIN\"><input name=\"client_pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n {selectedPartner && <Field label=\"Commission document URL\"><input name=\"commission_document_url\" type=\"url\" placeholder=\"https://…\" defaultValue={initial.commission_document_url || \"\"}/></Field>}\n </>}\n <div className=\"form-actions full\"><Button disabled={busy} icon=\"plus\">{busy ? \"Adding…\" : \"Add project\"}</Button></div>\n </form>;\n}\n\nfunction KanbanCard({ project, actor, open }: any) {\n const range = project.end_date ? `Due ${prettyDate(project.end_date)}` : project.start_date ? `Started ${prettyDate(project.start_date)}` : \"Dates not set\";\n const countdown = deadlineLabel(project.end_date, project.status);\n return <button\n className=\"kanban-card\"\n draggable={actor.actorType === \"internal\" && actor.permissions.move_projects}\n onDragStart={(e) => e.dataTransfer.setData(\"text/project-id\", project.id)}\n onClick={open}\n >\n <div className=\"card-top\"><span className={`type-dot type-${project.project_type?.toLowerCase().replace(/[^a-z]/g, \"\")}`}/><span className=\"project-type\">{project.project_type}</span>{project.unanswered_count > 0 && <span className=\"question-attention\" title={`${project.unanswered_count} unanswered client question${project.unanswered_count === 1 ? \"\" : \"s\"}`}><Icon name=\"question\" size={12}/>{project.unanswered_count}</span>}{project.unread_count > 0 && <span className=\"unread\">{project.unread_count}</span>}</div>\n <h3>{project.title}</h3>\n <p>{project.description || \"No description yet.\"}</p>\n <div className=\"card-progress\"><span style={{ width: `${project.progress}%` }}/></div>\n <div className=\"card-meta\"><span><Icon name=\"clock\" size={14}/>{range}</span><b>{project.progress}%</b></div>\n {countdown && <div className={`deadline-countdown ${countdown.includes(\"overdue\") ? \"overdue\" : \"\"}`}>{countdown}</div>}\n {project.partner_name && <div className=\"partner-chip\"><span>{initials(project.partner_name)}</span>{project.partner_name}</div>}\n </button>;\n}\n\nfunction Kanban({ projects, actor, onOpen, onMove }: any) {\n return <div className=\"kanban\">\n {Object.entries(statusMeta).map(([status, meta]) => {\n const items = projects.filter((p: any) => p.status === status);\n return <section className={`kanban-column column-${status}`} key={status}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => { e.preventDefault(); const id = e.dataTransfer.getData(\"text/project-id\"); if (id) onMove(id, status); }}\n >\n <header><div><span className=\"status-symbol\"/><h2>{meta.label}</h2><b>{items.length}</b></div><p>{meta.note}</p></header>\n <div className=\"kanban-list\">\n {items.map((project: any) => <KanbanCard key={project.id} project={project} actor={actor} open={() => onOpen(project.id)}/>)}\n {!items.length && <div className=\"column-empty\">Drop a project here</div>}\n </div>\n </section>;\n })}\n </div>;\n}\n\nfunction Modal({ open, close, children, wide = false }: any) {\n const ref = useRef<HTMLDialogElement>(null);\n useEffect(() => { const node = ref.current; if (!node) return; if (open && !node.open) node.showModal(); if (!open && node.open) node.close(); }, [open]);\n return <dialog ref={ref} className={wide ? \"modal modal-wide\" : \"modal\"} onCancel={(e) => { e.preventDefault(); close(); }} onClick={(e) => { if (e.target === ref.current) close(); }}>\n <NetworkActivity/><div className=\"modal-inner\">{children}</div>\n </dialog>;\n}\n\nfunction QuickForm({ kind, projectId, detail, done }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\"), [feedback, setFeedback] = useState(\"\");\n const [commentText, setCommentText] = useState(\"\");\n const [quickNotes, setQuickNotes] = useState<any[]>([]);\n const [slash, setSlash] = useState<{ start: number; query: string; index: number } | null>(null);\n const commentRef = useRef<HTMLTextAreaElement>(null);\n useEffect(() => {\n if (kind !== \"comment\") return;\n request(\"/api/quick-notes\").then((result) => setQuickNotes(result.quick_notes || [])).catch(() => {});\n }, [kind]);\n const matchingNotes = useMemo(() => {\n const query = slash?.query.toLowerCase().trim() || \"\";\n return quickNotes.filter((note) => !query || `${note.title} ${note.shortcut} ${note.body}`.toLowerCase().includes(query)).slice(0, 8);\n }, [quickNotes, slash?.query]);\n const updateSlash = (value: string, cursor: number) => {\n const before = value.slice(0, cursor);\n const match = /(?:^|\\s)\\/([^/\\n]*)$/.exec(before);\n setSlash(match ? { start: before.lastIndexOf(\"/\"), query: match[1], index: 0 } : null);\n };\n const selectPlaceholder = (value: string, from: number, insertedStart?: number, insertedEnd?: number) => {\n requestAnimationFrame(() => {\n const textarea = commentRef.current;\n if (!textarea) return;\n const matches = [...value.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)];\n const placeholder = matches.find((match) => {\n const start = match.index ?? 0;\n return start >= from && (insertedStart === undefined || (start >= insertedStart && start < (insertedEnd ?? value.length)));\n });\n if (!placeholder || placeholder.index === undefined) return;\n textarea.focus();\n textarea.setSelectionRange(placeholder.index, placeholder.index + placeholder[0].length);\n });\n };\n const insertQuickNote = (note: any) => {\n const textarea = commentRef.current;\n if (!textarea || !slash) return;\n const cursor = textarea.selectionEnd;\n const next = `${commentText.slice(0, slash.start)}${note.body}${commentText.slice(cursor)}`;\n const insertedEnd = slash.start + note.body.length;\n setCommentText(next);\n setSlash(null);\n selectPlaceholder(next, slash.start, slash.start, insertedEnd);\n if (!/\\{\\{[^{}\\n]+\\}\\}/.test(note.body)) {\n requestAnimationFrame(() => {\n textarea.focus();\n textarea.setSelectionRange(insertedEnd, insertedEnd);\n });\n }\n };\n const commentKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (slash) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (matchingNotes.length) setSlash((current) => current ? {\n ...current,\n index: (current.index + (event.key === \"ArrowDown\" ? 1 : -1) + matchingNotes.length) % matchingNotes.length,\n } : null);\n return;\n }\n if ((event.key === \"Enter\" || event.key === \"Tab\") && matchingNotes.length) {\n event.preventDefault();\n insertQuickNote(matchingNotes[Math.min(slash.index, matchingNotes.length - 1)]);\n return;\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n setSlash(null);\n return;\n }\n }\n if (event.key === \"Tab\") {\n const textarea = event.currentTarget;\n const next = [...commentText.matchAll(/\\{\\{[^{}\\n]+\\}\\}/g)]\n .find((match) => (match.index ?? -1) >= textarea.selectionEnd);\n if (next && next.index !== undefined) {\n event.preventDefault();\n textarea.setSelectionRange(next.index, next.index + next[0].length);\n }\n }\n };\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\"); setFeedback(\"\");\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.client_visible = data.client_visible === \"on\";\n data.send_email = data.send_email === \"on\";\n data.is_main_poc = data.is_main_poc === \"on\";\n data.email_cc = data.email_cc === \"on\";\n try {\n const paths: any = {\n link: \"links\", credential: \"credentials\", stakeholder: \"stakeholders\",\n milestone: \"milestones\", payment: \"payments\", comment: \"comments\",\n };\n const result = await post(`/api/projects/${projectId}/${paths[kind]}`, data);\n form.reset(); setCommentText(\"\"); setSlash(null); await done();\n if (data.send_email && !result.email?.sent) {\n setFeedback(`Update saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`);\n }\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <form className=\"quick-form\" onSubmit={submit}>\n {error && <div className=\"alert alert-error\">{error}</div>}\n {feedback && <div className=\"alert alert-warning\">{feedback}</div>}\n {kind === \"comment\" && <>\n <div className=\"form-row\"><Field label=\"Update type\"><select name=\"comment_type\">{Object.entries(typeLabels).filter(([x]) => x !== \"milestone\").map(([value, label]) => <option value={value}>{label}</option>)}</select></Field>\n <Field label=\"Visible to\"><select name=\"visibility\"><option value=\"both\">Admin + client</option><option value=\"admin\">Admin only</option><option value=\"client\">Client timeline</option></select></Field>\n <Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field></div>\n <Field label=\"Update\"><div className=\"quick-note-composer\"><textarea ref={commentRef} name=\"body\" required rows={4} value={commentText} placeholder=\"Share what changed and what comes next. Type / for a quick note.\" onChange={(event) => { setCommentText(event.target.value); updateSlash(event.target.value, event.target.selectionStart); }} onClick={(event) => updateSlash(event.currentTarget.value, event.currentTarget.selectionStart)} onKeyDown={commentKeyDown}/>{slash && <div className=\"quick-note-menu\" role=\"listbox\" aria-label=\"Quick notes\">{matchingNotes.length ? matchingNotes.map((note, index) => <button type=\"button\" role=\"option\" aria-selected={index === slash.index} className={index === slash.index ? \"active\" : \"\"} key={note.id} onMouseDown={(event) => { event.preventDefault(); insertQuickNote(note); }}><span><b>{note.title}</b><small>/{note.shortcut}</small></span><p>{note.body}</p></button>) : <div className=\"quick-note-empty\">No matching quick notes</div>}</div>}<small className=\"quick-note-hint\">Type / to insert a quick note · press Tab to replace each {\"{{VARIABLE}}\"}</small></div></Field>\n {detail.project.contact_email && <label className=\"check notify-check\"><input name=\"send_email\" type=\"checkbox\"/> Email the project POC and CC list</label>}\n </>}\n {kind === \"link\" && <div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required placeholder=\"Contract\"/></Field><Field label=\"URL\"><input name=\"url\" type=\"url\" required placeholder=\"https://…\"/></Field><Field label=\"Type\"><select name=\"link_type\"><option value=\"reference\">Reference</option><option value=\"document\">Document</option><option value=\"contract\">Contract</option><option value=\"mou\">MOU</option><option value=\"github\">GitHub</option></select></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div>}\n {kind === \"credential\" && <><div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required/></Field><Field label=\"Username\"><input name=\"username\"/></Field><Field label=\"Secret\"><input name=\"secret\" type=\"password\"/></Field></div><div className=\"form-row\"><Field label=\"Login URL\"><input name=\"url\" type=\"url\"/></Field><Field label=\"Notes\"><input name=\"notes\"/></Field></div></>}\n {kind === \"stakeholder\" && <><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/><Field label=\"Role\"><input name=\"role\" placeholder=\"Founder, SPOC…\"/></Field></div><Field label=\"Email address\"><input name=\"email\" type=\"email\" required placeholder=\"poc@example.com\"/></Field><div className=\"form-row stakeholder-email-options\"><label className=\"check\"><input name=\"is_main_poc\" type=\"checkbox\"/> Main POC and project email</label><label className=\"check\"><input name=\"email_cc\" type=\"checkbox\"/> Include in project email CC</label></div></>}\n {kind === \"milestone\" && <><div className=\"form-row\"><Field label=\"Milestone\"><input name=\"title\" required/></Field><Field label=\"Tag\"><input name=\"tag\" defaultValue=\"Milestone\"/></Field><Field label=\"Status\"><select name=\"status\"><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field></div><div className=\"form-row\"><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field><Field label=\"Completed date\"><input name=\"completed_date\" type=\"date\"/></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div><Field label=\"Description\"><textarea name=\"description\" rows={2}/></Field></>}\n {kind === \"payment\" && <div className=\"form-row\"><Field label={`Amount (${detail.project.currency})`}><input name=\"amount\" type=\"number\" min=\"0.01\" step=\"0.01\" required/></Field><Field label=\"Payment date\"><input name=\"paid_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)} required/></Field><Field label=\"Note\"><input name=\"note\" placeholder=\"Milestone payment\"/></Field></div>}\n <Button disabled={busy} variant=\"secondary\" icon=\"plus\">{busy ? \"Saving…\" : `Add ${kind}`}</Button>\n </form>;\n}\n\nfunction Timeline({ detail, actor, reload, notify }: any) {\n const [replying, setReplying] = useState<string | null>(null), [reply, setReply] = useState(\"\"), [sendReply, setSendReply] = useState(false), [adding, setAdding] = useState(false);\n const events = useMemo(() => [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, timelineType: x.comment_type, date: x.event_date })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, timelineType: \"milestone\", body: x.description, author_name: x.tag, date: x.completed_date || x.due_date, milestone: true })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date) || String(b.created_at).localeCompare(String(a.created_at))), [detail]);\n const canComment = actor.actorType === \"partner\"\n ? detail.project.status !== \"backlog\"\n : actor.actorType === \"internal\" && canActor(actor, \"manage_comments\");\n const resolve = async (item: any) => {\n try {\n const result = await post(`/api/comments/${item.id}/resolve`, { reply, send_email: sendReply });\n setReply(\"\"); setReplying(null); setSendReply(false); await reload();\n if (sendReply && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Question answered\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n return <div className=\"timeline-wrap\">\n <div className=\"section-toolbar\">\n <div><h3>Project timeline</h3><p>{events.length} dated {events.length === 1 ? \"entry\" : \"entries\"} across updates and milestones.</p></div>\n {canComment && <Button variant={adding ? \"secondary\" : \"primary\"} icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"Add update\"}</Button>}\n </div>\n {adding && <div className=\"composer\"><QuickForm kind=\"comment\" projectId={detail.project.id} detail={detail} done={async () => { await reload(); setAdding(false); }}/></div>}\n {events.length ? <div className=\"timeline\">\n {events.map((item: any) => <article className={`timeline-item timeline-${item.timelineType}`} key={`${item.milestone ? \"m\" : \"c\"}-${item.id}`}>\n {futureDaysLabel(item.date) && <span className=\"timeline-future-gap\">{futureDaysLabel(item.date)}</span>}\n <div className=\"timeline-node\"><Icon name={eventIcons[item.timelineType] || \"note\"} size={16}/></div>\n <div className=\"timeline-content\">\n <div className=\"timeline-head\"><span className=\"event-type\">{typeLabels[item.timelineType] || titleCase(item.timelineType)}</span><time>{timelineDate(item.date)}</time>{item.visibility && <span className=\"visibility-label\">{item.visibility === \"both\" ? \"Team + client\" : titleCase(item.visibility)}</span>}{item.resolved_at && <span className=\"resolved\">Resolved</span>}</div>\n <h4>{item.milestone ? item.title : item.author_name}</h4>\n {item.body && <p>{item.body}</p>}\n {item.timelineType === \"question\" && detail.comments.filter((x: any) => x.parent_id === item.id).map((x: any) => <div className=\"timeline-reply\"><b>{x.author_name}</b><p>{x.body}</p></div>)}\n {item.timelineType === \"question\" && !item.resolved_at && canComment && <>\n {replying === item.id ? <div className=\"reply-box\"><textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder=\"Answer the client and resolve this question\"/>{detail.project.contact_email && <label className=\"check\"><input type=\"checkbox\" checked={sendReply} onChange={(e) => setSendReply(e.target.checked)}/>Email this answer to the client POC</label>}<Button variant=\"secondary\" onClick={() => resolve(item)}>Reply & resolve</Button></div> : <button className=\"text-action\" onClick={() => setReplying(item.id)}>Answer question</button>}\n </>}\n </div>\n </article>)}\n </div> : <Empty title=\"No timeline entries yet\" text=\"Updates and milestones will build the project story here.\"/>}\n </div>;\n}\nfunction canActor(actor: Actor, key: string) {\n return actor.role === \"admin\" || actor.permissions?.[key] === true;\n}\nfunction CredentialCard({ item, canRemove, removeItem }: any) {\n const [revealed, setRevealed] = useState(false);\n const copy = async (value: string) => { if (value) await navigator.clipboard.writeText(value); };\n return <article className=\"credential-card\">\n <header><span><Icon name=\"key\" size={16}/></span><div><h4>{item.label}</h4><p>{item.username || \"No username\"}</p></div></header>\n <div className=\"secret-row\"><code>{revealed ? item.secret || \"—\" : item.secret ? \"••••••••••••\" : \"No secret\"}</code><button type=\"button\" onClick={() => setRevealed(!revealed)} aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}><Icon name=\"eye\" size={15}/></button></div>\n {item.notes && <p className=\"credential-note\">{item.notes}</p>}\n <footer>{item.url && <a href={item.url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={14}/>Open login</a>}{item.username && <button type=\"button\" onClick={() => copy(item.username)}><Icon name=\"copy\" size={14}/>Copy username</button>}{canRemove && <button type=\"button\" className=\"danger-link\" onClick={() => removeItem(`/api/credentials/${item.id}`)}>Remove</button>}</footer>\n </article>;\n}\nfunction StakeholderCard({ item, canManage, onUpdate, onRemove }: any) {\n return <article className={`person ${item.is_main_poc ? \"person-main\" : \"\"}`}>\n <span>{initials(item.name)}</span>\n <div>\n <header><b>{item.name}</b>{Boolean(item.is_main_poc) && <em>Main POC</em>}{Boolean(item.email_cc) && <em>CC</em>}</header>\n <p>{item.role || \"Stakeholder\"}</p>\n <a href={`mailto:${item.email}`}>{item.email || \"Email required\"}</a>\n <a href={`tel:${item.phone}`}>{item.phone}</a>\n {canManage && <>\n <div className=\"person-actions\">\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { is_main_poc: true })}>Make main POC</button>}\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { email_cc: !Boolean(item.email_cc) })}>{Boolean(item.email_cc) ? \"Remove from CC\" : \"Add to CC\"}</button>}\n <button type=\"button\" className=\"danger-link\" onClick={() => onRemove(`/api/stakeholders/${item.id}`)}>Remove</button>\n </div>\n <details className=\"person-editor\">\n <summary>Edit contact details</summary>\n <form className=\"stack\" onSubmit={async (e: any) => {\n e.preventDefault();\n const data: any = Object.fromEntries(new FormData(e.currentTarget));\n data.email_cc = data.email_cc === \"on\";\n await onUpdate(item, data);\n }}>\n <Field label=\"Name\"><input name=\"name\" required defaultValue={item.name}/></Field>\n <PhoneField defaultValue={item.phone}/>\n <Field label=\"Email\"><input name=\"email\" type=\"email\" required defaultValue={item.email || \"\"}/></Field>\n <Field label=\"Role\"><input name=\"role\" defaultValue={item.role || \"\"}/></Field>\n {!Boolean(item.is_main_poc) && <label className=\"check\"><input name=\"email_cc\" type=\"checkbox\" defaultChecked={Boolean(item.email_cc)}/>Include in project email CC</label>}\n <Button variant=\"secondary\">Save contact</Button>\n </form>\n </details>\n </>}\n </div>\n </article>;\n}\n\nfunction DetailPanel({ projectId, actor, owners = [], partners = [], close, refreshList, notify }: any) {\n const [detail, setDetail] = useState<any>(null), [templates, setTemplates] = useState<any[]>([]), [tab, setTab] = useState(\"overview\"), [busy, setBusy] = useState(false), [invoiceOpen, setInvoiceOpen] = useState(false), [progressDraft, setProgressDraft] = useState(0), [selectedPartner, setSelectedPartner] = useState(\"\"), [editingMilestoneId, setEditingMilestoneId] = useState(\"\"), [savingMilestoneId, setSavingMilestoneId] = useState(\"\");\n const load = async () => {\n const value = await request(`/api/projects/${projectId}`);\n setDetail(value); setProgressDraft(Number(value.project.progress)); setSelectedPartner(value.project.partner_id || \"\"); post(`/api/projects/${projectId}/read`).catch(() => {});\n };\n useEffect(() => { load().catch((e) => notify(e.message, \"error\")); }, [projectId]);\n useEffect(() => { if (actor.actorType === \"internal\") request(\"/api/milestone-templates\").then((x) => setTemplates(x.templates)).catch(() => {}); }, [projectId]);\n if (!detail) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/><div className=\"skeleton\"/></div>;\n const p = detail.project, internal = actor.actorType === \"internal\";\n const saveOverview = async (e: any) => {\n e.preventDefault(); setBusy(true);\n try {\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n await patch(`/api/projects/${p.id}`, data); notify(\"Project updated\"); await load(); refreshList();\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const archive = async () => {\n try { await patch(`/api/projects/${p.id}`, { archived: !p.archived }); notify(p.archived ? \"Project restored\" : \"Project archived\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteProject = async () => {\n const left = Math.floor(Math.random() * 9) + 2, right = Math.floor(Math.random() * 9) + 2;\n const answer = prompt(`Permanently delete “${p.title}” and its full history?\\n\\nTo confirm, what is ${left} + ${right}?`);\n if (answer === null) return;\n try { await remove(`/api/projects/${p.id}`, { left, right, answer }); notify(\"Project permanently deleted\"); close(); refreshList(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const copyPortal = async () => {\n const url = `${location.origin}/client/${p.client_token}`;\n await navigator.clipboard.writeText(url); notify(\"Client link copied\");\n };\n const saveProgress = async () => {\n setBusy(true);\n try { await patch(`/api/projects/${p.id}`, { progress: progressDraft }); await load(); refreshList(); notify(\"Completion updated\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const removeItem = async (path: string) => {\n if (!confirm(\"Remove this item?\")) return;\n try { await remove(path); load(); } catch (x: any) { notify(x.message, \"error\"); }\n };\n const updateMilestone = async (item: any, status: string) => {\n try {\n await patch(`/api/milestones/${item.id}`, {\n status,\n completed_date: status === \"complete\" ? item.completed_date || new Date().toISOString().slice(0, 10) : \"\",\n });\n await load(); notify(`Milestone marked ${titleCase(status)}`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveMilestone = async (e: any, item: any) => {\n e.preventDefault(); setSavingMilestoneId(item.id);\n const formData = new FormData(e.currentTarget), data: any = Object.fromEntries(formData);\n data.client_visible = formData.has(\"client_visible\");\n data.completed_date = data.status === \"complete\"\n ? data.completed_date || item.completed_date || new Date().toISOString().slice(0, 10)\n : \"\";\n try {\n await patch(`/api/milestones/${item.id}`, data);\n setEditingMilestoneId(\"\"); await load(); notify(\"Milestone updated\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setSavingMilestoneId(\"\"); }\n };\n const extendSchedule = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const result = await post(`/api/projects/${p.id}/extensions`, Object.fromEntries(new FormData(form)));\n form.reset(); await load(); await refreshList();\n notify(`Schedule extended by ${result.days} ${result.days === 1 ? \"day\" : \"days\"}`);\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const updateStakeholder = async (item: any, changes: any) => {\n try {\n await patch(`/api/stakeholders/${item.id}`, changes);\n await load(); await refreshList(); notify(\"Project email recipients updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const collaborationReady = actor.actorType !== \"partner\" || p.status !== \"backlog\";\n const tabs = [\n { key: \"overview\", label: \"Overview\", icon: \"board\" },\n { key: \"timeline\", label: \"Timeline\", icon: \"update\", count: detail.comments.length + detail.milestones.filter((x: any) => x.status !== \"upcoming\").length },\n { key: \"milestones\", label: \"Milestones\", icon: \"milestone\", count: detail.milestones.length },\n { key: \"resources\", label: \"Resources\", icon: \"link\", count: detail.links.length + detail.credentials.length },\n { key: \"people\", label: \"People\", icon: \"users\", count: detail.stakeholders.length },\n { key: \"payments\", label: \"Payments\", icon: \"payment\", count: detail.payments.length },\n ...((internal || collaborationReady) ? [{ key: \"access\", label: \"Client access\", icon: \"key\" }] : []),\n ];\n return <div className=\"detail\">\n <header className=\"detail-header\">\n <div className=\"detail-title\"><div className=\"detail-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <span className=\"delay-badge\">Forecast +{p.delivery_delay_days}d</span>}{p.end_date && <span className={`delay-badge deadline-badge ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</span>}</div><h2>{p.title}</h2><div className=\"detail-meta\"><span>{p.partner_name ? `Partner · ${p.partner_name}` : \"Direct AFLABS project\"}</span><span>{p.project_type}</span>{p.contact_email && <a href={`mailto:${p.contact_email}`}><Icon name=\"mail\" size={13}/>{p.contact_email}</a>}</div></div>\n <div className={`detail-progress ${actor.role === \"admin\" ? \"detail-progress-editable\" : \"\"}`}>\n <div><span>Completion</span><b>{actor.role === \"admin\" ? progressDraft : p.progress}%</b></div>\n {actor.role === \"admin\" ? <div className=\"progress-controls\"><input aria-label=\"Project completion\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={progressDraft} onChange={(e) => setProgressDraft(Number(e.target.value))}/><Button type=\"button\" variant=\"secondary\" disabled={busy || progressDraft === p.progress} onClick={saveProgress}>Save</Button></div> : <div className=\"progress\"><i style={{ width: `${p.progress}%` }}/></div>}\n </div>\n <button className=\"icon-button\" onClick={close} aria-label=\"Close\"><Icon name=\"close\"/></button>\n </header>\n <nav className=\"detail-tabs\">{tabs.map((item) => <button className={tab === item.key ? \"active\" : \"\"} onClick={() => setTab(item.key)}><Icon name={item.icon} size={15}/><span>{item.label}</span>{item.count !== undefined && <b>{item.count}</b>}</button>)}</nav>\n <div className=\"detail-body\">\n {tab === \"overview\" && <div className=\"detail-section\">\n <div className=\"overview-layout\">\n {internal && canActor(actor, \"edit_projects\") ? <form className=\"form-grid overview-form\" onSubmit={saveOverview}>\n <div className=\"form-section-title full\"><h3>Project definition</h3><p>Scope, ownership, and delivery window.</p></div>\n <Field label=\"Title\"><input name=\"title\" defaultValue={p.title} required/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={p.status}>{Object.keys(statusMeta).filter((x) => x !== \"done\" || actor.role === \"admin\").map((x) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"One-line description\"><input name=\"description\" maxLength={240} defaultValue={p.description}/></Field>\n <Field label=\"Detailed working notes\" className=\"full project-markdown-field\" hint=\"Markdown is supported for structured project context.\"><textarea name=\"markdown_details\" rows={14} defaultValue={p.markdown_details || \"\"}/></Field>\n {detail.stakeholders.length ? <div className=\"recipient-source full\"><Icon name=\"users\" size={16}/><div><b>Email recipients come from stakeholders</b><p>Use the People tab to mark the main POC and choose CC recipients.</p></div></div> : <><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={p.contact_email || \"\"} placeholder=\"project@example.com\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(p.cc_emails || []).join(\", \")} placeholder=\"finance@example.com, poc@example.com\"/></Field></>}\n {actor.role === \"admin\" && detail.notificationCcOptions?.length > 0 && <fieldset className=\"full project-cc-settings\"><legend>Company CC recipients</legend><p className=\"field-note\">These recipients are added alongside stakeholder CCs whenever you choose to email an update.</p><div className=\"permission-grid\">{detail.notificationCcOptions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(p.notification_cc_ids || []).includes(x.id)}/><span><b>{x.label}</b><small>{x.email || \"Mapped internal user\"}</small></span></label>)}</div></fieldset>}\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={p.owner_user_id || \"\"} required><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={p.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"Start date\" hint={p.start_date ? `${prettyDate(p.start_date)} · ${projectDateFootnote(p.start_date, \"start\")}` : \"\"}><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\" hint={p.end_date ? `${prettyDate(p.end_date)} · ${projectDateFootnote(p.end_date, \"end\")}` : \"\"}><input name=\"end_date\" type=\"date\" defaultValue={p.end_date || \"\"}/></Field>\n <div className=\"form-section-title full\"><h3>Commercial details</h3><p>Internal pricing and partner documentation.</p></div>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={p.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.regular_cost}/></Field>\n {selectedPartner && <><Field label=\"Partner-managed cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.partner_cost}/></Field><Field label=\"Commission document\"><input name=\"commission_document_url\" type=\"url\" defaultValue={p.commission_document_url || \"\"}/></Field></>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={p.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(p.tax_inclusive)}/> Cost already includes {p.tax_label || \"tax\"}</label>\n <CommercialPreview partnerId={selectedPartner} regularCost={p.regular_cost} partnerCost={p.partner_cost} currency={p.currency} taxRate={p.tax_rate} taxInclusive={p.tax_inclusive}/>\n <div className=\"form-actions full\"><Button disabled={busy}>{busy ? \"Saving…\" : \"Save project\"}</Button>{canActor(actor, \"archive_projects\") && <Button type=\"button\" variant=\"secondary\" icon=\"archive\" onClick={archive}>{p.archived ? \"Restore\" : \"Archive\"}</Button>}{actor.role === \"admin\" && <Button type=\"button\" variant=\"danger\" onClick={deleteProject}>Delete permanently</Button>}</div>\n </form> : <div className=\"read-overview\"><div className=\"overview-description\"><h3>Project summary</h3><p>{p.description || \"No summary yet.\"}</p>{p.markdown_details && <section className=\"project-markdown-notes\"><header><div><h4>Detailed working notes</h4><p>Structured project context</p></div><span>Markdown</span></header><MarkdownBlock value={p.markdown_details}/></section>}</div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}{p.start_date && <small>{projectDateFootnote(p.start_date, \"start\")}</small>}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}{p.end_date && <small>{projectDateFootnote(p.end_date, \"end\")}</small>}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d{p.forecast_end_date && <small>{projectDateFootnote(p.forecast_end_date, \"end\")}</small>}</dd></div>}<div><dt>Type</dt><dd>{p.project_type}</dd></div>{p.contact_email && <div><dt>Project email</dt><dd><a href={`mailto:${p.contact_email}`}>{p.contact_email}</a></dd></div>}</dl></div>}\n <aside className=\"overview-summary\"><h3>Delivery snapshot</h3><dl><div><dt>Status</dt><dd>{statusMeta[p.status]?.label}</dd></div><div><dt>Primary owner</dt><dd>{p.owner_name || \"Not assigned\"}</dd></div><div><dt>Completion</dt><dd>{p.progress}%</dd></div><div><dt>Timeline</dt><dd>{detail.comments.length + detail.milestones.length} entries</dd></div><div><dt>Stakeholders</dt><dd>{detail.stakeholders.length}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Expected delay</dt><dd>+{p.delivery_delay_days} days</dd></div>}</dl>{actor.actorType === \"partner\" && !collaborationReady && <p className=\"notice\"><Icon name=\"clock\" size={15}/>Collaboration tools unlock when AFLABS moves this project to To do.</p>}</aside>\n </div>\n {actor.actorType === \"partner\" && actor.permissions.edit_owned_projects && <PartnerProjectEditor project={p} onDone={async () => { await load(); await refreshList(); }} notify={notify}/>}\n {internal && canActor(actor, \"edit_projects\") && p.end_date && <details className=\"schedule-extension\"><summary><span><Icon name=\"clock\" size={16}/><b>Extend target date</b></span><Icon name=\"chevron\" size={15}/></summary><form className=\"form-row\" onSubmit={extendSchedule}><Field label=\"New target date\"><input name=\"new_end_date\" type=\"date\" min={p.end_date} required/></Field><Field label=\"External reason\"><input name=\"reason\" required placeholder=\"Client dependency, approval delay…\"/></Field><Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field><Button disabled={busy}>Record extension</Button></form></details>}\n </div>}\n {tab === \"timeline\" && <Timeline detail={detail} actor={actor} reload={load} notify={notify}/>}\n {tab === \"milestones\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Delivery milestones</h3><p>Concrete checkpoints that also shape the client journey.</p></div>{internal && canActor(actor, \"manage_milestones\") && <div className=\"toolbar-actions\">{templates.length > 0 && <form className=\"template-apply\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const result = await post(`/api/projects/${p.id}/apply-milestone-template`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(`${result.count || 0} milestones added. Set their project due dates below.`); }}><select name=\"template_id\" required defaultValue=\"\"><option value=\"\">Use template…</option>{templates.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select><Button variant=\"secondary\">Apply</Button></form>}<details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add milestone</summary><div className=\"popover-form\"><QuickForm kind=\"milestone\" projectId={p.id} detail={detail} done={load}/></div></details></div>}</div>\n {internal && canActor(actor, \"manage_milestones\") && detail.milestones.some((x: any) => !x.due_date && x.status !== \"complete\") && <div className=\"milestone-date-notice\"><span><Icon name=\"clock\" size={16}/></span><div><b>Schedule your imported milestones</b><p>Template milestones use project-specific dates. Select Edit to set each due date and adjust its details.</p></div></div>}\n <div className=\"milestone-list\">{detail.milestones.map((x: any) => <article key={x.id} className={`milestone-row state-${x.status}`}>\n <span className=\"milestone-state\"><Icon name={x.status === \"complete\" ? \"check\" : x.status === \"active\" ? \"update\" : \"clock\"} size={15}/></span>\n <div className=\"milestone-copy\"><header><h4>{x.title}</h4><span>{titleCase(x.status)}</span>{!x.due_date && x.status !== \"complete\" && <span className=\"milestone-undated\">Date needed</span>}</header><p>{x.tag} · {x.completed_date ? `Completed ${prettyDate(x.completed_date)}` : x.due_date ? `Due ${prettyDate(x.due_date)}` : \"Due date not set\"}</p>{x.description && <small>{x.description}</small>}</div>\n {internal && canActor(actor, \"manage_milestones\") && <div className=\"milestone-actions\"><select aria-label={`Status for ${x.title}`} value={x.status} onChange={(e) => updateMilestone(x, e.target.value)}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select><button type=\"button\" className=\"text-action\" aria-expanded={editingMilestoneId === x.id} onClick={() => setEditingMilestoneId(editingMilestoneId === x.id ? \"\" : x.id)}>{editingMilestoneId === x.id ? \"Close\" : \"Edit\"}</button><button type=\"button\" className=\"text-danger\" onClick={() => removeItem(`/api/milestones/${x.id}`)}>Remove</button></div>}\n {editingMilestoneId === x.id && <form className=\"milestone-editor\" onSubmit={(e) => saveMilestone(e, x)}>\n <Field label=\"Milestone title\"><input name=\"title\" required defaultValue={x.title}/></Field>\n <Field label=\"Tag\"><input name=\"tag\" defaultValue={x.tag || \"Milestone\"}/></Field>\n <Field label=\"Due date\"><input name=\"due_date\" type=\"date\" defaultValue={x.due_date || \"\"}/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={x.status}><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field>\n <Field label=\"Completed date\" hint=\"Filled automatically when marked complete\"><input name=\"completed_date\" type=\"date\" defaultValue={x.completed_date || \"\"}/></Field>\n <label className=\"check milestone-visibility\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked={Boolean(x.client_visible)}/> Visible on the client portal</label>\n <div className=\"milestone-description\"><Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description || \"\"} placeholder=\"What will be delivered at this checkpoint?\"/></Field></div>\n <div className=\"form-actions\"><Button disabled={savingMilestoneId === x.id}>{savingMilestoneId === x.id ? \"Saving…\" : \"Save milestone\"}</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingMilestoneId(\"\")}>Cancel</Button></div>\n </form>}\n </article>)}</div>\n {!detail.milestones.length && <Empty title=\"No milestones yet\" text=\"Add milestone tags to make delivery checkpoints visible.\"/>}\n </div>}\n {tab === \"resources\" && <div className=\"detail-section split-section\">\n <section><div className=\"section-toolbar\"><div><h3>Shared resources</h3><p>Documents, contracts, references, and repositories.</p></div>{((internal && canActor(actor, \"manage_links\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add resource</summary><div className=\"popover-form\"><QuickForm kind=\"link\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"resource-list\">{detail.links.map((x: any) => <article className=\"resource-row\"><span className=\"resource-icon\"><Icon name={x.link_type === \"github\" ? \"work\" : \"link\"}/></span><div><a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a><p>{titleCase(x.link_type)} · {x.client_visible ? \"Client visible\" : \"Team only\"}</p></div>{internal && canActor(actor, \"manage_links\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/links/${x.id}`)}>Remove</button>}</article>)}</div>{!detail.links.length && <Empty title=\"No shared resources\" text=\"Add the first document, contract, repository, or reference link.\"/>}</section>\n {((internal && canActor(actor, \"view_credentials\")) || (actor.actorType === \"partner\" && collaborationReady)) && <section><div className=\"section-toolbar\"><div><h3>Credentials</h3><p>Project access details. Credentials remain hidden from the client portal.</p></div>{((internal && canActor(actor, \"manage_credentials\")) || actor.actorType === \"partner\") && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add credential</summary><div className=\"popover-form\"><QuickForm kind=\"credential\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"credential-list\">{detail.credentials.map((x: any) => <CredentialCard item={x} canRemove={internal && canActor(actor, \"manage_credentials\")} removeItem={removeItem}/>)}</div>{!detail.credentials.length && <Empty title=\"No credentials saved\" text=\"Add basic project access details when the delivery team needs them.\"/>}</section>}\n </div>}\n {tab === \"people\" && <div className=\"detail-section\"><div className=\"section-toolbar\"><div><h3>Client stakeholders</h3><p>One contact is always the main POC. Other stakeholder emails can receive project updates by CC.</p></div>{((internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add stakeholder</summary><div className=\"popover-form\"><QuickForm kind=\"stakeholder\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"people-grid\">{detail.stakeholders.map((x: any) => <StakeholderCard key={x.id} item={x} canManage={(internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)} onUpdate={updateStakeholder} onRemove={removeItem}/>)}</div>{!detail.stakeholders.length && <Empty title=\"No stakeholders\" text=\"Add a client contact; the first becomes the main POC automatically.\"/>}</div>}\n {tab === \"payments\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Payment fulfillment</h3><p>Track receipts and generate branded invoices against the agreed client cost.</p></div>{(actor.actorType === \"partner\" || canActor(actor, \"manage_payments\")) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Record payment</summary><div className=\"popover-form\"><QuickForm kind=\"payment\" projectId={p.id} detail={detail} done={load}/></div></details>}</div>\n <div className=\"payment-summary\"><div><span>Project cost</span><b>{money(detail.paymentSummary.total, p.currency)}</b></div><div><span>Received</span><b>{money(detail.paymentSummary.paid, p.currency)}</b></div><div className=\"pending\"><span>Pending</span><b>{money(detail.paymentSummary.pending, p.currency)}</b></div></div>\n <div className=\"payments-layout\"><section><h4 className=\"subsection-title\">Receipts</h4><div className=\"item-list\">{detail.payments.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"payment\"/></span><div><b>{money(x.amount, x.currency)}</b><p>{prettyDate(x.paid_date)} · {x.note || \"Payment received\"}</p><a className=\"receipt-link\" href={`/api/payments/${x.id}/receipt.pdf`} target=\"_blank\" rel=\"noreferrer\">Receipt PDF ↗</a></div>{internal && canActor(actor, \"manage_payments\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/payments/${x.id}`)}>Remove</button>}</div>)}</div>{!detail.payments.length && <p className=\"muted\">No payments recorded yet.</p>}</section>\n <section>\n <div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <Button variant=\"secondary\" icon=\"plus\" onClick={() => setInvoiceOpen(true)}>Create invoice</Button>}</div>\n <Modal open={invoiceOpen} close={() => setInvoiceOpen(false)} wide><div className=\"modal-head\"><div><h2>New invoice</h2><p>Review line items, adjustments, tax, and the final total before creating the PDF.</p></div><button className=\"icon-button\" aria-label=\"Close invoice composer\" onClick={() => setInvoiceOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><InvoiceComposer project={p} detail={detail} onDone={async () => { await load(); setInvoiceOpen(false); }} notify={notify}/></div></Modal>\n <div className=\"invoice-list\">{(detail.invoices || []).map((x: any) => <a className=\"invoice-row\" href={\"/api/invoices/\" + x.id + \"/pdf\"} target=\"_blank\"><span><Icon name=\"note\"/></span><div><b>{x.invoice_number}</b><p>{titleCase(x.invoice_type)} · {money(x.total || x.amount, x.currency)} · {x.items?.length || 0} items</p></div><em>PDF ↗</em></a>)}</div>\n {!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}\n </section></div>\n </div>}\n {tab === \"access\" && <div className=\"detail-section access-grid\"><section><div className=\"section-heading\"><h3>Client portal access</h3><p>Share the private project link and PIN together with the client.</p></div><div className=\"portal-access-card\"><div><span>Private project link</span><code>{location.origin}/client/{p.client_token}</code></div><Button variant=\"secondary\" icon=\"copy\" onClick={copyPortal}>Copy link</Button><div><span>Project PIN</span><strong>{p.client_pin}</strong></div></div>{internal && <form className=\"inline-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await patch(`/api/projects/${p.id}`, Object.fromEntries(new FormData(form))); notify(\"Client PIN updated\"); await load(); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Change client PIN\"><input name=\"client_pin\" defaultValue={p.client_pin} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Button>Update PIN</Button></form>}</section><section className=\"privacy-note\"><h3>Client-safe sharing</h3><ul><li>Only client-visible links, milestones, and timeline entries appear.</li><li>Credentials, internal comments, and commission documents remain private.</li><li>Project completion and payment fulfillment update automatically.</li></ul></section></div>}\n </div>\n </div>;\n}\n\nfunction BrandingEditor({ value, fallback = {}, title, description, partner = false, onSave }: any) {\n const [draft, setDraft] = useState<any>(value || {});\n useEffect(() => { setDraft(value || {}); }, [JSON.stringify(value)]);\n const update = (key: string, next: string) => setDraft((current: any) => ({ ...current, [key]: next }));\n const effective = {\n name: draft.name || fallback.name || \"AFLABS\",\n logo_url: draft.logo_url || fallback.logo_url || \"/frontend/logo.png\",\n accent_color: draft.accent_color || fallback.accent_color || \"#8edb11\",\n contact_info: draft.contact_info || fallback.contact_info || \"\",\n website_url: draft.website_url || fallback.website_url || \"\",\n portal_label: draft.portal_label || fallback.portal_label || \"Project delivery\",\n welcome_message: draft.welcome_message || fallback.welcome_message || \"Every meaningful update, in one clear timeline.\",\n document_header: draft.document_header || fallback.document_header || \"AFLABS PM\\nProject delivery, made visible.\",\n document_footer: draft.document_footer || fallback.document_footer || \"Thank you for your business.\",\n };\n return <div className=\"branding-layout\">\n <section className=\"branding-form\">\n <h2>{title}</h2><p>{description}</p>\n <form className=\"stack\" onSubmit={async (e) => { e.preventDefault(); await onSave(draft); }}>\n <div className=\"form-row\"><Field label=\"Brand name\"><input value={draft.name || \"\"} onChange={(e) => update(\"name\", e.target.value)} placeholder={partner ? fallback.name || \"Use AFLABS default\" : \"AFLABS\"} required={!partner}/></Field>{!partner && <Field label=\"Portal label\"><input value={draft.portal_label || \"\"} onChange={(e) => update(\"portal_label\", e.target.value)} required/></Field>}</div>\n <Field label=\"Logo URL\" hint={partner ? \"Leave blank to use the AFLABS logo\" : \"The supplied AFLABS logo is available at /frontend/logo.png\"}><input value={draft.logo_url || \"\"} onChange={(e) => update(\"logo_url\", e.target.value)} placeholder={partner ? fallback.logo_url || \"/frontend/logo.png\" : \"/frontend/logo.png\"} required={!partner}/></Field>\n <div className=\"form-row\">\n <Field label=\"Accent color\"><div className=\"color-control\"><input type=\"color\" value={effective.accent_color.startsWith(\"#\") ? effective.accent_color : \"#8edb11\"} onChange={(e) => update(\"accent_color\", e.target.value)}/><input value={draft.accent_color || \"\"} onChange={(e) => update(\"accent_color\", e.target.value)} placeholder={fallback.accent_color || \"#8edb11\"}/></div></Field>\n <Field label=\"Contact information\"><input value={draft.contact_info || \"\"} onChange={(e) => update(\"contact_info\", e.target.value)} placeholder={partner ? fallback.contact_info || \"Email or support line\" : \"Email or support line\"}/></Field>\n </div>\n <Field label=\"Website\"><input type=\"url\" value={draft.website_url || \"\"} onChange={(e) => update(\"website_url\", e.target.value)} placeholder={fallback.website_url || \"https://example.com\"}/></Field>\n {!partner && <Field label=\"Timeline introduction\"><textarea rows={3} value={draft.welcome_message || \"\"} onChange={(e) => update(\"welcome_message\", e.target.value)}/></Field>}\n <div className=\"document-branding-fields\">\n <div className=\"form-section-title\"><h3>PDF document details</h3><p>Used consistently on proposals, invoices, and payment receipts.</p></div>\n <Field label=\"Document header\" hint={partner ? \"Leave blank to use the AFLABS document header\" : \"Business name, address, or a short legal line\"}><textarea rows={3} value={draft.document_header || \"\"} onChange={(e) => update(\"document_header\", e.target.value)} placeholder={fallback.document_header || \"Business name\\nAddress or legal details\"}/></Field>\n <Field label=\"Document footer\" hint={partner ? \"Leave blank to use the AFLABS document footer\" : \"Payment, contact, registration, or thank-you details\"}><textarea rows={3} value={draft.document_footer || \"\"} onChange={(e) => update(\"document_footer\", e.target.value)} placeholder={fallback.document_footer || \"Contact and payment details\"}/></Field>\n </div>\n {partner && <p className=\"fallback-note\">Any blank partner field automatically uses the direct AFLABS branding.</p>}\n <div className=\"form-actions\"><Button>Save branding</Button></div>\n </form>\n </section>\n <aside className=\"branding-preview\" style={{ \"--preview-accent\": effective.accent_color } as any}>\n <span className=\"preview-label\">Client preview</span>\n <div className=\"preview-brand\"><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><small>{effective.portal_label}</small></div></div>\n <div className=\"preview-project\"><span>In progress</span><h3>Your project title</h3><p>{effective.welcome_message}</p><div><i/></div></div>\n {(effective.contact_info || effective.website_url) && <small className=\"preview-contact\">{effective.contact_info}{effective.contact_info && effective.website_url ? \" · \" : \"\"}{effective.website_url && \"Visit website\"}</small>}\n <div className=\"document-preview\"><small>Document preview</small><header><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><span>{effective.document_header}</span></div></header><section><i/><strong>Proposal · Invoice · Receipt</strong><p>Professional documents automatically use this logo, accent, header, and footer.</p></section><footer>{effective.document_footer}</footer></div>\n </aside>\n </div>;\n}\n\nfunction AdminDirectory({ actor, config, projects, notify }: any) {\n const [tab, setTab] = useState(\"users\");\n const [users, setUsers] = useState<any[]>([]);\n const [partners, setPartners] = useState<any[]>([]);\n const [branding, setBranding] = useState<any>(null);\n const [loaded, setLoaded] = useState(false);\n const [userRole, setUserRole] = useState(\"user\");\n const [editingUser, setEditingUser] = useState<any>(null);\n const [editingPartner, setEditingPartner] = useState<any>(null);\n const [partnerPermissionLevel, setPartnerPermissionLevel] = useState(\"basic\");\n const [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\n const [ccUserId, setCcUserId] = useState(\"\");\n\n const load = async () => {\n const [userData, partnerData, brandData, ccData] = await Promise.all([\n request(\"/api/admin/users\"),\n request(\"/api/admin/partners\"),\n request(\"/api/admin/branding\"),\n request(\"/api/admin/cc-recipients\"),\n ]);\n setUsers(userData.users);\n setPartners(partnerData.partners);\n setBranding(brandData.branding);\n setProjectOptions(userData.projects || projects);\n setCcRecipients(ccData.recipients || []);\n setCcUsers(ccData.users || []);\n setLoaded(true);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n\n const addUser = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n const formData = new FormData(form);\n const data: any = Object.fromEntries(formData);\n data.permissions = Object.fromEntries(config.permissions.map((x: any) => [x.key, formData.has(`perm_${x.key}`)]));\n data.all_project_access = formData.has(\"all_project_access\");\n data.project_ids = formData.getAll(\"project_ids\");\n try {\n await post(\"/api/admin/users\", data);\n form.reset();\n setUserRole(\"user\");\n await load();\n notify(\"Team member added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addPartner = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n try {\n const values = new FormData(form), data: any = Object.fromEntries(values);\n data.permission_level = partnerPermissionLevel;\n data.permissions = Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"partner_perm_\" + item.key)]));\n await post(\"/api/admin/partners\", data);\n form.reset();\n setPartnerPermissionLevel(\"basic\");\n await load();\n notify(\"Partner added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const toggle = async (type: string, item: any) => {\n try {\n await patch(`/api/admin/${type}/${item.id}`, { active: !item.active });\n await load();\n notify(item.active ? \"Access revoked\" : \"Access restored\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveUserVisibility = async (e: any) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n try {\n await patch(`/api/admin/users/${editingUser.id}`, {\n name: formData.get(\"name\"),\n email: formData.get(\"email\"),\n pin: formData.get(\"pin\"),\n all_project_access: formData.has(\"all_project_access\"),\n project_ids: formData.getAll(\"project_ids\"),\n });\n await load(); setEditingUser(null); notify(\"Project visibility updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const destroy = async (type: string, item: any) => {\n if (!confirm(`Permanently remove ${item.name}? This cannot be undone.`)) return;\n try {\n await remove(`/api/admin/${type}/${item.id}`);\n await load();\n notify(`${item.name} removed`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerPermissions = async (e: any) => {\n e.preventDefault();\n const values = new FormData(e.currentTarget);\n try {\n await patch(\"/api/admin/partners/\" + editingPartner.id, {\n permission_level: editingPartner.permission_level || \"basic\",\n permissions: Object.fromEntries(config.partnerPermissions.map((item: any) => [item.key, values.has(\"edit_partner_perm_\" + item.key)])),\n });\n await load(); setEditingPartner(null); notify(\"Partner permissions updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerBranding = async (data: any) => {\n try {\n await patch(`/api/admin/partners/${editingPartner.id}`, {\n brand_name: data.name, logo_url: data.logo_url, accent_color: data.accent_color,\n contact_info: data.contact_info, website_url: data.website_url,\n document_header: data.document_header, document_footer: data.document_footer,\n });\n await load(); setEditingPartner(null); notify(\"Partner branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveBranding = async (data: any) => {\n try {\n const result = await patch(\"/api/admin/branding\", data);\n setBranding(result.branding);\n notify(\"Client portal branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveCcRecipients = async (next: any[], message = \"Email CC settings updated\") => {\n try {\n const result = await patch(\"/api/admin/cc-recipients\", { recipients: next });\n setCcRecipients(result.recipients);\n notify(message);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addCcRecipient = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget, formData = new FormData(form);\n await saveCcRecipients([...ccRecipients, {\n id: crypto.randomUUID(), label: formData.get(\"label\"),\n email: ccUserId ? \"\" : formData.get(\"email\"), user_id: ccUserId,\n default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\n setCcUserId(\"\");\n };\n\n if (!loaded) return <PageSkeleton rows={5}/>;\n return <div className=\"directory\">\n <header className=\"page-heading\">\n <div>\n <p>Administration</p>\n <h1>Access & branding</h1>\n <span>Manage who can enter the workspace and how direct client portals present AFLABS.</span>\n </div>\n </header>\n <div className=\"directory-tabs\">\n <button className={tab === \"users\" ? \"active\" : \"\"} onClick={() => setTab(\"users\")}>Internal team <b>{users.length}</b></button>\n <button className={tab === \"partners\" ? \"active\" : \"\"} onClick={() => setTab(\"partners\")}>Partners <b>{partners.length}</b></button>\n <button className={tab === \"branding\" ? \"active\" : \"\"} onClick={() => setTab(\"branding\")}>Client branding</button>\n <button className={tab === \"email\" ? \"active\" : \"\"} onClick={() => setTab(\"email\")}>Email CC <b>{ccRecipients.length}</b></button>\n </div>\n\n {tab === \"users\" && <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add internal user</h2>\n <p>Admins receive full access. For users, choose each permitted action and project scope.</p>\n <form className=\"stack\" onSubmit={addUser}>\n <div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"Work email\" hint=\"Used when this user is mapped to a project CC recipient\"><input name=\"email\" type=\"email\" placeholder=\"name@company.com\"/></Field>\n <div className=\"form-row\"><Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Field label=\"Role\"><select name=\"role\" value={userRole} onChange={(e) => setUserRole(e.target.value)}><option value=\"user\">User</option><option value=\"admin\">Admin</option></select></Field></div>\n <fieldset key={userRole}><legend>Allowed actions</legend><div className=\"permission-grid\">{config.permissions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name={`perm_${x.key}`} defaultChecked={userRole === \"admin\" || userDefaults[x.key]} disabled={userRole === \"admin\"}/>{x.label}</label>)}</div>{userRole === \"admin\" && <small className=\"field-note\">Administrators always receive every action. Project visibility remains configurable below.</small>}</fieldset>\n <fieldset><legend>Project visibility</legend><label className=\"check\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked/> All projects</label><div className=\"project-checks\">{projectOptions.map((p: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={p.id}/>{p.title}{p.archived ? \" · Archived\" : \"\"}</label>)}</div></fieldset>\n <Button icon=\"plus\">Add user</Button>\n </form>\n </section>\n <section className=\"directory-list\">{users.map((u) => {\n const isSelf = u.id === actor.actorId;\n return <article className=\"directory-row\" key={u.id}>\n <span className=\"avatar\">{initials(u.name)}</span>\n <div><h3>{u.name}<em>{isSelf ? \"you\" : u.role}</em></h3><p>{u.phone}{u.email ? ` · ${u.email}` : \"\"}</p><small>{u.role === \"admin\" ? \"All actions\" : `${Object.values(u.permissions).filter(Boolean).length} actions`} · {u.all_project_access ? \"all projects\" : `${u.project_ids.length} assigned`}</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" icon=\"eye\" onClick={() => setEditingUser(u)}>Manage</Button>{isSelf ? <span className=\"self-label\">Protected current account</span> : <><Button variant=\"secondary\" onClick={() => toggle(\"users\", u)}>{u.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"users\", u)}>Remove</button></>}</div>\n </article>;\n })}</section>\n </div>}\n <Modal open={Boolean(editingUser)} close={() => setEditingUser(null)}>{editingUser && <><div className=\"modal-head\"><div><h2>Manage {editingUser.name}</h2><p>Update account access, login PIN, and project visibility.</p></div><button className=\"icon-button\" onClick={() => setEditingUser(null)}><Icon name=\"close\"/></button></div><form className=\"modal-content stack visibility-editor\" onSubmit={saveUserVisibility}><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" defaultValue={editingUser.name} required/></Field><Field label=\"Work email\"><input name=\"email\" type=\"email\" defaultValue={editingUser.email || \"\"}/></Field></div><Field label=\"New login PIN\" hint=\"Leave blank to keep the current PIN\"><input name=\"pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\" placeholder=\"4–8 digits\"/></Field><label className=\"scope-toggle\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked={editingUser.all_project_access}/><span><b>All projects</b><small>Automatically include current and future projects.</small></span></label><fieldset><legend>Selected projects</legend><p className=\"field-note\">Used when “All projects” is unchecked.</p><div className=\"project-visibility-list\">{projectOptions.map((project: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={project.id} defaultChecked={editingUser.project_ids.includes(project.id)}/><span><b>{project.title}</b><small>{statusMeta[project.status]?.label}{project.archived ? \" · Archived\" : \"\"}</small></span></label>)}</div></fieldset><div className=\"form-actions\"><Button>Save account</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingUser(null)}>Cancel</Button></div></form></>}</Modal>\n\n {tab === \"partners\" && <>\n <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add partner</h2>\n <p>Each partner has one account. New partners inherit the default AFLABS client branding until customized.</p>\n <form className=\"stack\" onSubmit={addPartner}>\n <div className=\"form-row\"><Field label=\"Partner name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n <label className={partnerPermissionLevel === \"basic\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"basic\" checked={partnerPermissionLevel === \"basic\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Basic</b><small>Capture leads, view owned work, chat, meetings, and AI tools.</small></span></label>\n <label className={partnerPermissionLevel === \"advanced\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"advanced\" checked={partnerPermissionLevel === \"advanced\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Advanced</b><small>Manage and convert owned leads, and edit owned projects.</small></span></label>\n <label className={partnerPermissionLevel === \"custom\" ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value=\"custom\" checked={partnerPermissionLevel === \"custom\"} onChange={(e) => setPartnerPermissionLevel(e.target.value)}/><span><b>Custom</b><small>Choose each action individually.</small></span></label>\n </div></fieldset>\n {partnerPermissionLevel === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions apply only to leads and projects owned by this partner.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"partner_perm_\" + item.key}/><span>{item.label}</span></label>)}</div></fieldset>}\n <Button icon=\"plus\">Add partner</Button>\n </form>\n </section>\n <section className=\"directory-list\">{partners.map((p) => <article className=\"directory-row\" key={p.id}>\n <span className=\"avatar partner-avatar\" style={{ background: p.accent_color || undefined }}>{initials(p.brand_name || p.name)}</span>\n <div><h3>{p.name}<em>{p.active ? \"active\" : \"revoked\"}</em></h3><p>{p.phone}</p><small>{titleCase(p.permission_level || \"basic\")} permissions · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Manage</Button><Button variant=\"secondary\" onClick={() => toggle(\"partners\", p)}>{p.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"partners\", p)}>Remove</button></div>\n </article>)}</section>\n </div>\n <Modal open={Boolean(editingPartner)} close={() => setEditingPartner(null)} wide>{editingPartner && <><div className=\"modal-head\"><div><h2>Manage {editingPartner.name}</h2><p>Control access level and partner-facing branding.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">\n <form className=\"growth-stack partner-permission-editor\" onSubmit={savePartnerPermissions}>\n <header><div><h3>Access permissions</h3><p>Choose a predictable package or specify each allowed action.</p></div><span>{titleCase(editingPartner.permission_level || \"basic\")} access</span></header>\n <fieldset className=\"permission-package-fieldset\"><legend>Permission package</legend><div className=\"permission-package-grid\">\n {[\n { value: \"basic\", title: \"Basic\", text: \"Capture leads, view owned work, chat, meetings, and AI tools.\" },\n { value: \"advanced\", title: \"Advanced\", text: \"Manage and convert owned leads, and edit owned projects.\" },\n { value: \"custom\", title: \"Custom\", text: \"Choose each action individually.\" },\n ].map((option) => <label key={option.value} className={(editingPartner.permission_level || \"basic\") === option.value ? \"selected\" : \"\"}><input type=\"radio\" name=\"permission_level\" value={option.value} checked={(editingPartner.permission_level || \"basic\") === option.value} onChange={(e) => setEditingPartner({ ...editingPartner, permission_level: e.target.value })}/><span><b>{option.title}</b><small>{option.text}</small></span></label>)}\n </div></fieldset>\n {editingPartner.permission_level === \"custom\" && <fieldset className=\"custom-permission-fieldset\"><legend>Allowed actions</legend><p className=\"field-note\">Permissions remain limited to this partner's own leads and projects.</p><div className=\"permission-grid partner-permission-grid\">{config.partnerPermissions.map((item: any) => <label className=\"check\" key={item.key}><input type=\"checkbox\" name={\"edit_partner_perm_\" + item.key} defaultChecked={editingPartner.permissions?.[item.key] === true}/><span>{item.label}</span></label>)}</div></fieldset>}\n <footer><Button>Save permissions</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingPartner(null)}>Cancel</Button></footer>\n </form>\n <BrandingEditor\n value={{ name: editingPartner.brand_name || \"\", logo_url: editingPartner.logo_url || \"\", accent_color: editingPartner.accent_color || \"\", contact_info: editingPartner.contact_info || \"\", website_url: editingPartner.website_url || \"\", document_header: editingPartner.document_header || \"\", document_footer: editingPartner.document_footer || \"\" }}\n fallback={branding || {}} partner title=\"Partner branding\"\n description=\"Blank fields inherit the direct AFLABS brand.\"\n onSave={savePartnerBranding}\n /></div></>}</Modal>\n </>}\n\n {tab === \"branding\" && branding && <BrandingEditor value={branding} fallback={branding} title=\"Direct client portal\" description=\"These defaults apply to direct projects and fill any blank fields in partner branding.\" onSave={saveBranding}/>}\n {tab === \"email\" && <div className=\"directory-layout cc-directory\">\n <section className=\"directory-form\"><h2>Add a default CC recipient</h2><p>Map an internal user to always use their current work email, or add a standalone company address.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Recipient source\"><select name=\"user_id\" value={ccUserId} onChange={(e) => setCcUserId(e.target.value)}><option value=\"\">Standalone email address</option>{ccUsers.filter((x: any) => x.active && x.email).map((x: any) => <option key={x.id} value={x.id}>{x.name} · {x.email}</option>)}</select></Field>{ccUserId ? <p className=\"recipient-source\"><Icon name=\"mail\" size={16}/><span><b>Uses the internal user’s current email</b><small>Update the user’s work email under Internal team whenever it changes.</small></span></p> : <Field label=\"Recipient email\"><input name=\"email\" type=\"email\" required placeholder=\"finance@company.com\"/></Field>}<p className=\"field-note\">Internal users without a work email can be updated under Internal team before mapping them.</p><label className=\"check\"><input name=\"default_selected\" type=\"checkbox\"/> Select automatically on new projects</label><Button icon=\"plus\">Add recipient</Button></form></section>\n <section className=\"directory-list\">{ccRecipients.map((recipient: any) => { const mapped = ccUsers.find((x: any) => x.id === recipient.user_id); return <article className=\"directory-row\" key={recipient.id}><span className=\"avatar\"><Icon name=\"mail\" size={17}/></span><div><h3>{recipient.label}<em>{recipient.default_selected ? \"new project default\" : \"optional\"}</em></h3><p>{mapped?.email || recipient.email || \"Update this internal user’s work email\"}</p><small>{mapped ? `Uses ${mapped.name}’s current work email` : \"Standalone email recipient\"}</small></div><div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => saveCcRecipients(ccRecipients.map((x: any) => x.id === recipient.id ? { ...x, default_selected: !x.default_selected } : x))}>{recipient.default_selected ? \"Make optional\" : \"Use by default\"}</Button><button className=\"text-danger\" onClick={() => saveCcRecipients(ccRecipients.filter((x: any) => x.id !== recipient.id), \"CC recipient removed\")}>Remove</button></div></article>; })}{!ccRecipients.length && <Empty title=\"No company CC recipients\" text=\"Add finance, operations, or account contacts that should be available across projects.\"/>}</section>\n </div>}\n </div>;\n}\n\nfunction PartnerBranding({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const load = () => request(\"/api/partner/branding\").then(setData);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/></div>;\n return <div className=\"directory\">\n <header className=\"page-heading\"><div><p>Partner workspace</p><h1>Client branding</h1><span>Customize how your linked project portals appear to your clients.</span></div></header>\n <BrandingEditor value={data.overrides} fallback={data.branding} partner title=\"Your client portal brand\" description=\"Your logo, name, accent, contact details, and website appear on projects attributed to you.\" onSave={async (branding: any) => {\n const result = await patch(\"/api/partner/branding\", branding);\n setData((current: any) => ({ ...current, branding: result.branding, overrides: branding }));\n notify(\"Partner branding updated\");\n }}/>\n </div>;\n}\n\nfunction Dashboard({ actor, notify, onQuestions }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { request(\"/api/dashboard\").then(setData).catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4} chart/>;\n const totalProjects = Object.values(data.status_counts).reduce((sum: number, count: any) => sum + Number(count), 0);\n const maxStatus = Math.max(1, ...Object.values(data.status_counts).map(Number));\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Delivery intelligence</p><h1>Dashboard</h1><span>A lightweight view of momentum, cash received, and the work ahead.</span></div></header>\n <div className=\"dashboard-overview\">\n <section className=\"momentum-panel\">\n <div className=\"momentum-gauge\" style={{ \"--gauge-value\": data.north_star } as any}><div><b>{data.north_star}%</b><span>momentum</span></div></div>\n <div className=\"momentum-copy\"><h2>Delivery pulse</h2><p>Projects with meaningful activity in the last 14 days.</p><dl><div><dt>Active projects</dt><dd>{data.active_count}</dd></div><div><dt>Average completion</dt><dd>{data.average_completion}%</dd></div></dl></div>\n </section>\n <section className=\"portfolio-chart\">\n <div className=\"section-heading\"><h2>Portfolio distribution</h2><p>{totalProjects} current projects across delivery stages.</p></div>\n <div className=\"status-stack\" aria-label=\"Projects by status\">{Object.entries(statusMeta).map(([key]) => <i className={`chart-${key}`} style={{ width: `${totalProjects ? (Number(data.status_counts[key] || 0) / totalProjects) * 100 : 0}%` }}/>)}</div>\n <div className=\"status-chart-rows\">{Object.entries(statusMeta).map(([key, meta]) => <div><span><i className={`status-dot status-${key}`}/>{meta.label}</span><div><i className={`chart-${key}`} style={{ width: `${Number(data.status_counts[key] || 0) / maxStatus * 100}%` }}/></div><b>{data.status_counts[key] || 0}</b></div>)}</div>\n </section>\n </div>\n {data.unanswered_count > 0 && <section className=\"dashboard-questions\">\n <div className=\"question-signal\"><Icon name=\"question\" size={22}/><b>{data.unanswered_count}</b></div>\n <div className=\"question-summary\"><h2>Clients are waiting for an answer</h2><p>Unanswered questions should be handled before routine project updates.</p><div>{data.unanswered_questions.slice(0, 3).map((question: any) => <span><b>{question.project_title}</b><small>{question.author_name} · {prettyDate(question.event_date)}</small></span>)}</div></div>\n <Button onClick={onQuestions}>Open question inbox</Button>\n </section>}\n <div className=\"financial-overview\">\n <section><div className=\"section-heading\"><h2>Earnings received</h2><p>Recorded payments, kept separate by currency.</p></div><div className=\"money-metrics\">{data.earnings.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.earnings.length && <p className=\"muted\">No receipts recorded.</p>}</section>\n <section><div className=\"section-heading\"><h2>Estimated next month</h2><p>Pending value for projects due next month.</p></div><div className=\"money-metrics\">{data.next_month.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.next_month.length && <p className=\"muted\">No active projects currently due next month.</p>}</section>\n </div>\n <GrowthDashboard actor={actor} notify={notify}/>\n </div>;\n}\n\nfunction QuestionInbox({ notify, onOpen, onResolved }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busyId, setBusyId] = useState(\"\");\n const load = () => request(\"/api/questions\").then((result) => setItems(result.questions));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const answer = async (e: any, question: any) => {\n e.preventDefault(); setBusyId(question.id);\n const form = e.currentTarget, formData = new FormData(form);\n try {\n const sendEmail = formData.has(\"send_email\");\n const result = await post(`/api/comments/${question.id}/resolve`, {\n reply: formData.get(\"reply\"),\n send_email: sendEmail,\n });\n await load(); await onResolved();\n if (sendEmail && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Client question answered\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusyId(\"\"); }\n };\n if (!items) return <PageSkeleton rows={5}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client communication</p><h1>Question inbox</h1><span>Answer outstanding client questions across every project without hunting through timelines.</span></div><strong className={items.length ? \"inbox-count has-items\" : \"inbox-count\"}>{items.length} open</strong></header>\n <div className=\"question-inbox\">{items.map((question) => <article className=\"inbox-question\" key={question.id}>\n <header><span className={`status-dot status-${question.project_status}`}/><div><button type=\"button\" onClick={() => onOpen(question.project_id)}>{question.project_title}</button><p>{question.author_name}{question.stakeholder_role ? ` · ${question.stakeholder_role}` : \"\"}</p></div><time>{prettyDate(question.event_date)}</time></header>\n <blockquote>{question.body}</blockquote>\n <form onSubmit={(e) => answer(e, question)}><Field label=\"Your answer\"><textarea name=\"reply\" rows={3} required placeholder=\"Answer clearly and share the next step.\"/></Field><div className=\"inbox-answer-actions\"><label className=\"check notify-check\"><input type=\"checkbox\" name=\"send_email\"/>Email this answer to the project POC</label><Button disabled={busyId === question.id} icon=\"message\">{busyId === question.id ? \"Sending…\" : \"Reply & resolve\"}</Button></div></form>\n </article>)}</div>\n {!items.length && <Empty title=\"All client questions are answered\" text=\"New questions will appear here and on the related project card.\"/>}\n </div>;\n}\n\nfunction ProposalWorkspace({ partners, owners, notify, onProjectCreated }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busy, setBusy] = useState(false), [openId, setOpenId] = useState(\"\"), [convertOwnerId, setConvertOwnerId] = useState(\"\");\n const load = () => request(\"/api/admin/proposals\").then((x) => setItems(x.proposals));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => {\n e.preventDefault(); const form = e.currentTarget; setBusy(true);\n try { const data: any = Object.fromEntries(new FormData(form)); data.use_ai = true; await post(\"/api/admin/proposals\", data); form.reset(); await load(); notify(\"AI quotation created\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page proposal-workspace\">\n <header className=\"page-heading\"><div><h1>Proposals</h1><span>Turn discovery notes into a structured quotation, branded PDF, and ready-to-run project.</span></div></header>\n <div className=\"proposal-layout\">\n <aside className=\"proposal-builder\">\n <header><h2>Build a proposal</h2><p>Use known facts only. Missing commercial or delivery details remain explicit.</p></header>\n <form className=\"stack\" onSubmit={create}>\n <Field label=\"Proposal title\" hint=\"Optional — the generator can suggest one.\"><input name=\"title\" placeholder=\"Retail workflow automation\"/></Field>\n <div className=\"form-row\"><Field label=\"Brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{partners.map((x: any) => <option key={x.id} value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field></div>\n <Field label=\"Discovery notes\" hint=\"Include the problem, users, workflow, constraints, scope, timing, pricing, and terms you know.\"><textarea name=\"notes\" rows={16} required placeholder={\"Customer and problem\\n\\nCurrent workflow\\n\\nProposed scope\\n\\nCommercial details\"}/></Field>\n <Button disabled={busy}>{busy ? \"Building proposal…\" : \"Generate proposal\"}</Button>\n </form>\n </aside>\n <section className=\"proposal-library\">\n <header><div><h2>Saved proposals</h2><p>{items.length} proposal{items.length === 1 ? \"\" : \"s\"}</p></div></header>\n <div className=\"proposal-list\">{items.map((x) => <article className={\"proposal-row \" + (openId === x.id ? \"open\" : \"\")} key={x.id}>\n <button className=\"proposal-main\" onClick={() => { setOpenId(openId === x.id ? \"\" : x.id); setConvertOwnerId(\"\"); }} aria-expanded={openId === x.id}>\n <div><span>{titleCase(x.status)}</span><h3>{x.title}</h3><p>{x.partner_name || \"Direct AFLABS\"} · {money(x.total, x.currency)}</p></div><Icon name=\"chevron\"/>\n </button>\n {openId === x.id && <div className=\"proposal-detail\"><div className=\"proposal-document\"><MarkdownBlock value={x.markdown_content}/></div><footer><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open PDF</span></a>{!x.project_id ? <div className=\"proposal-convert\"><label><span>Project owner</span><select value={convertOwnerId} onChange={(event) => setConvertOwnerId(event.target.value)} required><option value=\"\">Select owner</option>{owners.map((owner: any) => <option key={owner.id} value={owner.id}>{owner.name}</option>)}</select></label><Button disabled={!convertOwnerId} onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: convertOwnerId }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button></div> : <span className=\"proposal-converted\">Project created</span>}</footer></div>}\n </article>)}</div>\n {!items.length && <Empty title=\"No proposals yet\" text=\"Create a proposal from the discovery form. It will remain editable and available as a branded PDF.\"/>}\n </section>\n </div>\n </div>;\n}\n\nfunction RecurringWorkspace({ actor, partners, owners, notify }: any) {\n const [items, setItems] = useState<any[] | null>(null), [adding, setAdding] = useState(false);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/recurring\").then((x) => setItems(x.recurring));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/recurring\", Object.fromEntries(new FormData(form))); form.reset(); setAdding(false); await load(); notify(\"Recurring project added\"); } catch (x: any) { notify(x.message, \"error\"); } };\n const update = async (e: any, id: string) => {\n e.preventDefault();\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.active = new FormData(form).has(\"active\");\n try { await patch(`/api/recurring/${id}`, data); setEditingId(\"\"); await load(); notify(\"Recurring project updated\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteRecurring = async (item: any) => {\n if (!confirm(`Delete “${item.title}” and its time logs? This cannot be undone.`)) return;\n try { await remove(`/api/recurring/${item.id}`); await load(); notify(\"Recurring project deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Ongoing support</p><h1>Recurring projects</h1><span>Run monthly commitments and hourly retainers without turning them into one-off delivery cards.</span></div><Button icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"New recurring project\"}</Button></header>\n {adding && <section className=\"inline-builder\"><form className=\"form-grid\" onSubmit={create}><Field label=\"Name\"><input name=\"title\" required/></Field><Field label=\"Billing model\"><select name=\"billing_type\"><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field><Field label=\"Description\"><textarea name=\"description\" rows={3}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" placeholder=\"Comma-separated\"/></Field>{actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={actor.actorId}>{owners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field></>}<Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\"/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\"/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\"/></Field><div className=\"form-actions full\"><Button>Add recurring project</Button></div></form></section>}\n <div className=\"recurring-grid\">{items.map((x) => {\n const value = x.billing_type === \"hourly\" ? Number(x.period_hours) * Number(x.hourly_rate) : Number(x.monthly_amount);\n return <article className={`recurring-card ${x.active ? \"\" : \"inactive\"}`} key={x.id}>\n <header><div><span>{x.billing_type === \"hourly\" ? \"Hourly / month\" : \"Monthly commitment\"}{!x.active ? \" · Paused\" : \"\"}</span><h2>{x.title}</h2><p>{x.description || \"Ongoing project support\"}</p></div><b>{money(value, x.currency)}</b></header>\n <div className=\"recurring-dates\"><span><small>Starts</small><b>{prettyDate(x.start_date)}</b></span><span><small>Ends</small><b>{prettyDate(x.end_date)}</b></span></div>\n <dl><div><dt>Owner</dt><dd>{x.owner_name || \"AFLABS team\"}</dd></div>{x.partner_name && <div><dt>Partner</dt><dd>{x.partner_name}</dd></div>}<div><dt>This month</dt><dd>{x.period_hours} hours{x.billing_type === \"hourly\" && x.included_hours ? ` / ${x.included_hours} included` : \"\"}</dd></div></dl>\n <div className=\"recurring-actions\"><Button variant=\"secondary\" onClick={() => setEditingId(editingId === x.id ? \"\" : x.id)}>{editingId === x.id ? \"Close editor\" : \"Edit\"}</Button><button type=\"button\" className=\"text-danger\" onClick={() => deleteRecurring(x)}>Delete</button></div>\n {editingId === x.id && <form className=\"recurring-edit form-grid\" onSubmit={(e) => update(e, x.id)}>\n <Field label=\"Name\"><input name=\"title\" defaultValue={x.title} required/></Field><Field label=\"Billing model\"><select name=\"billing_type\" defaultValue={x.billing_type}><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field>\n <Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={x.contact_email || \"\"}/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(x.cc_emails || []).join(\", \")}/></Field>\n {actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={x.owner_user_id || \"\"}>{owners.map((owner: any) => <option value={owner.id}>{owner.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\" defaultValue={x.partner_id || \"\"}><option value=\"\">Direct</option>{partners.map((partner: any) => <option value={partner.id}>{partner.name}</option>)}</select></Field></>}\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={x.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.monthly_amount}/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.hourly_rate}/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\" defaultValue={x.included_hours}/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={x.start_date || \"\"}/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\" defaultValue={x.end_date || \"\"}/></Field>\n <label className=\"check full\"><input name=\"active\" type=\"checkbox\" defaultChecked={x.active}/> Active recurring project</label><div className=\"form-actions full\"><Button>Save changes</Button></div>\n </form>}\n <details className=\"recurring-details\"><summary>View details and time log</summary><div className=\"recurring-detail-copy\"><p>{x.contact_email || \"No project email\"}{x.cc_emails?.length ? ` · CC: ${x.cc_emails.join(\", \")}` : \"\"}</p><p>{x.billing_type === \"hourly\" ? `${money(x.hourly_rate, x.currency)} per hour · ${x.included_hours || 0} included hours` : `${money(x.monthly_amount, x.currency)} each month`}</p></div>\n <form className=\"hour-log\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(`/api/recurring/${x.id}/logs`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Hours logged\"); } catch (error: any) { notify(error.message, \"error\"); } }}><input name=\"work_date\" type=\"date\" defaultValue={todayValue()} required/><input name=\"hours\" type=\"number\" min=\".25\" step=\".25\" placeholder=\"Hours\" required/><input name=\"note\" placeholder=\"Work completed\"/><Button variant=\"secondary\">Log time</Button></form>\n {x.logs?.length > 0 && <div className=\"log-history\"><h3>Recent logs</h3>{x.logs.slice(0, 10).map((l: any) => <div key={l.id}><b>{l.hours}h</b><span>{prettyDate(l.work_date || `${l.period}-01`)} · {l.note || \"Support work\"}</span></div>)}</div>}\n </details>\n </article>;\n })}</div>{!items.length && <Empty title=\"No recurring projects\" text=\"Create a monthly commitment or hourly support project.\"/>}\n </div>;\n}\n\nfunction HolidayWorkspace({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const [weeklyDays, setWeeklyDays] = useState<number[]>([5, 6]);\n const dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n const load = async () => {\n const result = await request(\"/api/holidays\");\n setData(result);\n setWeeklyDays(result.weekly_days || [5, 6]);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client availability</p><h1>Holidays</h1><span>Set weekly non-working days and one-off holidays shown gently in every client portal.</span></div></header>\n <div className=\"holiday-layout\">\n <section className=\"builder-form\"><h2>Weekly holidays</h2><p>Friday and Saturday are selected by default. Clients can still send questions on these days.</p><div className=\"weekday-picker\">{dayNames.map((name, day) => <label className={weeklyDays.includes(day) ? \"selected\" : \"\"} key={name}><input type=\"checkbox\" checked={weeklyDays.includes(day)} onChange={() => setWeeklyDays((current) => current.includes(day) ? current.filter((x) => x !== day) : [...current, day])}/><span>{name.slice(0, 3)}</span></label>)}</div><Button onClick={async () => { try { await patch(\"/api/admin/holidays/settings\", { weekly_days: weeklyDays }); await load(); notify(\"Weekly holidays saved\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Save weekly schedule</Button></section>\n <section className=\"builder-form\"><h2>Add a one-off holiday</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/admin/holidays\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Holiday added\"); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Holiday name\"><input name=\"name\" required placeholder=\"Eid al-Fitr\"/></Field><Field label=\"Date\"><input name=\"holiday_date\" type=\"date\" required/></Field><Button icon=\"plus\">Add holiday</Button></form></section>\n </div>\n <section className=\"holiday-list\"><header><div><h2>Configured dates</h2><p>{data.today?.is_holiday ? `Today is marked as ${data.today.name}.` : \"Today is a working day.\"}</p></div></header>{data.holidays.map((holiday: any) => <article key={holiday.id}><div className=\"holiday-date\"><b>{new Date(`${holiday.holiday_date}T12:00:00`).getDate()}</b><span>{new Intl.DateTimeFormat(\"en\", { month: \"short\" }).format(new Date(`${holiday.holiday_date}T12:00:00`))}</span></div><div><h3>{holiday.name}</h3><p>{prettyDate(holiday.holiday_date)}</p></div><button className=\"text-danger\" onClick={async () => { if (!confirm(`Delete ${holiday.name}?`)) return; try { await remove(`/api/admin/holidays/${holiday.id}`); await load(); notify(\"Holiday deleted\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Delete</button></article>)}{!data.holidays.length && <Empty title=\"No one-off holidays\" text=\"Add public holidays or company-wide non-working dates.\"/>}</section>\n </div>;\n}\n\nfunction QuickNoteWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/quick-notes\").then((result) => setItems(result.quick_notes));\n useEffect(() => { load().catch((error) => notify(error.message, \"error\")); }, []);\n const variables = (value: string) => [...new Set([...String(value || \"\").matchAll(/\\{\\{([^{}\\n]+)\\}\\}/g)].map((match) => match[1].trim()))];\n const save = async (event: any, id?: string) => {\n event.preventDefault();\n const form = event.currentTarget;\n try {\n const payload = Object.fromEntries(new FormData(form));\n if (id) await patch(`/api/admin/quick-notes/${id}`, payload);\n else await post(\"/api/admin/quick-notes\", payload);\n form.reset();\n setEditingId(\"\");\n await load();\n notify(id ? \"Quick note updated\" : \"Quick note created\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n const deleteNote = async (item: any) => {\n if (!confirm(`Delete the “${item.title}” quick note?`)) return;\n try {\n await remove(`/api/admin/quick-notes/${item.id}`);\n await load();\n notify(\"Quick note deleted\");\n } catch (error: any) { notify(error.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Reusable timeline copy</p><h1>Quick notes</h1><span>Create polished updates once, then insert them from any timeline composer by typing /.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>New quick note</h2><p>Use Liquid-style placeholders such as {\"{{CLIENT_NAME}}\"} or {\"{{DELIVERY_DATE}}\"}. After insertion, Tab moves through each placeholder.</p><form className=\"stack\" onSubmit={(event) => save(event)}><Field label=\"Note name\"><input name=\"title\" required placeholder=\"Weekly progress update\"/></Field><Field label=\"Slash shortcut\" hint=\"Letters, numbers, and hyphens\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required placeholder=\"weekly-update\"/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={9} required placeholder={\"Hi {{NAME}},\\n\\nWe completed {{WORK_DONE}}. Next, we will focus on {{NEXT_STEP}} by {{DATE}}.\"}/></Field><Button icon=\"plus\">Create quick note</Button></form></section>\n <section className=\"quick-note-library\">{items.map((item) => {\n const noteVariables = variables(item.body);\n return <article key={item.id}><header><div><span>/{item.shortcut}</span><h3>{item.title}</h3></div><button className=\"text-danger\" type=\"button\" onClick={() => deleteNote(item)}>Delete</button></header><p className=\"quick-note-copy\">{item.body}</p>{noteVariables.length > 0 && <div className=\"quick-note-variables\">{noteVariables.map((name) => <span key={name}>{\"{{\"}{name}{\"}}\"}</span>)}</div>}<button className=\"text-action\" type=\"button\" onClick={() => setEditingId(editingId === item.id ? \"\" : item.id)}>{editingId === item.id ? \"Close editor\" : \"Edit quick note\"}</button>{editingId === item.id && <form className=\"quick-note-edit stack\" onSubmit={(event) => save(event, item.id)}><Field label=\"Note name\"><input name=\"title\" required defaultValue={item.title}/></Field><Field label=\"Slash shortcut\"><div className=\"shortcut-input\"><span>/</span><input name=\"shortcut\" required defaultValue={item.shortcut}/></div></Field><Field label=\"Note content\"><textarea name=\"body\" rows={7} required defaultValue={item.body}/></Field><Button variant=\"secondary\">Save changes</Button></form>}</article>;\n })}{!items.length && <Empty title=\"No quick notes yet\" text=\"Create a reusable update with placeholders, then type / in a project timeline.\"/>}</section>\n </div>\n </div>;\n}\n\nfunction TemplateWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const load = () => request(\"/api/milestone-templates\").then((x) => setItems(x.templates));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const deleteTemplate = async (item: any) => {\n if (!confirm(`Delete the “${item.name}” milestone template? Existing project milestones will not be affected.`)) return;\n try { await remove(`/api/admin/milestone-templates/${item.id}`); await load(); notify(\"Milestone template deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\"><header className=\"page-heading\"><div><p>Reusable delivery</p><h1>Milestone templates</h1><span>Create repeatable checkpoint sets and apply them inside any project.</span></div></header><div className=\"builder-layout\"><section className=\"builder-form\"><h2>New template</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; await post(\"/api/admin/milestone-templates\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Milestone template created\"); }}><Field label=\"Template name\"><input name=\"name\" required placeholder=\"Website delivery\"/></Field><Field label=\"Description\"><input name=\"description\" placeholder=\"Optional context\"/></Field><Field label=\"Milestones\" hint=\"One milestone per line\"><textarea name=\"items\" rows={9} required placeholder={\"Discovery\\nDesign approval\\nDevelopment\\nQuality assurance\\nLaunch\"}/></Field><Button>Create template</Button></form></section><section className=\"template-list\">{items.map((x) => <article key={x.id}><header><span>{x.items.length} milestones</span><button className=\"text-danger\" type=\"button\" onClick={() => deleteTemplate(x)}>Delete</button></header><h3>{x.name}</h3><p>{x.description || \"Reusable milestone set\"}</p><ol>{x.items.map((m: any, index: number) => <li key={`${x.id}-${index}`}>{m.title}</li>)}</ol></article>)}{!items.length && <Empty title=\"No templates yet\" text=\"Add your first repeatable milestone sequence.\"/>}</section></div></div>;\n}\n\nfunction Workspace({ actor, config, refreshActor, notify, theme, toggleTheme }: any) {\n const [projects, setProjects] = useState<Project[]>([]), [partners, setPartners] = useState<any[]>([]), [owners, setOwners] = useState<any[]>([]);\n const [leads, setLeads] = useState<any[]>([]), [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\n const [projectFilters, setProjectFilters] = useState({ type: \"\", due: \"\", partner: \"\", status: \"\" });\n const [selected, setSelected] = useState<string | null>(null), [addOpen, setAddOpen] = useState(false);\n const [aiDraft, setAiDraft] = useState<any>(null), [aiNotes, setAiNotes] = useState(\"\"), [aiBusy, setAiBusy] = useState(false);\n const [projectsLoading, setProjectsLoading] = useState(true), [questionCount, setQuestionCount] = useState(0);\n const load = async (showSkeleton = false) => {\n if (showSkeleton) setProjectsLoading(true);\n try {\n const p = await request(`/api/projects?archived=${archived ? 1 : 0}`);\n setProjects(p.projects);\n if (actor.role === \"admin\") {\n request(\"/api/admin/partners\").then((x) => setPartners(x.partners)).catch(() => {});\n request(\"/api/admin/cc-recipients\").then((x) => setCcRecipients(x.recipients)).catch(() => {});\n }\n if (actor.actorType === \"internal\") request(\"/api/user-options\").then((x) => setOwners(x.users)).catch(() => {});\n if (actor.actorType === \"internal\" || actor.permissions.view_leads) request(\"/api/leads\").then((x) => setLeads(x.leads)).catch(() => {});\n if (actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) request(\"/api/questions\").then((x) => setQuestionCount(x.questions.length)).catch(() => {});\n } finally {\n if (showSkeleton) setProjectsLoading(false);\n }\n };\n useEffect(() => { load(true).catch((x) => notify(x.message, \"error\")); }, [archived]);\n const visible = projects.filter((p) => {\n if (!(`${p.title} ${p.description} ${p.partner_name}`).toLowerCase().includes(search.toLowerCase())) return false;\n if (projectFilters.type && p.project_type !== projectFilters.type) return false;\n if (projectFilters.partner && String(p.partner_id || \"\") !== projectFilters.partner) return false;\n if (projectFilters.status && p.status !== projectFilters.status) return false;\n if (projectFilters.due === \"overdue\" && !(p.end_date && p.status !== \"done\" && Date.parse(p.end_date) < Date.now())) return false;\n if (projectFilters.due === \"7days\" && !(p.end_date && Date.parse(p.end_date) >= Date.now() && Date.parse(p.end_date) <= Date.now() + 7 * 86400000)) return false;\n if (projectFilters.due === \"nodate\" && p.end_date) return false;\n return true;\n });\n const activeProjectFilterCount = Object.values(projectFilters).filter(Boolean).length;\n const unansweredCount = questionCount;\n const move = async (id: string, status: string) => {\n const item = projects.find((p) => p.id === id);\n if (!item || item.status === status) return;\n try {\n setProjects((all) => all.map((p) => p.id === id ? { ...p, status } : p));\n await patch(`/api/projects/${id}`, { status }); notify(`Moved to ${statusMeta[status].label}`);\n } catch (x: any) { notify(x.message, \"error\"); load(); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); refreshActor(); };\n const mayCreate = actor.actorType === \"partner\" ? actor.permissions.create_projects === true : canActor(actor, \"create_projects\");\n const canLeads = actor.actorType === \"internal\" || actor.permissions.view_leads;\n const canChat = actor.actorType === \"internal\" || actor.permissions.chat;\n const canMeet = actor.actorType === \"internal\" || actor.permissions.book_meetings;\n const canIdeas = actor.actorType === \"internal\" || actor.permissions.use_ai;\n return <div className=\"app-shell\">\n <aside className=\"sidebar\">\n <a className=\"brand\" href=\"/\"><BrandMark/><span>AFLABS <b>PM</b></span></a>\n <nav>\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}><Icon name=\"work\"/>Leads</button>}\n <button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}><Icon name=\"message\"/>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}><Icon name=\"clock\"/>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}><Icon name=\"note\"/>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}><Icon name=\"milestone\"/>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active attention-nav\" : \"attention-nav\"} onClick={() => setView(\"questions\")}><Icon name=\"question\"/>Questions{unansweredCount > 0 && <b>{unansweredCount}</b>}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}><Icon name=\"note\"/>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}><Icon name=\"milestone\"/>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}><Icon name=\"message\"/>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}\n </nav>\n <div className=\"sidebar-foot\"><ThemeToggle theme={theme} toggle={toggleTheme}/><div className=\"account\"><span>{initials(actor.name)}</span><div><b>{actor.name}</b><small>{actor.role}</small></div><button onClick={logout} aria-label=\"Sign out\"><Icon name=\"logout\" size={17}/></button></div></div>\n </aside>\n <main className=\"workspace\">\n <div className=\"mobile-nav\" aria-label=\"Workspace navigation\">\n <button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Dashboard</button>\n {canLeads && <button className={view === \"leads\" ? \"active\" : \"\"} onClick={() => setView(\"leads\")}>Leads</button>}\n <button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>\n {canChat && <button className={view === \"conversations\" ? \"active\" : \"\"} onClick={() => setView(\"conversations\")}>Conversations</button>}\n {canMeet && <button className={view === \"meetings\" ? \"active\" : \"\"} onClick={() => setView(\"meetings\")}>Meetings</button>}\n {canIdeas && <button className={view === \"ideas\" ? \"active\" : \"\"} onClick={() => setView(\"ideas\")}>AI pitch</button>}\n {(actor.role === \"admin\" || actor.actorType === \"partner\") && <button className={view === \"mou\" ? \"active\" : \"\"} onClick={() => setView(\"mou\")}>MoU & targets</button>}\n {(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` (${unansweredCount})` : \"\"}</button>}\n <button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button>\n <button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}>Archive</button>\n {actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}>Templates</button><button className={view === \"quick-notes\" ? \"active\" : \"\"} onClick={() => setView(\"quick-notes\")}>Quick notes</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People & partners</button></>}\n {actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Client branding</button>}\n <button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button>\n </div>\n {view === \"dashboard\" ? <Dashboard actor={actor} notify={notify} onQuestions={() => setView(\"questions\")}/> : [\"leads\", \"conversations\", \"meetings\", \"mou\", \"ideas\"].includes(view) ? <GrowthSuite section={view} actor={actor} notify={notify} onOpenProject={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"questions\" ? <QuestionInbox notify={notify} onOpen={setSelected} onResolved={load}/> : view === \"recurring\" ? <RecurringWorkspace actor={actor} partners={partners} owners={owners} notify={notify}/> : view === \"proposals\" ? <ProposalWorkspace partners={partners} owners={owners} notify={notify} onProjectCreated={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"templates\" ? <TemplateWorkspace notify={notify}/> : view === \"quick-notes\" ? <QuickNoteWorkspace notify={notify}/> : view === \"holidays\" ? <HolidayWorkspace notify={notify}/> : view === \"directory\" ? <AdminDirectory actor={actor} config={config} projects={projects} notify={notify}/> : view === \"branding\" ? <PartnerBranding notify={notify}/> : <>\n <header className=\"workspace-head\"><div><p>{actor.actorType === \"partner\" ? \"Partner workspace\" : \"Delivery workspace\"}</p><h1>{archived ? \"Archived projects\" : \"Project board\"}</h1><span>{archived ? \"A complete record of work moved out of active delivery.\" : \"Move work forward, keep context close, and make progress visible.\"}</span></div><div className=\"head-actions\"><div className=\"search\"><Icon name=\"search\" size={17}/><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder=\"Search projects\"/></div>{mayCreate && !archived && <Button className=\"new-project-button\" icon=\"plus\" onClick={() => setAddOpen(true)}>New project</Button>}</div></header>\n <section className=\"project-filter-panel\" aria-label=\"Project filters\">\n <header className=\"project-filter-panel-head\">\n <div className=\"project-filter-panel-title\">\n <span>Filter projects</span>\n <strong>{visible.length}<small> of {projects.length} shown</small></strong>\n {activeProjectFilterCount > 0 && <b>{activeProjectFilterCount} active</b>}\n </div>\n {activeProjectFilterCount > 0 && <button className=\"project-filter-clear\" type=\"button\" onClick={() => setProjectFilters({ type: \"\", due: \"\", partner: \"\", status: \"\" })}>Clear all</button>}\n </header>\n <div className=\"project-filter-controls\">\n <label><span>Project type</span><select aria-label=\"Filter by project type\" value={projectFilters.type} onChange={(e) => setProjectFilters((current) => ({ ...current, type: e.target.value }))}><option value=\"\">All types</option>{config.projectTypes.map((type: string) => <option key={type} value={type}>{type}</option>)}</select></label>\n <label><span>Stage</span><select aria-label=\"Filter by project stage\" value={projectFilters.status} onChange={(e) => setProjectFilters((current) => ({ ...current, status: e.target.value }))}><option value=\"\">All stages</option>{config.statuses.map((status: string) => <option key={status} value={status}>{statusMeta[status]?.label || titleCase(status)}</option>)}</select></label>\n <label><span>Due date</span><select aria-label=\"Filter by due date\" value={projectFilters.due} onChange={(e) => setProjectFilters((current) => ({ ...current, due: e.target.value }))}><option value=\"\">Any due date</option><option value=\"overdue\">Overdue</option><option value=\"7days\">Due in 7 days</option><option value=\"nodate\">No due date</option></select></label>\n {actor.actorType === \"internal\" && <label><span>Partner</span><select aria-label=\"Filter by partner\" value={projectFilters.partner} onChange={(e) => setProjectFilters((current) => ({ ...current, partner: e.target.value }))}><option value=\"\">All partners</option>{Array.from(new Map(projects.filter((project) => project.partner_id).map((project) => [project.partner_id, project.partner_name])).entries()).map(([id, name]) => <option key={String(id)} value={String(id)}>{String(name)}</option>)}</select></label>}\n </div>\n </section>\n {projectsLoading ? <BoardSkeleton/> : visible.length ? <Kanban projects={visible} actor={actor} onOpen={setSelected} onMove={move}/> : <Empty title={archived ? \"Archive is empty\" : \"No projects found\"} text={search ? \"Try a different search term.\" : mayCreate ? \"Add the first project to begin the delivery board.\" : \"No projects are assigned to this account.\"} action={mayCreate && !search && !archived ? <Button icon=\"plus\" onClick={() => setAddOpen(true)}>Add project</Button> : null}/>}\n </>}\n </main>\n <Modal open={addOpen} close={() => { setAddOpen(false); setAiDraft(null); }} wide><div className=\"modal-head\"><div><h2>Add a project</h2><p>{actor.actorType === \"partner\" ? \"Submit basic project details. AFLABS will manage delivery status.\" : \"Create manually, or let AI extract a draft from rough notes.\"}</p></div><button className=\"icon-button\" onClick={() => setAddOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">{actor.role === \"admin\" && <details className=\"ai-project-builder\"><summary><span><Icon name=\"work\"/>Draft this project with AI</span><Icon name=\"chevron\"/></summary><div><Field label=\"Rough project details\"><textarea value={aiNotes} onChange={(e) => setAiNotes(e.target.value)} rows={6} placeholder=\"Paste scope, dates, POC details, pricing, links, credentials and milestones. Timeline entries are intentionally excluded.\"/></Field><Button type=\"button\" variant=\"secondary\" disabled={aiBusy || aiNotes.trim().length < 10} onClick={async () => { setAiBusy(true); try { const result = await post(\"/api/admin/ai/project-draft\", { notes: aiNotes }); setAiDraft(result.draft); notify(\"AI project draft is ready\"); } catch (x: any) { notify(x.message, \"error\"); } finally { setAiBusy(false); } }}>{aiBusy ? \"Extracting…\" : \"Extract details\"}</Button>{aiDraft && <p className=\"ai-result\">Draft populated · {(aiDraft.resources || []).length} resources · {(aiDraft.credentials || []).length} credentials · {(aiDraft.stakeholders || []).length} stakeholders</p>}</div></details>}<ProjectForm key={JSON.stringify(aiDraft || {})} actor={actor} config={config} partners={partners} leads={leads} owners={owners} ccRecipients={ccRecipients} initial={aiDraft || {}} onSave={async (data: any) => { const result = await post(\"/api/projects\", { ...aiDraft, ...data }); setAddOpen(false); setAiDraft(null); setAiNotes(\"\"); await load(); setSelected(result.id); notify(\"Project added\"); }}/></div></Modal>\n <Modal open={Boolean(selected)} close={() => setSelected(null)} wide>{selected && <DetailPanel projectId={selected} actor={actor} owners={owners} partners={partners} close={() => setSelected(null)} refreshList={load} notify={notify}/>}</Modal>\n </div>;\n}\n\nfunction ClientPortal({ actor, notify, theme, setTheme, toggleTheme }: any) {\n const [detail, setDetail] = useState<any>(null), [linksOpen, setLinksOpen] = useState(false), [busy, setBusy] = useState(false);\n const load = () => request(`/api/projects/${actor.projectId}`).then(setDetail);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n useEffect(() => {\n const projectTheme = detail?.project?.branding?.theme;\n if (projectTheme === \"light\" || projectTheme === \"dark\") setTheme(projectTheme);\n }, [detail?.project?.branding?.theme]);\n if (!detail) return <div className=\"client-loading\"><div className=\"brand\"><BrandMark/><span>AFLABS <b>PM</b></span></div><div className=\"skeleton client-skeleton\"/></div>;\n const p = detail.project, brand = p.branding;\n const nextMilestone = [...detail.milestones]\n .filter((x: any) => x.status === \"upcoming\" && x.due_date)\n .sort((a: any, b: any) => a.due_date.localeCompare(b.due_date))[0];\n const timeline = [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, date: x.event_date, timelineType: x.comment_type })),\n ...detail.milestones.filter((x: any) => x.status !== \"upcoming\").map((x: any) => ({ ...x, date: x.completed_date || x.due_date, timelineType: \"milestone\", body: x.description })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date));\n const submitQuestion = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const data: any = Object.fromEntries(new FormData(form));\n await post(`/api/projects/${p.id}/comments`, data);\n form.reset(); await load();\n notify(\"Your question was added\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); location.reload(); };\n return <main className={`client-portal ${p.status === \"blocked\" ? \"client-blocked\" : \"\"}`} style={{ \"--partner-accent\": brand?.accent_color || \"var(--blue)\" } as any}>\n <header className=\"client-nav\"><div className=\"client-brand\">{brand?.logo_url ? <img src={brand.logo_url} alt={`${brand?.name || \"AFLABS\"} logo`}/> : <span className=\"client-logo\">{initials(brand?.name || \"AFLABS\")}</span>}<div><b>{brand?.name || \"AFLABS\"}</b><small>{brand?.portal_label || \"Project delivery\"}</small></div></div><div className=\"client-nav-actions\"><ThemeToggle theme={theme} toggle={toggleTheme}/><button onClick={logout}>Close project <Icon name=\"logout\" size={15}/></button></div></header>\n <section className=\"client-hero\">{detail.holiday?.is_holiday && <div className=\"client-holiday-banner\"><Icon name=\"sun\" size={18}/><div><b>{detail.holiday.name}</b><span>Today is a non-working day. You can still review the project and send questions.</span></div></div>}<div className=\"client-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <em>Forecast +{p.delivery_delay_days} days</em>}</div>{p.status === \"blocked\" && <div className=\"client-blocked-notice\"><Icon name=\"blocker\" size={18}/><div><b>Delivery is currently blocked</b><span>The team is working through an external dependency. The expected delivery date is moving by {p.delivery_delay_days || 1} {p.delivery_delay_days === 1 ? \"day\" : \"days\"}.</span></div></div>}<h1>{p.title}</h1><p>{p.description}</p><div className=\"client-dates\"><span><small>Started</small><b>{prettyDate(p.start_date)}</b>{p.start_date && <em>{projectDateFootnote(p.start_date, \"start\")}</em>}</span><Icon name=\"chevron\"/><span><small>{p.delivery_delay_days > 0 ? \"Forecast\" : \"Target\"}</small><b>{prettyDate(p.forecast_end_date || p.end_date)}</b>{p.delivery_delay_days > 0 && <em>Original {prettyDate(p.end_date)}</em>}{(p.forecast_end_date || p.end_date) && <em>{projectDateFootnote(p.forecast_end_date || p.end_date, \"end\")}</em>}<strong className={`client-deadline ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</strong></span></div></section>\n <section className=\"client-progress-block\"><div className=\"client-progress-copy\"><span>Overall completion</span><b>{p.progress}%</b></div><div className=\"client-progress\"><i style={{ width: `${p.progress}%` }}/><span style={{ left: `${Math.max(2, Math.min(96, p.progress))}%` }}/></div><div className=\"client-stages\"><span className=\"passed\">Project started</span><span className={p.progress >= 50 ? \"passed\" : \"\"}>Core delivery</span><span className={p.progress === 100 ? \"passed\" : \"\"}>Complete</span></div>{nextMilestone && <div className=\"client-next-milestone\"><span><Icon name=\"milestone\" size={16}/></span><div><small>Next milestone</small><b>{nextMilestone.title}</b>{nextMilestone.description && <p>{nextMilestone.description}</p>}</div><time><b>{prettyDate(nextMilestone.due_date)}</b><small>{deadlineLabel(nextMilestone.due_date)}</small></time></div>}</section>\n <div className=\"client-grid\">\n <section className=\"client-main\"><div className=\"client-section-head\"><div><h2>Project journey</h2><p>{brand?.welcome_message || \"Every meaningful update, in one clear timeline.\"}</p></div></div>\n <div className=\"client-timeline\">{timeline.map((x: any) => {\n const replies = detail.comments.filter((reply: any) => reply.parent_id === x.id);\n const daysToGo = futureDaysLabel(x.date);\n if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{timelineDate(x.date)}</time></header><div className=\"milestone-callout\"><small>{titleCase(x.status)}</small><h3>{x.title}</h3>{x.body && <p>{x.body}</p>}</div></div></article>;\n if (x.timelineType === \"question\") return <article className=\"client-question-event\" key={`question-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{timelineDate(x.date)}</time></header><div className=\"chat-bubble chat-client\"><small>{x.author_name}</small><p>{x.body}</p></div>{replies.map((reply: any) => <div className=\"chat-bubble chat-team\"><small>{reply.author_name} · Project team</small><p>{reply.body}</p></div>)}<span className={x.resolved_at ? \"chat-status resolved\" : \"chat-status\"}>{x.resolved_at ? \"Answered\" : \"Awaiting a response\"}</span></div></article>;\n return <article key={`${x.timelineType}-${x.id}`}>{daysToGo && <span className=\"client-future-gap\">{daysToGo}</span>}<div className={`client-node node-${x.timelineType}`}><Icon name={eventIcons[x.timelineType] || \"note\"} size={16}/></div><div><header><span>{typeLabels[x.timelineType] || titleCase(x.timelineType)}</span><time>{timelineDate(x.date)}</time></header><h3>{x.author_name}</h3>{x.body && <p>{x.body}</p>}</div></article>;\n })}</div>\n {!timeline.length && <Empty title=\"The journey starts here\" text=\"Project updates will appear as the team moves delivery forward.\"/>}\n </section>\n <aside className=\"client-aside\">\n <section className=\"client-panel\"><h2>Milestones</h2><div className=\"client-milestones\">{detail.milestones.map((x: any) => <div className={x.status}><span>{x.status === \"complete\" ? \"✓\" : \"\"}</span><div><b>{x.title}</b><small>{x.status === \"complete\" ? `Completed ${prettyDate(x.completed_date)}` : `Target ${prettyDate(x.due_date)}`}</small></div></div>)}</div>{!detail.milestones.length && <p className=\"muted\">Milestones will appear as they are scheduled.</p>}</section>\n <section className=\"client-panel payment-panel\"><div><span>Payment fulfilled</span><b>{detail.paymentSummary.total ? Math.round(detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%</b></div><div className=\"mini-progress\"><i style={{ width: `${detail.paymentSummary.total ? Math.min(100, detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%` }}/></div><dl><div><dt>Received</dt><dd>{money(detail.paymentSummary.paid, p.currency)}</dd></div><div><dt>Pending</dt><dd>{money(detail.paymentSummary.pending, p.currency)}</dd></div></dl></section>\n {detail.links.length > 0 && <section className=\"client-panel links-panel\"><button onClick={() => setLinksOpen(!linksOpen)}><div><Icon name=\"link\"/><span><b>Project links</b><small>{detail.links.length} shared resources</small></span></div><Icon name=\"chevron\"/></button>{linksOpen && <div className=\"client-links\">{detail.links.map((x: any) => <a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a>)}</div>}</section>}\n <section className=\"client-panel question-panel\"><h2>Ask the project team</h2><p>Select who you are so the team can answer in context.</p>{detail.holiday?.is_holiday && <div className=\"holiday-question-note\"><Icon name=\"clock\" size={16}/><span>You can send this now. The team may reply on the next working day.</span></div>}<form onSubmit={submitQuestion} className=\"stack\"><Field label=\"I am\"><select name=\"stakeholder_id\" required><option value=\"\">Select stakeholder</option>{detail.stakeholders.map((x: any) => <option value={x.id}>{x.name} · {x.role}</option>)}</select></Field><Field label=\"Question or comment\"><textarea name=\"body\" required rows={3} placeholder=\"What would you like to clarify?\"/></Field><Button disabled={busy} icon=\"message\">{busy ? \"Sending…\" : \"Send to team\"}</Button></form></section>\n {brand?.contact_info && <p className=\"partner-contact\">Managed by {brand.name} · {brand.contact_info}</p>}\n </aside>\n </div>\n <footer className=\"client-footer\"><span>{brand?.name || \"AFLABS\"} PM</span>{brand?.website_url ? <a href={brand.website_url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={13}/> Visit website</a> : <span>Project delivery, made visible.</span>}</footer>\n </main>;\n}\n\nexport function App() {\n const clientToken = location.pathname.match(/^\\/client\\/([^/]+)/)?.[1];\n const [config, setConfig] = useState<any>(null), [actor, setActor] = useState<Actor | null | undefined>(undefined), [toast, setToast] = useState<any>(null);\n const [theme, setTheme] = useState(() => {\n const saved = localStorage.getItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\");\n return saved === \"dark\" || saved === \"light\" ? saved : clientToken ? \"light\" : matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n });\n const notify = (message: string, kind = \"success\") => setToast({ message, kind });\n const refresh = async () => {\n const cfg = await request(\"/api/config\");\n clientCacheEnabled = cfg.cacheEnabled !== false;\n if (!clientCacheEnabled) apiCache.clear();\n setConfig(cfg); setActor(cfg.actor ?? null);\n };\n useEffect(() => {\n document.documentElement.dataset.theme = theme;\n localStorage.setItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\", theme);\n }, [theme, clientToken]);\n useEffect(() => { refresh().catch((x) => { setConfig({ initialized: true }); setActor(null); notify(x.message, \"error\"); }); }, []);\n if (!config || actor === undefined) return <div className=\"app-loading\"><div className=\"brand brand-large\"><BrandMark large/><span>AFLABS <b>PM</b></span></div><div className=\"loading-line\"><i/></div></div>;\n const toggleTheme = () => setTheme((current) => current === \"dark\" ? \"light\" : \"dark\");\n return <><NetworkActivity/><Toast value={toast} clear={() => setToast(null)}/>{!config.initialized ? <Bootstrap onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : !actor ? <Login clientToken={clientToken} onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : actor.actorType === \"client\" ? <ClientPortal actor={actor} notify={notify} theme={theme} setTheme={setTheme} toggleTheme={toggleTheme}/> : <Workspace actor={actor} config={config} refreshActor={refresh} notify={notify} theme={theme} toggleTheme={toggleTheme}/>}</>;\n}\n\r\n",[],[247,287,296],"89367656-5070-4eec-8f64-156e321dd29f",["D",1786655332090],[192,193,194],[247,287],"bb5cf66f-7063-4914-aff8-152ceff7331d",["D",1786655332090],[191,195,196,197,198,199],[247],"ddad897a-18fa-4ae2-9352-3ab94b3e4aab","diagnostics","019ffcf4-d6e8-704a-9308-0f81d5c8b601",["D",1786655332090],[],[312],["D",1785324724390],["D",1789492855745],{"_11":12,"_131":75},{"_11":12,"_126":127,"_74":75,"_30":73,"_128":129,"_130":24},{"_38":116,"_13":16,"_32":35,"_117":77,"_118":64,"_119":120,"_121":81,"_122":77,"_123":41,"_124":14,"_125":12},"ctx",{"_53":-5,"_152":355,"_356":357,"_358":359,"_360":24,"_361":24,"_362":24,"_363":90,"_364":-5,"_365":-7,"_366":-7,"_367":26,"_368":24,"_369":24,"_370":-5,"_371":24,"_372":24,"_373":24,"_374":-5},"ENV",{"_326":327,"_328":329,"_330":65,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

History · growth.ts