' + 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 response = await openai.responses.create({\n model: \"gpt-5.4-nano\",\n instructions: \"Turn rough commercial notes into a concise, professional project quotation and extract a reusable project record. Preserve supplied facts. Do not invent dates, contact details, credentials, URLs, or money. Dates must be YYYY-MM-DD. Pricing amounts are numbers. Do not add timeline comments.\",\n input: notes,\n text: { format: { type: \"json_schema\", name: \"project_quotation\", schema: quotationSchema } },\n });\n return JSON.parse(response.output_text);\n}\nfunction projectInsertStatements(projectId: string, data: any, context: {\n actorType: string; actorId: string; ownerId: string; partnerId: string | null; status?: string;\n}) {\n const t = now();\n const clientPin = /^\\d{4,8}$/.test(str(data.client_pin)) ? str(data.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,status,archived,start_date,end_date,project_type,partner_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(31).fill(\"?\").join(\",\")})`,\n args: [projectId, str(data.title) || \"Untitled project\", str(data.description), context.status || \"backlog\", 0,\n str(data.start_date) || null, str(data.end_date) || null,\n projectTypes.includes(data.project_type) ? data.project_type : \"Billable\", context.partnerId,\n Number(data.regular_cost) || 0, context.partnerId ? Number(data.partner_cost) || 0 : 0, str(data.currency) || \"INR\", 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin,\n context.partnerId ? str(data.commission_document_url) || null : null,\n str(data.contact_email) || null, JSON.stringify(emailList(data.cc_emails)),\n JSON.stringify(Array.isArray(data.notification_cc_ids) ? data.notification_cc_ids.map(str).filter(Boolean) : []),\n str(data.tax_label) || \"GST\", Math.max(0, Number(data.tax_rate) || 0), int(data.tax_inclusive),\n null, null, null, \"light\",\n context.ownerId || null,\n context.actorType, context.actorId, t, t],\n }];\n for (const x of Array.isArray(data.resources) ? data.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(data.credentials) ? data.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(data.stakeholders) ? data.stakeholders : []) {\n const stakeholderPhone = optionalPhone(x.phone);\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (str(x.name) && stakeholderPhone && stakeholderEmail) {\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), stakeholderPhone, stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(data.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(data.milestones) ? data.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n return { statements, clientPin };\n}\nfunction present(p: any, a: Actor) {\n const activeBlockedDays = p.blocked_since\n ? Math.max(1, Math.ceil((Date.now() - Date.parse(String(p.blocked_since))) / dayMs))\n : 0;\n const deliveryDelayDays = Math.max(0, Number(p.blocked_days) || 0) + activeBlockedDays;\n const baseCost = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const taxRate = Math.max(0, Number(p.tax_rate) || 0);\n const clientCost = Number(p.tax_inclusive) ? baseCost : baseCost * (1 + taxRate / 100);\n const x: any = {\n id: p.id, title: p.title, description: p.description, status: p.status,\n archived: Boolean(p.archived), start_date: p.start_date, end_date: p.end_date,\n project_type: p.project_type, partner_id: p.partner_id, partner_name: p.partner_name,\n progress: Number(p.progress), currency: p.currency, created_at: p.created_at,\n updated_at: p.updated_at,\n owner_user_id: p.owner_user_id, owner_name: p.owner_name,\n blocked_since: p.blocked_since, delivery_delay_days: deliveryDelayDays,\n forecast_end_date: p.end_date && deliveryDelayDays ? addDateDays(p.end_date, deliveryDelayDays) : p.end_date,\n client_cost: clientCost, tax_label: p.tax_label || \"GST\", tax_rate: taxRate,\n tax_inclusive: Boolean(p.tax_inclusive), branding: null,\n };\n if (a.actorType !== \"client\") Object.assign(x, {\n contact_email: p.contact_email, cc_emails: emailList(p.cc_emails),\n });\n if (a.actorType === \"internal\") Object.assign(x, {\n regular_cost: Number(p.regular_cost), partner_cost: Number(p.partner_cost),\n client_token: p.client_token, client_pin: p.client_pin,\n commission_document_url: p.commission_document_url,\n notification_cc_ids: parseJson(p.notification_cc_ids, []),\n });\n if (a.actorType === \"partner\" && p.status !== \"backlog\") Object.assign(x, {\n client_token: p.client_token, client_pin: p.client_pin,\n });\n return x;\n}\nfunction error(c: any, e: unknown) {\n const message = e instanceof Error ? e.message : \"Unexpected error\";\n if (message === \"AUTH_REQUIRED\") return c.json({ error: \"Please sign in to continue\" }, 401);\n if (/permission|Admins only|not available/.test(message)) return c.json({ error: message }, 403);\n if (/not found/i.test(message)) return c.json({ error: message }, 404);\n if (/required|invalid|select|must be|cannot|already exists/i.test(message)) return c.json({ error: message }, 400);\n console.error(e);\n return c.json({ error: message }, 400);\n}\n\napp.use(\"/api/*\", async (c, next) => {\n try { await migrate(); await next(); } catch (e) { return error(c, e); }\n});\napp.use(\"/api/*\", cachedApiResponse);\napp.get(\"/api/health\", (c) => c.json({ ok: true }));\napp.get(\"/api/config\", async (c) => {\n const [r, currentActor, databaseProvider] = await Promise.all([\n db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\"),\n session(c),\n lockedDatabaseProvider(),\n ]);\n return c.json({\n initialized: Number((r.rows[0] as any)?.count) > 0,\n actor: currentActor,\n databaseProvider,\n cacheEnabled: env.cacheEnabled,\n permissions: permissionDefinitions.map(([key, label]) => ({ key, label })),\n projectTypes, statuses, commentTypes,\n countries: [{ code: \"+91\", label: \"India\" }, { code: \"+966\", label: \"Saudi Arabia\" }, { code: \"+971\", label: \"UAE\" }],\n });\n});\napp.post(\"/api/bootstrap\", async (c) => {\n const b = await body(c);\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count)) throw new Error(\"Bootstrap is no longer available\");\n if (str(b.token) !== env.bootstrap) throw new Error(\"Invalid bootstrap token\");\n const p = phone(b.phone), code = pin(b.pin), t = now(), userId = uid();\n await db.execute({\n sql: `INSERT INTO internal_users(id,name,phone,pin_hash,role,permissions,all_project_access,active,created_at,updated_at)\n VALUES(?,?,?,?,'admin',?,1,1,?,?)\n ON CONFLICT(phone) DO UPDATE SET name=excluded.name,pin_hash=excluded.pin_hash,role='admin',\n permissions=excluded.permissions,all_project_access=1,active=1,updated_at=excluded.updated_at`,\n args: [userId, str(b.name) || \"AFLABS Admin\", p, await hashPin(p, code), JSON.stringify(fullPermissions), t, t],\n });\n const adminRow = await db.execute({ sql: \"SELECT id FROM internal_users WHERE phone=?\", args: [p] });\n await newSession(c, \"internal\", String((adminRow.rows[0] as any).id));\n return c.json({ ok: true }, 201);\n});\napp.post(\"/api/auth/login\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"team\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"internal\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/partner\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"partner\", b.phone);\n if (limited) return limited;\n const p = phone(b.phone), code = pin(b.pin);\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE phone=? AND active=1\", args: [p] });\n const u = r.rows[0] as any;\n if (!u || u.pin_hash !== await hashPin(p, code)) return c.json({ error: \"Invalid phone number or PIN\" }, 401);\n await newSession(c, \"partner\", String(u.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/client\", async (c) => {\n const b = await body(c);\n const limited = await enforceLoginRateLimit(c, \"client\", b.token);\n if (limited) return limited;\n const r = await db.execute({ sql: \"SELECT id,client_pin FROM projects WHERE client_token=?\", args: [str(b.token)] });\n const p = r.rows[0] as any;\n if (!p || str(b.pin) !== String(p.client_pin)) return c.json({ error: \"Invalid project link or PIN\" }, 401);\n await newSession(c, \"client\", `client:${p.id}`, String(p.id));\n return c.json({ ok: true });\n});\napp.post(\"/api/auth/logout\", async (c) => {\n const raw = getCookie(c, \"aflabs_session\");\n if (raw) await db.execute({ sql: \"DELETE FROM sessions WHERE token_hash=?\", args: [await sha(`${env.session}:session:${raw}`)] });\n deleteCookie(c, \"aflabs_session\", { path: \"/\" });\n return c.json({ ok: true });\n});\napp.get(\"/api/me\", async (c) => c.json({ actor: await session(c) }));\napp.get(\"/api/user-options\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT id,name,role FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name\");\n return c.json({ users: r.rows });\n});\napp.get(\"/api/dashboard\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Dashboard is not available\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid FROM payments GROUP BY project_id\n ), recent_projects AS (\n SELECT DISTINCT project_id FROM comments WHERE created_at>=?\n )\n SELECT p.id,p.status,p.progress,p.currency,p.end_date,p.regular_cost,p.partner_cost,p.partner_id,\n COALESCE(pt.paid,0) paid,CASE WHEN rp.project_id IS NULL THEN 0 ELSE 1 END recent_activity\n FROM projects p LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN recent_projects rp ON rp.project_id=p.id WHERE p.archived=0`;\n const args: any[] = [new Date(Date.now() - 14 * 86400000).toISOString()];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n const rows = (await db.execute({ sql, args })).rows as any[];\n const active = rows.filter((x) => x.status !== \"done\");\n let unansweredQuestions: any[] = [];\n if ((a.actorType === \"partner\" || can(a, \"manage_comments\")) && rows.length) {\n const projectIds = rows.map((x) => String(x.id));\n const questions = await db.execute({\n sql: `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n s.role stakeholder_role FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL\n AND c.project_id IN (${projectIds.map(() => \"?\").join(\",\")})\n ORDER BY c.created_at DESC`,\n args: projectIds,\n });\n unansweredQuestions = questions.rows as any[];\n }\n const nextStart = new Date(); nextStart.setUTCDate(1); nextStart.setUTCMonth(nextStart.getUTCMonth() + 1);\n const nextEnd = new Date(nextStart); nextEnd.setUTCMonth(nextEnd.getUTCMonth() + 1);\n const sumByCurrency = (items: any[], value: (x: any) => number) => Object.entries(items.reduce((all: any, x) => {\n all[x.currency] = (all[x.currency] || 0) + value(x); return all;\n }, {})).map(([currency, amount]) => ({ currency, amount: Number(amount) }));\n return c.json({\n active_count: active.length,\n status_counts: Object.fromEntries(statuses.map((status) => [status, rows.filter((x) => x.status === status).length])),\n average_completion: active.length ? Math.round(active.reduce((sum, x) => sum + Number(x.progress), 0) / active.length) : 0,\n north_star: active.length ? Math.round(active.filter((x) => Number(x.recent_activity)).length / active.length * 100) : 0,\n unanswered_count: unansweredQuestions.length,\n unanswered_questions: unansweredQuestions.slice(0, 3),\n earnings: sumByCurrency(rows, (x) => Number(x.paid)),\n next_month: sumByCurrency(active.filter((x) => {\n const end = x.end_date ? new Date(`${String(x.end_date).slice(0, 10)}T00:00:00Z`) : null;\n return end && end >= nextStart && end < nextEnd;\n }), (x) => Math.max(0, Number(x.partner_id ? x.partner_cost : x.regular_cost) - Number(x.paid))),\n });\n});\n\napp.get(\"/api/questions\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Questions are available to the project team\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n let sql = `SELECT c.id,c.project_id,c.author_name,c.body,c.event_date,c.created_at,p.title project_title,\n p.status project_status,s.role stakeholder_role\n FROM comments c JOIN projects p ON p.id=c.project_id\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id\n WHERE p.archived=0 AND c.comment_type='question' AND c.parent_id IS NULL AND c.resolved_at IS NULL`;\n const args: any[] = [];\n if (a.actorType === \"partner\") {\n sql += \" AND p.partner_id=? AND p.status<>'backlog'\";\n args.push(a.actorId);\n } else if (!a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY c.created_at ASC\";\n const result = await db.execute({ sql, args });\n return c.json({ questions: result.rows });\n});\n\napp.get(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project list is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"view_projects\");\n let sql = `WITH payment_totals AS (\n SELECT project_id,SUM(amount) paid_amount FROM payments GROUP BY project_id\n ), question_totals AS (\n SELECT project_id,COUNT(*) unanswered_count FROM comments\n WHERE comment_type='question' AND parent_id IS NULL AND resolved_at IS NULL GROUP BY project_id\n ), unread_totals AS (\n SELECT c.project_id,COUNT(*) unread_count FROM comments c\n LEFT JOIN activity_reads r ON r.project_id=c.project_id AND r.actor_type=? AND r.actor_id=?\n WHERE c.created_at>COALESCE(r.last_read_at,'1970-01-01') GROUP BY c.project_id\n )\n SELECT p.*,pa.name partner_name,ou.name owner_name,COALESCE(pt.paid_amount,0) paid_amount,\n COALESCE(ut.unread_count,0) unread_count,COALESCE(qt.unanswered_count,0) unanswered_count\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id\n LEFT JOIN internal_users ou ON ou.id=p.owner_user_id\n LEFT JOIN payment_totals pt ON pt.project_id=p.id\n LEFT JOIN question_totals qt ON qt.project_id=p.id\n LEFT JOIN unread_totals ut ON ut.project_id=p.id\n WHERE p.archived=?`;\n const args: any[] = [a.actorType, a.actorId, c.req.query(\"archived\") === \"1\" ? 1 : 0];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (a.actorType === \"internal\" && !a.allProjectAccess) {\n sql += \" AND EXISTS(SELECT 1 FROM user_project_access x WHERE x.project_id=p.id AND x.user_id=?)\";\n args.push(a.actorId);\n }\n sql += \" ORDER BY p.updated_at DESC\";\n const r = await db.execute({ sql, args });\n return c.json({ projects: r.rows.map((p: any) => ({\n ...present(p, a), paid_amount: Number(p.paid_amount), unread_count: Number(p.unread_count),\n unanswered_count: Number(p.unanswered_count),\n })) });\n});\napp.post(\"/api/projects\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Project creation is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"create_projects\");\n const b = await body(c), title = str(b.title);\n if (!title) throw new Error(\"Project title is required\");\n const projectId = uid(), t = now();\n const partnerId = a.actorType === \"partner\" ? a.actorId : str(b.partner_id) || null;\n const status = a.actorType === \"partner\" ? \"backlog\" : statuses.includes(b.status) ? b.status : \"backlog\";\n if (status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n const clientPin = /^\\d{4,8}$/.test(str(b.client_pin)) ? str(b.client_pin) : String(Math.floor(100000 + Math.random() * 900000));\n const notificationCcIds = Array.isArray(b.notification_cc_ids)\n ? b.notification_cc_ids.map(str).filter(Boolean)\n : (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id);\n let ownerId = a.actorType === \"internal\" ? str(b.owner_user_id) || (admin(a) ? \"\" : a.actorId) : \"\";\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id) || \"\";\n }\n const statements: any[] = [{\n sql: `INSERT INTO projects(id,title,description,status,archived,start_date,end_date,project_type,partner_id,\n regular_cost,partner_cost,currency,progress,client_token,client_pin,commission_document_url,\n contact_email,cc_emails,notification_cc_ids,tax_label,tax_rate,tax_inclusive,\n client_brand_name,client_logo_url,client_accent_color,client_theme,\n owner_user_id,created_by_type,created_by_id,created_at,updated_at)\n VALUES(${new Array(31).fill(\"?\").join(\",\")})`,\n args: [projectId, title, str(b.description), status, 0, str(b.start_date) || null, str(b.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : \"Billable\", partnerId, Number(b.regular_cost) || 0,\n partnerId ? Number(b.partner_cost) || 0 : 0, str(b.currency) || \"INR\",\n status === \"done\" ? 100 : admin(a) ? Math.max(0, Math.min(100, Number(b.progress) || 0)) : 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin, partnerId ? str(b.commission_document_url) || null : null,\n str(b.contact_email) || null, JSON.stringify(emailList(b.cc_emails)), JSON.stringify(notificationCcIds),\n str(b.tax_label) || \"GST\", Math.max(0, Number(b.tax_rate) || 0), int(b.tax_inclusive),\n null, null, null, \"light\",\n ownerId || null, a.actorType, a.actorId, t, t],\n }];\n if (a.actorType === \"internal\" && !admin(a)) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [a.actorId, projectId],\n });\n for (const x of Array.isArray(b.resources) ? b.resources : []) if (str(x.label) && /^https?:\\/\\//.test(str(x.url))) statements.push({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,1,?)\",\n args: [uid(), projectId, str(x.label), str(x.url), str(x.link_type) || \"reference\", t],\n });\n for (const x of Array.isArray(b.credentials) ? b.credentials : []) if (str(x.label)) statements.push({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.label), str(x.username) || null, str(x.secret) || null, str(x.url) || null, str(x.notes) || null, t, t],\n });\n let hasMainPoc = false, mainPocEmail = \"\";\n const stakeholderCc: string[] = [];\n for (const x of Array.isArray(b.stakeholders) ? b.stakeholders : []) {\n const stakeholderEmail = emailList([x.email])[0] || \"\";\n if (!str(x.name) || !str(x.phone) || !stakeholderEmail) continue;\n const main = !hasMainPoc;\n hasMainPoc ||= main;\n if (main) mainPocEmail = stakeholderEmail;\n else if (x.email_cc) stakeholderCc.push(stakeholderEmail);\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), projectId, str(x.name), phone(x.phone), stakeholderEmail, str(x.role), int(main), int(!main && x.email_cc), t],\n });\n }\n if (mainPocEmail) statements.push({\n sql: \"UPDATE projects SET contact_email=?,cc_emails=? WHERE id=?\",\n args: [mainPocEmail, JSON.stringify(emailList([...emailList(b.cc_emails), ...stakeholderCc])), projectId],\n });\n for (const x of Array.isArray(b.milestones) ? b.milestones : []) if (str(x.title)) statements.push({\n sql: \"INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,client_visible,created_at,updated_at) VALUES(?,?,?,?,?,'upcoming',?,1,?,?)\",\n args: [uid(), projectId, str(x.title), str(x.tag) || \"Milestone\", str(x.description), str(x.due_date) || null, t, t],\n });\n await db.batch(statements);\n return c.json({ ok: true, id: projectId, client_pin: clientPin }, 201);\n});\n\napp.get(\"/api/projects/:id\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const projectId = String(p.id);\n const visibility = a.actorType === \"client\" ? \"AND visibility IN ('client','both')\" :\n a.actorType === \"partner\" ? \"AND (visibility IN ('client','both') OR (author_type='partner' AND author_id=?))\" : \"\";\n const [links, credentials, stakeholders, milestones, comments, payments, invoices, notificationCcOptions] = await Promise.all([\n db.execute({ sql: `SELECT * FROM project_links WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY created_at DESC`, args: [projectId] }),\n (a.actorType === \"internal\" && can(a, \"view_credentials\")) || a.actorType === \"partner\"\n ? db.execute({ sql: \"SELECT * FROM project_credentials WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] })\n : Promise.resolve({ rows: [] }),\n db.execute({ sql: \"SELECT * FROM stakeholders WHERE project_id=? ORDER BY name\", args: [projectId] }),\n db.execute({ sql: `SELECT * FROM milestones WHERE project_id=? ${a.actorType === \"client\" ? \"AND client_visible=1\" : \"\"} ORDER BY COALESCE(completed_date,due_date,created_at),created_at`, args: [projectId] }),\n db.execute({\n sql: `SELECT c.*,s.name stakeholder_name,s.role stakeholder_role FROM comments c\n LEFT JOIN stakeholders s ON s.id=c.stakeholder_id WHERE c.project_id=? ${visibility}\n ORDER BY c.event_date DESC,c.created_at DESC`,\n args: a.actorType === \"partner\" ? [projectId, a.actorId] : [projectId],\n }),\n db.execute({ sql: \"SELECT * FROM payments WHERE project_id=? ORDER BY paid_date DESC,created_at DESC\", args: [projectId] }),\n a.actorType === \"client\" ? Promise.resolve({ rows: [] }) :\n db.execute({ sql: \"SELECT * FROM invoices WHERE project_id=? ORDER BY created_at DESC\", args: [projectId] }),\n a.actorType === \"internal\" && admin(a) ? ccRecipients() : Promise.resolve([]),\n ]);\n const paid = payments.rows.reduce((sum: number, x: any) => sum + Number(x.amount), 0);\n const baseTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const total = Number(p.tax_inclusive) ? baseTotal : baseTotal * (1 + Math.max(0, Number(p.tax_rate) || 0) / 100);\n const commentRows = [...comments.rows] as any[];\n for (const payment of payments.rows as any[]) {\n const represented = commentRows.some((comment: any) =>\n String(comment.payment_id || \"\") === String(payment.id) ||\n (!comment.payment_id && comment.comment_type === \"payment\" && comment.event_date === payment.paid_date &&\n String(comment.body || \"\").includes(Number(payment.amount).toLocaleString()))\n );\n if (!represented) commentRows.push({\n id: `payment-${payment.id}`,\n project_id: projectId,\n author_type: payment.created_by_type,\n author_id: payment.created_by_id,\n author_name: payment.created_by_type === \"partner\" ? (p.partner_name || \"Partner\") : \"Project team\",\n body: `Payment received: ${payment.currency} ${Number(payment.amount).toLocaleString()}${payment.note ? ` · ${payment.note}` : \"\"}`,\n comment_type: \"payment\",\n visibility: \"both\",\n event_date: payment.paid_date,\n payment_id: payment.id,\n created_at: payment.created_at,\n });\n }\n commentRows.sort((a: any, b: any) =>\n String(b.event_date).localeCompare(String(a.event_date)) || String(b.created_at).localeCompare(String(a.created_at))\n );\n const project = present(p, a);\n const [baseBranding, currentHoliday] = await Promise.all([\n getClientBranding(),\n a.actorType === \"client\" ? holidayStatus() : Promise.resolve(null),\n ]);\n project.branding = p.partner_id ? effectivePartnerBranding(p, baseBranding) : baseBranding;\n return c.json({\n project, links: links.rows, credentials: credentials.rows,\n stakeholders: a.actorType === \"client\"\n ? stakeholders.rows.map((x: any) => ({ id: x.id, name: x.name, role: x.role }))\n : stakeholders.rows,\n milestones: milestones.rows, comments: commentRows,\n payments: a.actorType === \"client\" ? [] : payments.rows,\n invoices: invoices.rows.map((x: any) => ({ ...x, milestone_ids: parseJson(x.milestone_ids, []) })),\n paymentSummary: { total, paid, pending: Math.max(0, total - paid), currency: p.currency },\n notificationCcOptions,\n holiday: currentHoliday,\n });\n});\napp.patch(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"edit_projects\");\n const p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n const b = await body(c);\n if (b.status !== undefined) {\n requireCan(a, \"move_projects\");\n if (!statuses.includes(b.status)) throw new Error(\"Invalid project status\");\n if (b.status === \"done\" && !admin(a)) throw new Error(\"Admins only can mark projects complete\");\n }\n if (b.progress !== undefined && !admin(a)) throw new Error(\"Admins only can change project completion\");\n if (b.archived !== undefined) requireCan(a, \"archive_projects\");\n const t = now();\n const nextStatus = b.status ?? p.status;\n const nextPartnerId = b.partner_id === undefined ? p.partner_id : str(b.partner_id) || null;\n let blockedSince = p.blocked_since || null;\n let blockedDays = Math.max(0, Number(p.blocked_days) || 0);\n const statements: any[] = [];\n if (p.status !== \"blocked\" && nextStatus === \"blocked\") {\n blockedSince = t;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'blocker','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n \"Project moved to Blocked. The delivery forecast will show the active delay until this blocker is cleared.\",\n t.slice(0, 10), t],\n });\n } else if (p.status === \"blocked\" && nextStatus !== \"blocked\") {\n const elapsed = Math.max(1, dateDays(blockedSince || t, t));\n blockedDays += elapsed;\n blockedSince = null;\n statements.push({\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'update','both',?,?)`,\n args: [uid(), p.id, \"internal\", a.actorId, a.name,\n `Blocker cleared after ${elapsed} ${elapsed === 1 ? \"day\" : \"days\"}. The delivery forecast now includes ${blockedDays} delayed ${blockedDays === 1 ? \"day\" : \"days\"}.`,\n t.slice(0, 10), t],\n });\n }\n const nextProgress = nextStatus === \"done\"\n ? 100\n : b.progress === undefined ? Number(p.progress) : Math.max(0, Math.min(100, Number(b.progress) || 0));\n statements.unshift({\n sql: `UPDATE projects SET title=?,description=?,status=?,archived=?,start_date=?,end_date=?,\n project_type=?,partner_id=?,regular_cost=?,partner_cost=?,currency=?,progress=?,client_pin=?,\n commission_document_url=?,contact_email=?,cc_emails=?,notification_cc_ids=?,\n tax_label=?,tax_rate=?,tax_inclusive=?,owner_user_id=?,blocked_since=?,blocked_days=?,updated_at=? WHERE id=?`,\n args: [\n str(b.title ?? p.title) || p.title, str(b.description ?? p.description), nextStatus,\n b.archived === undefined ? Number(p.archived) : int(b.archived),\n str(b.start_date ?? p.start_date) || null, str(b.end_date ?? p.end_date) || null,\n projectTypes.includes(b.project_type) ? b.project_type : p.project_type,\n nextPartnerId,\n b.regular_cost === undefined ? Number(p.regular_cost) : Number(b.regular_cost) || 0,\n nextPartnerId ? (b.partner_cost === undefined ? Number(p.partner_cost) : Number(b.partner_cost) || 0) : 0,\n str(b.currency ?? p.currency) || \"INR\",\n nextProgress,\n b.client_pin === undefined ? p.client_pin : pin(b.client_pin),\n nextPartnerId\n ? (b.commission_document_url === undefined ? p.commission_document_url : str(b.commission_document_url) || null)\n : null,\n b.contact_email === undefined ? p.contact_email : str(b.contact_email) || null,\n b.cc_emails === undefined ? p.cc_emails : JSON.stringify(emailList(b.cc_emails)),\n !admin(a) || b.notification_cc_ids === undefined\n ? p.notification_cc_ids\n : JSON.stringify(Array.isArray(b.notification_cc_ids) ? b.notification_cc_ids.map(str).filter(Boolean) : []),\n str(b.tax_label ?? p.tax_label) || \"GST\",\n b.tax_rate === undefined ? Number(p.tax_rate) : Math.max(0, Number(b.tax_rate) || 0),\n b.tax_inclusive === undefined ? Number(p.tax_inclusive) : int(b.tax_inclusive),\n b.owner_user_id === undefined ? p.owner_user_id : str(b.owner_user_id) || null,\n blockedSince, blockedDays, t, p.id,\n ],\n });\n await db.batch(statements);\n return c.json({ ok: true, progress: nextProgress, delivery_delay_days: blockedDays });\n});\napp.post(\"/api/projects/:id/extensions\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"edit_projects\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const previousEndDate = str(p.end_date).slice(0, 10);\n const newEndDate = str(b.new_end_date).slice(0, 10);\n const reason = str(b.reason);\n if (!previousEndDate) throw new Error(\"Set a project end date before extending it\");\n const days = dateDays(previousEndDate, newEndDate);\n if (!newEndDate || days < 1) throw new Error(\"The new end date must be later than the current end date\");\n if (!reason) throw new Error(\"Explain the external reason for this extension\");\n const t = now(), extensionId = uid();\n await db.batch([\n {\n sql: \"UPDATE projects SET end_date=?,updated_at=? WHERE id=?\",\n args: [newEndDate, t, p.id],\n },\n {\n sql: `INSERT INTO schedule_extensions(id,project_id,previous_end_date,new_end_date,days,reason,created_by_type,created_by_id,created_at)\n VALUES(?,?,?,?,?,?,?,?,?)`,\n args: [extensionId, p.id, previousEndDate, newEndDate, days, reason, a.actorType, a.actorId, t],\n },\n {\n sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,created_at)\n VALUES(?,?,?,?,?,?,'schedule-extension','both',?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name,\n `Target date extended by ${days} ${days === 1 ? \"day\" : \"days\"}, from ${previousEndDate} to ${newEndDate}. Reason: ${reason}`,\n str(b.event_date).slice(0, 10) || t.slice(0, 10), t],\n },\n ]);\n return c.json({ ok: true, days, end_date: newEndDate });\n});\napp.delete(\"/api/projects/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete projects\");\n const confirmation = await body(c);\n const left = Number(confirmation.left), right = Number(confirmation.right), answer = Number(confirmation.answer);\n if (!Number.isInteger(left) || !Number.isInteger(right) || left < 2 || left > 20 || right < 2 || right > 20 || answer !== left + right) {\n throw new Error(\"Incorrect deletion confirmation answer\");\n }\n if (!await allowedProject(c.req.param(\"id\"), a)) throw new Error(\"Project not found\");\n const projectId = c.req.param(\"id\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM activity_reads WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM user_project_access WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_links WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM project_credentials WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM email_logs WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM invoices WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM schedule_extensions WHERE project_id=?\", args: [projectId] },\n { sql: \"UPDATE proposals SET project_id=NULL,status=CASE WHEN status='converted' THEN 'draft' ELSE status END WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM milestones WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM comments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM payments WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM stakeholders WHERE project_id=?\", args: [projectId] },\n { sql: \"DELETE FROM projects WHERE id=?\", args: [projectId] },\n ]);\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/read\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n await db.execute({\n sql: `INSERT INTO activity_reads(actor_type,actor_id,project_id,last_read_at) VALUES(?,?,?,?)\n ON CONFLICT(actor_type,actor_id,project_id) DO UPDATE SET last_read_at=excluded.last_read_at`,\n args: [a.actorType, a.actorId, p.id, now()],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/comments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n requirePartnerReady(a, p);\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const b = await body(c), text = str(b.body);\n if (!text) throw new Error(\"Comment text is required\");\n let stakeholderId = str(b.stakeholder_id) || null, authorName = a.name;\n if (a.actorType === \"client\") {\n if (!stakeholderId) throw new Error(\"Select the stakeholder asking this question\");\n const s = await db.execute({ sql: \"SELECT name FROM stakeholders WHERE id=? AND project_id=?\", args: [stakeholderId, p.id] });\n if (!s.rows[0]) throw new Error(\"Stakeholder not found\");\n authorName = String((s.rows[0] as any).name);\n }\n const t = now(), commentId = uid();\n const commentType = a.actorType === \"client\" ? \"question\" : commentTypes.includes(b.comment_type) ? b.comment_type : \"update\";\n const eventDate = str(b.event_date) || t.slice(0, 10);\n await db.execute({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,stakeholder_id,\n body,comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [commentId, p.id, str(b.parent_id) || null, a.actorType, a.actorId, authorName, stakeholderId, text,\n commentType,\n a.actorType === \"client\" ? \"both\" : [\"admin\", \"client\", \"both\"].includes(b.visibility) ? b.visibility : \"both\",\n eventDate, t],\n });\n const email = a.actorType !== \"client\" && b.send_email\n ? await sendProjectEmail(p, { id: commentId, body: text, author_name: authorName, comment_type: commentType, event_date: eventDate }, \"update\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email }, 201);\n});\napp.post(\"/api/comments/:id/resolve\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_comments\");\n const r = await db.execute({ sql: \"SELECT * FROM comments WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = r.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Comment not found\");\n requirePartnerReady(a, p);\n const b = await body(c), t = now(), statements: any[] = [\n { sql: \"UPDATE comments SET resolved_at=? WHERE id=?\", args: [t, item.id] },\n ];\n const replyId = uid();\n if (str(b.reply)) statements.push({\n sql: `INSERT INTO comments(id,project_id,parent_id,author_type,author_id,author_name,body,\n comment_type,visibility,event_date,created_at) VALUES(?,?,?,?,?,?,?,'update','both',?,?)`,\n args: [replyId, item.project_id, item.id, a.actorType, a.actorId, a.name, str(b.reply), t.slice(0, 10), t],\n });\n await db.batch(statements);\n const email = b.send_email && str(b.reply)\n ? await sendProjectEmail(p, { id: replyId, body: str(b.reply), author_name: a.name, comment_type: \"update\", event_date: t.slice(0, 10) }, \"reply\", new URL(c.req.url).origin)\n : null;\n return c.json({ ok: true, email });\n});\n\napp.post(\"/api/projects/:id/links\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_links\");\n requirePartnerReady(a, p);\n if (!str(b.label) || !/^https?:\\/\\//.test(str(b.url))) throw new Error(\"A label and valid URL are required\");\n await db.execute({\n sql: \"INSERT INTO project_links(id,project_id,label,url,link_type,client_visible,created_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.url), str(b.link_type) || \"reference\", int(b.client_visible !== false), now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/links/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_links\");\n await db.execute({ sql: \"DELETE FROM project_links WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/credentials\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_credentials\");\n requirePartnerReady(a, p);\n if (!str(b.label)) throw new Error(\"Credential label is required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO project_credentials(id,project_id,label,username,secret,url,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.label), str(b.username) || null, str(b.secret) || null, str(b.url) || null, str(b.notes) || null, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/credentials/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_credentials\");\n await db.execute({ sql: \"DELETE FROM project_credentials WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/stakeholders\", async (c) => {\n const a = await actor(c);\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n if (!str(b.name)) throw new Error(\"Stakeholder name is required\");\n const stakeholderEmail = emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const existing = await db.execute({ sql: \"SELECT COUNT(*) count FROM stakeholders WHERE project_id=?\", args: [p.id] });\n const main = Boolean(b.is_main_poc) || !Number((existing.rows[0] as any)?.count);\n const stakeholderId = uid();\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [p.id] });\n statements.push({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,email,role,is_main_poc,email_cc,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [stakeholderId, p.id, str(b.name), phone(b.phone), stakeholderEmail, str(b.role), int(main), int(!main && b.email_cc), now()],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(p.id));\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n const b = await body(c);\n const stakeholderEmail = b.email === undefined ? item.email : emailList([b.email])[0];\n if (!stakeholderEmail) throw new Error(\"A valid stakeholder email is required\");\n const main = b.is_main_poc === undefined ? Boolean(item.is_main_poc) : Boolean(b.is_main_poc);\n const statements: any[] = [];\n if (main) statements.push({ sql: \"UPDATE stakeholders SET is_main_poc=0 WHERE project_id=?\", args: [item.project_id] });\n statements.push({\n sql: `UPDATE stakeholders SET name=?,phone=?,email=?,role=?,is_main_poc=?,email_cc=? WHERE id=?`,\n args: [\n str(b.name ?? item.name) || item.name,\n b.phone === undefined ? item.phone : phone(b.phone),\n stakeholderEmail,\n str(b.role ?? item.role),\n int(main),\n int(!main && (b.email_cc === undefined ? Boolean(item.email_cc) : Boolean(b.email_cc))),\n item.id,\n ],\n });\n await db.batch(statements);\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\napp.delete(\"/api/stakeholders/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n const result = await db.execute({ sql: \"SELECT * FROM stakeholders WHERE id=?\", args: [c.req.param(\"id\")] });\n const item = result.rows[0] as any;\n const p = item ? await allowedProject(String(item.project_id), a) : null;\n if (!item || !p) throw new Error(\"Stakeholder not found\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_stakeholders\");\n requirePartnerReady(a, p);\n await db.execute({ sql: \"DELETE FROM stakeholders WHERE id=?\", args: [item.id] });\n await syncProjectRecipients(String(item.project_id));\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/milestones\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n if (!str(b.title)) throw new Error(\"Milestone title is required\");\n const t = now();\n await db.execute({\n sql: `INSERT INTO milestones(id,project_id,title,tag,description,status,due_date,completed_date,\n client_visible,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?)`,\n args: [uid(), p.id, str(b.title), str(b.tag) || \"Milestone\", str(b.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : \"upcoming\",\n str(b.due_date) || null, str(b.completed_date) || null, int(b.client_visible !== false), t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.patch(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const r = await db.execute({ sql: \"SELECT * FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any, b = await body(c);\n if (!x || !await allowedProject(String(x.project_id), a)) throw new Error(\"Milestone not found\");\n await db.execute({\n sql: \"UPDATE milestones SET title=?,tag=?,description=?,status=?,due_date=?,completed_date=?,client_visible=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? x.title) || x.title, str(b.tag ?? x.tag) || \"Milestone\", str(b.description ?? x.description),\n [\"upcoming\", \"active\", \"complete\"].includes(b.status) ? b.status : x.status,\n str(b.due_date ?? x.due_date) || null, str(b.completed_date ?? x.completed_date) || null,\n b.client_visible === undefined ? Number(x.client_visible) : int(b.client_visible), now(), x.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/milestones/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n await db.execute({ sql: \"DELETE FROM milestones WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/payments\", async (c) => {\n const a = await actor(c), p = await allowedProject(c.req.param(\"id\"), a);\n if (!p) throw new Error(\"Project not found\");\n if (a.actorType === \"client\") throw new Error(\"This action is not available\");\n if (a.actorType === \"internal\") requireCan(a, \"manage_payments\");\n const b = await body(c), amount = Number(b.amount);\n if (!(amount > 0)) throw new Error(\"Payment amount must be greater than zero\");\n const sums = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) paid FROM payments WHERE project_id=?\", args: [p.id] });\n const total = Number(p.partner_id ? p.partner_cost : p.regular_cost), paid = Number((sums.rows[0] as any)?.paid);\n if (total > 0 && paid + amount > total + .0001) throw new Error(`Payment exceeds the pending amount of ${p.currency} ${Math.max(0, total - paid)}`);\n const t = now(), date = str(b.paid_date) || t.slice(0, 10), note = str(b.note), paymentId = uid();\n const pending = Math.max(0, total - paid - amount);\n const paymentBody = `Payment received: ${p.currency} ${amount.toLocaleString()}${note ? ` · ${note}` : \"\"}. Pending: ${p.currency} ${pending.toLocaleString()}.`;\n await db.batch([\n { sql: \"INSERT INTO payments(id,project_id,amount,currency,paid_date,note,created_by_type,created_by_id,created_at) VALUES(?,?,?,?,?,?,?,?,?)\",\n args: [paymentId, p.id, amount, p.currency, date, note, a.actorType, a.actorId, t] },\n { sql: `INSERT INTO comments(id,project_id,author_type,author_id,author_name,body,comment_type,visibility,event_date,payment_id,created_at)\n VALUES(?,?,?,?,?,?,'payment','both',?,?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name, paymentBody, date, paymentId, t] },\n ]);\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/payments/:id\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_payments\");\n await db.batch([\n { sql: \"DELETE FROM comments WHERE payment_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM payments WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/admin/ai/project-draft\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create projects with AI\");\n const notes = str((await body(c)).notes);\n if (notes.length < 10) throw new Error(\"Add a little more project context for AI extraction\");\n return c.json({ draft: await aiProjectDraft(notes) });\n});\napp.get(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage proposals\");\n const r = await db.execute(`SELECT q.*,p.name partner_name FROM proposals q\n LEFT JOIN partners p ON p.id=q.partner_id ORDER BY q.updated_at DESC`);\n return c.json({ proposals: r.rows.map((x: any) => ({ ...x, structured_data: parseJson(x.structured_data, {}) })) });\n});\napp.post(\"/api/admin/proposals\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create proposals\");\n const b = await body(c), notes = str(b.notes || b.markdown_content);\n if (notes.length < 10) throw new Error(\"Add rough notes or Markdown for the proposal\");\n const structured = b.use_ai === false ? (b.structured_data || { project: {} }) : await aiQuotation(notes);\n const currency = str(b.currency || structured?.project?.currency) || \"INR\";\n const markdown = str(b.markdown_content) || quotationMarkdown(structured, currency);\n const total = Number(b.total) || (structured.pricing || []).reduce((sum: number, x: any) => sum + Number(x.amount || 0), 0);\n const id = uid(), t = now();\n await db.execute({\n sql: `INSERT INTO proposals(id,title,markdown_content,structured_data,partner_id,currency,total,status,\n created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,'draft',?,?,?)`,\n args: [id, str(b.title || structured.title) || \"Project quotation\", markdown, JSON.stringify(structured),\n str(b.partner_id) || null, currency, total, a.actorId, t, t],\n });\n return c.json({ ok: true, id }, 201);\n});\napp.patch(\"/api/admin/proposals/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can update proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n await db.execute({\n sql: \"UPDATE proposals SET title=?,markdown_content=?,partner_id=?,currency=?,total=?,status=?,updated_at=? WHERE id=?\",\n args: [str(b.title ?? q.title) || q.title, str(b.markdown_content ?? q.markdown_content),\n b.partner_id === undefined ? q.partner_id : str(b.partner_id) || null,\n str(b.currency ?? q.currency) || \"INR\", b.total === undefined ? Number(q.total) : Number(b.total) || 0,\n [\"draft\", \"sent\", \"accepted\", \"declined\", \"converted\"].includes(b.status) ? b.status : q.status, now(), q.id],\n });\n return c.json({ ok: true });\n});\napp.get(\"/api/admin/proposals/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can view proposal PDFs\");\n const r = await db.execute({ sql: `SELECT q.*,p.brand_name,p.logo_url,p.accent_color,p.contact_info,p.website_url,\n p.document_header,p.document_footer\n FROM proposals q LEFT JOIN partners p ON p.id=q.partner_id WHERE q.id=?`, args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any;\n if (!q) throw new Error(\"Proposal not found\");\n const branding = q.partner_id ? effectivePartnerBranding(q, await getClientBranding()) : await getClientBranding();\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, q.title, `Quotation · ${q.currency} ${Number(q.total).toLocaleString()}`, new URL(c.req.url).origin);\n addPdfLines(doc, q.markdown_content, 76, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${q.title}-quotation.pdf`);\n});\napp.post(\"/api/admin/proposals/:id/convert\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can convert proposals\");\n const r = await db.execute({ sql: \"SELECT * FROM proposals WHERE id=?\", args: [c.req.param(\"id\")] });\n const q = r.rows[0] as any, b = await body(c);\n if (!q) throw new Error(\"Proposal not found\");\n if (q.project_id) return c.json({ ok: true, id: q.project_id, existing: true });\n const structured = parseJson(q.structured_data, {});\n const draft = { ...(structured.project || {}), title: structured.project?.title || q.title,\n currency: structured.project?.currency || q.currency,\n notification_cc_ids: (await ccRecipients()).filter((x) => x.default_selected).map((x) => x.id) };\n let ownerId = str(b.owner_user_id);\n if (!ownerId) {\n const owner = await db.execute(\"SELECT id FROM internal_users WHERE active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\");\n ownerId = str((owner.rows[0] as any)?.id);\n }\n const projectId = uid();\n const built = projectInsertStatements(projectId, draft, {\n actorType: \"internal\", actorId: a.actorId, ownerId, partnerId: str(q.partner_id) || null, status: \"backlog\",\n });\n built.statements.push({\n sql: \"UPDATE proposals SET project_id=?,status='converted',updated_at=? WHERE id=?\",\n args: [projectId, now(), q.id],\n });\n await db.batch(built.statements);\n return c.json({ ok: true, id: projectId, client_pin: built.clientPin }, 201);\n});\n\napp.get(\"/api/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n const r = await db.execute(\"SELECT * FROM milestone_templates WHERE active=1 ORDER BY name\");\n return c.json({ templates: r.rows.map((x: any) => ({ ...x, items: parseJson(x.items, []) })) });\n});\napp.post(\"/api/admin/milestone-templates\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can create milestone templates\");\n const b = await body(c);\n const items = (Array.isArray(b.items) ? b.items : str(b.items).split(\"\\n\").map((title) => ({ title })))\n .map((x: any) => typeof x === \"string\" ? { title: str(x), tag: \"Milestone\", description: \"\" } : {\n title: str(x.title), tag: str(x.tag) || \"Milestone\", description: str(x.description),\n }).filter((x: any) => x.title);\n if (!str(b.name) || !items.length) throw new Error(\"Template name and at least one milestone are required\");\n const t = now();\n await db.execute({\n sql: \"INSERT INTO milestone_templates(id,name,description,items,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?)\",\n args: [uid(), str(b.name), str(b.description), JSON.stringify(items), a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/admin/milestone-templates/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can delete milestone templates\");\n const result = await db.execute({\n sql: \"UPDATE milestone_templates SET active=0,updated_at=? WHERE id=? AND active=1\",\n args: [now(), c.req.param(\"id\")],\n });\n if (!result.rowsAffected) throw new Error(\"Milestone template not found\");\n return c.json({ ok: true });\n});\napp.post(\"/api/projects/:id/apply-milestone-template\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_milestones\");\n const p = await allowedProject(c.req.param(\"id\"), a), b = await body(c);\n if (!p) throw new Error(\"Project not found\");\n const r = await db.execute({ sql: \"SELECT items FROM milestone_templates WHERE id=? AND active=1\", args: [str(b.template_id)] });\n const items = parseJson((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 t = now();\n await db.execute({\n sql: `INSERT INTO invoices(id,project_id,invoice_number,invoice_type,milestone_ids,notes,amount,currency,\n due_date,status,created_by_id,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,'issued',?,?,?)`,\n args: [uid(), p.id, invoiceNumber, [\"milestone\", \"final\", \"custom\"].includes(b.invoice_type) ? b.invoice_type : \"custom\",\n JSON.stringify(Array.isArray(b.milestone_ids) ? b.milestone_ids : []), str(b.notes), Number(b.amount) || 0,\n p.currency, str(b.due_date) || null, a.actorId, t, t],\n });\n return c.json({ ok: true }, 201);\n});\napp.get(\"/api/invoices/:id/pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Invoices are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM invoices WHERE id=?\", args: [c.req.param(\"id\")] });\n const x = r.rows[0] as any;\n const p = x ? await allowedProject(String(x.project_id), a) : null;\n if (!x || !p) throw new Error(\"Invoice not found\");\n const branding = await brandingForProject(p);\n const paid = await db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [x.project_id] });\n const selected = parseJson(x.milestone_ids, []);\n const milestones = selected.length ? await db.execute({\n sql: `SELECT title,status,completed_date FROM milestones WHERE project_id=? AND id IN (${selected.map(() => \"?\").join(\",\")})`,\n args: [x.project_id, ...selected],\n }) : { rows: [] };\n const content = [\n ...(milestones.rows.length ? [\"## Covered milestones\", ...milestones.rows.map((m: any) => `- ${m.title} — ${titleCase(m.status)}`), \"\"] : []),\n x.notes ? `## Notes\\n${x.notes}` : \"\",\n `\\n## Payment summary\\nReceived to date: ${x.currency} ${Number((paid.rows[0] as any)?.total).toLocaleString()}`,\n ].join(\"\\n\");\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Project invoice\", `${x.invoice_number} · Issued ${prettyDateForServer(x.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Invoice type\", titleCase(x.invoice_type)],\n [\"Amount due\", `${x.currency} ${Number(x.amount).toLocaleString()}`],\n [\"Due date\", x.due_date ? prettyDateForServer(x.due_date) : \"Due on receipt\"],\n ], 76, branding);\n addPdfLines(doc, content, contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${x.invoice_number}.pdf`);\n});\n\napp.get(\"/api/payments/:id/receipt.pdf\", async (c) => {\n const a = await actor(c);\n if (a.actorType === \"client\") throw new Error(\"Receipts are not available\");\n const r = await db.execute({ sql: \"SELECT * FROM payments WHERE id=?\", args: [c.req.param(\"id\")] });\n const payment = r.rows[0] as any;\n const p = payment ? await allowedProject(String(payment.project_id), a) : null;\n if (!payment || !p) throw new Error(\"Payment not found\");\n const [branding, paidResult] = await Promise.all([\n brandingForProject(p),\n db.execute({ sql: \"SELECT COALESCE(SUM(amount),0) total FROM payments WHERE project_id=?\", args: [p.id] }),\n ]);\n const projectTotal = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const paid = Number((paidResult.rows[0] as any)?.total);\n const receiptNumber = `RCT-${String(payment.paid_date).slice(0, 4)}-${String(payment.id).slice(0, 8).toUpperCase()}`;\n const doc = new jsPDF();\n await addPdfHeader(doc, branding, \"Payment receipt\", `${receiptNumber} · Issued ${prettyDateForServer(payment.created_at)}`, new URL(c.req.url).origin);\n const contentY = addPdfSummaryCard(doc, [\n [\"Project\", str(p.title)],\n [\"Payment received\", `${payment.currency} ${Number(payment.amount).toLocaleString()}`],\n [\"Payment date\", prettyDateForServer(payment.paid_date)],\n [\"Total received\", `${payment.currency} ${paid.toLocaleString()}`],\n [\"Balance pending\", `${payment.currency} ${Math.max(0, projectTotal - paid).toLocaleString()}`],\n ], 76, branding);\n const note = str(payment.note);\n addPdfLines(doc, [\n \"## Receipt acknowledgement\",\n `This receipt confirms payment of ${payment.currency} ${Number(payment.amount).toLocaleString()} toward ${p.title}.`,\n note ? `\\n## Payment note\\n${note}` : \"\",\n ].join(\"\\n\"), contentY, branding);\n addPdfFooter(doc, branding);\n return pdfResponse(doc, `${receiptNumber}.pdf`);\n});\n\napp.get(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n const partner = r.rows[0] as any;\n if (!partner) throw new Error(\"Partner not found\");\n const base = await getClientBranding();\n return c.json({\n branding: effectivePartnerBranding(partner, base),\n overrides: {\n name: partner.brand_name || \"\",\n logo_url: partner.logo_url || \"\",\n accent_color: partner.accent_color || \"\",\n contact_info: partner.contact_info || \"\",\n website_url: partner.website_url || \"\",\n portal_label: \"\",\n welcome_message: \"\",\n document_header: partner.document_header || \"\",\n document_footer: partner.document_footer || \"\",\n },\n });\n});\napp.patch(\"/api/partner/branding\", async (c) => {\n const a = await actor(c);\n if (a.actorType !== \"partner\") throw new Error(\"Partners only can manage partner branding\");\n const b = await body(c);\n await db.execute({\n sql: \"UPDATE partners SET brand_name=?,logo_url=?,accent_color=?,contact_info=?,website_url=?,document_header=?,document_footer=?,updated_at=? WHERE id=?\",\n args: [\n str(b.name) || null,\n /^https?:\\/\\//.test(str(b.logo_url)) ? str(b.logo_url) : null,\n color(b.accent_color) || null,\n str(b.contact_info) || null,\n /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null,\n str(b.document_footer) || null,\n now(), a.actorId,\n ],\n });\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [a.actorId] });\n return c.json({ ok: true, branding: effectivePartnerBranding(r.rows[0], await getClientBranding()) });\n});\n\napp.get(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const [users, assignments, projects] = await Promise.all([\n db.execute(\"SELECT id,name,phone,email,role,permissions,all_project_access,active,created_at,updated_at FROM internal_users ORDER BY role,name\"),\n db.execute(\"SELECT user_id,project_id FROM user_project_access\"),\n db.execute(\"SELECT id,title,status,archived FROM projects ORDER BY archived,title\"),\n ]);\n return c.json({ users: users.rows.map((u: any) => ({\n ...u, active: Boolean(u.active), all_project_access: Boolean(u.all_project_access),\n permissions: parseJson(u.permissions, {}),\n project_ids: assignments.rows.filter((x: any) => x.user_id === u.id).map((x: any) => x.project_id),\n })), projects: projects.rows.map((x: any) => ({ ...x, archived: Boolean(x.archived) })) });\n});\napp.post(\"/api/admin/users\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), userId = uid(), t = now();\n const role = b.role === \"admin\" ? \"admin\" : \"user\";\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...(b.permissions ?? {}) };\n const all = b.all_project_access !== false;\n const statements: any[] = [{\n sql: \"INSERT INTO internal_users(id,name,phone,email,pin_hash,role,permissions,all_project_access,active,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,1,?,?)\",\n args: [userId, str(b.name) || \"Team member\", p, emailList([b.email])[0] || null, await hashPin(p, code), role, JSON.stringify(permissions), int(all), t, t],\n }];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [userId, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true, id: userId }, 201);\n});\napp.patch(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage users\");\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = r.rows[0] as any, b = await body(c);\n if (!u) throw new Error(\"User not found\");\n const requestedRole = b.role === \"admin\" ? \"admin\" : b.role === \"user\" ? \"user\" : u.role;\n const requestedActive = b.active === undefined ? Boolean(u.active) : Boolean(b.active);\n if (a.actorId === String(u.id) && (!requestedActive || requestedRole !== \"admin\")) {\n throw new Error(\"You cannot revoke or demote your own administrator account\");\n }\n if (u.role === \"admin\" && u.active && (!requestedActive || requestedRole !== \"admin\")) {\n const admins = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((admins.rows[0] as any)?.count) <= 1) {\n throw new Error(\"At least one active administrator is required\");\n }\n }\n const p = b.phone === undefined ? String(u.phone) : phone(b.phone);\n const role = requestedRole;\n const permissions = role === \"admin\" ? fullPermissions : { ...userDefaults, ...parseJson(u.permissions, {}), ...(b.permissions ?? {}) };\n const all = b.all_project_access === undefined ? Boolean(u.all_project_access) : Boolean(b.all_project_access);\n const statements: any[] = [\n { sql: \"UPDATE internal_users SET name=?,phone=?,email=?,pin_hash=?,role=?,permissions=?,all_project_access=?,active=?,updated_at=? WHERE id=?\",\n args: [str(b.name ?? u.name) || u.name, p,\n b.email === undefined ? u.email : emailList([b.email])[0] || null,\n b.pin ? await hashPin(p, pin(b.pin)) : u.pin_hash,\n role, JSON.stringify(permissions), int(all), b.active === undefined ? Number(u.active) : int(b.active), now(), u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n ];\n if (!all && Array.isArray(b.project_ids)) for (const projectId of b.project_ids) statements.push({\n sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [u.id, str(projectId)],\n });\n await db.batch(statements);\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/users/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove users\");\n if (a.actorId === c.req.param(\"id\")) throw new Error(\"You cannot remove your own account\");\n const target = await db.execute({ sql: \"SELECT role,active FROM internal_users WHERE id=?\", args: [c.req.param(\"id\")] });\n const u = target.rows[0] as any;\n if (!u) throw new Error(\"User not found\");\n if (u.role === \"admin\" && u.active) {\n const count = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n if (Number((count.rows[0] as any)?.count) <= 1) throw new Error(\"At least one active admin is required\");\n }\n const fallback = await db.execute({\n sql: \"SELECT id FROM internal_users WHERE id<>? AND active=1 ORDER BY CASE role WHEN 'admin' THEN 0 ELSE 1 END,name LIMIT 1\",\n args: [c.req.param(\"id\")],\n });\n const fallbackId = str((fallback.rows[0] as any)?.id);\n if (!fallbackId) throw new Error(\"Assign another active user before removing this account\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='internal' AND actor_id=?\", args: [u.id] },\n { sql: \"DELETE FROM user_project_access WHERE user_id=?\", args: [u.id] },\n { sql: \"UPDATE projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"UPDATE recurring_projects SET owner_user_id=?,updated_at=? WHERE owner_user_id=?\", args: [fallbackId, now(), u.id] },\n { sql: \"DELETE FROM internal_users WHERE id=?\", args: [u.id] },\n ]);\n return c.json({ ok: true });\n});\n\napp.get(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const [recipients, users] = await Promise.all([\n ccRecipients(),\n db.execute(\"SELECT id,name,email,active FROM internal_users ORDER BY name\"),\n ]);\n return c.json({\n recipients,\n users: users.rows.map((x: any) => ({ ...x, active: Boolean(x.active) })),\n });\n});\napp.patch(\"/api/admin/cc-recipients\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage email recipients\");\n const b = await body(c);\n const recipients = (Array.isArray(b.recipients) ? b.recipients : []).map((x: any) => ({\n id: str(x.id) || uid(),\n label: str(x.label) || str(x.email) || \"CC recipient\",\n email: emailList([x.email])[0] || \"\",\n user_id: str(x.user_id) || \"\",\n default_selected: Boolean(x.default_selected),\n })).filter((x: any) => x.email || x.user_id);\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('notification_cc_recipients',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(recipients), now()],\n });\n return c.json({ ok: true, recipients });\n});\n\napp.get(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute(`SELECT p.*,(SELECT COUNT(*) FROM projects x WHERE x.partner_id=p.id) project_count FROM partners p ORDER BY p.name`);\n return c.json({ partners: r.rows.map((p: any) => ({ ...p, active: Boolean(p.active), project_count: Number(p.project_count), pin_hash: undefined })) });\n});\napp.get(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n return c.json({ branding: await getClientBranding() });\n});\napp.patch(\"/api/admin/branding\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage client branding\");\n const b = await body(c);\n const branding = {\n name: str(b.name) || defaultBranding.name,\n logo_url: str(b.logo_url) || defaultBranding.logo_url,\n accent_color: color(b.accent_color) || defaultBranding.accent_color,\n contact_info: str(b.contact_info),\n website_url: /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : \"\",\n portal_label: str(b.portal_label) || defaultBranding.portal_label,\n welcome_message: str(b.welcome_message) || defaultBranding.welcome_message,\n document_header: str(b.document_header) || defaultBranding.document_header,\n document_footer: str(b.document_footer) || defaultBranding.document_footer,\n };\n await db.execute({\n sql: `INSERT INTO app_settings(setting_key,setting_value,updated_at) VALUES('client_branding',?,?)\n ON CONFLICT(setting_key) DO UPDATE SET setting_value=excluded.setting_value,updated_at=excluded.updated_at`,\n args: [JSON.stringify(branding), now()],\n });\n brandingCache = null;\n return c.json({ ok: true, branding });\n});\napp.post(\"/api/admin/partners\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const b = await body(c), p = phone(b.phone), code = pin(b.pin), partnerId = uid(), t = now();\n await db.execute({\n sql: `INSERT INTO partners(id,name,phone,pin_hash,brand_name,logo_url,accent_color,contact_info,website_url,\n document_header,document_footer,active,created_at,updated_at)\n VALUES(?,?,?,?,?,?,?,?,?,?,?,1,?,?)`,\n args: [partnerId, str(b.name) || \"Partner\", p, await hashPin(p, code),\n str(b.brand_name) || null, str(b.logo_url) || null, color(b.accent_color) || null,\n str(b.contact_info) || null, /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n str(b.document_header) || null, str(b.document_footer) || null, t, t],\n });\n return c.json({ ok: true, id: partnerId }, 201);\n});\napp.patch(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can manage partners\");\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=?\", args: [c.req.param(\"id\")] });\n const p = r.rows[0] as any, b = await body(c);\n if (!p) throw new Error(\"Partner not found\");\n const ph = b.phone === undefined ? String(p.phone) : phone(b.phone);\n await db.execute({\n sql: `UPDATE partners SET name=?,phone=?,pin_hash=?,brand_name=?,logo_url=?,accent_color=?,contact_info=?,\n website_url=?,document_header=?,document_footer=?,active=?,updated_at=? WHERE id=?`,\n args: [str(b.name ?? p.name) || p.name, ph, b.pin ? await hashPin(ph, pin(b.pin)) : p.pin_hash,\n str(b.brand_name ?? p.brand_name) || null, str(b.logo_url ?? p.logo_url) || null,\n color(b.accent_color ?? p.accent_color) || null, str(b.contact_info ?? p.contact_info) || null,\n b.website_url === undefined ? p.website_url : /^https?:\\/\\//.test(str(b.website_url)) ? str(b.website_url) : null,\n b.document_header === undefined ? p.document_header : str(b.document_header) || null,\n b.document_footer === undefined ? p.document_footer : str(b.document_footer) || null,\n b.active === undefined ? Number(p.active) : int(b.active), now(), p.id],\n });\n return c.json({ ok: true });\n});\napp.delete(\"/api/admin/partners/:id\", async (c) => {\n const a = await actor(c);\n if (!admin(a)) throw new Error(\"Admins only can remove partners\");\n const linked = await db.execute({\n sql: `SELECT (SELECT COUNT(*) FROM projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM recurring_projects WHERE partner_id=?) +\n (SELECT COUNT(*) FROM proposals WHERE partner_id=?) count`,\n args: [c.req.param(\"id\"), c.req.param(\"id\"), c.req.param(\"id\")],\n });\n if (Number((linked.rows[0] as any)?.count)) throw new Error(\"Deactivate this partner or unlink their projects before deletion\");\n await db.batch([\n { sql: \"DELETE FROM sessions WHERE actor_type='partner' AND actor_id=?\", args: [c.req.param(\"id\")] },\n { sql: \"DELETE FROM partners WHERE id=?\", args: [c.req.param(\"id\")] },\n ]);\n return c.json({ ok: true });\n});\n\napp.get(\"/frontend/logo.png\", async () => {\n const logo = await blob.get(\"assets/aflabs-logo.png\");\n return new Response(logo.body, {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=86400\" },\n });\n});\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\napp.get(\"*\", () => serveFile(\"/frontend/index.html\"));\napp.onError((e, c) => c.req.path.startsWith(\"/api/\") ? error(c, e) : Promise.reject(e));\nexport default app.fetch;\n","label",[156],"83e658a3-6621-4b73-a058-dee6480d526a","README.md","019fada5-614d-738d-bbb2-8864d623b645",96,["D",1785356838867],3,"# AFLABS PM\n\nA minimal Val Town project-management application for AFLABS administrators, internal users, partners, and clients.\n\n## Runtime\n\n- Val Town React + Hono\n- Selectable Neon Postgres or Turso/libSQL database\n- Phone-and-PIN authentication for internal users and partners\n- Secret project URL plus PIN for clients\n- Cookie-backed sessions\n\n## Required environment variables\n\n- `DATABASE_PROVIDER` (`neon` or `turso`)\n- `NEON_DATABASE_URL` when using Neon\n- `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN` when using Turso\n- `CACHE_ENABLED` (`true` or `false`)\n- `APP_BOOTSTRAP_TOKEN`\n- `SESSION_SECRET`\n\nThe selected database provider is permanently recorded in Val-scoped blob storage on first use.\nChanging `DATABASE_PROVIDER` later will fail safely instead of silently switching databases.\nThe cache switch controls both Redis-backed API response caching and browser API caching;\nRedis login rate limiting remains active independently.\n\n## Main capabilities\n\n- Permission-aware internal Kanban across backlog, todo, in progress, blocked, and done\n- Admin-only completion and token-confirmed permanent deletion\n- Partner project submission, comments, branding, and payment updates\n- Client order-status portal with progress, milestones, timeline, links, and stakeholder questions\n- Historical timeline entries, partial payments, credentials, stakeholders, links, archival, and unread activity\n\nThe app contains no public source-code link.\n",[167],"df509fd1-3004-4668-a9be-ed6d1763e40b","scripts","f6625940-f161-4cf0-b862-081103dfd8b4",14,["D",1785327805216],"directory",[175],"c48219a0-f722-4a49-9b6b-09e7d2e33882","frontend","019fada5-614d-738d-bbb2-876b78247f7e",1,["D",1785324724390],[182],"78f06f1e-991f-49fa-8ebd-6802aa5a8e90","diagnostics","b2481c4f-69e8-451f-8db5-a88ab58ba99c",52,["D",1785343198085],[188],"pulls","branches",10,"forks","envVars",{"_201":203,"_204":64},"connections",{"_201":64,"_202":64},"count","unfilledCount",12,"emptyCount",{"_43":187,"_32":188,"_30":189,"_157":-5,"_41":42,"_40":190,"_159":25,"_38":293,"_13":64,"_34":179,"_36":-5,"_24":49,"_164":-5,"_219":294,"_27":295},{"_43":181,"_32":182,"_30":183,"_157":-5,"_41":42,"_40":184,"_159":25,"_38":290,"_13":64,"_34":179,"_36":-5,"_24":49,"_164":-5,"_219":291,"_27":292},{"_43":286,"_32":276,"_30":271,"_157":183,"_41":42,"_40":184,"_159":25,"_38":287,"_13":64,"_34":179,"_36":-5,"_24":49,"_164":-5,"_219":288,"_27":289},{"_43":277,"_32":278,"_30":279,"_157":271,"_41":42,"_40":280,"_159":49,"_38":281,"_13":282,"_34":35,"_36":283,"_24":49,"_164":-5,"_219":284,"_27":285},{"_43":268,"_32":269,"_30":270,"_157":271,"_41":42,"_40":184,"_159":25,"_38":272,"_13":64,"_34":35,"_36":273,"_24":49,"_164":-5,"_219":274,"_27":275},{"_43":260,"_32":261,"_30":262,"_157":183,"_41":42,"_40":263,"_159":25,"_38":264,"_13":184,"_34":20,"_36":265,"_24":49,"_164":-5,"_219":266,"_27":267},{"_43":252,"_32":253,"_30":254,"_157":183,"_41":42,"_40":255,"_159":49,"_38":256,"_13":171,"_34":20,"_36":257,"_24":49,"_164":-5,"_219":258,"_27":259},{"_43":245,"_32":246,"_30":247,"_157":183,"_41":42,"_40":230,"_159":25,"_38":248,"_13":184,"_34":35,"_36":249,"_24":49,"_164":-5,"_219":250,"_27":251},{"_43":237,"_32":238,"_30":239,"_157":183,"_41":42,"_40":240,"_159":49,"_38":241,"_13":203,"_34":20,"_36":242,"_24":49,"_164":-5,"_219":243,"_27":244},{"_43":174,"_32":175,"_30":176,"_157":-5,"_41":42,"_40":177,"_159":25,"_38":234,"_13":64,"_34":179,"_36":-5,"_24":49,"_164":-5,"_219":235,"_27":236},{"_43":225,"_32":226,"_30":227,"_157":176,"_41":42,"_40":228,"_159":25,"_38":229,"_13":230,"_34":35,"_36":231,"_24":49,"_164":-5,"_219":232,"_27":233},{"_43":166,"_32":167,"_30":168,"_157":-5,"_41":42,"_40":169,"_159":49,"_38":222,"_13":171,"_34":20,"_36":172,"_24":49,"_164":-5,"_219":223,"_27":224},{"_43":155,"_32":156,"_30":59,"_157":-5,"_41":42,"_40":158,"_159":49,"_38":218,"_13":161,"_34":162,"_36":163,"_24":49,"_164":45,"_219":220,"_27":221},["D",1785357217811],"children",[],[156],["D",1785356838867],[],[167],"fade81e1-e797-4572-b2ca-5bce9e5c7cbf","neon-connection-test.ts","9ec78434-8b8a-11f1-a11b-1607ee4eb77e",93,["D",1785356631336],6,"import { neon } from \"npm:@neondatabase/serverless\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst connectionString = Deno.env.get(\"NEON_DATABASE_URL\");\nif (!connectionString) throw new Error(\"NEON_DATABASE_URL is missing\");\nconst sql = neon(connectionString);\nconst id = crypto.randomUUID();\nconst results = await sql.transaction([\n sql.query(\"CREATE TABLE IF NOT EXISTS provider_adapter_test (id TEXT PRIMARY KEY, label TEXT NOT NULL)\"),\n sql.query(\"INSERT INTO provider_adapter_test(id,label) VALUES($1,$2) ON CONFLICT DO NOTHING\", [id, \"Adapter ready\"]),\n sql.query(\"SELECT id,label FROM provider_adapter_test WHERE id=$1\", [id]),\n], { fullResults: true });\nconst single = await sql.query(\"SELECT $1::text label\", [\"Single query ready\"], { fullResults: true });\nawait sql.query(\"DROP TABLE provider_adapter_test\");\nconst savedLock = await blob.getJSON(\"config:database-provider-lock:v1\");\nconsole.log({\n ok: results[2]?.rows?.[0]?.label === \"Adapter ready\" && single.rows?.[0]?.label === \"Single query ready\",\n lockState: savedLock ?? \"empty\",\n resultCount: results.length,\n inserted: results[1]?.rowCount,\n selected: results[2]?.rows?.length,\n});\n",[],[175,226],["D",1785327805216],[215],[175],"ac4375a0-27cf-402a-bb26-0fa6a952703c","styles.css","2bc34f40-8b44-11f1-9ddb-1607ee4eb77e",86,["D",1785355279170],":root {\n --bg: oklch(1 0 0);\n --surface: oklch(0.975 0.004 240);\n --surface-raised: oklch(0.992 0.002 240);\n --ink: oklch(0.18 0.012 245);\n --muted: oklch(0.46 0.018 245);\n --faint: oklch(0.65 0.012 245);\n --border: oklch(0.9 0.008 240);\n --border-strong: oklch(0.82 0.012 240);\n --blue: oklch(0.55 0.12 245);\n --blue-dark: oklch(0.48 0.13 245);\n --blue-soft: oklch(0.95 0.025 245);\n --lemon: oklch(0.88 0.18 115);\n --lemon-soft: oklch(0.96 0.08 115);\n --danger: oklch(0.55 0.19 25);\n --danger-soft: oklch(0.96 0.025 25);\n --warning: oklch(0.72 0.15 75);\n --success: oklch(0.57 0.14 145);\n --success-soft: oklch(0.95 0.035 145);\n --sidebar: oklch(0.155 0.012 245);\n --z-dropdown: 20;\n --z-sticky: 30;\n --z-backdrop: 40;\n --z-modal: 50;\n --z-toast: 60;\n color: var(--ink);\n background: var(--bg);\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n font-synthesis: none;\n line-height: 1.5;\n text-rendering: optimizeLegibility;\n}\n\n* { box-sizing: border-box; }\nhtml, body, #root { min-height: 100%; margin: 0; }\nbody { min-width: 320px; background: var(--bg); }\nbutton, input, textarea, select { font: inherit; }\nbutton, a { -webkit-tap-highlight-color: transparent; }\nbutton { color: inherit; }\na { color: inherit; }\n.icon { flex: 0 0 auto; }\nh1, h2, h3, h4, p { margin-top: 0; }\nh1, h2, h3 { letter-spacing: -0.025em; text-wrap: balance; }\np { text-wrap: pretty; }\n\n.button {\n min-height: 40px;\n border: 0;\n border-radius: 10px;\n padding: 0 15px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 650;\n cursor: pointer;\n transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, opacity 180ms ease-out;\n}\n.button:active { transform: translateY(1px); }\n.button:disabled { cursor: wait; opacity: .58; }\n.button-primary, .button-primary span { color: white !important; }\n.button-primary { background: var(--blue); }\n.button-primary:hover { background: var(--blue-dark); }\n.button-secondary { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }\n.button-secondary:hover { background: oklch(0.95 0.008 240); }\n.button-danger { color: var(--danger); background: var(--danger-soft); }\n.button-danger:hover { background: oklch(0.93 0.045 25); }\n.icon-button {\n width: 38px;\n height: 38px;\n border: 0;\n border-radius: 9px;\n background: transparent;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n.icon-button:hover { background: var(--surface); }\nbutton:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {\n outline: 3px solid oklch(0.72 0.12 245 / .35);\n outline-offset: 2px;\n}\n\n.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.field > span, fieldset legend {\n color: oklch(0.3 0.018 245);\n font-size: 12px;\n font-weight: 650;\n}\n.field small { color: var(--muted); font-size: 11px; }\ninput, textarea, select {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n padding: 9px 11px;\n transition: border-color 160ms ease-out, box-shadow 160ms ease-out;\n}\ninput, select { min-height: 42px; }\ntextarea { resize: vertical; line-height: 1.5; }\ninput::placeholder, textarea::placeholder { color: oklch(0.51 0.012 245); opacity: 1; }\ninput:hover, textarea:hover, select:hover { border-color: oklch(0.72 0.025 245); }\ninput:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.55 0.12 245 / .12); outline: 0; }\n.stack { display: flex; flex-direction: column; gap: 16px; }\n.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }\n.form-row > .field { flex: 1 1 180px; }\n.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.form-grid > .field:nth-of-type(3) { grid-column: 1 / -1; }\n.full { grid-column: 1 / -1; }\n.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }\n.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }\n.check input { width: 16px; min-height: 16px; height: 16px; accent-color: var(--blue); }\nfieldset { border: 0; padding: 0; margin: 0; }\nfieldset legend { margin-bottom: 10px; }\n\n.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }\n.brand b { color: var(--lemon); font-weight: 700; }\n.brand-mark {\n width: 31px;\n height: 31px;\n background: oklch(0.18 0.015 245);\n border-radius: 8px;\n display: grid;\n place-items: center;\n overflow: hidden;\n}\n.brand-mark img { width: 100%; height: 100%; object-fit: contain; }\n.brand-mark-large { width: 38px; height: 38px; border-radius: 10px; }\n.brand-large { font-size: 17px; }\n.brand-large .brand-mark { width: 38px; height: 38px; border-radius: 10px; }\n.alert { border-radius: 10px; padding: 10px 12px; font-size: 12px; }\n.alert-error { color: oklch(0.42 0.17 25); background: var(--danger-soft); }\n.alert-warning { color: oklch(0.38 0.1 65); background: oklch(0.95 0.045 78); }\n\n.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .95fr) minmax(430px, 1.05fr); }\n.auth-brand {\n color: white;\n background: var(--sidebar);\n padding: 44px clamp(36px, 6vw, 92px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 100vh;\n}\n.auth-statement { max-width: 580px; }\n.auth-statement .signal { color: oklch(0.82 0.03 245); font-size: 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }\n.auth-statement .signal i { width: 7px; height: 7px; background: var(--lemon); border-radius: 50%; box-shadow: 0 0 0 5px oklch(0.88 0.18 115 / .12); }\n.auth-statement h1 { font-size: clamp(2.7rem, 5vw, 5.25rem); line-height: .99; max-width: 10ch; letter-spacing: -.04em; margin-bottom: 26px; }\n.auth-statement p { color: oklch(0.78 0.02 245); font-size: 16px; max-width: 49ch; line-height: 1.7; }\n.auth-foot { color: oklch(0.65 0.02 245); font-size: 12px; }\n.auth-panel { display: grid; place-items: center; padding: 40px; background: var(--bg); }\n.auth-card { width: min(100%, 410px); }\n.auth-heading { margin-bottom: 28px; }\n.auth-heading h2 { font-size: 28px; margin-bottom: 8px; }\n.auth-heading p, .auth-note { color: var(--muted); font-size: 13px; line-height: 1.6; }\n.auth-note { text-align: center; margin-top: 20px; }\n.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface); border-radius: 11px; margin-bottom: 22px; }\n.segmented button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }\n.segmented button.active { background: white; color: var(--ink); box-shadow: 0 1px 4px oklch(0.18 0.012 245 / .1); }\n.app-loading, .client-loading { min-height: 100vh; display: grid; place-content: center; gap: 24px; }\n.loading-line { width: 180px; height: 2px; background: var(--border); overflow: hidden; }\n.loading-line i { display: block; width: 48%; height: 100%; background: var(--blue); animation: loading 1.2s infinite ease-in-out; }\n@keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } }\n.network-activity { position: fixed; top: 10px; left: 50%; z-index: var(--z-toast); min-height: 28px; padding: 0 10px 0 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: white; background: var(--sidebar); border-radius: 8px; font-size: 9px; font-weight: 650; }\n.network-activity i { width: 7px; height: 7px; border-radius: 50%; background: var(--lemon); animation: activity-pulse .9s ease-in-out infinite alternate; }\n@keyframes activity-pulse { to { opacity: .38; transform: scale(.82); } }\n.page-skeleton { min-height: 520px; padding: 34px 30px; background: var(--surface-raised); }\n.page-skeleton .skeleton { max-width: 980px; margin: 12px 0; }\n.skeleton-row { height: 74px; }\n.skeleton-chart { width: min(100%, 760px); height: 190px; }\n.skeleton-column-title { width: 55%; height: 20px; margin: 8px 4px 18px; }\n.skeleton-card { height: 138px; margin-bottom: 10px; background: var(--bg); }\n\n.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); background: var(--surface); }\n.sidebar {\n position: sticky;\n top: 0;\n height: 100vh;\n color: white;\n background: var(--sidebar);\n padding: 22px 14px 16px;\n display: flex;\n flex-direction: column;\n z-index: var(--z-sticky);\n}\n.sidebar > .brand { padding: 0 10px; margin-bottom: 34px; }\n.sidebar nav { display: flex; flex-direction: column; gap: 4px; }\n.sidebar nav button {\n min-height: 42px;\n color: oklch(0.78 0.018 245);\n background: transparent;\n border: 0;\n border-radius: 9px;\n padding: 0 11px;\n display: flex;\n align-items: center;\n gap: 11px;\n font-size: 12px;\n font-weight: 570;\n text-align: left;\n cursor: pointer;\n}\n.sidebar nav button:hover { color: white; background: oklch(0.22 0.014 245); }\n.sidebar nav button.active { color: var(--sidebar); background: var(--lemon); font-weight: 700; }\n.sidebar-foot { margin-top: auto; }\n.sidebar-foot > a { color: oklch(0.65 0.018 245); font-size: 11px; padding: 10px; display: flex; align-items: center; gap: 8px; text-decoration: none; }\n.account { border-top: 1px solid oklch(1 0 0 / .1); padding: 16px 4px 0; margin-top: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 9px; align-items: center; }\n.account > span { width: 34px; height: 34px; border-radius: 9px; background: oklch(0.28 0.025 245); display: grid; place-items: center; font-size: 11px; font-weight: 700; }\n.account div { min-width: 0; }\n.account b, .account small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.account b { font-size: 11px; }\n.account small { color: oklch(0.6 0.02 245); font-size: 10px; text-transform: capitalize; }\n.account button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: oklch(0.65 0.02 245); border-radius: 7px; cursor: pointer; }\n.account button:hover { background: oklch(1 0 0 / .08); color: white; }\n\n.workspace { min-width: 0; overflow: hidden; }\n.workspace-head, .page-heading { padding: 29px 30px 24px; background: white; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: end; gap: 24px; }\n.workspace-head > div:first-child, .page-heading > div { max-width: 650px; }\n.workspace-head p, .page-heading p { color: var(--blue); font-size: 11px; font-weight: 700; margin-bottom: 5px; }\n.workspace-head h1, .page-heading h1 { font-size: 25px; margin-bottom: 4px; }\n.workspace-head span, .page-heading span { color: var(--muted); font-size: 12px; }\n.head-actions { display: flex; gap: 10px; align-items: center; }\n.search { width: min(260px, 25vw); position: relative; }\n.search svg { position: absolute; left: 12px; top: 12px; color: var(--faint); }\n.search input { padding-left: 36px; background: var(--surface); border-color: transparent; }\n.mobile-nav { display: none; }\n\n.kanban { height: calc(100vh - 114px); padding: 20px 22px 24px; display: flex; gap: 12px; overflow-x: auto; align-items: stretch; }\n.kanban-column { flex: 0 0 282px; min-width: 0; display: flex; flex-direction: column; }\n.kanban-column > header { padding: 4px 5px 13px; }\n.kanban-column > header > div { display: flex; align-items: center; gap: 7px; }\n.kanban-column h2 { margin: 0; font-size: 13px; letter-spacing: -.01em; }\n.kanban-column header b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--muted); background: oklch(0.91 0.008 240); font-size: 10px; display: grid; place-items: center; }\n.kanban-column header p { color: var(--muted); font-size: 10px; margin: 4px 0 0 17px; }\n.status-symbol { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }\n.column-todo .status-symbol { background: var(--blue); }\n.column-in-progress .status-symbol { background: var(--lemon); box-shadow: 0 0 0 3px oklch(0.88 0.18 115 / .18); }\n.column-blocked .status-symbol { background: var(--warning); }\n.column-done .status-symbol { background: var(--success); }\n.kanban-list { flex: 1; min-height: 100px; padding: 3px; overflow-y: auto; scrollbar-width: thin; }\n.kanban-card {\n width: 100%;\n color: var(--ink);\n background: white;\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 14px;\n text-align: left;\n margin-bottom: 9px;\n cursor: pointer;\n transition: border-color 180ms ease-out, transform 180ms ease-out;\n}\n.kanban-card:hover { border-color: var(--blue); transform: translateY(-1px); }\n.kanban-card:active { transform: translateY(0); }\n.card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }\n.type-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }\n.type-rd { background: oklch(0.55 0.16 310); }\n.type-community { background: var(--success); }\n.project-type { color: var(--muted); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.unread { margin-left: auto; min-width: 18px; height: 18px; border-radius: 999px; color: var(--sidebar); background: var(--lemon); font-size: 9px; font-weight: 750; display: grid; place-items: center; }\n.question-attention { margin-left: auto; min-height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; color: oklch(0.35 0.12 55); background: oklch(0.94 0.055 75); font-size: 9px; font-weight: 750; }\n.question-attention + .unread { margin-left: 2px; }\n.kanban-card h3 { font-size: 14px; line-height: 1.35; margin-bottom: 6px; }\n.kanban-card > p { height: 34px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 14px; }\n.card-progress { height: 3px; border-radius: 999px; background: var(--surface); overflow: hidden; }\n.card-progress span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }\n.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: var(--muted); }\n.card-meta span { display: flex; align-items: center; gap: 5px; font-size: 9px; }\n.card-meta b { font-size: 10px; color: var(--ink); }\n.deadline-countdown { width: fit-content; margin-top: 8px; padding: 3px 7px; border-radius: 999px; color: oklch(0.38 0.1 245); background: var(--blue-soft); font-size: 8px; font-weight: 700; }\n.deadline-countdown.overdue { color: oklch(0.45 0.16 28); background: var(--danger-soft); }\n.partner-chip { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.partner-chip span { width: 20px; height: 20px; border-radius: 6px; color: white; background: var(--sidebar); display: grid; place-items: center; font-size: 7px; font-weight: 700; }\n.column-empty { color: var(--faint); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 22px 12px; text-align: center; font-size: 10px; }\n\n.empty { margin: 30px auto; max-width: 380px; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; }\n.empty-mark { width: 48px; height: 48px; border-radius: 14px; color: var(--blue); background: var(--blue-soft); display: grid; place-items: center; margin-bottom: 15px; }\n.empty h3 { font-size: 16px; margin-bottom: 5px; }\n.empty p { color: var(--muted); font-size: 12px; max-width: 36ch; margin-bottom: 16px; }\n\n.modal { width: min(620px, calc(100vw - 32px)); max-height: min(880px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: white; overflow: hidden; }\n.modal-wide { width: min(1100px, calc(100vw - 32px)); }\n.modal::backdrop { background: oklch(0.1 0.01 245 / .6); }\n.modal[open] { animation: modal-in 180ms cubic-bezier(.2,.8,.2,1); }\n@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }\n.modal-inner { max-height: inherit; overflow: auto; }\n.modal-head { min-height: 86px; padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }\n.modal-head h2 { font-size: 20px; margin-bottom: 4px; }\n.modal-head p { color: var(--muted); font-size: 12px; margin: 0; }\n.modal-content { padding: 22px; }\n\n.detail { min-height: min(780px, calc(100vh - 32px)); display: flex; flex-direction: column; }\n.detail-loading { min-height: 500px; padding: 32px; }\n.skeleton { height: 58px; border-radius: 8px; background: var(--surface); margin: 12px 0; animation: pulse 1.5s infinite ease-in-out; }\n.skeleton-title { width: 45%; height: 28px; }\n@keyframes pulse { 50% { opacity: .48; } }\n.detail-header { min-height: 118px; padding: 22px 24px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 240px 38px; align-items: center; gap: 24px; }\n.detail-title { min-width: 0; }\n.detail-title h2 { font-size: 23px; margin: 5px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.detail-title p { color: var(--muted); font-size: 11px; margin: 0; }\n.detail-status { color: var(--muted); font-size: 10px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.deadline-badge { color: var(--blue); background: var(--blue-soft); }\n.deadline-badge.overdue { color: var(--danger); background: var(--danger-soft); }\n.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }\n.status-todo { background: var(--blue); }\n.status-in-progress { background: var(--lemon); }\n.status-blocked { background: var(--warning); }\n.status-done { background: var(--success); }\n.detail-progress > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 7px; }\n.detail-progress b { color: var(--ink); font-size: 13px; }\n.progress { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }\n.progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.detail-tabs { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; overflow-x: auto; }\n.detail-tabs button { min-height: 46px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; text-transform: capitalize; cursor: pointer; white-space: nowrap; }\n.detail-tabs button.active { color: var(--ink); border-bottom-color: var(--blue); }\n.detail-body { flex: 1; background: var(--surface-raised); }\n.detail-section, .timeline-wrap { padding: 24px; }\n.read-overview > p { max-width: 70ch; color: var(--muted); line-height: 1.75; }\n.read-overview dl { display: flex; flex-wrap: wrap; gap: 14px; }\n.read-overview dl div { min-width: 150px; padding: 14px; background: var(--surface); border-radius: 10px; }\n.read-overview dt { color: var(--muted); font-size: 10px; }\n.read-overview dd { margin: 3px 0 0; font-size: 13px; font-weight: 650; }\n.quick-form { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: white; display: flex; flex-direction: column; gap: 13px; }\n.quick-form .button { align-self: flex-start; }\n.section-heading { margin-bottom: 16px; }\n.section-heading h3 { font-size: 16px; margin-bottom: 3px; }\n.section-heading p { color: var(--muted); font-size: 11px; margin: 0; }\n.split-section { display: grid; grid-template-columns: 1fr; gap: 30px; }\n.split-section > section + section { padding-top: 26px; border-top: 1px solid var(--border); }\n\n.timeline { max-width: 740px; margin: 24px auto 0; }\n.timeline-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 22px; }\n.timeline-item::before { content: \"\"; position: absolute; left: 16px; top: 25px; bottom: -2px; width: 1px; background: var(--border); }\n.timeline-item:last-child::before { display: none; }\n.timeline-node { position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 10px; background: var(--surface); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; }\n.timeline-payment .timeline-node { color: var(--success); background: var(--success-soft); }\n.timeline-blocker .timeline-node { color: oklch(0.55 0.14 60); background: oklch(0.95 0.04 75); }\n.timeline-milestone .timeline-node { color: var(--blue); background: var(--blue-soft); }\n.timeline-schedule-extension .timeline-node { color: oklch(0.48 0.13 245); background: oklch(0.94 0.035 245); }\n.timeline-content { padding: 0 0 4px; }\n.timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }\n.timeline-head time { color: var(--faint); font-size: 9px; }\n.event-type { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }\n.timeline-content h4 { font-size: 12px; margin-bottom: 4px; }\n.timeline-content p { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 0; max-width: 68ch; }\n.resolved { color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 7px; font-size: 8px; font-weight: 700; }\n.text-action, .text-danger { border: 0; background: none; padding: 0; font-size: 10px; font-weight: 650; cursor: pointer; }\n.text-action { color: var(--blue); margin-top: 7px; }\n.text-danger { color: var(--danger); }\n.reply-box { margin-top: 10px; display: flex; gap: 8px; align-items: end; }\n.reply-box textarea { min-height: 70px; }\n.reply-box .button { flex: 0 0 auto; }\n\n.item-list { display: flex; flex-direction: column; }\n.item-row { min-height: 62px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 4px; }\n.item-row > div { min-width: 0; flex: 1; }\n.item-row b, .item-row a { color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }\n.item-row a:hover { color: var(--blue); }\n.item-row p { color: var(--muted); font-size: 9px; margin: 3px 0 0; }\n.item-row small { color: var(--muted); font-size: 10px; display: block; margin-top: 4px; }\n.resource-icon, .milestone-state { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.milestone-state { font-weight: 700; }\n.state-complete { color: var(--success); background: var(--success-soft); }\n.state-active { color: var(--sidebar); background: var(--lemon-soft); }\n.credential-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.credential { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: white; }\n.credential div b, .credential div span { display: block; }\n.credential b { font-size: 11px; }\n.credential span { color: var(--muted); font-size: 9px; }\n.credential code { grid-column: 1 / -1; padding: 7px; background: var(--surface); border-radius: 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }\n.credential a, .credential button { color: var(--blue); border: 0; background: none; font-size: 9px; padding: 0; cursor: pointer; text-decoration: none; }\n.credential button { color: var(--danger); }\n.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }\n.person { position: relative; min-height: 112px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 13px; display: flex; gap: 11px; align-items: flex-start; }\n.person-main { border-color: oklch(0.78 0.08 115); background: var(--lemon-soft); }\n.person > span, .avatar { width: 38px; height: 38px; border-radius: 10px; color: white; background: var(--blue); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }\n.person > div { min-width: 0; flex: 1; }\n.person header { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }\n.person header em { padding: 2px 5px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 7px; font-style: normal; font-weight: 700; }\n.person b, .person p, .person small { display: block; }\n.person b { font-size: 11px; }\n.person p, .person small { color: var(--muted); font-size: 9px; margin: 1px 0; }\n.person > button { position: absolute; right: 7px; top: 6px; border: 0; background: none; color: var(--faint); cursor: pointer; }\n.person a { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }\n.person-actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }\n.person-actions button { border: 0; padding: 4px 7px; border-radius: 6px; color: var(--blue); background: var(--surface); font-size: 8px; cursor: pointer; }\n.person-actions .danger-link { color: var(--danger); }\n.person-editor { margin-top: 9px; }\n.person-editor > summary { width: fit-content; color: var(--blue); font-size: 8px; font-weight: 700; cursor: pointer; list-style-position: inside; }\n.person-editor > form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }\n.person-editor .button { width: 100%; min-height: 34px; }\n.payment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-radius: 11px; overflow: hidden; margin-bottom: 20px; }\n.payment-summary > div { background: white; padding: 16px; }\n.payment-summary span, .payment-summary b { display: block; }\n.payment-summary span { color: var(--muted); font-size: 9px; }\n.payment-summary b { font-size: 16px; margin-top: 3px; }\n.payment-summary .pending { background: var(--lemon-soft); }\n.access-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 28px; }\n.copy-field { display: flex; gap: 8px; margin-bottom: 18px; }\n.copy-field code { flex: 1; min-width: 0; padding: 11px; border-radius: 8px; background: var(--surface); font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.inline-form { display: flex; gap: 8px; align-items: end; max-width: 360px; }\n.inline-form .field { flex: 1; }\n.privacy-note { color: oklch(0.37 0.02 245); background: var(--surface); border-radius: 12px; padding: 18px; align-self: start; }\n.privacy-note h3 { font-size: 13px; }\n.privacy-note ul { padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.9; }\n\n.directory { min-height: 100vh; background: white; }\n.directory-tabs { display: flex; gap: 4px; padding: 18px 30px 0; border-bottom: 1px solid var(--border); }\n.directory-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; padding: 0 12px; background: none; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; }\n.directory-tabs button.active { color: var(--ink); border-color: var(--blue); }\n.directory-tabs b { margin-left: 6px; color: var(--faint); }\n.directory-layout { display: grid; grid-template-columns: minmax(370px, .75fr) minmax(480px, 1.25fr); min-height: calc(100vh - 174px); }\n.directory-form { padding: 28px 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.directory-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.directory-form > p { color: var(--muted); font-size: 11px; margin-bottom: 22px; max-width: 55ch; }\n.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }\n.project-checks { max-height: 100px; overflow: auto; margin-top: 8px; padding-left: 24px; display: flex; flex-direction: column; gap: 5px; }\n.directory-list { padding: 12px 24px; }\n.directory-row { min-height: 86px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); }\n.directory-row h3 { font-size: 12px; margin: 0 0 2px; }\n.directory-row h3 em { color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 6px; margin-left: 7px; font-size: 8px; font-style: normal; text-transform: capitalize; }\n.directory-row p, .directory-row small { color: var(--muted); font-size: 9px; margin: 0; }\n.row-actions { display: flex; gap: 10px; align-items: center; }\n.row-actions .button { min-height: 32px; padding: 0 10px; font-size: 10px; }\n.partner-avatar { background: var(--sidebar); }\n.self-label { color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 7px 9px; border-radius: 8px; font-size: 9px; white-space: nowrap; }\n.visibility-editor fieldset { min-width: 0; }\n.scope-toggle { min-height: 68px; padding: 13px; border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; }\n.scope-toggle input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--blue); }\n.scope-toggle span, .scope-toggle b, .scope-toggle small { display: block; }\n.scope-toggle b { font-size: 12px; }\n.scope-toggle small, .field-note { color: var(--muted); font-size: 9px; }\n.project-visibility-list { max-height: 320px; margin-top: 10px; overflow: auto; border-top: 1px solid var(--border); }\n.project-visibility-list .check { width: 100%; min-height: 54px; padding: 9px 4px; border-bottom: 1px solid var(--border); }\n.project-visibility-list .check > span { min-width: 0; flex: 1; }\n.project-visibility-list b, .project-visibility-list small { display: block; }\n.project-visibility-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 10px; }\n.project-visibility-list small { margin-top: 2px; font-size: 8px; }\n.branding-layout { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(320px, .72fr); min-height: calc(100vh - 174px); }\n.branding-form { padding: 30px; border-right: 1px solid var(--border); background: var(--surface-raised); }\n.branding-form > h2 { font-size: 18px; margin-bottom: 4px; }\n.branding-form > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 24px; max-width: 62ch; }\n.branding-preview { --preview-accent: var(--lemon); align-self: start; margin: 30px; padding: 22px; color: white; background: var(--sidebar); border: 1px solid oklch(1 0 0 / .08); border-radius: 14px; }\n.preview-label { display: block; color: oklch(0.72 0.02 245); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }\n.preview-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }\n.preview-brand img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: oklch(0.15 0.012 245); }\n.preview-brand b, .preview-brand small { display: block; }\n.preview-brand b { font-size: 12px; }\n.preview-brand small { color: oklch(0.72 0.02 245); font-size: 8px; margin-top: 2px; }\n.preview-project > span { color: var(--preview-accent); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.preview-project h3 { font-size: 25px; letter-spacing: -.025em; margin: 7px 0 9px; }\n.preview-project p { color: oklch(0.76 0.02 245); font-size: 10px; line-height: 1.6; min-height: 32px; }\n.preview-project > div { height: 5px; margin-top: 25px; border-radius: 999px; background: oklch(1 0 0 / .12); overflow: hidden; }\n.preview-project > div i { display: block; width: 64%; height: 100%; background: var(--preview-accent); }\n.preview-contact { display: block; color: oklch(0.67 0.02 245); font-size: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid oklch(1 0 0 / .09); }\n.document-branding-fields { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }\n.document-preview { margin-top: 22px; padding: 13px; border-radius: 9px; color: oklch(0.2 0.012 245); background: oklch(0.98 0.004 240); }\n.document-preview > small { display: block; margin-bottom: 10px; color: oklch(0.48 0.018 245); font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }\n.document-preview header { min-height: 42px; padding: 8px; border-radius: 6px; display: flex; gap: 9px; align-items: center; color: white; background: oklch(0.18 0.012 245); }\n.document-preview header img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }\n.document-preview header b, .document-preview header span { display: block; }\n.document-preview header b { font-size: 8px; }\n.document-preview header span { max-width: 23ch; margin-top: 2px; color: oklch(0.77 0.015 245); font-size: 6px; line-height: 1.35; white-space: pre-line; }\n.document-preview section { min-height: 76px; padding: 14px 8px; }\n.document-preview section i { display: block; width: 34px; height: 3px; margin-bottom: 10px; background: var(--preview-accent); }\n.document-preview section strong { display: block; font-size: 9px; }\n.document-preview section p { margin: 5px 0 0; color: oklch(0.48 0.018 245); font-size: 7px; line-height: 1.5; }\n.document-preview footer { min-height: 22px; padding: 7px 8px 0; border-top: 1px solid oklch(0.9 0.008 240); color: oklch(0.5 0.015 245); font-size: 6px; line-height: 1.4; white-space: pre-line; }\n\n.toast {\n position: fixed;\n top: 18px;\n right: 18px;\n z-index: var(--z-toast);\n min-width: 260px;\n max-width: min(420px, calc(100vw - 36px));\n min-height: 44px;\n color: white;\n background: var(--sidebar);\n border-radius: 11px;\n padding: 10px 10px 10px 14px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-size: 11px;\n animation: toast-in 180ms ease-out;\n}\n.toast-error { background: oklch(0.38 0.14 25); }\n.toast button { width: 25px; height: 25px; border: 0; border-radius: 6px; color: white; background: oklch(1 0 0 / .1); display: grid; place-items: center; cursor: pointer; }\n@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }\n\n.client-portal { --partner-accent: var(--blue); min-height: 100vh; color: var(--ink); background: white; }\n.client-nav { height: 76px; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }\n.client-brand { display: flex; align-items: center; gap: 10px; }\n.client-brand img, .client-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; }\n.client-logo { color: white; background: var(--partner-accent); display: grid; place-items: center; font-size: 10px; font-weight: 750; }\n.client-brand b, .client-brand small { display: block; }\n.client-brand b { font-size: 12px; }\n.client-brand small { color: var(--muted); font-size: 9px; }\n.client-nav > button { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-hero { max-width: 850px; margin: 0 auto; padding: 66px 24px 38px; text-align: center; }\n.client-blocked .client-nav {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 1132px) / 2));\n color: white;\n background: oklch(0.43 0.16 38);\n border-bottom-color: oklch(0.34 0.13 38);\n}\n.client-blocked .client-brand small,\n.client-blocked .client-nav-actions > button:last-child { color: oklch(0.94 0.025 55); }\n.client-blocked .client-nav-actions .theme-toggle { color: white; border-color: oklch(1 0 0 / .45); }\n.client-blocked .client-hero {\n max-width: none;\n padding-inline: max(24px, calc((100vw - 802px) / 2));\n background: oklch(0.97 0.025 62);\n border-bottom: 1px solid oklch(0.88 0.05 55);\n}\n.client-blocked-notice {\n max-width: 590px;\n margin: 0 auto 25px;\n padding: 13px 15px;\n display: flex;\n align-items: flex-start;\n gap: 11px;\n color: oklch(0.33 0.12 38);\n background: oklch(0.92 0.07 60);\n border: 1px solid oklch(0.79 0.1 52);\n border-radius: 11px;\n text-align: left;\n}\n.client-blocked-notice svg { flex: 0 0 auto; margin-top: 1px; }\n.client-blocked-notice b,\n.client-blocked-notice span { display: block; }\n.client-blocked-notice b { margin-bottom: 2px; font-size: 12px; }\n.client-blocked-notice span { font-size: 10px; line-height: 1.55; }\n.client-status { width: fit-content; margin: 0 auto 16px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 5px 9px; font-size: 9px; font-weight: 650; display: flex; align-items: center; gap: 6px; }\n.client-status em { padding-left: 6px; border-left: 1px solid var(--border-strong); color: oklch(0.48 0.13 55); font-style: normal; }\n.client-hero h1 { font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 18px; }\n.client-hero > p { max-width: 66ch; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.75; }\n.client-dates { margin: 30px auto 0; display: flex; justify-content: center; align-items: center; gap: 18px; }\n.client-dates > span { text-align: left; }\n.client-dates small, .client-dates b { display: block; }\n.client-dates small { color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }\n.client-dates b { font-size: 11px; }\n.client-dates em { display: block; margin-top: 2px; color: var(--faint); font-size: 8px; font-style: normal; }\n.client-deadline { display: block; width: fit-content; margin-top: 6px; padding: 3px 7px; border-radius: 999px; color: var(--partner-accent); background: color-mix(in oklch, var(--partner-accent) 12%, white); font-size: 8px; }\n.client-deadline.overdue { color: var(--danger); background: var(--danger-soft); }\n.client-dates svg { color: var(--faint); }\n.client-progress-block { max-width: 930px; margin: 0 auto; padding: 28px 40px; background: var(--sidebar); color: white; border-radius: 14px; }\n.client-progress-copy { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }\n.client-progress-copy span { color: oklch(0.75 0.02 245); font-size: 11px; }\n.client-progress-copy b { font-size: 26px; }\n.client-progress { position: relative; height: 8px; border-radius: 999px; background: oklch(1 0 0 / .13); }\n.client-progress i { display: block; height: 100%; background: var(--lemon); border-radius: inherit; }\n.client-progress > span { position: absolute; width: 16px; height: 16px; top: -4px; margin-left: -8px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 4px oklch(0.88 0.18 115 / .18); }\n.client-stages { display: flex; justify-content: space-between; color: oklch(0.53 0.02 245); font-size: 8px; margin-top: 10px; }\n.client-stages .passed { color: white; }\n.client-grid { max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 72px; }\n.client-section-head h2, .client-panel h2 { font-size: 20px; margin-bottom: 4px; }\n.client-section-head p, .client-panel > p { color: var(--muted); font-size: 11px; }\n.client-timeline { margin-top: 34px; }\n.client-timeline article { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-bottom: 30px; }\n.client-timeline article::before { content: \"\"; position: absolute; left: 20px; top: 35px; bottom: 0; width: 1px; background: var(--border); }\n.client-timeline article:last-child::before { display: none; }\n.client-node { width: 41px; height: 41px; border-radius: 12px; color: var(--muted); background: var(--surface); display: grid; place-items: center; z-index: 1; font-size: 12px; font-weight: 700; }\n.node-milestone { color: var(--blue); background: var(--blue-soft); }\n.node-payment { color: var(--success); background: var(--success-soft); }\n.node-blocker { color: oklch(0.5 0.15 60); background: oklch(0.95 0.04 75); }\n.client-timeline header { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 5px; }\n.client-timeline header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }\n.client-timeline time { color: var(--faint); font-size: 9px; }\n.client-timeline h3 { font-size: 13px; margin-bottom: 5px; }\n.client-timeline p { color: var(--muted); font-size: 11px; line-height: 1.7; max-width: 66ch; }\n.client-aside { display: flex; flex-direction: column; gap: 14px; }\n.client-panel { background: var(--surface); border-radius: 12px; padding: 18px; }\n.client-panel h2 { font-size: 14px; }\n.client-milestones { display: flex; flex-direction: column; margin-top: 14px; }\n.client-milestones > div { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding-bottom: 16px; }\n.client-milestones > div::before { content: \"\"; position: absolute; left: 10px; top: 21px; bottom: 0; width: 1px; background: var(--border-strong); }\n.client-milestones > div:last-child::before { display: none; }\n.client-milestones > div > span { width: 21px; height: 21px; border: 1px solid var(--border-strong); border-radius: 50%; background: white; display: grid; place-items: center; font-size: 9px; z-index: 1; }\n.client-milestones > div.complete > span { color: var(--sidebar); background: var(--lemon); border-color: var(--lemon); }\n.client-milestones > div.active > span { border-color: var(--blue); box-shadow: inset 0 0 0 5px white; background: var(--blue); }\n.client-milestones b, .client-milestones small { display: block; }\n.client-milestones b { font-size: 10px; }\n.client-milestones small { color: var(--muted); font-size: 8px; margin-top: 2px; }\n.muted { color: var(--muted); font-size: 10px; }\n.payment-panel > div:first-child { display: flex; justify-content: space-between; align-items: center; }\n.payment-panel span { color: var(--muted); font-size: 9px; }\n.payment-panel > div:first-child b { font-size: 18px; }\n.mini-progress { height: 4px; border-radius: 999px; background: white; margin: 10px 0 13px; overflow: hidden; }\n.mini-progress i { display: block; height: 100%; background: var(--blue); }\n.payment-panel dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.payment-panel dl div { padding-top: 9px; border-top: 1px solid var(--border); }\n.payment-panel dt { color: var(--muted); font-size: 8px; }\n.payment-panel dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.links-panel { padding: 0; overflow: hidden; }\n.links-panel > button { width: 100%; border: 0; padding: 15px 16px; background: transparent; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }\n.links-panel > button > div { display: flex; align-items: center; gap: 10px; text-align: left; }\n.links-panel > button b, .links-panel > button small { display: block; }\n.links-panel > button b { font-size: 10px; }\n.links-panel > button small { color: var(--muted); font-size: 8px; }\n.client-links { padding: 0 16px 12px; display: flex; flex-direction: column; }\n.client-links a { padding: 9px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--blue); font-size: 9px; text-decoration: none; }\n.question-panel { background: white; border: 1px solid var(--border); }\n.client-holiday-banner { max-width: 590px; margin: -36px auto 28px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; color: oklch(0.34 0.1 85); background: oklch(0.96 0.05 92); border: 1px solid oklch(0.86 0.09 90); border-radius: 11px; text-align: left; }\n.client-holiday-banner svg { flex: 0 0 auto; margin-top: 1px; }\n.client-holiday-banner b, .client-holiday-banner span { display: block; }\n.client-holiday-banner b { font-size: 11px; margin-bottom: 2px; }\n.client-holiday-banner span { font-size: 9px; line-height: 1.5; }\n.holiday-question-note { margin: 12px 0 14px; padding: 10px; display: flex; gap: 8px; align-items: flex-start; color: oklch(0.4 0.09 80); background: oklch(0.96 0.045 90); border-radius: 9px; font-size: 9px; line-height: 1.5; }\n.holiday-question-note svg { flex: 0 0 auto; }\n.partner-contact { color: var(--muted); font-size: 8px; text-align: center; }\n.client-footer { max-width: 1180px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; }\n.client-footer a { text-decoration: none; }\n.client-skeleton { width: min(680px, 80vw); height: 220px; }\n\n@media (max-width: 980px) {\n .auth-page { grid-template-columns: .85fr 1.15fr; }\n .auth-brand { padding: 36px; }\n .auth-statement h1 { font-size: 3.3rem; }\n .app-shell { grid-template-columns: 72px minmax(0, 1fr); }\n .sidebar { padding-inline: 10px; }\n .sidebar > .brand span:last-child, .sidebar nav button:not(.active) { font-size: 0; }\n .sidebar nav button { justify-content: center; padding: 0; }\n .sidebar nav button.active { font-size: 0; }\n .sidebar nav button .icon { width: 19px; height: 19px; }\n .sidebar-foot > a { justify-content: center; font-size: 0; }\n .account { grid-template-columns: 34px; justify-content: center; }\n .account div, .account button { display: none; }\n .directory-layout { grid-template-columns: 1fr; }\n .directory-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-layout { grid-template-columns: 1fr; }\n .branding-form { border-right: 0; border-bottom: 1px solid var(--border); }\n .branding-preview { width: min(520px, calc(100% - 60px)); }\n .client-progress-block { border-radius: 0; }\n .client-grid { gap: 40px; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); }\n}\n\n@media (max-width: 720px) {\n .auth-page { display: block; background: var(--sidebar); }\n .auth-brand { min-height: auto; padding: 24px; }\n .auth-statement, .auth-foot { display: none; }\n .auth-panel { min-height: calc(100vh - 86px); padding: 30px 20px 60px; border-radius: 16px 16px 0 0; align-items: start; }\n .auth-card { margin-top: 26px; }\n .app-shell { display: block; }\n .sidebar { position: static; width: 100%; height: 66px; padding: 0 15px; flex-direction: row; align-items: center; }\n .sidebar > .brand { padding: 0; margin: 0; }\n .sidebar > .brand span:last-child { display: inline; font-size: 14px; }\n .sidebar nav { display: none; }\n .sidebar-foot { margin: 0 0 0 auto; }\n .sidebar-foot > a { display: none; }\n .account { padding: 0; margin: 0; border: 0; display: flex; }\n .account div { display: block; }\n .account button { display: grid; }\n .workspace-head, .page-heading { padding: 23px 18px 18px; display: block; }\n .workspace-head h1, .page-heading h1 { font-size: 22px; }\n .workspace-head span, .page-heading span { display: block; max-width: 48ch; }\n .head-actions { margin-top: 16px; }\n .search { width: auto; flex: 1; }\n .mobile-nav { display: flex; background: white; border-bottom: 1px solid var(--border); padding: 0 14px; }\n .mobile-nav button { border: 0; border-bottom: 2px solid transparent; background: none; min-height: 42px; color: var(--muted); font-size: 10px; font-weight: 650; padding: 0 10px; }\n .mobile-nav button.active { color: var(--ink); border-color: var(--blue); }\n .kanban { height: auto; min-height: calc(100vh - 210px); padding: 16px; }\n .kanban-column { flex-basis: 264px; }\n .modal, .modal-wide { width: 100vw; max-width: none; height: min(92vh, 900px); max-height: none; margin: auto 0 0; border-radius: 14px 14px 0 0; }\n .modal-inner, .detail { height: 100%; min-height: 0; }\n .form-grid { grid-template-columns: 1fr; }\n .form-grid > .field:nth-of-type(3), .full { grid-column: auto; }\n .detail-header { grid-template-columns: minmax(0, 1fr) 38px; padding: 16px; gap: 12px; }\n .detail-progress { grid-column: 1 / -1; grid-row: 2; }\n .detail-tabs { padding: 0 6px; }\n .detail-section, .timeline-wrap { padding: 16px; }\n .payment-summary { grid-template-columns: 1fr; }\n .access-grid { grid-template-columns: 1fr; }\n .reply-box { flex-direction: column; align-items: stretch; }\n .directory-tabs { padding-inline: 16px; }\n .directory-form, .directory-list { padding: 20px 16px; }\n .directory-row { grid-template-columns: 38px minmax(0, 1fr); padding: 11px 0; }\n .row-actions { grid-column: 2; }\n .permission-grid { grid-template-columns: 1fr; }\n .branding-form { padding: 22px 16px; }\n .branding-preview { width: auto; margin: 20px 16px; }\n .client-nav { height: 66px; padding: 0 17px; }\n .client-hero { padding: 48px 20px 30px; }\n .client-blocked .client-nav { padding-inline: 17px; }\n .client-blocked .client-hero { padding-inline: 20px; }\n .client-hero h1 { font-size: 2.45rem; }\n .client-progress-block { padding: 24px 20px; }\n .client-grid { grid-template-columns: 1fr; padding: 50px 18px 60px; gap: 40px; }\n .client-aside { grid-row: 1; }\n .client-main { grid-row: 2; }\n .client-stages { font-size: 7px; }\n}\n\n@media (max-width: 450px) {\n .account div { display: none; }\n .head-actions { align-items: stretch; flex-direction: column; }\n .head-actions .button { width: 100%; }\n .form-row { flex-direction: column; align-items: stretch; }\n .form-row > .field { flex-basis: auto; }\n .copy-field, .inline-form { flex-direction: column; align-items: stretch; }\n .credential-list, .people-grid { grid-template-columns: 1fr; }\n .client-dates { gap: 10px; }\n .client-progress-copy b { font-size: 22px; }\n .client-progress-block { padding-inline: 16px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }\n}\n\n/* Interaction, detail and theme refinements */\nhtml[data-theme=\"dark\"] {\n --bg: oklch(0.16 0.012 245);\n --surface: oklch(0.205 0.014 245);\n --surface-raised: oklch(0.185 0.013 245);\n --ink: oklch(0.94 0.008 245);\n --muted: oklch(0.72 0.014 245);\n --faint: oklch(0.55 0.012 245);\n --border: oklch(0.29 0.014 245);\n --border-strong: oklch(0.37 0.016 245);\n --blue: oklch(0.7 0.11 245);\n --blue-dark: oklch(0.64 0.12 245);\n --blue-soft: oklch(0.25 0.04 245);\n --lemon-soft: oklch(0.28 0.07 115);\n --danger-soft: oklch(0.25 0.055 25);\n --success-soft: oklch(0.25 0.045 145);\n color-scheme: dark;\n}\nhtml[data-theme=\"dark\"] input,\nhtml[data-theme=\"dark\"] textarea,\nhtml[data-theme=\"dark\"] select,\nhtml[data-theme=\"dark\"] .workspace-head,\nhtml[data-theme=\"dark\"] .page-heading,\nhtml[data-theme=\"dark\"] .kanban-card,\nhtml[data-theme=\"dark\"] .modal,\nhtml[data-theme=\"dark\"] .quick-form,\nhtml[data-theme=\"dark\"] .payment-summary > div,\nhtml[data-theme=\"dark\"] .directory,\nhtml[data-theme=\"dark\"] .client-portal,\nhtml[data-theme=\"dark\"] .question-panel,\nhtml[data-theme=\"dark\"] .client-milestones > div > span,\nhtml[data-theme=\"dark\"] .person,\nhtml[data-theme=\"dark\"] .mobile-nav {\n background: var(--bg);\n}\nhtml[data-theme=\"dark\"] .person-main { background: var(--lemon-soft); }\nhtml[data-theme=\"dark\"] .client-blocked .client-hero { background: oklch(0.22 0.045 38); border-bottom-color: oklch(0.36 0.07 42); }\nhtml[data-theme=\"dark\"] .client-blocked-notice { color: oklch(0.95 0.025 60); background: oklch(0.3 0.07 42); border-color: oklch(0.48 0.1 45); }\nhtml[data-theme=\"dark\"] .client-holiday-banner,\nhtml[data-theme=\"dark\"] .holiday-question-note { color: oklch(0.9 0.05 90); background: oklch(0.28 0.045 85); border-color: oklch(0.42 0.07 85); }\nhtml[data-theme=\"dark\"] .segmented button.active,\nhtml[data-theme=\"dark\"] .mini-progress {\n background: var(--surface-raised);\n}\nhtml[data-theme=\"dark\"] .field > span,\nhtml[data-theme=\"dark\"] fieldset legend { color: var(--ink); }\nhtml[data-theme=\"dark\"] .button-primary { color: white; }\n\n.phone-field { min-width: 0; }\n.form-row > .phone-field { flex: 1 1 260px; }\n.phone-control {\n display: grid;\n grid-template-columns: 108px minmax(0, 1fr);\n gap: 8px;\n width: 100%;\n min-width: 0;\n align-items: stretch;\n}\n.phone-control select, .phone-control input:not([type=\"hidden\"]) { height: 42px; min-width: 0; margin: 0; }\n.phone-control select { padding-inline: 7px; font-size: 11px; }\n.phone-control input[type=\"hidden\"] { display: none; }\n.theme-toggle {\n min-height: 36px;\n border: 1px solid currentColor;\n border-radius: 9px;\n padding: 0 10px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: transparent;\n color: inherit;\n font-size: 10px;\n cursor: pointer;\n opacity: .82;\n}\n.theme-toggle:hover { opacity: 1; }\n.auth-panel { position: relative; }\n.auth-theme { position: absolute; top: 24px; right: 24px; color: var(--muted); }\n.sidebar .theme-toggle { width: 100%; justify-content: flex-start; color: oklch(0.7 0.02 245); border-color: oklch(1 0 0 / .12); margin-bottom: 8px; }\n.sidebar nav .attention-nav b { margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: oklch(0.27 0.1 65); background: oklch(0.9 0.12 85); font-size: 9px; }\n.head-actions .button-primary { min-width: 118px; color: white; white-space: nowrap; box-shadow: 0 5px 15px oklch(0.4 0.1 245 / .18); }\n.head-actions .new-project-button {\n color: oklch(0.16 0.02 115) !important;\n background: var(--lemon);\n box-shadow: 0 6px 18px oklch(0.72 0.16 115 / .22);\n}\n.head-actions .new-project-button span { color: oklch(0.16 0.02 115) !important; }\n.head-actions .new-project-button:hover { background: oklch(0.83 0.19 115); }\n\n.detail-header { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--border); }\n.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 10px; }\n.detail-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); text-decoration: none; }\n.progress-controls { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 8px; align-items: center; }\n.progress-controls input[type=\"range\"] { padding: 0; min-height: 28px; border: 0; box-shadow: none; accent-color: var(--blue); background: transparent; cursor: pointer; }\n.progress-controls .button { min-height: 32px; padding-inline: 10px; font-size: 10px; }\n.detail-tabs { position: sticky; top: 118px; z-index: 3; background: var(--bg); scrollbar-width: none; }\n.detail-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.detail-tabs button b { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); background: var(--surface); font-size: 8px; }\n.detail-body { min-height: 480px; }\n\n.overview-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: 28px; align-items: start; }\n.overview-form { min-width: 0; }\n.form-section-title { padding: 3px 0 10px; margin: 5px 0 2px; border-bottom: 1px solid var(--border); }\n.form-section-title h3 { font-size: 14px; margin-bottom: 2px; }\n.form-section-title p { color: var(--muted); font-size: 10px; margin: 0; }\n.overview-summary { position: sticky; top: 184px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.overview-summary h3 { font-size: 14px; margin-bottom: 15px; }\n.overview-summary dl { margin: 0; display: flex; flex-direction: column; }\n.overview-summary dl div { padding: 10px 0; display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); }\n.overview-summary dt { color: var(--muted); font-size: 10px; }\n.overview-summary dd { margin: 0; font-size: 11px; font-weight: 650; text-align: right; }\n.notice { margin-top: 14px; padding: 12px; border-left: 3px solid var(--blue); color: var(--muted); background: var(--blue-soft); font-size: 10px; line-height: 1.6; }\n\n.section-toolbar { min-height: 54px; margin-bottom: 17px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }\n.section-toolbar h3 { font-size: 16px; margin-bottom: 3px; }\n.section-toolbar p { color: var(--muted); font-size: 10px; margin: 0; }\n.composer { max-width: 760px; margin: 0 auto 20px; }\n.add-menu { position: relative; flex: 0 0 auto; }\n.add-menu > summary {\n min-height: 36px;\n padding: 0 11px;\n border: 1px solid var(--border);\n border-radius: 9px;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n color: var(--ink);\n background: var(--bg);\n font-size: 10px;\n font-weight: 650;\n cursor: pointer;\n list-style: none;\n}\n.add-menu > summary::-webkit-details-marker { display: none; }\n.add-menu[open] > summary { border-color: var(--blue); }\n.popover-form {\n position: absolute;\n right: 0;\n top: 44px;\n z-index: var(--z-dropdown);\n width: min(430px, calc(100vw - 56px));\n padding: 14px;\n border: 1px solid var(--border);\n border-radius: 12px;\n background: var(--bg);\n box-shadow: 0 18px 60px oklch(0.12 0.02 245 / .18);\n}\n.popover-form .quick-form { padding: 0; margin: 0; border: 0; }\n\n.milestone-list, .resource-list, .item-list { border-top: 1px solid var(--border); }\n.milestone-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--border); }\n.milestone-state, .resource-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--surface); }\n.state-active .milestone-state { color: var(--blue); background: var(--blue-soft); }\n.state-complete .milestone-state { color: var(--success); background: var(--success-soft); }\n.milestone-copy header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }\n.milestone-copy h4 { font-size: 12px; margin: 0; }\n.milestone-copy header span { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.milestone-copy 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-danger { border: 0; background: transparent; color: var(--danger); font-size: 9px; cursor: pointer; }\n.resource-row, .item-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); }\n.resource-row a { color: var(--ink); font-size: 11px; font-weight: 650; text-decoration: none; }\n.resource-row a > span { color: var(--blue); margin-left: 6px; }\n.resource-row p, .item-row p { color: var(--muted); font-size: 9px; margin: 2px 0 0; }\n.credential-card { padding: 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }\n.credential-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }\n.credential-card header > span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.credential-card header > div { min-width: 0; flex: 1; }\n.credential-card header h4 { margin: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.credential-card code { color: var(--ink); }\n.secret-row { min-height: 38px; padding: 7px 8px; border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; background: var(--surface); }\n.secret-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }\n.secret-row button { width: 28px; height: 28px; border: 0; border-radius: 7px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; }\n.secret-row button:hover { color: var(--ink); background: var(--bg); }\n.credential-note { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.credential-card footer { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border); }\n.credential-card footer button, .credential-card footer a { border: 0; padding: 3px 0; display: inline-flex; align-items: center; gap: 4px; color: var(--blue); background: transparent; font-size: 9px; text-decoration: none; cursor: pointer; }\n.credential-card footer .danger-link { margin-left: auto; color: var(--danger); }\n.person a, .partner-contact a { color: var(--blue); font-size: 9px; text-decoration: none; }\n.delay-badge { margin-left: 4px; padding: 2px 6px; border-radius: 999px; color: oklch(0.43 0.12 55); background: oklch(0.95 0.045 78); font-size: 8px; }\n.recipient-source { min-height: 58px; padding: 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: var(--blue); background: var(--blue-soft); }\n.recipient-source b, .recipient-source p { display: block; margin: 0; }\n.recipient-source b { color: var(--ink); font-size: 10px; }\n.recipient-source p { margin-top: 2px; color: var(--muted); font-size: 9px; }\n.stakeholder-email-options { align-items: center; }\n.schedule-extension { margin-top: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); overflow: hidden; }\n.schedule-extension > summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }\n.schedule-extension > summary span { display: flex; align-items: center; gap: 8px; font-size: 10px; }\n.schedule-extension > form { padding: 14px; border-top: 1px solid var(--border); }\n.visibility-label { color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 6px; font-size: 8px; }\n.timeline-reply { margin-top: 12px; margin-left: 10px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; background: var(--blue-soft); }\n.timeline-reply b { font-size: 9px; }\n.timeline-reply p { margin: 3px 0 0 !important; }\n.notify-check { width: fit-content; padding: 9px 11px; border-radius: 9px; background: var(--blue-soft); color: var(--ink); }\n.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.template-apply { display: flex; align-items: center; gap: 7px; }\n.template-apply select { min-height: 36px; width: 150px; padding-block: 5px; font-size: 10px; }\n.template-apply .button { min-height: 36px; font-size: 10px; }\n.payments-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }\n.subsection-title { margin-bottom: 12px; font-size: 13px; }\n.invoice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.invoice-list { border-top: 1px solid var(--border); }\n.invoice-row { min-height: 62px; padding: 10px 2px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); text-decoration: none; }\n.invoice-row > span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }\n.invoice-row b { font-size: 11px; }\n.invoice-row p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.invoice-row em { color: var(--blue); font-size: 9px; font-style: normal; }\n.receipt-link { display: inline-block; margin-top: 5px; color: var(--blue); font-size: 9px; font-weight: 650; text-decoration: none; }\n.receipt-link:hover { text-decoration: underline; }\n\n.module-page { min-height: 100%; background: var(--surface-raised); }\n.metric-grid { padding: 24px 30px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.metric-grid article { min-height: 136px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }\n.metric-grid article span { color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }\n.metric-grid article b { font-size: 34px; letter-spacing: -.05em; }\n.metric-grid article small { color: var(--muted); font-size: 10px; }\n.metric-grid .north-star { border-color: oklch(0.8 0.12 115); background: var(--lemon-soft); }\n.dashboard-grid { padding: 12px 30px 30px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }\n.dashboard-grid > section { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.section-heading h2 { margin-bottom: 3px; font-size: 15px; }\n.section-heading p { color: var(--muted); font-size: 10px; }\n.status-metrics, .money-metrics { margin-top: 16px; display: flex; flex-direction: column; }\n.status-metrics > div, .money-metrics > div { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border); }\n.status-metrics span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }\n.status-metrics b, .money-metrics b { font-size: 11px; }\n.money-metrics span { color: var(--muted); font-size: 9px; font-weight: 700; }\n.dashboard-overview { padding: 24px 30px 14px; display: grid; grid-template-columns: minmax(340px, .85fr) minmax(430px, 1.35fr); gap: 14px; }\n.momentum-panel, .portfolio-chart, .financial-overview > section { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.momentum-panel { display: flex; align-items: center; gap: 24px; }\n.momentum-gauge { --gauge-value: 0; width: 148px; height: 148px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lemon) calc(var(--gauge-value) * 1%), var(--surface) 0); }\n.momentum-gauge::before { content: \"\"; grid-area: 1 / 1; width: 112px; height: 112px; border-radius: 50%; background: var(--bg); }\n.momentum-gauge > div { z-index: 1; grid-area: 1 / 1; text-align: center; }\n.momentum-gauge b, .momentum-gauge span { display: block; }\n.momentum-gauge b { font-size: 28px; letter-spacing: -.035em; }\n.momentum-gauge span { color: var(--muted); font-size: 9px; }\n.momentum-copy { min-width: 0; }\n.momentum-copy h2 { margin-bottom: 4px; font-size: 17px; }\n.momentum-copy > p { max-width: 34ch; color: var(--muted); font-size: 10px; }\n.momentum-copy dl { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 18px; }\n.momentum-copy dt { color: var(--muted); font-size: 8px; }\n.momentum-copy dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }\n.status-stack { height: 10px; margin: 18px 0 20px; display: flex; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-stack > i { min-width: 0; height: 100%; }\n.chart-backlog { background: var(--faint); }\n.chart-todo { background: var(--blue); }\n.chart-in-progress { background: var(--lemon); }\n.chart-blocked { background: var(--warning); }\n.chart-done { background: var(--success); }\n.status-chart-rows { display: flex; flex-direction: column; gap: 8px; }\n.status-chart-rows > div { display: grid; grid-template-columns: 92px minmax(90px, 1fr) 24px; gap: 10px; align-items: center; }\n.status-chart-rows span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }\n.status-chart-rows > div > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface); }\n.status-chart-rows > div > div i { display: block; height: 100%; border-radius: inherit; }\n.status-chart-rows b { font-size: 10px; text-align: right; }\n.dashboard-questions { margin: 0 30px 14px; padding: 19px 20px; border: 1px solid oklch(0.82 0.1 80); border-radius: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--lemon-soft); }\n.question-signal { width: 58px; height: 58px; border-radius: 50%; display: grid; grid-template-columns: 1fr 1fr; place-items: center; color: oklch(0.27 0.09 75); background: var(--lemon); }\n.question-signal svg { grid-column: 1 / -1; grid-row: 1; }\n.question-signal b { grid-column: 1 / -1; grid-row: 1; margin: 27px 0 0 28px; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--sidebar); font-size: 9px; }\n.question-summary h2 { margin-bottom: 3px; font-size: 15px; }\n.question-summary > p { margin-bottom: 10px; color: oklch(0.36 0.045 80); font-size: 10px; }\n.question-summary > div { display: flex; flex-wrap: wrap; gap: 7px; }\n.question-summary > div span { min-width: 150px; padding: 6px 8px; border-radius: 7px; background: oklch(1 0 0 / .52); }\n.question-summary > div b, .question-summary > div small { display: block; }\n.question-summary > div b { font-size: 9px; }\n.question-summary > div small { margin-top: 1px; color: oklch(0.4 0.035 80); font-size: 7px; }\n.financial-overview { padding: 0 30px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n.financial-overview .money-metrics > div { min-height: 44px; }\n.inbox-count { padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 10px; }\n.inbox-count.has-items { color: oklch(0.38 0.1 55); background: oklch(0.94 0.055 75); }\n.question-inbox { max-width: 900px; margin: 0 auto; padding: 24px 30px 34px; display: flex; flex-direction: column; gap: 12px; }\n.inbox-question { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.inbox-question > header { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 11px; align-items: start; }\n.inbox-question > header button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }\n.inbox-question > header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }\n.inbox-question > header time { color: var(--faint); font-size: 8px; }\n.inbox-question blockquote { margin: 15px 0; padding: 13px 14px; border: 0; border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 11px; line-height: 1.65; }\n.inbox-question form { padding-top: 14px; border-top: 1px solid var(--border); }\n.inbox-answer-actions { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }\n\n.builder-layout { padding: 26px 30px 30px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }\n.builder-form { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.builder-form h2, .proposal-list > h2 { font-size: 16px; margin-bottom: 4px; }\n.builder-form > p { color: var(--muted); font-size: 10px; margin-bottom: 18px; }\n.proposal-list, .template-list { display: flex; flex-direction: column; gap: 10px; }\n.proposal-row { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }\n.proposal-main { width: 100%; padding: 16px; border: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; background: transparent; cursor: pointer; }\n.proposal-main span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.proposal-main h3 { margin: 3px 0; font-size: 13px; }\n.proposal-main p { margin: 0; color: var(--muted); font-size: 9px; }\n.proposal-detail { padding: 16px; border-top: 1px solid var(--border); background: var(--surface); }\n.proposal-detail pre { max-height: 300px; overflow: auto; white-space: pre-wrap; color: var(--muted); font: 10px/1.65 Inter, sans-serif; }\n.inline-builder { margin: 22px 30px 6px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-grid { padding: 22px 30px 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.recurring-card { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.recurring-card.inactive { opacity: .6; }\n.recurring-card > header { display: flex; justify-content: space-between; gap: 18px; }\n.recurring-card header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.recurring-card h2 { margin: 4px 0; font-size: 16px; }\n.recurring-card header p { color: var(--muted); font-size: 10px; }\n.recurring-card header > b { white-space: nowrap; font-size: 16px; }\n.recurring-card dl { margin: 12px 0; display: flex; gap: 18px; flex-wrap: wrap; }\n.recurring-card dl div { min-width: 100px; }\n.recurring-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-card dd { margin: 2px 0 0; font-size: 10px; font-weight: 650; }\n.recurring-dates { margin: 14px 0 4px; padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 10px; background: var(--surface); }\n.recurring-dates small, .recurring-dates b { display: block; }\n.recurring-dates small { color: var(--muted); font-size: 8px; text-transform: uppercase; }\n.recurring-dates b { margin-top: 2px; font-size: 10px; }\n.recurring-actions { margin: 14px 0 0; display: flex; align-items: center; gap: 14px; }\n.recurring-actions .button { min-height: 34px; }\n.recurring-edit { margin-top: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }\n.recurring-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }\n.recurring-details > summary { color: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; }\n.recurring-detail-copy { margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.6; }\n.recurring-detail-copy p { margin: 3px 0; }\n.hour-log { display: grid; grid-template-columns: 120px 80px minmax(120px, 1fr) auto; gap: 7px; }\n.hour-log input { min-width: 0; min-height: 36px; padding: 6px 8px; font-size: 9px; }\n.hour-log .button { min-height: 36px; font-size: 9px; }\n.log-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }\n.log-history summary { color: var(--blue); font-size: 9px; cursor: pointer; }\n.log-history div { margin-top: 8px; display: flex; gap: 10px; font-size: 9px; }\n.log-history span { color: var(--muted); }\n.log-history h3 { font-size: 10px; margin: 0 0 4px; }\n.holiday-layout { padding: 24px 30px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\n.weekday-picker { margin: 0 0 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }\n.weekday-picker label { min-width: 0; cursor: pointer; }\n.weekday-picker input { position: absolute; opacity: 0; pointer-events: none; }\n.weekday-picker span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 650; }\n.weekday-picker label.selected span { color: white; background: var(--blue); border-color: var(--blue); }\n.holiday-list { margin: 14px 30px 30px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.holiday-list > header { margin-bottom: 10px; }\n.holiday-list h2 { font-size: 16px; }\n.holiday-list > header p { color: var(--muted); font-size: 10px; }\n.holiday-list article { min-height: 62px; padding: 10px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--border); }\n.holiday-date { width: 42px; height: 42px; display: grid; place-content: center; text-align: center; border-radius: 10px; color: white; background: var(--blue); }\n.holiday-date b { font-size: 13px; line-height: 1; }\n.holiday-date span { margin-top: 2px; font-size: 7px; text-transform: uppercase; }\n.holiday-list article h3 { font-size: 11px; }\n.holiday-list article p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }\n.template-list article { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }\n.template-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.template-list article > header span { color: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }\n.template-list article > header button { border: 0; padding: 3px; background: transparent; font-size: 9px; cursor: pointer; }\n.template-list h3 { margin: 5px 0; font-size: 14px; }\n.template-list p, .template-list li { color: var(--muted); font-size: 10px; }\n.ai-project-builder { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--blue-soft); overflow: hidden; }\n.ai-project-builder > summary { min-height: 48px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; }\n.ai-project-builder > summary span { display: flex; gap: 8px; align-items: center; }\n.ai-project-builder > div { padding: 14px; border-top: 1px solid var(--border); }\n.ai-result { margin: 10px 0 0; color: var(--success); font-size: 10px; font-weight: 650; }\n\n.client-milestone-event .node-milestone { color: oklch(0.28 0.08 115); background: var(--lemon); box-shadow: 0 0 0 4px var(--lemon-soft); }\n.milestone-callout { margin-top: 6px; padding: 16px; border: 1px solid oklch(0.82 0.12 115); border-left: 4px solid var(--lemon); border-radius: 10px; background: var(--lemon-soft); }\n.milestone-callout small { color: oklch(0.42 0.09 115); font-size: 8px; font-weight: 750; text-transform: uppercase; }\n.milestone-callout h3 { margin: 4px 0 !important; font-size: 15px !important; }\n.client-chat { min-width: 0; }\n.chat-bubble { max-width: min(88%, 540px); margin-top: 9px; padding: 11px 13px; border-radius: 12px; }\n.chat-bubble small { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 700; }\n.chat-bubble p { margin: 0; color: inherit; }\n.chat-client { margin-right: auto; border-bottom-left-radius: 3px; background: var(--surface); }\n.chat-team { margin-left: auto; border-bottom-right-radius: 3px; color: var(--ink); background: var(--blue-soft); }\n.chat-status { display: block; width: fit-content; margin-top: 8px; color: var(--warning); font-size: 8px; font-weight: 700; }\n.chat-status.resolved { color: var(--success); }\n\n.portal-access-card { margin-bottom: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }\n.portal-access-card > div { min-width: 0; }\n.portal-access-card span { display: block; color: var(--muted); font-size: 8px; margin-bottom: 4px; }\n.portal-access-card code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }\n.portal-access-card strong { font-size: 20px; letter-spacing: .1em; }\n.color-control { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }\n.color-control input[type=\"color\"] { min-height: 42px; padding: 4px; cursor: pointer; }\n.project-cc-settings .check > span,\n.project-cc-settings .check b,\n.project-cc-settings .check small { display: block; }\n.project-cc-settings .check small { margin-top: 2px; color: var(--muted); font-size: 8px; }\n.cc-directory .directory-row { min-height: 96px; }\n.fallback-note { color: var(--muted); background: var(--surface); padding: 10px 12px; border-radius: 9px; font-size: 10px; }\n.partner-brand-editor { padding: 0 30px 30px; background: var(--surface-raised); }\n.editor-close { display: flex; justify-content: flex-end; padding: 18px 0 0; }\n\n.client-nav-actions { display: flex; align-items: center; gap: 12px; }\n.client-nav-actions > button:last-child { border: 0; background: none; color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 10px; cursor: pointer; }\n.client-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }\n\n@media (max-width: 980px) {\n .overview-layout { grid-template-columns: 1fr; }\n .overview-summary { position: static; }\n .partner-brand-editor { padding-inline: 20px; }\n .dashboard-grid { grid-template-columns: 1fr 1fr; }\n .dashboard-grid > section:first-child { grid-column: 1 / -1; }\n .dashboard-overview { grid-template-columns: 1fr; }\n .sidebar nav .attention-nav b { margin-left: 0; font-size: 9px; }\n .builder-layout { grid-template-columns: 1fr; }\n .holiday-layout { grid-template-columns: 1fr; }\n .hour-log { grid-template-columns: 1fr 1fr; }\n}\n\n@media (max-width: 720px) {\n .sidebar .theme-toggle { display: none; }\n .mobile-nav { overflow-x: auto; scrollbar-width: none; background: var(--bg); }\n .mobile-nav .mobile-theme { margin-left: auto; min-width: 42px; display: grid; place-items: center; padding: 0; }\n .detail-header { top: 0; min-height: auto; }\n .detail-title h2 { white-space: normal; font-size: 19px; }\n .detail-meta { gap: 4px 10px; }\n .detail-tabs { top: 135px; }\n .detail-tabs button { min-height: 44px; padding-inline: 10px; }\n .section-toolbar { align-items: center; }\n .popover-form { position: fixed; inset: auto 10px 10px; width: auto; max-height: 72vh; overflow: auto; }\n .milestone-row { grid-template-columns: 32px minmax(0, 1fr); }\n .milestone-actions { grid-column: 2; justify-content: space-between; }\n .resource-row, .item-row { grid-template-columns: 34px minmax(0, 1fr); }\n .resource-row > button, .item-row > button { grid-column: 2; justify-self: start; }\n .portal-access-card { grid-template-columns: 1fr; }\n .client-nav-actions .theme-toggle span { display: none; }\n .client-nav-actions .theme-toggle { padding: 0; width: 36px; justify-content: center; }\n .client-footer { gap: 20px; }\n .partner-brand-editor { padding-inline: 16px; }\n .metric-grid, .dashboard-grid, .recurring-grid { padding-inline: 16px; }\n .metric-grid { grid-template-columns: 1fr; }\n .dashboard-grid, .recurring-grid { grid-template-columns: 1fr; }\n .dashboard-grid > section:first-child { grid-column: auto; }\n .dashboard-overview { padding: 18px 16px 12px; }\n .momentum-panel { align-items: flex-start; }\n .dashboard-questions { margin-inline: 16px; grid-template-columns: auto minmax(0, 1fr); }\n .dashboard-questions > .button { grid-column: 1 / -1; width: 100%; }\n .financial-overview { padding-inline: 16px; grid-template-columns: 1fr; }\n .question-inbox { padding: 18px 16px 30px; }\n .inbox-answer-actions { align-items: stretch; flex-direction: column; }\n .inbox-answer-actions .button { width: 100%; }\n .page-skeleton { padding-inline: 16px; }\n .builder-layout { padding: 18px 16px; }\n .holiday-layout { padding: 18px 16px 6px; }\n .holiday-list { margin-inline: 16px; }\n .inline-builder { margin-inline: 16px; }\n .payments-layout { grid-template-columns: 1fr; }\n .toolbar-actions { justify-content: stretch; width: 100%; }\n .template-apply { width: 100%; }\n .template-apply select { flex: 1; width: auto; }\n}\n\n@media (max-width: 450px) {\n .auth-theme { top: 18px; right: 18px; }\n .section-toolbar { align-items: stretch; flex-direction: column; }\n .add-menu > summary { width: 100%; justify-content: center; }\n .client-brand small { display: none; }\n .client-nav-actions > button:last-child { font-size: 0; gap: 0; width: 34px; height: 34px; justify-content: center; }\n .client-footer { align-items: flex-start; flex-direction: column; }\n .hour-log { grid-template-columns: 1fr; }\n .momentum-panel { flex-direction: column; }\n .momentum-gauge { width: 132px; height: 132px; align-self: center; }\n .momentum-gauge::before { width: 100px; height: 100px; }\n .status-chart-rows > div { grid-template-columns: 82px minmax(70px, 1fr) 22px; }\n .dashboard-questions { grid-template-columns: 1fr; text-align: center; }\n .question-signal { margin: 0 auto; }\n .question-summary > div { justify-content: center; }\n .inbox-question > header { grid-template-columns: 8px minmax(0, 1fr); }\n .inbox-question > header time { grid-column: 2; }\n .phone-control { grid-template-columns: 102px minmax(0, 1fr); gap: 6px; }\n .row-actions { flex-wrap: wrap; }\n}\n",[],[182,238],"b1258ecb-87f0-4d5c-8448-d7d85848d499","index.tsx","019fada5-614d-738d-bbb2-82a7c44fa0b5",["D",1785326040637],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render();\n",[],[182,246],"9574fc7d-d60d-44c0-9a06-b24e3942dd62","index.html","019fada5-614d-738d-bbb2-7d56377a4366",18,["D",1785328256802],"\n\n \n \n \n \n \n AFLABS PM\n \n \n \n \n

\n \n \n \n\n",[],[182,253],"792cd95e-3b1b-44e6-8f8a-d1be5f910593","favicon.svg","019fada5-614d-738d-bbb2-7b9783b42d7c",7,["D",1785326044201],"\n\n",[],[182,261],"1b80791e-f782-4aa4-b4a4-e3450e79f45d","Counter.tsx","019fada5-614d-738d-bbb2-71801d3e7075","019fada5-614d-738d-bbb2-75aad905c767",["D",1785324724390],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n 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 \n times\n

\n );\n}\n",[],[182,276,269],"components","f927cb50-b2cc-44f1-86f2-f5d07348ecca","App.tsx","019fada5-614d-738d-bbb2-6e31626896ea",95,["D",1785356824509],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string;\n name: string;\n role: string;\n permissions: Record;\n};\ntype Project = Record;\n\nconst statusMeta: Record = {\n backlog: { label: \"Backlog\", note: \"Ideas and incoming work\" },\n todo: { label: \"To do\", note: \"Ready to begin\" },\n \"in-progress\": { label: \"In progress\", note: \"Actively moving\" },\n blocked: { label: \"Blocked\", note: \"Needs attention\" },\n done: { label: \"Done\", note: \"Admin-approved delivery\" },\n};\nconst typeLabels: Record = {\n update: \"Update\", meeting: \"Meeting\", blocker: \"Blocker\", \"major-work\": \"Major work\",\n \"mail-sent\": \"Mail sent\", \"mail-received\": \"Mail received\", payment: \"Payment\",\n question: \"Client question\", note: \"Note\", milestone: \"Milestone\", \"schedule-extension\": \"Schedule extension\",\n};\nconst eventIcons: Record = {\n update: \"update\", meeting: \"meeting\", blocker: \"blocker\", \"major-work\": \"work\",\n \"mail-sent\": \"mail-out\", \"mail-received\": \"mail-in\", payment: \"payment\",\n question: \"question\", note: \"note\", milestone: \"milestone\", \"schedule-extension\": \"clock\",\n};\nconst countries = [\n { code: \"+91\", label: \"India\", flag: \"🇮🇳\", placeholder: \"98765 43210\" },\n { code: \"+966\", label: \"Saudi Arabia\", flag: \"🇸🇦\", placeholder: \"50 123 4567\" },\n { code: \"+971\", label: \"UAE\", flag: \"🇦🇪\", placeholder: \"50 123 4567\" },\n];\nconst userDefaults: Record = {\n view_projects: true,\n create_projects: false,\n edit_projects: true,\n move_projects: true,\n archive_projects: false,\n manage_links: true,\n view_credentials: false,\n manage_credentials: false,\n manage_comments: true,\n manage_milestones: true,\n manage_stakeholders: true,\n manage_payments: false,\n};\n\nconst apiCache = new Map }>();\nlet clientCacheEnabled = true;\nfunction clientCacheTtl(path: string) {\n if (path === \"/api/config\") return 60_000;\n if (path.startsWith(\"/api/projects\")) return /^\\/api\\/projects\\/[^/?]+$/.test(path) ? 60_000 : 45_000;\n if (path === \"/api/dashboard\") return 45_000;\n if (path === \"/api/recurring\" || path === \"/api/admin/proposals\") return 60_000;\n if ([\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\"].includes(path)) return 90_000;\n if (path === \"/api/milestone-templates\" || path === \"/api/holidays\") return 120_000;\n if (path === \"/api/questions\") return 30_000;\n return 15_000;\n}\nfunction invalidateClientCache(path: string) {\n if (/^\\/api\\/projects\\/[^/]+\\/read$/.test(path)) {\n for (const key of apiCache.keys()) {\n if (key === \"/api/projects\" || key.startsWith(\"/api/projects?\")) apiCache.delete(key);\n }\n return;\n }\n const prefixes = new Set();\n if (path.startsWith(\"/api/projects\") || /^\\/api\\/(comments|links|credentials|stakeholders|milestones|payments|invoices)/.test(path)) {\n [\"/api/projects\", \"/api/dashboard\", \"/api/questions\"].forEach((x) => prefixes.add(x));\n }\n if (/^\\/api\\/admin\\/(users|partners|settings|branding|cc-recipients)/.test(path) || path === \"/api/partner/branding\") {\n [\"/api/admin/users\", \"/api/admin/partners\", \"/api/admin/cc-recipients\", \"/api/user-options\", \"/api/partner/branding\", \"/api/projects\", \"/api/dashboard\", \"/api/config\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/admin/proposals\")) {\n [\"/api/admin/proposals\", \"/api/projects\", \"/api/dashboard\"].forEach((x) => prefixes.add(x));\n }\n if (path.startsWith(\"/api/recurring\")) prefixes.add(\"/api/recurring\");\n if (path.startsWith(\"/api/admin/holidays\")) {\n prefixes.add(\"/api/holidays\");\n prefixes.add(\"/api/projects/\");\n }\n if (path.includes(\"milestone-template\")) prefixes.add(\"/api/milestone-templates\");\n if (path.startsWith(\"/api/auth/\") || path === \"/api/bootstrap\") {\n apiCache.clear();\n return;\n }\n for (const key of apiCache.keys()) if ([...prefixes].some((prefix) => key.startsWith(prefix))) apiCache.delete(key);\n}\nlet activeRequests = 0;\nfunction signalRequestActivity(delta: number) {\n activeRequests = Math.max(0, activeRequests + delta);\n if (typeof window !== \"undefined\") window.dispatchEvent(new CustomEvent(\"aflabs:requests\", { detail: activeRequests }));\n}\nasync function request(path: string, options: RequestInit = {}) {\n const method = String(options.method || \"GET\").toUpperCase();\n const cacheable = method === \"GET\" && clientCacheEnabled;\n const ttl = clientCacheTtl(path);\n if (cacheable) {\n const cached = apiCache.get(path);\n if (cached && cached.expires > Date.now()) {\n if (cached.pending) return cached.pending;\n return cached.value;\n }\n apiCache.delete(path);\n }\n signalRequestActivity(1);\n const pending = (async () => {\n try {\n const response = await fetch(path, {\n ...options,\n headers: { \"Content-Type\": \"application/json\", ...(options.headers ?? {}) },\n });\n const payload = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(payload.error || `Request failed (${response.status})`);\n return payload;\n } finally {\n signalRequestActivity(-1);\n }\n })();\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, pending });\n try {\n const payload = await pending;\n if (cacheable) apiCache.set(path, { expires: Date.now() + ttl, value: payload });\n else invalidateClientCache(path);\n return payload;\n } catch (error) {\n if (cacheable) apiCache.delete(path);\n throw error;\n }\n}\nconst post = (path: string, data: any = {}) => request(path, { method: \"POST\", body: JSON.stringify(data) });\nconst patch = (path: string, data: any = {}) => request(path, { method: \"PATCH\", body: JSON.stringify(data) });\nconst remove = (path: string, data: any = {}) => request(path, { method: \"DELETE\", body: JSON.stringify(data) });\nconst money = (amount: number, currency = \"INR\") => new Intl.NumberFormat(\"en\", {\n style: \"currency\", currency, maximumFractionDigits: 2,\n}).format(Number(amount || 0));\nconst prettyDate = (value?: string) => value\n ? new Intl.DateTimeFormat(\"en\", { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(new Date(`${value.slice(0, 10)}T12:00:00`))\n : \"Not set\";\nconst todayValue = () => {\n const value = new Date();\n value.setMinutes(value.getMinutes() - value.getTimezoneOffset());\n return value.toISOString().slice(0, 10);\n};\nfunction deadlineLabel(value?: string, status?: string) {\n if (!value) return \"\";\n if (status === \"done\") return \"Completed\";\n const target = new Date(`${value.slice(0, 10)}T12:00:00`);\n const today = new Date(`${todayValue()}T12:00:00`);\n const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);\n if (days === 0) return \"Due today\";\n return days > 0 ? `${days} ${days === 1 ? \"day\" : \"days\"} to go` : `${Math.abs(days)} ${Math.abs(days) === 1 ? \"day\" : \"days\"} overdue`;\n}\nconst initials = (name = \"AFLABS\") => name.split(/\\s+/).slice(0, 2).map((part) => part[0]).join(\"\").toUpperCase();\nconst titleCase = (value = \"\") => value.replaceAll(\"-\", \" \").replace(/\\b\\w/g, (x) => x.toUpperCase());\n\nfunction BrandMark({ large = false }: { large?: boolean }) {\n return \n $\"\"/$ \n ;\n}\n\nfunction Icon({ name, size = 18 }: { name: string; size?: number }) {\n const paths: Record = {\n board: <>,\n plus: ,\n archive: <>,\n users: <>,\n partner: <>,\n logout: <>,\n search: <>,\n close: ,\n link: <>,\n copy: <>,\n more: <>,\n check: ,\n clock: <>,\n message: ,\n rupee: <>,\n chevron: ,\n settings: <>,\n update: <>,\n meeting: <>,\n blocker: <>,\n work: <>,\n \"mail-out\": <>,\n \"mail-in\": <>,\n payment: <>,\n question: <>,\n note: <>,\n milestone: <>,\n sun: <>,\n moon: ,\n globe: <>,\n mail: <>,\n eye: <>,\n key: <>,\n };\n return ;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return ;\n}\nfunction NetworkActivity() {\n const [count, setCount] = useState(activeRequests);\n useEffect(() => {\n const update = (event: any) => setCount(Number(event.detail) || 0);\n window.addEventListener(\"aflabs:requests\", update);\n return () => window.removeEventListener(\"aflabs:requests\", update);\n }, []);\n return count > 0 ?

Working…

: null;\n}\nfunction PageSkeleton({ rows = 3, chart = false }: { rows?: number; chart?: boolean }) {\n return
\n
\n {chart &&
}\n {Array.from({ length: rows }).map((_, index) =>
)}\n
;\n}\nfunction BoardSkeleton() {\n return
\n {Array.from({ length: 5 }).map((_, column) =>
{Array.from({ length: 2 }).map((_, card) =>
)}
)}\n
;\n}\nfunction Field({ label, hint, children }: any) {\n return {label}{children}{hint && {hint}};\n}\nfunction PhoneField({ label = \"Mobile number\", name = \"phone\", defaultValue = \"\", autoFocus = false }: any) {\n const detected = countries.find((x) => String(defaultValue).startsWith(x.code));\n const [country, setCountry] = useState(() => detected?.code || localStorage.getItem(\"aflabs_phone_country\") || \"+91\");\n const [number, setNumber] = useState(() => detected ? String(defaultValue).slice(detected.code.length) : String(defaultValue).replace(/^\\+\\d+/, \"\"));\n const selected = countries.find((x) => x.code === country) || countries[0];\n const changeCountry = (value: string) => { setCountry(value); localStorage.setItem(\"aflabs_phone_country\", value); };\n return {label}\n
\n \n setNumber(e.target.value)} required autoFocus={autoFocus} placeholder={selected.placeholder} inputMode=\"tel\"/>\n \n
\n ;\n}\nfunction ThemeToggle({ theme, toggle }: any) {\n return ;\n}\nfunction Empty({ title, text, action }: any) {\n return
{title}
{text}
{action}
;\n}\nfunction Toast({ value, clear }: { value: { message: string; kind: string } | null; clear: () => void }) {\n useEffect(() => { if (!value) return; const timer = setTimeout(clear, 3600); return () => clearTimeout(timer); }, [value]);\n return value ?
{value.message}
: null;\n}\n\nfunction AuthShell({ children, title, subtitle, theme, toggleTheme }: any) {\n return
\n
\n AFLABS PM\n
\n Project delivery, made visible.\n
One calm place for every moving part.
\n
Run the work internally. Keep partners aligned. Give clients a clear sense of momentum.
\n
\n
Built for focused teams, not process theatre.
\n
\n
{title}
{subtitle}
{children}
\n
;\n}\n\nfunction Bootstrap({ onDone, theme, toggleTheme }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try { await post(\"/api/bootstrap\", data); onDone(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return \n
\n {error &&
{error}
}\n \n \n \n \n \n \n
;\n}\n\nfunction Login({ clientToken, onDone, theme, toggleTheme }: any) {\n const initial = clientToken ? \"client\" : \"internal\";\n const [mode, setMode] = useState(initial), [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const rememberedPhone = localStorage.getItem(\"aflabs_login_phone\") || \"\";\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data = Object.fromEntries(new FormData(e.currentTarget));\n try {\n await post(mode === \"partner\" ? \"/api/auth/partner\" : mode === \"client\" ? \"/api/auth/client\" : \"/api/auth/login\", {\n ...data, token: clientToken,\n });\n if (mode !== \"client\" && data.phone) localStorage.setItem(\"aflabs_login_phone\", String(data.phone));\n onDone();\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return \n {!clientToken &&
\n \n \n
}\n
\n {error &&
{error}
}\n {mode !== \"client\" && }\n \n \n \n {!clientToken &&
Access is provisioned by an AFLABS administrator. There is no public signup or password recovery.
}\n ;\n}\n\nfunction ProjectForm({ actor, config, partners, owners = [], ccRecipients = [], initial = {}, onSave, compact = false }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const [selectedPartner, setSelectedPartner] = useState(initial.partner_id || \"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const form = e.currentTarget, formData = new FormData(form), data: any = Object.fromEntries(formData);\n data.notification_cc_ids = formData.getAll(\"notification_cc_ids\");\n data.tax_inclusive = formData.has(\"tax_inclusive\");\n try { await onSave(data); form.reset(); } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n const partner = actor.actorType === \"partner\";\n return
\n {error &&
{error}
}\n \n {!compact && }\n </Field>\n <Field label=\"Project email\" hint=\"Main POC for optional email updates\"><input name=\"contact_email\" type=\"email\" placeholder=\"project@example.com\" defaultValue={initial.contact_email || \"\"}/></Field>\n <Field label=\"CC emails\" hint=\"Comma-separated additional recipients\"><input name=\"cc_emails\" type=\"text\" placeholder=\"finance@example.com, poc@example.com\" defaultValue={(initial.cc_emails || []).join?.(\", \") || initial.cc_emails || \"\"}/></Field>\n {!partner && !compact && <>\n <Field label=\"Status\"><select name=\"status\" defaultValue={initial.status || \"backlog\"}>{config.statuses.filter((x: string) => x !== \"done\" || actor.role === \"admin\").map((x: string) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={initial.owner_user_id || actor.actorId}><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={initial.start_date || \"\"}/></Field>\n <Field label=\"Target end date\"><input name=\"end_date\" type=\"date\" defaultValue={initial.end_date || \"\"}/></Field>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={initial.currency || \"INR\"}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular project cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\"0.01\" defaultValue={initial.regular_cost || 0}/></Field>\n {selectedPartner && <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" defaultValue={initial.partner_cost || 0}/></Field>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={initial.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={initial.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(initial.tax_inclusive)}/> Project cost already includes tax</label>\n {actor.role === \"admin\" && ccRecipients.length > 0 && <fieldset className=\"full\"><legend>Mandatory email CC</legend><p className=\"field-note\">Choose the default company recipients copied on project updates.</p><div className=\"permission-grid\">{ccRecipients.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(initial.notification_cc_ids || []).includes?.(x.id) || (!initial.notification_cc_ids && x.default_selected)}/>{x.label}</label>)}</div></fieldset>}\n <Field label=\"Client portal PIN\" hint=\"Leave empty to generate a 6-digit PIN\"><input name=\"client_pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n {selectedPartner && <Field label=\"Commission document URL\"><input name=\"commission_document_url\" type=\"url\" placeholder=\"https://…\" defaultValue={initial.commission_document_url || \"\"}/></Field>}\n </>}\n <div className=\"form-actions full\"><Button disabled={busy} icon=\"plus\">{busy ? \"Adding…\" : \"Add project\"}</Button></div>\n </form>;\n}\n\nfunction KanbanCard({ project, actor, open }: any) {\n const range = project.end_date ? `Due ${prettyDate(project.end_date)}` : project.start_date ? `Started ${prettyDate(project.start_date)}` : \"Dates not set\";\n const countdown = deadlineLabel(project.end_date, project.status);\n return <button\n className=\"kanban-card\"\n draggable={actor.actorType === \"internal\" && actor.permissions.move_projects}\n onDragStart={(e) => e.dataTransfer.setData(\"text/project-id\", project.id)}\n onClick={open}\n >\n <div className=\"card-top\"><span className={`type-dot type-${project.project_type?.toLowerCase().replace(/[^a-z]/g, \"\")}`}/><span className=\"project-type\">{project.project_type}</span>{project.unanswered_count > 0 && <span className=\"question-attention\" title={`${project.unanswered_count} unanswered client question${project.unanswered_count === 1 ? \"\" : \"s\"}`}><Icon name=\"question\" size={12}/>{project.unanswered_count}</span>}{project.unread_count > 0 && <span className=\"unread\">{project.unread_count}</span>}</div>\n <h3>{project.title}</h3>\n <p>{project.description || \"No description yet.\"}</p>\n <div className=\"card-progress\"><span style={{ width: `${project.progress}%` }}/></div>\n <div className=\"card-meta\"><span><Icon name=\"clock\" size={14}/>{range}</span><b>{project.progress}%</b></div>\n {countdown && <div className={`deadline-countdown ${countdown.includes(\"overdue\") ? \"overdue\" : \"\"}`}>{countdown}</div>}\n {project.partner_name && <div className=\"partner-chip\"><span>{initials(project.partner_name)}</span>{project.partner_name}</div>}\n </button>;\n}\n\nfunction Kanban({ projects, actor, onOpen, onMove }: any) {\n return <div className=\"kanban\">\n {Object.entries(statusMeta).map(([status, meta]) => {\n const items = projects.filter((p: any) => p.status === status);\n return <section className={`kanban-column column-${status}`} key={status}\n onDragOver={(e) => e.preventDefault()}\n onDrop={(e) => { e.preventDefault(); const id = e.dataTransfer.getData(\"text/project-id\"); if (id) onMove(id, status); }}\n >\n <header><div><span className=\"status-symbol\"/><h2>{meta.label}</h2><b>{items.length}</b></div><p>{meta.note}</p></header>\n <div className=\"kanban-list\">\n {items.map((project: any) => <KanbanCard key={project.id} project={project} actor={actor} open={() => onOpen(project.id)}/>)}\n {!items.length && <div className=\"column-empty\">Drop a project here</div>}\n </div>\n </section>;\n })}\n </div>;\n}\n\nfunction Modal({ open, close, children, wide = false }: any) {\n const ref = useRef<HTMLDialogElement>(null);\n useEffect(() => { const node = ref.current; if (!node) return; if (open && !node.open) node.showModal(); if (!open && node.open) node.close(); }, [open]);\n return <dialog ref={ref} className={wide ? \"modal modal-wide\" : \"modal\"} onCancel={(e) => { e.preventDefault(); close(); }} onClick={(e) => { if (e.target === ref.current) close(); }}>\n <NetworkActivity/><div className=\"modal-inner\">{children}</div>\n </dialog>;\n}\n\nfunction QuickForm({ kind, projectId, detail, done }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\"), [feedback, setFeedback] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\"); setFeedback(\"\");\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.client_visible = data.client_visible === \"on\";\n data.send_email = data.send_email === \"on\";\n data.is_main_poc = data.is_main_poc === \"on\";\n data.email_cc = data.email_cc === \"on\";\n try {\n const paths: any = {\n link: \"links\", credential: \"credentials\", stakeholder: \"stakeholders\",\n milestone: \"milestones\", payment: \"payments\", comment: \"comments\",\n };\n const result = await post(`/api/projects/${projectId}/${paths[kind]}`, data);\n form.reset(); await done();\n if (data.send_email && !result.email?.sent) {\n setFeedback(`Update saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`);\n }\n } catch (x: any) { setError(x.message); } finally { setBusy(false); }\n };\n return <form className=\"quick-form\" onSubmit={submit}>\n {error && <div className=\"alert alert-error\">{error}</div>}\n {feedback && <div className=\"alert alert-warning\">{feedback}</div>}\n {kind === \"comment\" && <>\n <div className=\"form-row\"><Field label=\"Update type\"><select name=\"comment_type\">{Object.entries(typeLabels).filter(([x]) => x !== \"milestone\").map(([value, label]) => <option value={value}>{label}</option>)}</select></Field>\n <Field label=\"Visible to\"><select name=\"visibility\"><option value=\"both\">Admin + client</option><option value=\"admin\">Admin only</option><option value=\"client\">Client timeline</option></select></Field>\n <Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field></div>\n <Field label=\"Update\"><textarea name=\"body\" required rows={3} placeholder=\"Share what changed and what comes next.\"/></Field>\n {detail.project.contact_email && <label className=\"check notify-check\"><input name=\"send_email\" type=\"checkbox\"/> Email the project POC and CC list</label>}\n </>}\n {kind === \"link\" && <div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required placeholder=\"Contract\"/></Field><Field label=\"URL\"><input name=\"url\" type=\"url\" required placeholder=\"https://…\"/></Field><Field label=\"Type\"><select name=\"link_type\"><option value=\"reference\">Reference</option><option value=\"document\">Document</option><option value=\"contract\">Contract</option><option value=\"mou\">MOU</option><option value=\"github\">GitHub</option></select></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div>}\n {kind === \"credential\" && <><div className=\"form-row\"><Field label=\"Label\"><input name=\"label\" required/></Field><Field label=\"Username\"><input name=\"username\"/></Field><Field label=\"Secret\"><input name=\"secret\" type=\"password\"/></Field></div><div className=\"form-row\"><Field label=\"Login URL\"><input name=\"url\" type=\"url\"/></Field><Field label=\"Notes\"><input name=\"notes\"/></Field></div></>}\n {kind === \"stakeholder\" && <><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/><Field label=\"Role\"><input name=\"role\" placeholder=\"Founder, SPOC…\"/></Field></div><Field label=\"Email address\"><input name=\"email\" type=\"email\" required placeholder=\"poc@example.com\"/></Field><div className=\"form-row stakeholder-email-options\"><label className=\"check\"><input name=\"is_main_poc\" type=\"checkbox\"/> Main POC and project email</label><label className=\"check\"><input name=\"email_cc\" type=\"checkbox\"/> Include in project email CC</label></div></>}\n {kind === \"milestone\" && <><div className=\"form-row\"><Field label=\"Milestone\"><input name=\"title\" required/></Field><Field label=\"Tag\"><input name=\"tag\" defaultValue=\"Milestone\"/></Field><Field label=\"Status\"><select name=\"status\"><option value=\"upcoming\">Upcoming</option><option value=\"active\">Active</option><option value=\"complete\">Complete</option></select></Field></div><div className=\"form-row\"><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field><Field label=\"Completed date\"><input name=\"completed_date\" type=\"date\"/></Field><label className=\"check\"><input name=\"client_visible\" type=\"checkbox\" defaultChecked/> Visible to client</label></div><Field label=\"Description\"><textarea name=\"description\" rows={2}/></Field></>}\n {kind === \"payment\" && <div className=\"form-row\"><Field label={`Amount (${detail.project.currency})`}><input name=\"amount\" type=\"number\" min=\"0.01\" step=\"0.01\" required/></Field><Field label=\"Payment date\"><input name=\"paid_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)} required/></Field><Field label=\"Note\"><input name=\"note\" placeholder=\"Milestone payment\"/></Field></div>}\n <Button disabled={busy} variant=\"secondary\" icon=\"plus\">{busy ? \"Saving…\" : `Add ${kind}`}</Button>\n </form>;\n}\n\nfunction Timeline({ detail, actor, reload, notify }: any) {\n const [replying, setReplying] = useState<string | null>(null), [reply, setReply] = useState(\"\"), [sendReply, setSendReply] = useState(false), [adding, setAdding] = useState(false);\n const events = useMemo(() => [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, timelineType: x.comment_type, date: x.event_date })),\n ...detail.milestones.map((x: any) => ({ ...x, timelineType: \"milestone\", body: x.description, author_name: x.tag, date: x.completed_date || x.due_date, milestone: true })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date) || String(b.created_at).localeCompare(String(a.created_at))), [detail]);\n const canComment = actor.actorType === \"partner\"\n ? detail.project.status !== \"backlog\"\n : actor.actorType === \"internal\" && canActor(actor, \"manage_comments\");\n const resolve = async (item: any) => {\n try {\n const result = await post(`/api/comments/${item.id}/resolve`, { reply, send_email: sendReply });\n setReply(\"\"); setReplying(null); setSendReply(false); await reload();\n if (sendReply && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Question answered\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n return <div className=\"timeline-wrap\">\n <div className=\"section-toolbar\">\n <div><h3>Project timeline</h3><p>{events.length} dated {events.length === 1 ? \"entry\" : \"entries\"} across updates and milestones.</p></div>\n {canComment && <Button variant={adding ? \"secondary\" : \"primary\"} icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"Add update\"}</Button>}\n </div>\n {adding && <div className=\"composer\"><QuickForm kind=\"comment\" projectId={detail.project.id} detail={detail} done={async () => { await reload(); setAdding(false); }}/></div>}\n {events.length ? <div className=\"timeline\">\n {events.map((item: any) => <article className={`timeline-item timeline-${item.timelineType}`} key={`${item.milestone ? \"m\" : \"c\"}-${item.id}`}>\n <div className=\"timeline-node\"><Icon name={eventIcons[item.timelineType] || \"note\"} size={16}/></div>\n <div className=\"timeline-content\">\n <div className=\"timeline-head\"><span className=\"event-type\">{typeLabels[item.timelineType] || titleCase(item.timelineType)}</span><time>{prettyDate(item.date)}</time>{item.visibility && <span className=\"visibility-label\">{item.visibility === \"both\" ? \"Team + client\" : titleCase(item.visibility)}</span>}{item.resolved_at && <span className=\"resolved\">Resolved</span>}</div>\n <h4>{item.milestone ? item.title : item.author_name}</h4>\n {item.body && <p>{item.body}</p>}\n {item.timelineType === \"question\" && detail.comments.filter((x: any) => x.parent_id === item.id).map((x: any) => <div className=\"timeline-reply\"><b>{x.author_name}</b><p>{x.body}</p></div>)}\n {item.timelineType === \"question\" && !item.resolved_at && canComment && <>\n {replying === item.id ? <div className=\"reply-box\"><textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder=\"Answer the client and resolve this question\"/>{detail.project.contact_email && <label className=\"check\"><input type=\"checkbox\" checked={sendReply} onChange={(e) => setSendReply(e.target.checked)}/>Email this answer to the client POC</label>}<Button variant=\"secondary\" onClick={() => resolve(item)}>Reply & resolve</Button></div> : <button className=\"text-action\" onClick={() => setReplying(item.id)}>Answer question</button>}\n </>}\n </div>\n </article>)}\n </div> : <Empty title=\"No timeline entries yet\" text=\"Updates and milestones will build the project story here.\"/>}\n </div>;\n}\nfunction canActor(actor: Actor, key: string) {\n return actor.role === \"admin\" || actor.permissions?.[key] === true;\n}\nfunction CredentialCard({ item, canRemove, removeItem }: any) {\n const [revealed, setRevealed] = useState(false);\n const copy = async (value: string) => { if (value) await navigator.clipboard.writeText(value); };\n return <article className=\"credential-card\">\n <header><span><Icon name=\"key\" size={16}/></span><div><h4>{item.label}</h4><p>{item.username || \"No username\"}</p></div></header>\n <div className=\"secret-row\"><code>{revealed ? item.secret || \"—\" : item.secret ? \"••••••••••••\" : \"No secret\"}</code><button type=\"button\" onClick={() => setRevealed(!revealed)} aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}><Icon name=\"eye\" size={15}/></button></div>\n {item.notes && <p className=\"credential-note\">{item.notes}</p>}\n <footer>{item.url && <a href={item.url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={14}/>Open login</a>}{item.username && <button type=\"button\" onClick={() => copy(item.username)}><Icon name=\"copy\" size={14}/>Copy username</button>}{canRemove && <button type=\"button\" className=\"danger-link\" onClick={() => removeItem(`/api/credentials/${item.id}`)}>Remove</button>}</footer>\n </article>;\n}\nfunction StakeholderCard({ item, canManage, onUpdate, onRemove }: any) {\n return <article className={`person ${item.is_main_poc ? \"person-main\" : \"\"}`}>\n <span>{initials(item.name)}</span>\n <div>\n <header><b>{item.name}</b>{Boolean(item.is_main_poc) && <em>Main POC</em>}{Boolean(item.email_cc) && <em>CC</em>}</header>\n <p>{item.role || \"Stakeholder\"}</p>\n <a href={`mailto:${item.email}`}>{item.email || \"Email required\"}</a>\n <a href={`tel:${item.phone}`}>{item.phone}</a>\n {canManage && <>\n <div className=\"person-actions\">\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { is_main_poc: true })}>Make main POC</button>}\n {!Boolean(item.is_main_poc) && <button type=\"button\" onClick={() => onUpdate(item, { email_cc: !Boolean(item.email_cc) })}>{Boolean(item.email_cc) ? \"Remove from CC\" : \"Add to CC\"}</button>}\n <button type=\"button\" className=\"danger-link\" onClick={() => onRemove(`/api/stakeholders/${item.id}`)}>Remove</button>\n </div>\n <details className=\"person-editor\">\n <summary>Edit contact details</summary>\n <form className=\"stack\" onSubmit={async (e: any) => {\n e.preventDefault();\n const data: any = Object.fromEntries(new FormData(e.currentTarget));\n data.email_cc = data.email_cc === \"on\";\n await onUpdate(item, data);\n }}>\n <Field label=\"Name\"><input name=\"name\" required defaultValue={item.name}/></Field>\n <PhoneField defaultValue={item.phone}/>\n <Field label=\"Email\"><input name=\"email\" type=\"email\" required defaultValue={item.email || \"\"}/></Field>\n <Field label=\"Role\"><input name=\"role\" defaultValue={item.role || \"\"}/></Field>\n {!Boolean(item.is_main_poc) && <label className=\"check\"><input name=\"email_cc\" type=\"checkbox\" defaultChecked={Boolean(item.email_cc)}/>Include in project email CC</label>}\n <Button variant=\"secondary\">Save contact</Button>\n </form>\n </details>\n </>}\n </div>\n </article>;\n}\n\nfunction DetailPanel({ projectId, actor, owners = [], partners = [], close, refreshList, notify }: any) {\n const [detail, setDetail] = useState<any>(null), [templates, setTemplates] = useState<any[]>([]), [tab, setTab] = useState(\"overview\"), [busy, setBusy] = useState(false), [progressDraft, setProgressDraft] = useState(0), [selectedPartner, setSelectedPartner] = useState(\"\");\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 extendSchedule = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const result = await post(`/api/projects/${p.id}/extensions`, Object.fromEntries(new FormData(form)));\n form.reset(); await load(); await refreshList();\n notify(`Schedule extended by ${result.days} ${result.days === 1 ? \"day\" : \"days\"}`);\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const updateStakeholder = async (item: any, changes: any) => {\n try {\n await patch(`/api/stakeholders/${item.id}`, changes);\n await load(); await refreshList(); notify(\"Project email recipients updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const collaborationReady = actor.actorType !== \"partner\" || p.status !== \"backlog\";\n const tabs = [\n { key: \"overview\", label: \"Overview\", icon: \"board\" },\n { key: \"timeline\", label: \"Timeline\", icon: \"update\", count: detail.comments.length + detail.milestones.length },\n { key: \"milestones\", label: \"Milestones\", icon: \"milestone\", count: detail.milestones.length },\n { key: \"resources\", label: \"Resources\", icon: \"link\", count: detail.links.length + detail.credentials.length },\n { key: \"people\", label: \"People\", icon: \"users\", count: detail.stakeholders.length },\n { key: \"payments\", label: \"Payments\", icon: \"payment\", count: detail.payments.length },\n ...((internal || collaborationReady) ? [{ key: \"access\", label: \"Client access\", icon: \"key\" }] : []),\n ];\n return <div className=\"detail\">\n <header className=\"detail-header\">\n <div className=\"detail-title\"><div className=\"detail-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <span className=\"delay-badge\">Forecast +{p.delivery_delay_days}d</span>}{p.end_date && <span className={`delay-badge deadline-badge ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</span>}</div><h2>{p.title}</h2><div className=\"detail-meta\"><span>{p.partner_name ? `Partner · ${p.partner_name}` : \"Direct AFLABS project\"}</span><span>{p.project_type}</span>{p.contact_email && <a href={`mailto:${p.contact_email}`}><Icon name=\"mail\" size={13}/>{p.contact_email}</a>}</div></div>\n <div className={`detail-progress ${actor.role === \"admin\" ? \"detail-progress-editable\" : \"\"}`}>\n <div><span>Completion</span><b>{actor.role === \"admin\" ? progressDraft : p.progress}%</b></div>\n {actor.role === \"admin\" ? <div className=\"progress-controls\"><input aria-label=\"Project completion\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={progressDraft} onChange={(e) => setProgressDraft(Number(e.target.value))}/><Button type=\"button\" variant=\"secondary\" disabled={busy || progressDraft === p.progress} onClick={saveProgress}>Save</Button></div> : <div className=\"progress\"><i style={{ width: `${p.progress}%` }}/></div>}\n </div>\n <button className=\"icon-button\" onClick={close} aria-label=\"Close\"><Icon name=\"close\"/></button>\n </header>\n <nav className=\"detail-tabs\">{tabs.map((item) => <button className={tab === item.key ? \"active\" : \"\"} onClick={() => setTab(item.key)}><Icon name={item.icon} size={15}/><span>{item.label}</span>{item.count !== undefined && <b>{item.count}</b>}</button>)}</nav>\n <div className=\"detail-body\">\n {tab === \"overview\" && <div className=\"detail-section\">\n <div className=\"overview-layout\">\n {internal && canActor(actor, \"edit_projects\") ? <form className=\"form-grid overview-form\" onSubmit={saveOverview}>\n <div className=\"form-section-title full\"><h3>Project definition</h3><p>Scope, ownership, and delivery window.</p></div>\n <Field label=\"Title\"><input name=\"title\" defaultValue={p.title} required/></Field>\n <Field label=\"Status\"><select name=\"status\" defaultValue={p.status}>{Object.keys(statusMeta).filter((x) => x !== \"done\" || actor.role === \"admin\").map((x) => <option value={x}>{statusMeta[x].label}</option>)}</select></Field>\n <Field label=\"Description\"><textarea name=\"description\" rows={5} defaultValue={p.description}/></Field>\n {detail.stakeholders.length ? <div className=\"recipient-source full\"><Icon name=\"users\" size={16}/><div><b>Email recipients come from stakeholders</b><p>Use the People tab to mark the main POC and choose CC recipients.</p></div></div> : <><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={p.contact_email || \"\"} placeholder=\"project@example.com\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(p.cc_emails || []).join(\", \")} placeholder=\"finance@example.com, poc@example.com\"/></Field></>}\n {actor.role === \"admin\" && detail.notificationCcOptions?.length > 0 && <fieldset className=\"full project-cc-settings\"><legend>Company CC recipients</legend><p className=\"field-note\">These recipients are added alongside stakeholder CCs whenever you choose to email an update.</p><div className=\"permission-grid\">{detail.notificationCcOptions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"notification_cc_ids\" value={x.id} defaultChecked={(p.notification_cc_ids || []).includes(x.id)}/><span><b>{x.label}</b><small>{x.email || \"Mapped internal user\"}</small></span></label>)}</div></fieldset>}\n <Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={p.owner_user_id || \"\"} required><option value=\"\">Select owner</option>{owners.map((x: any) => <option value={x.id}>{x.name} · {titleCase(x.role)}</option>)}</select></Field>\n <Field label=\"Project type\"><select name=\"project_type\" defaultValue={p.project_type}><option>Billable</option><option>R&D</option><option>Community</option></select></Field>\n <Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={p.start_date || \"\"}/></Field>\n <Field label=\"End date\"><input name=\"end_date\" type=\"date\" defaultValue={p.end_date || \"\"}/></Field>\n <div className=\"form-section-title full\"><h3>Commercial details</h3><p>Internal pricing and partner documentation.</p></div>\n <Field label=\"Partner\"><select name=\"partner_id\" value={selectedPartner} onChange={(e) => setSelectedPartner(e.target.value)}><option value=\"\">Direct / no partner</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field>\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={p.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field>\n <Field label=\"Regular cost\"><input name=\"regular_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.regular_cost}/></Field>\n {selectedPartner && <><Field label=\"Partner-managed cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.partner_cost}/></Field><Field label=\"Commission document\"><input name=\"commission_document_url\" type=\"url\" defaultValue={p.commission_document_url || \"\"}/></Field></>}\n <Field label=\"Tax type\"><input name=\"tax_label\" defaultValue={p.tax_label || \"GST\"} placeholder=\"GST or VAT\"/></Field>\n <Field label=\"Tax rate (%)\"><input name=\"tax_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.tax_rate || 0}/></Field>\n <label className=\"check full\"><input name=\"tax_inclusive\" type=\"checkbox\" defaultChecked={Boolean(p.tax_inclusive)}/> Cost already includes {p.tax_label || \"tax\"}</label>\n <div className=\"form-actions full\"><Button disabled={busy}>{busy ? \"Saving…\" : \"Save project\"}</Button>{canActor(actor, \"archive_projects\") && <Button type=\"button\" variant=\"secondary\" icon=\"archive\" onClick={archive}>{p.archived ? \"Restore\" : \"Archive\"}</Button>}{actor.role === \"admin\" && <Button type=\"button\" variant=\"danger\" onClick={deleteProject}>Delete permanently</Button>}</div>\n </form> : <div className=\"read-overview\"><div className=\"overview-description\"><h3>About this project</h3><p>{p.description || \"No description yet.\"}</p></div><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Forecast</dt><dd>{prettyDate(p.forecast_end_date)} · +{p.delivery_delay_days}d</dd></div>}<div><dt>Type</dt><dd>{p.project_type}</dd></div>{p.contact_email && <div><dt>Project email</dt><dd><a href={`mailto:${p.contact_email}`}>{p.contact_email}</a></dd></div>}</dl></div>}\n <aside className=\"overview-summary\"><h3>Delivery snapshot</h3><dl><div><dt>Status</dt><dd>{statusMeta[p.status]?.label}</dd></div><div><dt>Primary owner</dt><dd>{p.owner_name || \"Not assigned\"}</dd></div><div><dt>Completion</dt><dd>{p.progress}%</dd></div><div><dt>Timeline</dt><dd>{detail.comments.length + detail.milestones.length} entries</dd></div><div><dt>Stakeholders</dt><dd>{detail.stakeholders.length}</dd></div>{p.delivery_delay_days > 0 && <div><dt>Expected delay</dt><dd>+{p.delivery_delay_days} days</dd></div>}</dl>{actor.actorType === \"partner\" && !collaborationReady && <p className=\"notice\"><Icon name=\"clock\" size={15}/>Collaboration tools unlock when AFLABS moves this project to To do.</p>}</aside>\n </div>\n {internal && canActor(actor, \"edit_projects\") && p.end_date && <details className=\"schedule-extension\"><summary><span><Icon name=\"clock\" size={16}/><b>Extend target date</b></span><Icon name=\"chevron\" size={15}/></summary><form className=\"form-row\" onSubmit={extendSchedule}><Field label=\"New target date\"><input name=\"new_end_date\" type=\"date\" min={p.end_date} required/></Field><Field label=\"External reason\"><input name=\"reason\" required placeholder=\"Client dependency, approval delay…\"/></Field><Field label=\"Timeline date\"><input name=\"event_date\" type=\"date\" defaultValue={new Date().toISOString().slice(0, 10)}/></Field><Button disabled={busy}>Record extension</Button></form></details>}\n </div>}\n {tab === \"timeline\" && <Timeline detail={detail} actor={actor} reload={load} notify={notify}/>}\n {tab === \"milestones\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Delivery milestones</h3><p>Concrete checkpoints that also shape the client journey.</p></div>{internal && canActor(actor, \"manage_milestones\") && <div className=\"toolbar-actions\">{templates.length > 0 && <form className=\"template-apply\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; await post(`/api/projects/${p.id}/apply-milestone-template`, Object.fromEntries(new FormData(form))); await load(); notify(\"Milestone template applied\"); }}><select name=\"template_id\" required defaultValue=\"\"><option value=\"\">Use template…</option>{templates.map((x: any) => <option 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 <div className=\"milestone-list\">{detail.milestones.map((x: any) => <article className={`milestone-row state-${x.status}`}><span className=\"milestone-state\"><Icon name={x.status === \"complete\" ? \"check\" : x.status === \"active\" ? \"update\" : \"clock\"} size={15}/></span><div className=\"milestone-copy\"><header><h4>{x.title}</h4><span>{titleCase(x.status)}</span></header><p>{x.tag} · {x.completed_date ? `Completed ${prettyDate(x.completed_date)}` : `Due ${prettyDate(x.due_date)}`}</p>{x.description && <small>{x.description}</small>}</div>{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 className=\"text-danger\" onClick={() => removeItem(`/api/milestones/${x.id}`)}>Remove</button></div>}</article>)}</div>\n {!detail.milestones.length && <Empty title=\"No milestones yet\" text=\"Add milestone tags to make delivery checkpoints visible.\"/>}\n </div>}\n {tab === \"resources\" && <div className=\"detail-section split-section\">\n <section><div className=\"section-toolbar\"><div><h3>Shared resources</h3><p>Documents, contracts, references, and repositories.</p></div>{((internal && canActor(actor, \"manage_links\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add resource</summary><div className=\"popover-form\"><QuickForm kind=\"link\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"resource-list\">{detail.links.map((x: any) => <article className=\"resource-row\"><span className=\"resource-icon\"><Icon name={x.link_type === \"github\" ? \"work\" : \"link\"}/></span><div><a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a><p>{titleCase(x.link_type)} · {x.client_visible ? \"Client visible\" : \"Team only\"}</p></div>{internal && canActor(actor, \"manage_links\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/links/${x.id}`)}>Remove</button>}</article>)}</div>{!detail.links.length && <Empty title=\"No shared resources\" text=\"Add the first document, contract, repository, or reference link.\"/>}</section>\n {((internal && canActor(actor, \"view_credentials\")) || (actor.actorType === \"partner\" && collaborationReady)) && <section><div className=\"section-toolbar\"><div><h3>Credentials</h3><p>Project access details. Credentials remain hidden from the client portal.</p></div>{((internal && canActor(actor, \"manage_credentials\")) || actor.actorType === \"partner\") && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add credential</summary><div className=\"popover-form\"><QuickForm kind=\"credential\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"credential-list\">{detail.credentials.map((x: any) => <CredentialCard item={x} canRemove={internal && canActor(actor, \"manage_credentials\")} removeItem={removeItem}/>)}</div>{!detail.credentials.length && <Empty title=\"No credentials saved\" text=\"Add basic project access details when the delivery team needs them.\"/>}</section>}\n </div>}\n {tab === \"people\" && <div className=\"detail-section\"><div className=\"section-toolbar\"><div><h3>Client stakeholders</h3><p>One contact is always the main POC. Other stakeholder emails can receive project updates by CC.</p></div>{((internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Add stakeholder</summary><div className=\"popover-form\"><QuickForm kind=\"stakeholder\" projectId={p.id} detail={detail} done={load}/></div></details>}</div><div className=\"people-grid\">{detail.stakeholders.map((x: any) => <StakeholderCard key={x.id} item={x} canManage={(internal && canActor(actor, \"manage_stakeholders\")) || (actor.actorType === \"partner\" && collaborationReady)} onUpdate={updateStakeholder} onRemove={removeItem}/>)}</div>{!detail.stakeholders.length && <Empty title=\"No stakeholders\" text=\"Add a client contact; the first becomes the main POC automatically.\"/>}</div>}\n {tab === \"payments\" && <div className=\"detail-section\">\n <div className=\"section-toolbar\"><div><h3>Payment fulfillment</h3><p>Track receipts and generate branded invoices against the agreed client cost.</p></div>{(actor.actorType === \"partner\" || canActor(actor, \"manage_payments\")) && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Record payment</summary><div className=\"popover-form\"><QuickForm kind=\"payment\" projectId={p.id} detail={detail} done={load}/></div></details>}</div>\n <div className=\"payment-summary\"><div><span>Project cost</span><b>{money(detail.paymentSummary.total, p.currency)}</b></div><div><span>Received</span><b>{money(detail.paymentSummary.paid, p.currency)}</b></div><div className=\"pending\"><span>Pending</span><b>{money(detail.paymentSummary.pending, p.currency)}</b></div></div>\n <div className=\"payments-layout\"><section><h4 className=\"subsection-title\">Receipts</h4><div className=\"item-list\">{detail.payments.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"payment\"/></span><div><b>{money(x.amount, x.currency)}</b><p>{prettyDate(x.paid_date)} · {x.note || \"Payment received\"}</p><a className=\"receipt-link\" href={`/api/payments/${x.id}/receipt.pdf`} target=\"_blank\" rel=\"noreferrer\">Receipt PDF ↗</a></div>{internal && canActor(actor, \"manage_payments\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/payments/${x.id}`)}>Remove</button>}</div>)}</div>{!detail.payments.length && <p className=\"muted\">No payments recorded yet.</p>}</section>\n <section><div className=\"invoice-heading\"><h4 className=\"subsection-title\">Invoices</h4>{actor.role === \"admin\" && <details className=\"add-menu\"><summary><Icon name=\"plus\" size={15}/>Create invoice</summary><form className=\"popover-form quick-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; const fd = new FormData(form); const data: any = Object.fromEntries(fd); data.milestone_ids = fd.getAll(\"milestone_ids\"); await post(`/api/projects/${p.id}/invoices`, data); form.reset(); await load(); notify(\"Invoice created\"); }}><Field label=\"Invoice type\"><select name=\"invoice_type\"><option value=\"milestone\">Milestone payment</option><option value=\"final\">Project completed / final</option><option value=\"custom\">Custom</option></select></Field><Field label={`Amount (${p.currency})`}><input name=\"amount\" type=\"number\" min=\"0\" step=\".01\" required/></Field><Field label=\"Due date\"><input name=\"due_date\" type=\"date\"/></Field>{detail.milestones.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name=\"milestone_ids\" value={x.id}/>{x.title}</label>)}<Field label=\"Custom notes\"><textarea name=\"notes\" rows={3}/></Field><Button>Create invoice</Button></form></details>}</div><div className=\"invoice-list\">{(detail.invoices || []).map((x: any) => <a className=\"invoice-row\" href={`/api/invoices/${x.id}/pdf`} target=\"_blank\"><span><Icon name=\"note\"/></span><div><b>{x.invoice_number}</b><p>{titleCase(x.invoice_type)} · {money(x.amount, x.currency)}</p></div><em>PDF ↗</em></a>)}</div>{!(detail.invoices || []).length && <p className=\"muted\">No invoices created yet.</p>}</section></div>\n </div>}\n {tab === \"access\" && <div className=\"detail-section access-grid\"><section><div className=\"section-heading\"><h3>Client portal access</h3><p>Share the private project link and PIN together with the client.</p></div><div className=\"portal-access-card\"><div><span>Private project link</span><code>{location.origin}/client/{p.client_token}</code></div><Button variant=\"secondary\" icon=\"copy\" onClick={copyPortal}>Copy link</Button><div><span>Project PIN</span><strong>{p.client_pin}</strong></div></div>{internal && <form className=\"inline-form\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await patch(`/api/projects/${p.id}`, Object.fromEntries(new FormData(form))); notify(\"Client PIN updated\"); await load(); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Change client PIN\"><input name=\"client_pin\" defaultValue={p.client_pin} inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Button>Update PIN</Button></form>}</section><section className=\"privacy-note\"><h3>Client-safe sharing</h3><ul><li>Only client-visible links, milestones, and timeline entries appear.</li><li>Credentials, internal comments, and commission documents remain private.</li><li>Project completion and payment fulfillment update automatically.</li></ul></section></div>}\n </div>\n </div>;\n}\n\nfunction BrandingEditor({ value, fallback = {}, title, description, partner = false, onSave }: any) {\n const [draft, setDraft] = useState<any>(value || {});\n useEffect(() => { setDraft(value || {}); }, [JSON.stringify(value)]);\n const update = (key: string, next: string) => setDraft((current: any) => ({ ...current, [key]: next }));\n const effective = {\n name: draft.name || fallback.name || \"AFLABS\",\n logo_url: draft.logo_url || fallback.logo_url || \"/frontend/logo.png\",\n accent_color: draft.accent_color || fallback.accent_color || \"#8edb11\",\n contact_info: draft.contact_info || fallback.contact_info || \"\",\n website_url: draft.website_url || fallback.website_url || \"\",\n portal_label: draft.portal_label || fallback.portal_label || \"Project delivery\",\n welcome_message: draft.welcome_message || fallback.welcome_message || \"Every meaningful update, in one clear timeline.\",\n document_header: draft.document_header || fallback.document_header || \"AFLABS PM\\nProject delivery, made visible.\",\n document_footer: draft.document_footer || fallback.document_footer || \"Thank you for your business.\",\n };\n return <div className=\"branding-layout\">\n <section className=\"branding-form\">\n <h2>{title}</h2><p>{description}</p>\n <form className=\"stack\" onSubmit={async (e) => { e.preventDefault(); await onSave(draft); }}>\n <div className=\"form-row\"><Field label=\"Brand name\"><input value={draft.name || \"\"} onChange={(e) => update(\"name\", e.target.value)} placeholder={partner ? fallback.name || \"Use AFLABS default\" : \"AFLABS\"} required={!partner}/></Field>{!partner && <Field label=\"Portal label\"><input value={draft.portal_label || \"\"} onChange={(e) => update(\"portal_label\", e.target.value)} required/></Field>}</div>\n <Field label=\"Logo URL\" hint={partner ? \"Leave blank to use the AFLABS logo\" : \"The supplied AFLABS logo is available at /frontend/logo.png\"}><input value={draft.logo_url || \"\"} onChange={(e) => update(\"logo_url\", e.target.value)} placeholder={partner ? fallback.logo_url || \"/frontend/logo.png\" : \"/frontend/logo.png\"} required={!partner}/></Field>\n <div className=\"form-row\">\n <Field label=\"Accent color\"><div className=\"color-control\"><input type=\"color\" value={effective.accent_color.startsWith(\"#\") ? effective.accent_color : \"#8edb11\"} onChange={(e) => update(\"accent_color\", e.target.value)}/><input value={draft.accent_color || \"\"} onChange={(e) => update(\"accent_color\", e.target.value)} placeholder={fallback.accent_color || \"#8edb11\"}/></div></Field>\n <Field label=\"Contact information\"><input value={draft.contact_info || \"\"} onChange={(e) => update(\"contact_info\", e.target.value)} placeholder={partner ? fallback.contact_info || \"Email or support line\" : \"Email or support line\"}/></Field>\n </div>\n <Field label=\"Website\"><input type=\"url\" value={draft.website_url || \"\"} onChange={(e) => update(\"website_url\", e.target.value)} placeholder={fallback.website_url || \"https://example.com\"}/></Field>\n {!partner && <Field label=\"Timeline introduction\"><textarea rows={3} value={draft.welcome_message || \"\"} onChange={(e) => update(\"welcome_message\", e.target.value)}/></Field>}\n <div className=\"document-branding-fields\">\n <div className=\"form-section-title\"><h3>PDF document details</h3><p>Used consistently on proposals, invoices, and payment receipts.</p></div>\n <Field label=\"Document header\" hint={partner ? \"Leave blank to use the AFLABS document header\" : \"Business name, address, or a short legal line\"}><textarea rows={3} value={draft.document_header || \"\"} onChange={(e) => update(\"document_header\", e.target.value)} placeholder={fallback.document_header || \"Business name\\nAddress or legal details\"}/></Field>\n <Field label=\"Document footer\" hint={partner ? \"Leave blank to use the AFLABS document footer\" : \"Payment, contact, registration, or thank-you details\"}><textarea rows={3} value={draft.document_footer || \"\"} onChange={(e) => update(\"document_footer\", e.target.value)} placeholder={fallback.document_footer || \"Contact and payment details\"}/></Field>\n </div>\n {partner && <p className=\"fallback-note\">Any blank partner field automatically uses the direct AFLABS branding.</p>}\n <div className=\"form-actions\"><Button>Save branding</Button></div>\n </form>\n </section>\n <aside className=\"branding-preview\" style={{ \"--preview-accent\": effective.accent_color } as any}>\n <span className=\"preview-label\">Client preview</span>\n <div className=\"preview-brand\"><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><small>{effective.portal_label}</small></div></div>\n <div className=\"preview-project\"><span>In progress</span><h3>Your project title</h3><p>{effective.welcome_message}</p><div><i/></div></div>\n {(effective.contact_info || effective.website_url) && <small className=\"preview-contact\">{effective.contact_info}{effective.contact_info && effective.website_url ? \" · \" : \"\"}{effective.website_url && \"Visit website\"}</small>}\n <div className=\"document-preview\"><small>Document preview</small><header><img src={effective.logo_url} alt=\"\"/><div><b>{effective.name}</b><span>{effective.document_header}</span></div></header><section><i/><strong>Proposal · Invoice · Receipt</strong><p>Professional documents automatically use this logo, accent, header, and footer.</p></section><footer>{effective.document_footer}</footer></div>\n </aside>\n </div>;\n}\n\nfunction AdminDirectory({ actor, config, projects, notify }: any) {\n const [tab, setTab] = useState(\"users\");\n const [users, setUsers] = useState<any[]>([]);\n const [partners, setPartners] = useState<any[]>([]);\n const [branding, setBranding] = useState<any>(null);\n const [loaded, setLoaded] = useState(false);\n const [userRole, setUserRole] = useState(\"user\");\n const [editingUser, setEditingUser] = useState<any>(null);\n const [editingPartner, setEditingPartner] = useState<any>(null);\n const [projectOptions, setProjectOptions] = useState<any[]>(projects);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [ccUsers, setCcUsers] = useState<any[]>([]);\n\n const load = async () => {\n const [userData, partnerData, brandData, ccData] = await Promise.all([\n request(\"/api/admin/users\"),\n request(\"/api/admin/partners\"),\n request(\"/api/admin/branding\"),\n request(\"/api/admin/cc-recipients\"),\n ]);\n setUsers(userData.users);\n setPartners(partnerData.partners);\n setBranding(brandData.branding);\n setProjectOptions(userData.projects || projects);\n setCcRecipients(ccData.recipients || []);\n setCcUsers(ccData.users || []);\n setLoaded(true);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n\n const addUser = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n const formData = new FormData(form);\n const data: any = Object.fromEntries(formData);\n data.permissions = Object.fromEntries(config.permissions.map((x: any) => [x.key, formData.has(`perm_${x.key}`)]));\n data.all_project_access = formData.has(\"all_project_access\");\n data.project_ids = formData.getAll(\"project_ids\");\n try {\n await post(\"/api/admin/users\", data);\n form.reset();\n setUserRole(\"user\");\n await load();\n notify(\"Team member added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addPartner = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget;\n try {\n await post(\"/api/admin/partners\", Object.fromEntries(new FormData(form)));\n form.reset();\n await load();\n notify(\"Partner added\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const toggle = async (type: string, item: any) => {\n try {\n await patch(`/api/admin/${type}/${item.id}`, { active: !item.active });\n await load();\n notify(item.active ? \"Access revoked\" : \"Access restored\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveUserVisibility = async (e: any) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n try {\n await patch(`/api/admin/users/${editingUser.id}`, {\n name: formData.get(\"name\"),\n email: formData.get(\"email\"),\n pin: formData.get(\"pin\"),\n all_project_access: formData.has(\"all_project_access\"),\n project_ids: formData.getAll(\"project_ids\"),\n });\n await load(); setEditingUser(null); notify(\"Project visibility updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const destroy = async (type: string, item: any) => {\n if (!confirm(`Permanently remove ${item.name}? This cannot be undone.`)) return;\n try {\n await remove(`/api/admin/${type}/${item.id}`);\n await load();\n notify(`${item.name} removed`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const savePartnerBranding = async (data: any) => {\n try {\n await patch(`/api/admin/partners/${editingPartner.id}`, {\n brand_name: data.name, logo_url: data.logo_url, accent_color: data.accent_color,\n contact_info: data.contact_info, website_url: data.website_url,\n document_header: data.document_header, document_footer: data.document_footer,\n });\n await load(); setEditingPartner(null); notify(\"Partner branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveBranding = async (data: any) => {\n try {\n const result = await patch(\"/api/admin/branding\", data);\n setBranding(result.branding);\n notify(\"Client portal branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveCcRecipients = async (next: any[], message = \"Email CC settings updated\") => {\n try {\n const result = await patch(\"/api/admin/cc-recipients\", { recipients: next });\n setCcRecipients(result.recipients);\n notify(message);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const addCcRecipient = async (e: any) => {\n e.preventDefault();\n const form = e.currentTarget, formData = new FormData(form);\n await saveCcRecipients([...ccRecipients, {\n id: crypto.randomUUID(), label: formData.get(\"label\"), email: formData.get(\"email\"),\n user_id: formData.get(\"user_id\"), default_selected: formData.has(\"default_selected\"),\n }], \"Default CC recipient added\");\n form.reset();\n };\n\n if (!loaded) return <PageSkeleton rows={5}/>;\n return <div className=\"directory\">\n <header className=\"page-heading\">\n <div>\n <p>Administration</p>\n <h1>Access & branding</h1>\n <span>Manage who can enter the workspace and how direct client portals present AFLABS.</span>\n </div>\n </header>\n <div className=\"directory-tabs\">\n <button className={tab === \"users\" ? \"active\" : \"\"} onClick={() => setTab(\"users\")}>Internal team <b>{users.length}</b></button>\n <button className={tab === \"partners\" ? \"active\" : \"\"} onClick={() => setTab(\"partners\")}>Partners <b>{partners.length}</b></button>\n <button className={tab === \"branding\" ? \"active\" : \"\"} onClick={() => setTab(\"branding\")}>Client branding</button>\n <button className={tab === \"email\" ? \"active\" : \"\"} onClick={() => setTab(\"email\")}>Email CC <b>{ccRecipients.length}</b></button>\n </div>\n\n {tab === \"users\" && <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add internal user</h2>\n <p>Admins receive full access. For users, choose each permitted action and project scope.</p>\n <form className=\"stack\" onSubmit={addUser}>\n <div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"Work email\" hint=\"Used when this user is mapped to a project CC recipient\"><input name=\"email\" type=\"email\" placeholder=\"name@company.com\"/></Field>\n <div className=\"form-row\"><Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Field label=\"Role\"><select name=\"role\" value={userRole} onChange={(e) => setUserRole(e.target.value)}><option value=\"user\">User</option><option value=\"admin\">Admin</option></select></Field></div>\n <fieldset key={userRole}><legend>Allowed actions</legend><div className=\"permission-grid\">{config.permissions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name={`perm_${x.key}`} defaultChecked={userRole === \"admin\" || userDefaults[x.key]} disabled={userRole === \"admin\"}/>{x.label}</label>)}</div>{userRole === \"admin\" && <small className=\"field-note\">Administrators always receive every action. Project visibility remains configurable below.</small>}</fieldset>\n <fieldset><legend>Project visibility</legend><label className=\"check\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked/> All projects</label><div className=\"project-checks\">{projectOptions.map((p: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={p.id}/>{p.title}{p.archived ? \" · Archived\" : \"\"}</label>)}</div></fieldset>\n <Button icon=\"plus\">Add user</Button>\n </form>\n </section>\n <section className=\"directory-list\">{users.map((u) => {\n const isSelf = u.id === actor.actorId;\n return <article className=\"directory-row\" key={u.id}>\n <span className=\"avatar\">{initials(u.name)}</span>\n <div><h3>{u.name}<em>{isSelf ? \"you\" : u.role}</em></h3><p>{u.phone}{u.email ? ` · ${u.email}` : \"\"}</p><small>{u.role === \"admin\" ? \"All actions\" : `${Object.values(u.permissions).filter(Boolean).length} actions`} · {u.all_project_access ? \"all projects\" : `${u.project_ids.length} assigned`}</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" icon=\"eye\" onClick={() => setEditingUser(u)}>Manage</Button>{isSelf ? <span className=\"self-label\">Protected current account</span> : <><Button variant=\"secondary\" onClick={() => toggle(\"users\", u)}>{u.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"users\", u)}>Remove</button></>}</div>\n </article>;\n })}</section>\n </div>}\n <Modal open={Boolean(editingUser)} close={() => setEditingUser(null)}>{editingUser && <><div className=\"modal-head\"><div><h2>Manage {editingUser.name}</h2><p>Update account access, login PIN, and project visibility.</p></div><button className=\"icon-button\" onClick={() => setEditingUser(null)}><Icon name=\"close\"/></button></div><form className=\"modal-content stack visibility-editor\" onSubmit={saveUserVisibility}><div className=\"form-row\"><Field label=\"Name\"><input name=\"name\" defaultValue={editingUser.name} required/></Field><Field label=\"Work email\"><input name=\"email\" type=\"email\" defaultValue={editingUser.email || \"\"}/></Field></div><Field label=\"New login PIN\" hint=\"Leave blank to keep the current PIN\"><input name=\"pin\" inputMode=\"numeric\" pattern=\"\\d{4,8}\" placeholder=\"4–8 digits\"/></Field><label className=\"scope-toggle\"><input type=\"checkbox\" name=\"all_project_access\" defaultChecked={editingUser.all_project_access}/><span><b>All projects</b><small>Automatically include current and future projects.</small></span></label><fieldset><legend>Selected projects</legend><p className=\"field-note\">Used when “All projects” is unchecked.</p><div className=\"project-visibility-list\">{projectOptions.map((project: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={project.id} defaultChecked={editingUser.project_ids.includes(project.id)}/><span><b>{project.title}</b><small>{statusMeta[project.status]?.label}{project.archived ? \" · Archived\" : \"\"}</small></span></label>)}</div></fieldset><div className=\"form-actions\"><Button>Save account</Button><Button type=\"button\" variant=\"secondary\" onClick={() => setEditingUser(null)}>Cancel</Button></div></form></>}</Modal>\n\n {tab === \"partners\" && <>\n <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add partner</h2>\n <p>Each partner has one account. New partners inherit the default AFLABS client branding until customized.</p>\n <form className=\"stack\" onSubmit={addPartner}>\n <div className=\"form-row\"><Field label=\"Partner name\"><input name=\"name\" required/></Field><PhoneField/></div>\n <Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field>\n <Button icon=\"plus\">Add partner</Button>\n </form>\n </section>\n <section className=\"directory-list\">{partners.map((p) => <article className=\"directory-row\" key={p.id}>\n <span className=\"avatar partner-avatar\" style={{ background: p.accent_color || undefined }}>{initials(p.brand_name || p.name)}</span>\n <div><h3>{p.name}<em>{p.active ? \"active\" : \"revoked\"}</em></h3><p>{p.phone}</p><small>{p.brand_name || \"Using default branding\"} · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => setEditingPartner(p)}>Branding</Button><Button variant=\"secondary\" onClick={() => toggle(\"partners\", p)}>{p.active ? \"Revoke\" : \"Restore\"}</Button><button className=\"text-danger\" onClick={() => destroy(\"partners\", p)}>Remove</button></div>\n </article>)}</section>\n </div>\n <Modal open={Boolean(editingPartner)} close={() => setEditingPartner(null)} wide>{editingPartner && <><div className=\"modal-head\"><div><h2>{editingPartner.name} branding</h2><p>Preview and customize this partner’s client portal.</p></div><button className=\"icon-button\" onClick={() => setEditingPartner(null)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><BrandingEditor\n value={{ name: editingPartner.brand_name || \"\", logo_url: editingPartner.logo_url || \"\", accent_color: editingPartner.accent_color || \"\", contact_info: editingPartner.contact_info || \"\", website_url: editingPartner.website_url || \"\", document_header: editingPartner.document_header || \"\", document_footer: editingPartner.document_footer || \"\" }}\n fallback={branding || {}} partner title=\"Partner branding\"\n description=\"Blank fields inherit the direct AFLABS brand.\"\n onSave={savePartnerBranding}\n /></div></>}</Modal>\n </>}\n\n {tab === \"branding\" && branding && <BrandingEditor value={branding} fallback={branding} title=\"Direct client portal\" description=\"These defaults apply to direct projects and fill any blank fields in partner branding.\" onSave={saveBranding}/>}\n {tab === \"email\" && <div className=\"directory-layout cc-directory\">\n <section className=\"directory-form\"><h2>Add a default CC recipient</h2><p>Create a reusable recipient that admins can select per project. Mapping follows an internal user’s work email.</p><form className=\"stack\" onSubmit={addCcRecipient}><Field label=\"Label\"><input name=\"label\" required placeholder=\"Finance\"/></Field><Field label=\"Email fallback\"><input name=\"email\" type=\"email\" placeholder=\"finance@company.com\"/></Field><Field label=\"Map to internal user\"><select name=\"user_id\" defaultValue=\"\"><option value=\"\">No user mapping</option>{ccUsers.filter((x: any) => x.active).map((x: any) => <option value={x.id}>{x.name}{x.email ? ` · ${x.email}` : \" · email not set\"}</option>)}</select></Field><label className=\"check\"><input name=\"default_selected\" type=\"checkbox\"/> Select automatically on new projects</label><Button icon=\"plus\">Add recipient</Button></form></section>\n <section className=\"directory-list\">{ccRecipients.map((recipient: any) => { const mapped = ccUsers.find((x: any) => x.id === recipient.user_id); return <article className=\"directory-row\" key={recipient.id}><span className=\"avatar\"><Icon name=\"mail\" size={17}/></span><div><h3>{recipient.label}<em>{recipient.default_selected ? \"new project default\" : \"optional\"}</em></h3><p>{mapped?.email || recipient.email || \"Mapped user needs an email\"}</p><small>{mapped ? `Mapped to ${mapped.name}` : \"Standalone email recipient\"}</small></div><div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => saveCcRecipients(ccRecipients.map((x: any) => x.id === recipient.id ? { ...x, default_selected: !x.default_selected } : x))}>{recipient.default_selected ? \"Make optional\" : \"Use by default\"}</Button><button className=\"text-danger\" onClick={() => saveCcRecipients(ccRecipients.filter((x: any) => x.id !== recipient.id), \"CC recipient removed\")}>Remove</button></div></article>; })}{!ccRecipients.length && <Empty title=\"No company CC recipients\" text=\"Add finance, operations, or account contacts that should be available across projects.\"/>}</section>\n </div>}\n </div>;\n}\n\nfunction PartnerBranding({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const load = () => request(\"/api/partner/branding\").then(setData);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <div className=\"detail-loading\"><div className=\"skeleton skeleton-title\"/><div className=\"skeleton\"/></div>;\n return <div className=\"directory\">\n <header className=\"page-heading\"><div><p>Partner workspace</p><h1>Client branding</h1><span>Customize how your linked project portals appear to your clients.</span></div></header>\n <BrandingEditor value={data.overrides} fallback={data.branding} partner title=\"Your client portal brand\" description=\"Your logo, name, accent, contact details, and website appear on projects attributed to you.\" onSave={async (branding: any) => {\n const result = await patch(\"/api/partner/branding\", branding);\n setData((current: any) => ({ ...current, branding: result.branding, overrides: branding }));\n notify(\"Partner branding updated\");\n }}/>\n </div>;\n}\n\nfunction Dashboard({ notify, onQuestions }: any) {\n const [data, setData] = useState<any>(null);\n useEffect(() => { request(\"/api/dashboard\").then(setData).catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4} chart/>;\n const totalProjects = Object.values(data.status_counts).reduce((sum: number, count: any) => sum + Number(count), 0);\n const maxStatus = Math.max(1, ...Object.values(data.status_counts).map(Number));\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Delivery intelligence</p><h1>Dashboard</h1><span>A lightweight view of momentum, cash received, and the work ahead.</span></div></header>\n <div className=\"dashboard-overview\">\n <section className=\"momentum-panel\">\n <div className=\"momentum-gauge\" style={{ \"--gauge-value\": data.north_star } as any}><div><b>{data.north_star}%</b><span>momentum</span></div></div>\n <div className=\"momentum-copy\"><h2>Delivery pulse</h2><p>Projects with meaningful activity in the last 14 days.</p><dl><div><dt>Active projects</dt><dd>{data.active_count}</dd></div><div><dt>Average completion</dt><dd>{data.average_completion}%</dd></div></dl></div>\n </section>\n <section className=\"portfolio-chart\">\n <div className=\"section-heading\"><h2>Portfolio distribution</h2><p>{totalProjects} current projects across delivery stages.</p></div>\n <div className=\"status-stack\" aria-label=\"Projects by status\">{Object.entries(statusMeta).map(([key]) => <i className={`chart-${key}`} style={{ width: `${totalProjects ? (Number(data.status_counts[key] || 0) / totalProjects) * 100 : 0}%` }}/>)}</div>\n <div className=\"status-chart-rows\">{Object.entries(statusMeta).map(([key, meta]) => <div><span><i className={`status-dot status-${key}`}/>{meta.label}</span><div><i className={`chart-${key}`} style={{ width: `${Number(data.status_counts[key] || 0) / maxStatus * 100}%` }}/></div><b>{data.status_counts[key] || 0}</b></div>)}</div>\n </section>\n </div>\n {data.unanswered_count > 0 && <section className=\"dashboard-questions\">\n <div className=\"question-signal\"><Icon name=\"question\" size={22}/><b>{data.unanswered_count}</b></div>\n <div className=\"question-summary\"><h2>Clients are waiting for an answer</h2><p>Unanswered questions should be handled before routine project updates.</p><div>{data.unanswered_questions.slice(0, 3).map((question: any) => <span><b>{question.project_title}</b><small>{question.author_name} · {prettyDate(question.event_date)}</small></span>)}</div></div>\n <Button onClick={onQuestions}>Open question inbox</Button>\n </section>}\n <div className=\"financial-overview\">\n <section><div className=\"section-heading\"><h2>Earnings received</h2><p>Recorded payments, kept separate by currency.</p></div><div className=\"money-metrics\">{data.earnings.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.earnings.length && <p className=\"muted\">No receipts recorded.</p>}</section>\n <section><div className=\"section-heading\"><h2>Estimated next month</h2><p>Pending value for projects due next month.</p></div><div className=\"money-metrics\">{data.next_month.map((x: any) => <div><span>{x.currency}</span><b>{money(x.amount, x.currency)}</b></div>)}</div>{!data.next_month.length && <p className=\"muted\">No active projects currently due next month.</p>}</section>\n </div>\n </div>;\n}\n\nfunction QuestionInbox({ notify, onOpen, onResolved }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busyId, setBusyId] = useState(\"\");\n const load = () => request(\"/api/questions\").then((result) => setItems(result.questions));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const answer = async (e: any, question: any) => {\n e.preventDefault(); setBusyId(question.id);\n const form = e.currentTarget, formData = new FormData(form);\n try {\n const sendEmail = formData.has(\"send_email\");\n const result = await post(`/api/comments/${question.id}/resolve`, {\n reply: formData.get(\"reply\"),\n send_email: sendEmail,\n });\n await load(); await onResolved();\n if (sendEmail && !result.email?.sent) notify(`Answer saved, but email was not sent: ${result.email?.error || \"provider rejected the message\"}`, \"error\");\n else notify(\"Client question answered\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusyId(\"\"); }\n };\n if (!items) return <PageSkeleton rows={5}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client communication</p><h1>Question inbox</h1><span>Answer outstanding client questions across every project without hunting through timelines.</span></div><strong className={items.length ? \"inbox-count has-items\" : \"inbox-count\"}>{items.length} open</strong></header>\n <div className=\"question-inbox\">{items.map((question) => <article className=\"inbox-question\" key={question.id}>\n <header><span className={`status-dot status-${question.project_status}`}/><div><button type=\"button\" onClick={() => onOpen(question.project_id)}>{question.project_title}</button><p>{question.author_name}{question.stakeholder_role ? ` · ${question.stakeholder_role}` : \"\"}</p></div><time>{prettyDate(question.event_date)}</time></header>\n <blockquote>{question.body}</blockquote>\n <form onSubmit={(e) => answer(e, question)}><Field label=\"Your answer\"><textarea name=\"reply\" rows={3} required placeholder=\"Answer clearly and share the next step.\"/></Field><div className=\"inbox-answer-actions\"><label className=\"check notify-check\"><input type=\"checkbox\" name=\"send_email\"/>Email this answer to the project POC</label><Button disabled={busyId === question.id} icon=\"message\">{busyId === question.id ? \"Sending…\" : \"Reply & resolve\"}</Button></div></form>\n </article>)}</div>\n {!items.length && <Empty title=\"All client questions are answered\" text=\"New questions will appear here and on the related project card.\"/>}\n </div>;\n}\n\nfunction ProposalWorkspace({ partners, owners, notify, onProjectCreated }: any) {\n const [items, setItems] = useState<any[] | null>(null), [busy, setBusy] = useState(false), [openId, setOpenId] = useState(\"\");\n const load = () => request(\"/api/admin/proposals\").then((x) => setItems(x.proposals));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => {\n e.preventDefault(); const form = e.currentTarget; setBusy(true);\n try { const data: any = Object.fromEntries(new FormData(form)); data.use_ai = true; await post(\"/api/admin/proposals\", data); form.reset(); await load(); notify(\"AI quotation created\"); }\n catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Admin tools</p><h1>Proposals</h1><span>Turn rough notes into a saved quotation, branded PDF, and a ready-to-run project.</span></div></header>\n <div className=\"builder-layout\">\n <section className=\"builder-form\"><h2>Build with AI</h2><p>Paste rough notes or Markdown. Supplied facts are preserved; missing facts stay blank.</p><form className=\"stack\" onSubmit={create}><Field label=\"Quotation title\"><input name=\"title\" placeholder=\"Optional — AI can name it\"/></Field><div className=\"form-row\"><Field label=\"Partner brand\"><select name=\"partner_id\"><option value=\"\">Direct AFLABS</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field></div><Field label=\"Rough notes or Markdown\"><textarea name=\"notes\" rows={12} required placeholder=\"Client, problem, proposed scope, deliverables, dates, pricing, commercial terms…\"/></Field><Button disabled={busy}>{busy ? \"Building quotation…\" : \"Generate & save quotation\"}</Button></form></section>\n <section className=\"proposal-list\"><h2>Saved proposals</h2>{items.map((x) => <article className=\"proposal-row\"><button className=\"proposal-main\" onClick={() => setOpenId(openId === x.id ? \"\" : x.id)}><div><span>{titleCase(x.status)}</span><h3>{x.title}</h3><p>{x.partner_name || \"Direct AFLABS\"} · {money(x.total, x.currency)}</p></div><Icon name=\"chevron\"/></button>{openId === x.id && <div className=\"proposal-detail\"><pre>{x.markdown_content}</pre><div className=\"row-actions\"><a className=\"button button-secondary\" href={`/api/admin/proposals/${x.id}/pdf`} target=\"_blank\"><span>Open branded PDF</span></a>{!x.project_id && <Button onClick={async () => { const result = await post(`/api/admin/proposals/${x.id}/convert`, { owner_user_id: owners[0]?.id }); await load(); onProjectCreated(result.id); notify(\"Proposal converted to project\"); }}>Convert to project</Button>}</div></div>}</article>)}{!items.length && <Empty title=\"No proposals yet\" text=\"Your saved AI quotations will appear here.\"/>}</section>\n </div>\n </div>;\n}\n\nfunction RecurringWorkspace({ actor, partners, owners, notify }: any) {\n const [items, setItems] = useState<any[] | null>(null), [adding, setAdding] = useState(false);\n const [editingId, setEditingId] = useState(\"\");\n const load = () => request(\"/api/recurring\").then((x) => setItems(x.recurring));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const create = async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/recurring\", Object.fromEntries(new FormData(form))); form.reset(); setAdding(false); await load(); notify(\"Recurring project added\"); } catch (x: any) { notify(x.message, \"error\"); } };\n const update = async (e: any, id: string) => {\n e.preventDefault();\n const form = e.currentTarget;\n const data: any = Object.fromEntries(new FormData(form));\n data.active = new FormData(form).has(\"active\");\n try { await patch(`/api/recurring/${id}`, data); setEditingId(\"\"); await load(); notify(\"Recurring project updated\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n const deleteRecurring = async (item: any) => {\n if (!confirm(`Delete “${item.title}” and its time logs? This cannot be undone.`)) return;\n try { await remove(`/api/recurring/${item.id}`); await load(); notify(\"Recurring project deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Ongoing support</p><h1>Recurring projects</h1><span>Run monthly commitments and hourly retainers without turning them into one-off delivery cards.</span></div><Button icon={adding ? \"close\" : \"plus\"} onClick={() => setAdding(!adding)}>{adding ? \"Close\" : \"New recurring project\"}</Button></header>\n {adding && <section className=\"inline-builder\"><form className=\"form-grid\" onSubmit={create}><Field label=\"Name\"><input name=\"title\" required/></Field><Field label=\"Billing model\"><select name=\"billing_type\"><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field><Field label=\"Description\"><textarea name=\"description\" rows={3}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\"/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" placeholder=\"Comma-separated\"/></Field>{actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" required defaultValue={actor.actorId}>{owners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\"><option value=\"\">Direct</option>{partners.map((x: any) => <option value={x.id}>{x.name}</option>)}</select></Field></>}<Field label=\"Currency\"><select name=\"currency\"><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\"/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\"/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\"/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\"/></Field><div className=\"form-actions full\"><Button>Add recurring project</Button></div></form></section>}\n <div className=\"recurring-grid\">{items.map((x) => {\n const value = x.billing_type === \"hourly\" ? Number(x.period_hours) * Number(x.hourly_rate) : Number(x.monthly_amount);\n return <article className={`recurring-card ${x.active ? \"\" : \"inactive\"}`} key={x.id}>\n <header><div><span>{x.billing_type === \"hourly\" ? \"Hourly / month\" : \"Monthly commitment\"}{!x.active ? \" · Paused\" : \"\"}</span><h2>{x.title}</h2><p>{x.description || \"Ongoing project support\"}</p></div><b>{money(value, x.currency)}</b></header>\n <div className=\"recurring-dates\"><span><small>Starts</small><b>{prettyDate(x.start_date)}</b></span><span><small>Ends</small><b>{prettyDate(x.end_date)}</b></span></div>\n <dl><div><dt>Owner</dt><dd>{x.owner_name || \"AFLABS team\"}</dd></div>{x.partner_name && <div><dt>Partner</dt><dd>{x.partner_name}</dd></div>}<div><dt>This month</dt><dd>{x.period_hours} hours{x.billing_type === \"hourly\" && x.included_hours ? ` / ${x.included_hours} included` : \"\"}</dd></div></dl>\n <div className=\"recurring-actions\"><Button variant=\"secondary\" onClick={() => setEditingId(editingId === x.id ? \"\" : x.id)}>{editingId === x.id ? \"Close editor\" : \"Edit\"}</Button><button type=\"button\" className=\"text-danger\" onClick={() => deleteRecurring(x)}>Delete</button></div>\n {editingId === x.id && <form className=\"recurring-edit form-grid\" onSubmit={(e) => update(e, x.id)}>\n <Field label=\"Name\"><input name=\"title\" defaultValue={x.title} required/></Field><Field label=\"Billing model\"><select name=\"billing_type\" defaultValue={x.billing_type}><option value=\"monthly\">Monthly commitment</option><option value=\"hourly\">Per hour / month</option></select></Field>\n <Field label=\"Description\"><textarea name=\"description\" rows={3} defaultValue={x.description}/></Field><Field label=\"Project email\"><input name=\"contact_email\" type=\"email\" defaultValue={x.contact_email || \"\"}/></Field><Field label=\"CC emails\"><input name=\"cc_emails\" defaultValue={(x.cc_emails || []).join(\", \")}/></Field>\n {actor.actorType === \"internal\" && <><Field label=\"Primary owner\"><select name=\"owner_user_id\" defaultValue={x.owner_user_id || \"\"}>{owners.map((owner: any) => <option value={owner.id}>{owner.name}</option>)}</select></Field><Field label=\"Partner\"><select name=\"partner_id\" defaultValue={x.partner_id || \"\"}><option value=\"\">Direct</option>{partners.map((partner: any) => <option value={partner.id}>{partner.name}</option>)}</select></Field></>}\n <Field label=\"Currency\"><select name=\"currency\" defaultValue={x.currency}><option>INR</option><option>SAR</option><option>AED</option><option>USD</option></select></Field><Field label=\"Monthly amount\"><input name=\"monthly_amount\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.monthly_amount}/></Field><Field label=\"Hourly rate\"><input name=\"hourly_rate\" type=\"number\" min=\"0\" step=\".01\" defaultValue={x.hourly_rate}/></Field><Field label=\"Included hours / month\"><input name=\"included_hours\" type=\"number\" min=\"0\" step=\".25\" defaultValue={x.included_hours}/></Field><Field label=\"Start date\"><input name=\"start_date\" type=\"date\" defaultValue={x.start_date || \"\"}/></Field><Field label=\"End date\"><input name=\"end_date\" type=\"date\" defaultValue={x.end_date || \"\"}/></Field>\n <label className=\"check full\"><input name=\"active\" type=\"checkbox\" defaultChecked={x.active}/> Active recurring project</label><div className=\"form-actions full\"><Button>Save changes</Button></div>\n </form>}\n <details className=\"recurring-details\"><summary>View details and time log</summary><div className=\"recurring-detail-copy\"><p>{x.contact_email || \"No project email\"}{x.cc_emails?.length ? ` · CC: ${x.cc_emails.join(\", \")}` : \"\"}</p><p>{x.billing_type === \"hourly\" ? `${money(x.hourly_rate, x.currency)} per hour · ${x.included_hours || 0} included hours` : `${money(x.monthly_amount, x.currency)} each month`}</p></div>\n <form className=\"hour-log\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(`/api/recurring/${x.id}/logs`, Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Hours logged\"); } catch (error: any) { notify(error.message, \"error\"); } }}><input name=\"work_date\" type=\"date\" defaultValue={todayValue()} required/><input name=\"hours\" type=\"number\" min=\".25\" step=\".25\" placeholder=\"Hours\" required/><input name=\"note\" placeholder=\"Work completed\"/><Button variant=\"secondary\">Log time</Button></form>\n {x.logs?.length > 0 && <div className=\"log-history\"><h3>Recent logs</h3>{x.logs.slice(0, 10).map((l: any) => <div key={l.id}><b>{l.hours}h</b><span>{prettyDate(l.work_date || `${l.period}-01`)} · {l.note || \"Support work\"}</span></div>)}</div>}\n </details>\n </article>;\n })}</div>{!items.length && <Empty title=\"No recurring projects\" text=\"Create a monthly commitment or hourly support project.\"/>}\n </div>;\n}\n\nfunction HolidayWorkspace({ notify }: any) {\n const [data, setData] = useState<any>(null);\n const [weeklyDays, setWeeklyDays] = useState<number[]>([5, 6]);\n const dayNames = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n const load = async () => {\n const result = await request(\"/api/holidays\");\n setData(result);\n setWeeklyDays(result.weekly_days || [5, 6]);\n };\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n if (!data) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\">\n <header className=\"page-heading\"><div><p>Client availability</p><h1>Holidays</h1><span>Set weekly non-working days and one-off holidays shown gently in every client portal.</span></div></header>\n <div className=\"holiday-layout\">\n <section className=\"builder-form\"><h2>Weekly holidays</h2><p>Friday and Saturday are selected by default. Clients can still send questions on these days.</p><div className=\"weekday-picker\">{dayNames.map((name, day) => <label className={weeklyDays.includes(day) ? \"selected\" : \"\"} key={name}><input type=\"checkbox\" checked={weeklyDays.includes(day)} onChange={() => setWeeklyDays((current) => current.includes(day) ? current.filter((x) => x !== day) : [...current, day])}/><span>{name.slice(0, 3)}</span></label>)}</div><Button onClick={async () => { try { await patch(\"/api/admin/holidays/settings\", { weekly_days: weeklyDays }); await load(); notify(\"Weekly holidays saved\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Save weekly schedule</Button></section>\n <section className=\"builder-form\"><h2>Add a one-off holiday</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; try { await post(\"/api/admin/holidays\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Holiday added\"); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"Holiday name\"><input name=\"name\" required placeholder=\"Eid al-Fitr\"/></Field><Field label=\"Date\"><input name=\"holiday_date\" type=\"date\" required/></Field><Button icon=\"plus\">Add holiday</Button></form></section>\n </div>\n <section className=\"holiday-list\"><header><div><h2>Configured dates</h2><p>{data.today?.is_holiday ? `Today is marked as ${data.today.name}.` : \"Today is a working day.\"}</p></div></header>{data.holidays.map((holiday: any) => <article key={holiday.id}><div className=\"holiday-date\"><b>{new Date(`${holiday.holiday_date}T12:00:00`).getDate()}</b><span>{new Intl.DateTimeFormat(\"en\", { month: \"short\" }).format(new Date(`${holiday.holiday_date}T12:00:00`))}</span></div><div><h3>{holiday.name}</h3><p>{prettyDate(holiday.holiday_date)}</p></div><button className=\"text-danger\" onClick={async () => { if (!confirm(`Delete ${holiday.name}?`)) return; try { await remove(`/api/admin/holidays/${holiday.id}`); await load(); notify(\"Holiday deleted\"); } catch (x: any) { notify(x.message, \"error\"); } }}>Delete</button></article>)}{!data.holidays.length && <Empty title=\"No one-off holidays\" text=\"Add public holidays or company-wide non-working dates.\"/>}</section>\n </div>;\n}\n\nfunction TemplateWorkspace({ notify }: any) {\n const [items, setItems] = useState<any[] | null>(null);\n const load = () => request(\"/api/milestone-templates\").then((x) => setItems(x.templates));\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n const deleteTemplate = async (item: any) => {\n if (!confirm(`Delete the “${item.name}” milestone template? Existing project milestones will not be affected.`)) return;\n try { await remove(`/api/admin/milestone-templates/${item.id}`); await load(); notify(\"Milestone template deleted\"); }\n catch (x: any) { notify(x.message, \"error\"); }\n };\n if (!items) return <PageSkeleton rows={4}/>;\n return <div className=\"module-page\"><header className=\"page-heading\"><div><p>Reusable delivery</p><h1>Milestone templates</h1><span>Create repeatable checkpoint sets and apply them inside any project.</span></div></header><div className=\"builder-layout\"><section className=\"builder-form\"><h2>New template</h2><form className=\"stack\" onSubmit={async (e: any) => { e.preventDefault(); const form = e.currentTarget; await post(\"/api/admin/milestone-templates\", Object.fromEntries(new FormData(form))); form.reset(); await load(); notify(\"Milestone template created\"); }}><Field label=\"Template name\"><input name=\"name\" required placeholder=\"Website delivery\"/></Field><Field label=\"Description\"><input name=\"description\" placeholder=\"Optional context\"/></Field><Field label=\"Milestones\" hint=\"One milestone per line\"><textarea name=\"items\" rows={9} required placeholder={\"Discovery\\nDesign approval\\nDevelopment\\nQuality assurance\\nLaunch\"}/></Field><Button>Create template</Button></form></section><section className=\"template-list\">{items.map((x) => <article key={x.id}><header><span>{x.items.length} milestones</span><button className=\"text-danger\" type=\"button\" onClick={() => deleteTemplate(x)}>Delete</button></header><h3>{x.name}</h3><p>{x.description || \"Reusable milestone set\"}</p><ol>{x.items.map((m: any, index: number) => <li key={`${x.id}-${index}`}>{m.title}</li>)}</ol></article>)}{!items.length && <Empty title=\"No templates yet\" text=\"Add your first repeatable milestone sequence.\"/>}</section></div></div>;\n}\n\nfunction Workspace({ actor, config, refreshActor, notify, theme, toggleTheme }: any) {\n const [projects, setProjects] = useState<Project[]>([]), [partners, setPartners] = useState<any[]>([]), [owners, setOwners] = useState<any[]>([]);\n const [ccRecipients, setCcRecipients] = useState<any[]>([]);\n const [archived, setArchived] = useState(false), [view, setView] = useState(\"board\"), [search, setSearch] = useState(\"\");\n const [selected, setSelected] = useState<string | null>(null), [addOpen, setAddOpen] = useState(false);\n const [aiDraft, setAiDraft] = useState<any>(null), [aiNotes, setAiNotes] = useState(\"\"), [aiBusy, setAiBusy] = useState(false);\n const [projectsLoading, setProjectsLoading] = useState(true), [questionCount, setQuestionCount] = useState(0);\n const load = async (showSkeleton = false) => {\n if (showSkeleton) setProjectsLoading(true);\n try {\n const p = await request(`/api/projects?archived=${archived ? 1 : 0}`);\n setProjects(p.projects);\n if (actor.role === \"admin\") {\n request(\"/api/admin/partners\").then((x) => setPartners(x.partners)).catch(() => {});\n request(\"/api/admin/cc-recipients\").then((x) => setCcRecipients(x.recipients)).catch(() => {});\n }\n if (actor.actorType === \"internal\") request(\"/api/user-options\").then((x) => setOwners(x.users)).catch(() => {});\n if (actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) request(\"/api/questions\").then((x) => setQuestionCount(x.questions.length)).catch(() => {});\n } finally {\n if (showSkeleton) setProjectsLoading(false);\n }\n };\n useEffect(() => { load(true).catch((x) => notify(x.message, \"error\")); }, [archived]);\n const visible = projects.filter((p) => `${p.title} ${p.description} ${p.partner_name}`.toLowerCase().includes(search.toLowerCase()));\n const unansweredCount = questionCount;\n const move = async (id: string, status: string) => {\n const item = projects.find((p) => p.id === id);\n if (!item || item.status === status) return;\n try {\n setProjects((all) => all.map((p) => p.id === id ? { ...p, status } : p));\n await patch(`/api/projects/${id}`, { status }); notify(`Moved to ${statusMeta[status].label}`);\n } catch (x: any) { notify(x.message, \"error\"); load(); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); refreshActor(); };\n const mayCreate = actor.actorType === \"partner\" || canActor(actor, \"create_projects\");\n return <div className=\"app-shell\">\n <aside className=\"sidebar\">\n <a className=\"brand\" href=\"/\"><BrandMark/><span>AFLABS <b>PM</b></span></a>\n <nav><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}><Icon name=\"update\"/>Dashboard</button><button className={view === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button>{(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active attention-nav\" : \"attention-nav\"} onClick={() => setView(\"questions\")}><Icon name=\"question\"/>Questions{unansweredCount > 0 && <b>{unansweredCount}</b>}</button>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}><Icon name=\"clock\"/>Recurring</button><button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>{actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}><Icon name=\"note\"/>Proposals</button><button className={view === \"templates\" ? \"active\" : \"\"} onClick={() => setView(\"templates\")}><Icon name=\"milestone\"/>Templates</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}><Icon name=\"clock\"/>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}><Icon name=\"settings\"/>Client branding</button>}</nav>\n <div className=\"sidebar-foot\"><ThemeToggle theme={theme} toggle={toggleTheme}/><div className=\"account\"><span>{initials(actor.name)}</span><div><b>{actor.name}</b><small>{actor.role}</small></div><button onClick={logout} aria-label=\"Sign out\"><Icon name=\"logout\" size={17}/></button></div></div>\n </aside>\n <main className=\"workspace\">\n <div className=\"mobile-nav\"><button className={view === \"dashboard\" ? \"active\" : \"\"} onClick={() => setView(\"dashboard\")}>Metrics</button><button onClick={() => { setView(\"board\"); setArchived(false); }} className={view === \"board\" && !archived ? \"active\" : \"\"}>Projects</button>{(actor.actorType === \"partner\" || (actor.actorType === \"internal\" && canActor(actor, \"manage_comments\"))) && <button className={view === \"questions\" ? \"active\" : \"\"} onClick={() => setView(\"questions\")}>Questions{unansweredCount > 0 ? ` · ${unansweredCount}` : \"\"}</button>}<button className={view === \"recurring\" ? \"active\" : \"\"} onClick={() => setView(\"recurring\")}>Recurring</button><button onClick={() => { setView(\"board\"); setArchived(true); }} className={view === \"board\" && archived ? \"active\" : \"\"}>Archive</button>{actor.role === \"admin\" && <><button className={view === \"proposals\" ? \"active\" : \"\"} onClick={() => setView(\"proposals\")}>Proposals</button><button className={view === \"holidays\" ? \"active\" : \"\"} onClick={() => setView(\"holidays\")}>Holidays</button><button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}>People</button></>}{actor.actorType === \"partner\" && <button className={view === \"branding\" ? \"active\" : \"\"} onClick={() => setView(\"branding\")}>Branding</button>}<button className=\"mobile-theme\" onClick={toggleTheme} aria-label={`Use ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}><Icon name={theme === \"dark\" ? \"sun\" : \"moon\"} size={14}/></button></div>\n {view === \"dashboard\" ? <Dashboard notify={notify} onQuestions={() => setView(\"questions\")}/> : view === \"questions\" ? <QuestionInbox notify={notify} onOpen={setSelected} onResolved={load}/> : view === \"recurring\" ? <RecurringWorkspace actor={actor} partners={partners} owners={owners} notify={notify}/> : view === \"proposals\" ? <ProposalWorkspace partners={partners} owners={owners} notify={notify} onProjectCreated={(id: string) => { load(); setView(\"board\"); setSelected(id); }}/> : view === \"templates\" ? <TemplateWorkspace notify={notify}/> : view === \"holidays\" ? <HolidayWorkspace notify={notify}/> : view === \"directory\" ? <AdminDirectory actor={actor} config={config} projects={projects} notify={notify}/> : view === \"branding\" ? <PartnerBranding notify={notify}/> : <>\n <header className=\"workspace-head\"><div><p>{actor.actorType === \"partner\" ? \"Partner workspace\" : \"Delivery workspace\"}</p><h1>{archived ? \"Archived projects\" : \"Project board\"}</h1><span>{archived ? \"A complete record of work moved out of active delivery.\" : \"Move work forward, keep context close, and make progress visible.\"}</span></div><div className=\"head-actions\"><div className=\"search\"><Icon name=\"search\" size={17}/><input value={search} onChange={(e) => setSearch(e.target.value)} placeholder=\"Search projects\"/></div>{mayCreate && !archived && <Button className=\"new-project-button\" icon=\"plus\" onClick={() => setAddOpen(true)}>New project</Button>}</div></header>\n {projectsLoading ? <BoardSkeleton/> : visible.length ? <Kanban projects={visible} actor={actor} onOpen={setSelected} onMove={move}/> : <Empty title={archived ? \"Archive is empty\" : \"No projects found\"} text={search ? \"Try a different search term.\" : mayCreate ? \"Add the first project to begin the delivery board.\" : \"No projects are assigned to this account.\"} action={mayCreate && !search && !archived ? <Button icon=\"plus\" onClick={() => setAddOpen(true)}>Add project</Button> : null}/>}\n </>}\n </main>\n <Modal open={addOpen} close={() => { setAddOpen(false); setAiDraft(null); }} wide><div className=\"modal-head\"><div><h2>Add a project</h2><p>{actor.actorType === \"partner\" ? \"Submit basic project details. AFLABS will manage delivery status.\" : \"Create manually, or let AI extract a draft from rough notes.\"}</p></div><button className=\"icon-button\" onClick={() => setAddOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\">{actor.role === \"admin\" && <details className=\"ai-project-builder\"><summary><span><Icon name=\"work\"/>Draft this project with AI</span><Icon name=\"chevron\"/></summary><div><Field label=\"Rough project details\"><textarea value={aiNotes} onChange={(e) => setAiNotes(e.target.value)} rows={6} placeholder=\"Paste scope, dates, POC details, pricing, links, credentials and milestones. Timeline entries are intentionally excluded.\"/></Field><Button type=\"button\" variant=\"secondary\" disabled={aiBusy || aiNotes.trim().length < 10} onClick={async () => { setAiBusy(true); try { const result = await post(\"/api/admin/ai/project-draft\", { notes: aiNotes }); setAiDraft(result.draft); notify(\"AI project draft is ready\"); } catch (x: any) { notify(x.message, \"error\"); } finally { setAiBusy(false); } }}>{aiBusy ? \"Extracting…\" : \"Extract details\"}</Button>{aiDraft && <p className=\"ai-result\">Draft populated · {(aiDraft.resources || []).length} resources · {(aiDraft.credentials || []).length} credentials · {(aiDraft.stakeholders || []).length} stakeholders</p>}</div></details>}<ProjectForm key={JSON.stringify(aiDraft || {})} actor={actor} config={config} partners={partners} owners={owners} ccRecipients={ccRecipients} initial={aiDraft || {}} onSave={async (data: any) => { const result = await post(\"/api/projects\", { ...aiDraft, ...data }); setAddOpen(false); setAiDraft(null); setAiNotes(\"\"); await load(); setSelected(result.id); notify(\"Project added\"); }}/></div></Modal>\n <Modal open={Boolean(selected)} close={() => setSelected(null)} wide>{selected && <DetailPanel projectId={selected} actor={actor} owners={owners} partners={partners} close={() => setSelected(null)} refreshList={load} notify={notify}/>}</Modal>\n </div>;\n}\n\nfunction ClientPortal({ actor, notify, theme, setTheme, toggleTheme }: any) {\n const [detail, setDetail] = useState<any>(null), [linksOpen, setLinksOpen] = useState(false), [busy, setBusy] = useState(false);\n const load = () => request(`/api/projects/${actor.projectId}`).then(setDetail);\n useEffect(() => { load().catch((x) => notify(x.message, \"error\")); }, []);\n useEffect(() => {\n const projectTheme = detail?.project?.branding?.theme;\n if (projectTheme === \"light\" || projectTheme === \"dark\") setTheme(projectTheme);\n }, [detail?.project?.branding?.theme]);\n if (!detail) return <div className=\"client-loading\"><div className=\"brand\"><BrandMark/><span>AFLABS <b>PM</b></span></div><div className=\"skeleton client-skeleton\"/></div>;\n const p = detail.project, brand = p.branding;\n const timeline = [\n ...detail.comments.filter((x: any) => !x.parent_id).map((x: any) => ({ ...x, date: x.event_date, timelineType: x.comment_type })),\n ...detail.milestones.map((x: any) => ({ ...x, date: x.completed_date || x.due_date, timelineType: \"milestone\", body: x.description })),\n ].filter((x: any) => x.date).sort((a: any, b: any) => b.date.localeCompare(a.date));\n const submitQuestion = async (e: any) => {\n e.preventDefault(); setBusy(true);\n const form = e.currentTarget;\n try {\n const data: any = Object.fromEntries(new FormData(form));\n await post(`/api/projects/${p.id}/comments`, data);\n form.reset(); await load();\n notify(\"Your question was added\");\n } catch (x: any) { notify(x.message, \"error\"); } finally { setBusy(false); }\n };\n const logout = async () => { await post(\"/api/auth/logout\"); location.reload(); };\n return <main className={`client-portal ${p.status === \"blocked\" ? \"client-blocked\" : \"\"}`} style={{ \"--partner-accent\": brand?.accent_color || \"var(--blue)\" } as any}>\n <header className=\"client-nav\"><div className=\"client-brand\">{brand?.logo_url ? <img src={brand.logo_url} alt={`${brand?.name || \"AFLABS\"} logo`}/> : <span className=\"client-logo\">{initials(brand?.name || \"AFLABS\")}</span>}<div><b>{brand?.name || \"AFLABS\"}</b><small>{brand?.portal_label || \"Project delivery\"}</small></div></div><div className=\"client-nav-actions\"><ThemeToggle theme={theme} toggle={toggleTheme}/><button onClick={logout}>Close project <Icon name=\"logout\" size={15}/></button></div></header>\n <section className=\"client-hero\">{detail.holiday?.is_holiday && <div className=\"client-holiday-banner\"><Icon name=\"sun\" size={18}/><div><b>{detail.holiday.name}</b><span>Today is a non-working day. You can still review the project and send questions.</span></div></div>}<div className=\"client-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}{p.delivery_delay_days > 0 && <em>Forecast +{p.delivery_delay_days} days</em>}</div>{p.status === \"blocked\" && <div className=\"client-blocked-notice\"><Icon name=\"blocker\" size={18}/><div><b>Delivery is currently blocked</b><span>The team is working through an external dependency. The expected delivery date is moving by {p.delivery_delay_days || 1} {p.delivery_delay_days === 1 ? \"day\" : \"days\"}.</span></div></div>}<h1>{p.title}</h1><p>{p.description}</p><div className=\"client-dates\"><span><small>Started</small><b>{prettyDate(p.start_date)}</b></span><Icon name=\"chevron\"/><span><small>{p.delivery_delay_days > 0 ? \"Forecast\" : \"Target\"}</small><b>{prettyDate(p.forecast_end_date || p.end_date)}</b>{p.delivery_delay_days > 0 && <em>Original {prettyDate(p.end_date)}</em>}<strong className={`client-deadline ${deadlineLabel(p.forecast_end_date || p.end_date, p.status).includes(\"overdue\") ? \"overdue\" : \"\"}`}>{deadlineLabel(p.forecast_end_date || p.end_date, p.status)}</strong></span></div></section>\n <section className=\"client-progress-block\"><div className=\"client-progress-copy\"><span>Overall completion</span><b>{p.progress}%</b></div><div className=\"client-progress\"><i style={{ width: `${p.progress}%` }}/><span style={{ left: `${Math.max(2, Math.min(96, p.progress))}%` }}/></div><div className=\"client-stages\"><span className=\"passed\">Project started</span><span className={p.progress >= 50 ? \"passed\" : \"\"}>Core delivery</span><span className={p.progress === 100 ? \"passed\" : \"\"}>Complete</span></div></section>\n <div className=\"client-grid\">\n <section className=\"client-main\"><div className=\"client-section-head\"><div><h2>Project journey</h2><p>{brand?.welcome_message || \"Every meaningful update, in one clear timeline.\"}</p></div></div>\n <div className=\"client-timeline\">{timeline.map((x: any) => {\n const replies = detail.comments.filter((reply: any) => reply.parent_id === x.id);\n if (x.timelineType === \"milestone\") return <article className=\"client-milestone-event\" key={`milestone-${x.id}`}><div className=\"client-node node-milestone\"><Icon name=\"milestone\" size={17}/></div><div><header><span>{x.tag || \"Milestone\"}</span><time>{prettyDate(x.date)}</time></header><div className=\"milestone-callout\"><small>{titleCase(x.status)}</small><h3>{x.title}</h3>{x.body && <p>{x.body}</p>}</div></div></article>;\n if (x.timelineType === \"question\") return <article className=\"client-question-event\" key={`question-${x.id}`}><div className=\"client-node node-question\"><Icon name=\"question\" size={16}/></div><div className=\"client-chat\"><header><span>Client conversation</span><time>{prettyDate(x.date)}</time></header><div className=\"chat-bubble chat-client\"><small>{x.author_name}</small><p>{x.body}</p></div>{replies.map((reply: any) => <div className=\"chat-bubble chat-team\"><small>{reply.author_name} · Project team</small><p>{reply.body}</p></div>)}<span className={x.resolved_at ? \"chat-status resolved\" : \"chat-status\"}>{x.resolved_at ? \"Answered\" : \"Awaiting a response\"}</span></div></article>;\n return <article key={`${x.timelineType}-${x.id}`}><div className={`client-node node-${x.timelineType}`}><Icon name={eventIcons[x.timelineType] || \"note\"} size={16}/></div><div><header><span>{typeLabels[x.timelineType] || titleCase(x.timelineType)}</span><time>{prettyDate(x.date)}</time></header><h3>{x.author_name}</h3>{x.body && <p>{x.body}</p>}</div></article>;\n })}</div>\n {!timeline.length && <Empty title=\"The journey starts here\" text=\"Project updates will appear as the team moves delivery forward.\"/>}\n </section>\n <aside className=\"client-aside\">\n <section className=\"client-panel\"><h2>Milestones</h2><div className=\"client-milestones\">{detail.milestones.map((x: any) => <div className={x.status}><span>{x.status === \"complete\" ? \"✓\" : \"\"}</span><div><b>{x.title}</b><small>{x.status === \"complete\" ? `Completed ${prettyDate(x.completed_date)}` : `Target ${prettyDate(x.due_date)}`}</small></div></div>)}</div>{!detail.milestones.length && <p className=\"muted\">Milestones will appear as they are scheduled.</p>}</section>\n <section className=\"client-panel payment-panel\"><div><span>Payment fulfilled</span><b>{detail.paymentSummary.total ? Math.round(detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%</b></div><div className=\"mini-progress\"><i style={{ width: `${detail.paymentSummary.total ? Math.min(100, detail.paymentSummary.paid / detail.paymentSummary.total * 100) : 0}%` }}/></div><dl><div><dt>Received</dt><dd>{money(detail.paymentSummary.paid, p.currency)}</dd></div><div><dt>Pending</dt><dd>{money(detail.paymentSummary.pending, p.currency)}</dd></div></dl></section>\n {detail.links.length > 0 && <section className=\"client-panel links-panel\"><button onClick={() => setLinksOpen(!linksOpen)}><div><Icon name=\"link\"/><span><b>Project links</b><small>{detail.links.length} shared resources</small></span></div><Icon name=\"chevron\"/></button>{linksOpen && <div className=\"client-links\">{detail.links.map((x: any) => <a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}<span>↗</span></a>)}</div>}</section>}\n <section className=\"client-panel question-panel\"><h2>Ask the project team</h2><p>Select who you are so the team can answer in context.</p>{detail.holiday?.is_holiday && <div className=\"holiday-question-note\"><Icon name=\"clock\" size={16}/><span>You can send this now. The team may reply on the next working day.</span></div>}<form onSubmit={submitQuestion} className=\"stack\"><Field label=\"I am\"><select name=\"stakeholder_id\" required><option value=\"\">Select stakeholder</option>{detail.stakeholders.map((x: any) => <option value={x.id}>{x.name} · {x.role}</option>)}</select></Field><Field label=\"Question or comment\"><textarea name=\"body\" required rows={3} placeholder=\"What would you like to clarify?\"/></Field><Button disabled={busy} icon=\"message\">{busy ? \"Sending…\" : \"Send to team\"}</Button></form></section>\n {brand?.contact_info && <p className=\"partner-contact\">Managed by {brand.name} · {brand.contact_info}</p>}\n </aside>\n </div>\n <footer className=\"client-footer\"><span>{brand?.name || \"AFLABS\"} PM</span>{brand?.website_url ? <a href={brand.website_url} target=\"_blank\" rel=\"noreferrer\"><Icon name=\"globe\" size={13}/> Visit website</a> : <span>Project delivery, made visible.</span>}</footer>\n </main>;\n}\n\nexport function App() {\n const clientToken = location.pathname.match(/^\\/client\\/([^/]+)/)?.[1];\n const [config, setConfig] = useState<any>(null), [actor, setActor] = useState<Actor | null | undefined>(undefined), [toast, setToast] = useState<any>(null);\n const [theme, setTheme] = useState(() => {\n const saved = localStorage.getItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\");\n return saved === \"dark\" || saved === \"light\" ? saved : clientToken ? \"light\" : matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n });\n const notify = (message: string, kind = \"success\") => setToast({ message, kind });\n const refresh = async () => {\n const cfg = await request(\"/api/config\");\n clientCacheEnabled = cfg.cacheEnabled !== false;\n if (!clientCacheEnabled) apiCache.clear();\n setConfig(cfg); setActor(cfg.actor ?? null);\n };\n useEffect(() => {\n document.documentElement.dataset.theme = theme;\n localStorage.setItem(clientToken ? \"aflabs_client_theme\" : \"aflabs_theme\", theme);\n }, [theme, clientToken]);\n useEffect(() => { refresh().catch((x) => { setConfig({ initialized: true }); setActor(null); notify(x.message, \"error\"); }); }, []);\n if (!config || actor === undefined) return <div className=\"app-loading\"><div className=\"brand brand-large\"><BrandMark large/><span>AFLABS <b>PM</b></span></div><div className=\"loading-line\"><i/></div></div>;\n const toggleTheme = () => setTheme((current) => current === \"dark\" ? \"light\" : \"dark\");\n return <><NetworkActivity/><Toast value={toast} clear={() => setToast(null)}/>{!config.initialized ? <Bootstrap onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : !actor ? <Login clientToken={clientToken} onDone={refresh} theme={theme} toggleTheme={toggleTheme}/> : actor.actorType === \"client\" ? <ClientPortal actor={actor} notify={notify} theme={theme} setTheme={setTheme} toggleTheme={toggleTheme}/> : <Workspace actor={actor} config={config} refreshActor={refresh} notify={notify} theme={theme} toggleTheme={toggleTheme}/>}</>;\n}\n",[],[182,276,278],"10f61a74-b9f9-436c-9448-3524b7b0a8e1",["D",1785324724390],[208,209],[182,276],["D",1785324724390],[207,210,211,212,213],[182],["D",1785343198085],[],[188],["D",1785324724390],["D",1789579918261],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":57,"_110":111,"_112":49},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":45,"_103":104},"ctx",{"_83":-5,"_135":334,"_335":336,"_337":338,"_339":49,"_340":49,"_341":49,"_342":25,"_343":-5,"_344":-7,"_345":-7,"_346":64,"_347":49,"_348":49,"_349":-5,"_350":49,"_351":49,"_352":49,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":91,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Diff · v100