AFLABS PM

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_285":286,"_287":288},"routes/_app.x.$handle.$name",{"_105":104,"_32":45,"_114":91,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":60,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","019fada5-614d-738d-bbb2-7d56377a4366","name","index.html","fileType","content","\n\n \n \n \n \n \n AFLABS PM\n \n \n \n \n

\n \n \n \n\n","\n\n \n \n \n \n \n AFLABS PM\n \n \n \n \n

\n \n \n \n\n","createdAt",["D",1785328256802],"branchVersion","branchId","ec297ab1-9bec-46a6-a3e9-7163c0e2fcfa","id","754e49f1-03b3-49a5-b751-be0ab27dd211","aflabs-pm",["D",1785324724390],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AFLABS PM — projects, partners, and client timelines","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7fb3e06c-d9ab-432f-445c-6f2687afb500/square512?exp=1789581599&sig=73ed4bf161d066330818752d0ee9f74b0b3b6296042180f3cf025b63558acdb4","1c0af5f4-5486-4207-b370-2ccd83bc1dcf","pinnedFileId","019fada5-614d-738d-bbb2-8ce609465f5b","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f90d7-9872-7518-b6a7-7f6420c76125","tursoName","754e49f103b349a5b751be0ab27dd211","tursoHostname","754e49f103b349a5b751be0ab27dd211-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789492855745],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},"branch",{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"isOwned",122,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","alshell7","handle","displayName","alshell 7","avatar","https://lh3.googleusercontent.com/a/ACg8ocIgzGkcs1h98if29Hwf_aAP4jTjWQLgwQAaxKmdWUK166qTecxnAw=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":280,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":281,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":282,"_85":283,"_87":284,"_89":25},"tree",[197,205,207,208],"files",[197,198,199,200,201,202,203,204,205,206,207,208],"counts",{"_185":64,"_186":187,"_188":64,"_189":190,"_191":192},"contents",[150,151,152,153],"upstreamProject",{"_43":99,"_32":145,"_52":146,"_54":147,"_49":50,"_83":148},"upstreamBranch",{"_43":94,"_38":138,"_139":140,"_32":91,"_92":99,"_13":141,"_93":-5,"_95":-5,"_142":143,"_47":-5,"_89":25,"_49":50,"_103":144,"_65":101,"_102":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1",{"_105":144,"_113":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_43":180,"_32":181,"_30":182,"_156":-5,"_41":42,"_40":170,"_158":60,"_38":183,"_13":64,"_34":178,"_35":-5,"_24":25,"_163":-5,"_27":184},{"_43":173,"_32":174,"_30":175,"_156":-5,"_41":42,"_40":176,"_158":60,"_38":177,"_13":64,"_34":178,"_35":-5,"_24":25,"_163":-5,"_27":179},{"_43":165,"_32":166,"_30":167,"_156":-5,"_41":42,"_40":168,"_158":25,"_38":169,"_13":170,"_34":20,"_35":171,"_24":25,"_163":-5,"_27":172},{"_43":154,"_32":155,"_30":58,"_156":-5,"_41":42,"_40":157,"_158":25,"_38":159,"_13":160,"_34":161,"_35":162,"_24":25,"_163":45,"_27":164},"e711fc30-812a-4d58-8f03-12c966bd0bb8","index.ts","parentId",15,"latest",["D",1785328240030],5,"http","import { createClient } from \"npm:@libsql/client/web\";\nimport { Hono } from \"npm:hono\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\ntype Actor = {\n actorType: \"internal\" | \"partner\" | \"client\";\n actorId: string;\n projectId?: string | null;\n name: string;\n role: string;\n permissions: Record;\n};\n\nconst env = {\n url: Deno.env.get(\"TURSO_DATABASE_URL\") ?? \"\",\n token: Deno.env.get(\"TURSO_AUTH_TOKEN\") ?? \"\",\n session: Deno.env.get(\"SESSION_SECRET\") ?? \"\",\n bootstrap: Deno.env.get(\"APP_BOOTSTRAP_TOKEN\") ?? \"\",\n deletion: Deno.env.get(\"APP_DELETE_TOKEN\") ?? \"\",\n};\nconst db = createClient({ url: env.url, authToken: env.token });\nconst app = new Hono();\nconst statuses = [\"backlog\", \"todo\", \"in-progress\", \"blocked\", \"done\"];\nconst projectTypes = [\"Billable\", \"R&D\", \"Community\"];\nconst commentTypes = [\"update\", \"meeting\", \"blocker\", \"major-work\", \"mail-sent\", \"mail-received\", \"payment\", \"question\", \"note\"];\nconst permissionDefinitions = [\n [\"view_projects\", \"View assigned projects\"],\n [\"create_projects\", \"Create projects\"],\n [\"edit_projects\", \"Edit project details\"],\n [\"move_projects\", \"Move projects on the board\"],\n [\"archive_projects\", \"Archive and restore projects\"],\n [\"manage_links\", \"Manage project links\"],\n [\"view_credentials\", \"View credentials\"],\n [\"manage_credentials\", \"Manage credentials\"],\n [\"manage_comments\", \"Add updates and answer questions\"],\n [\"manage_milestones\", \"Manage milestones\"],\n [\"manage_stakeholders\", \"Manage stakeholders\"],\n [\"manage_payments\", \"Record and remove payments\"],\n] as const;\nconst fullPermissions = Object.fromEntries(permissionDefinitions.map(([key]) => [key, true]));\nconst userDefaults = {\n view_projects: true, create_projects: false, edit_projects: true,\n move_projects: true, archive_projects: false, manage_links: true,\n view_credentials: false, manage_credentials: false, manage_comments: true,\n manage_milestones: true, manage_stakeholders: true, manage_payments: false,\n};\nconst defaultBranding = {\n name: \"AFLABS\",\n logo_url: \"/frontend/logo.png\",\n accent_color: \"#8edb11\",\n contact_info: \"\",\n portal_label: \"Project delivery\",\n welcome_message: \"Every meaningful update, in one clear timeline.\",\n};\n\nconst now = () => new Date().toISOString();\nconst uid = () => crypto.randomUUID();\nconst str = (value: unknown) => String(value ?? \"\").trim();\nconst int = (value: unknown) => value ? 1 : 0;\nconst parseJson = (value: unknown, fallback: T): T => {\n try { return value ? JSON.parse(String(value)) : fallback; } catch { return fallback; }\n};\nasync function sha(value: string) {\n const raw = await crypto.subtle.digest(\"SHA-256\", new TextEncoder().encode(value));\n return [...new Uint8Array(raw)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\");\n}\nconst hashPin = (phone: string, pin: string) => sha(`${env.session}:pin:${phone}:${pin}`);\nfunction phone(value: unknown) {\n let p = str(value).replace(/[()\\s-]/g, \"\");\n if (!p.startsWith(\"+\") && /^\\d{10}$/.test(p)) p = `+91${p}`;\n if (!/^\\+91[6-9]\\d{9}$/.test(p) && !/^\\+9665\\d{8}$/.test(p) && !/^\\+9715\\d{8}$/.test(p)) {\n throw new Error(\"Use a valid India, Saudi Arabia, or UAE mobile number\");\n }\n return p;\n}\nfunction pin(value: unknown) {\n const p = str(value);\n if (!/^\\d{4,8}$/.test(p)) throw new Error(\"PIN must contain 4–8 digits\");\n return p;\n}\nfunction color(value: unknown) {\n const c = str(value);\n return /^(#[0-9a-fA-F]{6}|oklch\$[^)]+\$)$/.test(c) ? c : \"\";\n}\nconst admin = (a: Actor) => a.actorType === \"internal\" && a.role === \"admin\";\nconst can = (a: Actor, key: string) => admin(a) || a.permissions[key] === true;\nfunction requireCan(a: Actor, key: string) {\n if (!can(a, key)) throw new Error(\"You do not have permission for this action\");\n}\nasync function body(c: any) {\n if (!(c.req.header(\"content-type\") ?? \"\").includes(\"application/json\")) throw new Error(\"JSON body required\");\n return await c.req.json();\n}\n\nlet schema: Promise | null = null;\nasync function migrate() {\n if (!env.url || !env.token) throw new Error(\"Turso database environment variables are missing\");\n if (!env.session || !env.bootstrap || !env.deletion) throw new Error(\"Application secret environment variables are missing\");\n if (!schema) schema = db.batch([\n `CREATE TABLE IF NOT EXISTS internal_users (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT NOT NULL UNIQUE, pin_hash TEXT NOT NULL,\n role TEXT NOT NULL CHECK(role IN ('admin','user')), permissions TEXT NOT NULL DEFAULT '{}',\n all_project_access INTEGER NOT NULL DEFAULT 1, active INTEGER NOT NULL DEFAULT 1,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS partners (\n id TEXT PRIMARY KEY, name TEXT NOT NULL, phone TEXT NOT NULL UNIQUE, pin_hash TEXT NOT NULL,\n brand_name TEXT, logo_url TEXT, accent_color TEXT, contact_info TEXT,\n active INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS projects (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, description TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'backlog', archived INTEGER NOT NULL DEFAULT 0,\n start_date TEXT, end_date TEXT, project_type TEXT NOT NULL DEFAULT 'Billable',\n partner_id TEXT REFERENCES partners(id), regular_cost REAL NOT NULL DEFAULT 0,\n partner_cost REAL NOT NULL DEFAULT 0, currency TEXT NOT NULL DEFAULT 'INR',\n progress INTEGER NOT NULL DEFAULT 0, client_token TEXT NOT NULL UNIQUE,\n client_pin TEXT NOT NULL, commission_document_url TEXT,\n created_by_type TEXT NOT NULL, created_by_id TEXT NOT NULL,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS user_project_access (\n user_id TEXT NOT NULL REFERENCES internal_users(id) ON DELETE CASCADE,\n project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n PRIMARY KEY(user_id, project_id))`,\n `CREATE TABLE IF NOT EXISTS project_links (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n label TEXT NOT NULL, url TEXT NOT NULL, link_type TEXT NOT NULL DEFAULT 'reference',\n client_visible INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS project_credentials (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n label TEXT NOT NULL, username TEXT, secret TEXT, url TEXT, notes TEXT,\n created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS stakeholders (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n name TEXT NOT NULL, phone TEXT NOT NULL, role TEXT NOT NULL DEFAULT '', created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS milestones (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n title TEXT NOT NULL, tag TEXT NOT NULL DEFAULT 'Milestone', description TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'upcoming', due_date TEXT, completed_date TEXT,\n client_visible INTEGER NOT NULL DEFAULT 1, created_at TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS comments (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n parent_id TEXT REFERENCES comments(id), author_type TEXT NOT NULL, author_id TEXT,\n author_name TEXT NOT NULL, stakeholder_id TEXT REFERENCES stakeholders(id),\n body TEXT NOT NULL, comment_type TEXT NOT NULL DEFAULT 'update',\n visibility TEXT NOT NULL DEFAULT 'both', event_date TEXT NOT NULL,\n resolved_at TEXT, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS payments (\n id TEXT PRIMARY KEY, project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,\n amount REAL NOT NULL, currency TEXT NOT NULL, paid_date TEXT NOT NULL,\n note TEXT NOT NULL DEFAULT '', created_by_type TEXT NOT NULL, created_by_id TEXT,\n created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS sessions (\n token_hash TEXT PRIMARY KEY, actor_type TEXT NOT NULL, actor_id TEXT NOT NULL,\n project_id TEXT, expires_at TEXT NOT NULL, created_at TEXT NOT NULL)`,\n `CREATE TABLE IF NOT EXISTS activity_reads (\n actor_type TEXT NOT NULL, actor_id TEXT NOT NULL, project_id TEXT NOT NULL,\n last_read_at TEXT NOT NULL, PRIMARY KEY(actor_type, actor_id, project_id))`,\n `CREATE TABLE IF NOT EXISTS app_settings (\n setting_key TEXT PRIMARY KEY, setting_value TEXT NOT NULL, updated_at TEXT NOT NULL)`,\n \"CREATE INDEX IF NOT EXISTS idx_projects_status ON projects(status, archived)\",\n \"CREATE INDEX IF NOT EXISTS idx_comments_project_date ON comments(project_id, event_date)\",\n \"CREATE INDEX IF NOT EXISTS idx_sessions_expiry ON sessions(expires_at)\",\n ]).then(() => undefined).catch((e) => { schema = null; throw e; });\n return schema;\n}\n\nasync function newSession(c: any, actorType: Actor[\"actorType\"], actorId: string, projectId: string | null = null) {\n const raw = `${uid()}${uid()}`.replaceAll(\"-\", \"\");\n const tokenHash = await sha(`${env.session}:session:${raw}`);\n await db.execute({\n sql: \"INSERT INTO sessions (token_hash,actor_type,actor_id,project_id,expires_at,created_at) VALUES (?,?,?,?,?,?)\",\n args: [tokenHash, actorType, actorId, projectId, new Date(Date.now() + 12096e5).toISOString(), now()],\n });\n setCookie(c, \"aflabs_session\", raw, { httpOnly: true, secure: true, sameSite: \"Lax\", path: \"/\", maxAge: 1209600 });\n}\nasync function session(c: any): Promise {\n const raw = getCookie(c, \"aflabs_session\");\n if (!raw) return null;\n const tokenHash = await sha(`${env.session}:session:${raw}`);\n const rs = await db.execute({ sql: \"SELECT * FROM sessions WHERE token_hash=? AND expires_at>?\", args: [tokenHash, now()] });\n const s = rs.rows[0] as any;\n if (!s) return null;\n if (s.actor_type === \"internal\") {\n const r = await db.execute({ sql: \"SELECT * FROM internal_users WHERE id=? AND active=1\", args: [s.actor_id] });\n const u = r.rows[0] as any;\n return u ? { actorType: \"internal\", actorId: String(u.id), name: String(u.name), role: String(u.role), permissions: u.role === \"admin\" ? fullPermissions : parseJson(u.permissions, {}) } : null;\n }\n if (s.actor_type === \"partner\") {\n const r = await db.execute({ sql: \"SELECT * FROM partners WHERE id=? AND active=1\", args: [s.actor_id] });\n const p = r.rows[0] as any;\n return p ? { actorType: \"partner\", actorId: String(p.id), name: String(p.name), role: \"partner\", permissions: {} } : null;\n }\n const r = await db.execute({ sql: \"SELECT id FROM projects WHERE id=?\", args: [s.project_id] });\n return r.rows[0] ? { actorType: \"client\", actorId: String(s.actor_id), projectId: String(s.project_id), name: \"Client\", role: \"client\", permissions: {} } : null;\n}\nasync function actor(c: any) {\n const a = await session(c);\n if (!a) throw new Error(\"AUTH_REQUIRED\");\n return a;\n}\nasync function allowedProject(projectId: string, a: Actor) {\n let sql = `SELECT p.*, pa.name partner_name, pa.brand_name, pa.logo_url partner_logo_url,\n pa.accent_color partner_accent_color, pa.contact_info partner_contact_info\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id WHERE p.id=?`;\n const args: any[] = [projectId];\n if (a.actorType === \"partner\") { sql += \" AND p.partner_id=?\"; args.push(a.actorId); }\n else if (a.actorType === \"client\") { sql += \" AND p.id=?\"; args.push(a.projectId ?? \"\"); }\n else if (!admin(a)) {\n const access = await db.execute({ sql: \"SELECT all_project_access FROM internal_users WHERE id=?\", args: [a.actorId] });\n if (!Number((access.rows[0] as any)?.all_project_access)) {\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 }\n return (await db.execute({ sql, args })).rows[0] as any;\n}\nasync function getClientBranding() {\n const result = await db.execute({\n sql: \"SELECT setting_value FROM app_settings WHERE setting_key='client_branding'\",\n args: [],\n });\n return { ...defaultBranding, ...parseJson((result.rows[0] as any)?.setting_value, {}) };\n}\nfunction present(p: any, a: Actor) {\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, client_cost: Number(p.partner_id ? p.partner_cost : p.regular_cost),\n branding: p.partner_id ? {\n name: p.brand_name || p.partner_name, logo_url: p.partner_logo_url,\n accent_color: p.partner_accent_color, contact_info: p.partner_contact_info,\n } : null,\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 });\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 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.get(\"/api/health\", (c) => c.json({ ok: true }));\napp.get(\"/api/config\", async (c) => {\n const r = await db.execute(\"SELECT COUNT(*) count FROM internal_users WHERE role='admin' AND active=1\");\n return c.json({\n initialized: Number((r.rows[0] as any)?.count) > 0,\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), 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)) throw new Error(\"Invalid phone number or PIN\");\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), 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)) throw new Error(\"Invalid phone number or PIN\");\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 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)) throw new Error(\"Invalid project link or PIN\");\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) }));\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 = `SELECT p.*,pa.name partner_name,\n COALESCE((SELECT SUM(amount) FROM payments y WHERE y.project_id=p.id),0) paid_amount,\n COALESCE((SELECT COUNT(*) FROM comments m WHERE m.project_id=p.id AND m.created_at>\n COALESCE((SELECT last_read_at FROM activity_reads r WHERE r.actor_type=? AND r.actor_id=? AND r.project_id=p.id),'1970-01-01')),0) unread_count\n FROM projects p LEFT JOIN partners pa ON pa.id=p.partner_id 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 (!admin(a)) {\n const access = await db.execute({ sql: \"SELECT all_project_access FROM internal_users WHERE id=?\", args: [a.actorId] });\n if (!Number((access.rows[0] as any)?.all_project_access)) {\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 }\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) => ({ ...present(p, a), paid_amount: Number(p.paid_amount), unread_count: Number(p.unread_count) })) });\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 await db.execute({\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 created_by_type,created_by_id,created_at,updated_at) VALUES(?,?,?,?,0,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [projectId, title, str(b.description), status, 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 Number(b.partner_cost) || 0, str(b.currency) || \"INR\", admin(a) ? Math.max(0, Math.min(100, Number(b.progress) || 0)) : 0,\n `${uid()}${uid()}`.replaceAll(\"-\", \"\"), clientPin, str(b.commission_document_url) || null,\n a.actorType, a.actorId, t, t],\n });\n if (a.actorType === \"internal\" && !admin(a)) await db.execute({ sql: \"INSERT OR IGNORE INTO user_project_access(user_id,project_id) VALUES(?,?)\", args: [a.actorId, projectId] });\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] = 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\")\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 ]);\n const paid = payments.rows.reduce((sum: number, x: any) => sum + Number(x.amount), 0);\n const total = Number(p.partner_id ? p.partner_cost : p.regular_cost);\n const project = present(p, a);\n if (!project.branding) project.branding = await getClientBranding();\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: comments.rows,\n payments: a.actorType === \"client\" ? [] : payments.rows,\n paymentSummary: { total, paid, pending: Math.max(0, total - paid), currency: p.currency },\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 await db.execute({\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=?,updated_at=? WHERE id=?`,\n args: [\n str(b.title ?? p.title) || p.title, str(b.description ?? p.description), b.status ?? p.status,\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 b.partner_id === undefined ? p.partner_id : str(b.partner_id) || null,\n b.regular_cost === undefined ? Number(p.regular_cost) : Number(b.regular_cost) || 0,\n b.partner_cost === undefined ? Number(p.partner_cost) : Number(b.partner_cost) || 0,\n str(b.currency ?? p.currency) || \"INR\",\n b.progress === undefined ? Number(p.progress) : Math.max(0, Math.min(100, Number(b.progress) || 0)),\n b.client_pin === undefined ? p.client_pin : pin(b.client_pin),\n b.commission_document_url === undefined ? p.commission_document_url : str(b.commission_document_url) || null,\n now(), p.id,\n ],\n });\n return c.json({ ok: true });\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 if (str((await body(c)).deleteToken) !== env.deletion) throw new Error(\"Invalid delete token\");\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 payments 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 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 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();\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: [uid(), p.id, str(b.parent_id) || null, a.actorType, a.actorId, authorName, stakeholderId, text,\n a.actorType === \"client\" ? \"question\" : commentTypes.includes(b.comment_type) ? b.comment_type : \"update\",\n a.actorType === \"client\" ? \"both\" : [\"admin\", \"client\", \"both\"].includes(b.visibility) ? b.visibility : \"both\",\n str(b.event_date) || t.slice(0, 10), t],\n });\n return c.json({ ok: true }, 201);\n});\napp.post(\"/api/comments/:id/resolve\", 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_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 if (!item || !await allowedProject(String(item.project_id), a)) throw new Error(\"Comment not found\");\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 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(?,?,?,'internal',?,?,?,'update','both',?,?)`,\n args: [uid(), item.project_id, item.id, a.actorId, a.name, str(b.reply), t.slice(0, 10), t],\n });\n await db.batch(statements);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/projects/:id/links\", 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 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.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 if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_credentials\");\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.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 if (a.actorType !== \"internal\") throw new Error(\"This action is not available\");\n requireCan(a, \"manage_stakeholders\");\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.name)) throw new Error(\"Stakeholder name is required\");\n await db.execute({\n sql: \"INSERT INTO stakeholders(id,project_id,name,phone,role,created_at) VALUES(?,?,?,?,?,?)\",\n args: [uid(), p.id, str(b.name), phone(b.phone), str(b.role), now()],\n });\n return c.json({ ok: true }, 201);\n});\napp.delete(\"/api/stakeholders/: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_stakeholders\");\n await db.execute({ sql: \"DELETE FROM stakeholders WHERE id=?\", args: [c.req.param(\"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);\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: [uid(), 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,created_at)\n VALUES(?,?,?,?,?,?,'payment','both',?,?)`,\n args: [uid(), p.id, a.actorType, a.actorId, a.name, note || `Received ${p.currency} ${amount.toLocaleString()}`, date, 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.execute({ sql: \"DELETE FROM payments WHERE id=?\", args: [c.req.param(\"id\")] });\n return c.json({ ok: true });\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] = await Promise.all([\n db.execute(\"SELECT id,name,phone,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 ]);\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 })) });\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 = role === \"admin\" || b.all_project_access !== false;\n const statements: any[] = [{\n sql: \"INSERT INTO internal_users(id,name,phone,pin_hash,role,permissions,all_project_access,active,created_at,updated_at) VALUES(?,?,?,?,?,?,?,1,?,?)\",\n args: [userId, str(b.name) || \"Team member\", p, 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 = role === \"admin\" ? true : 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=?,pin_hash=?,role=?,permissions=?,all_project_access=?,active=?,updated_at=? WHERE id=?\",\n args: [str(b.name ?? u.name) || u.name, p, 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 if (str((await body(c)).deleteToken) !== env.deletion) throw new Error(\"Invalid delete token\");\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 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: \"DELETE FROM internal_users WHERE id=?\", args: [u.id] },\n ]);\n return c.json({ ok: true });\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 portal_label: str(b.portal_label) || defaultBranding.portal_label,\n welcome_message: str(b.welcome_message) || defaultBranding.welcome_message,\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 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,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) || str(b.name) || \"Partner\", str(b.logo_url) || null, color(b.accent_color) || null,\n str(b.contact_info) || 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=?,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.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 if (str((await body(c)).deleteToken) !== env.deletion) throw new Error(\"Invalid delete token\");\n const linked = await db.execute({ sql: \"SELECT COUNT(*) count FROM projects WHERE partner_id=?\", args: [c.req.param(\"id\")] });\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(\"/source\", (c) => c.redirect(parseVal().links.self.val));\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",[155],"91f4d63a-cca9-41ba-a2d9-7ee69c48ae65","README.md","019fada5-614d-738d-bbb2-8864d623b645",8,["D",1785326048205],1,"# 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- External 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- `TURSO_DATABASE_URL`\n- `TURSO_AUTH_TOKEN`\n- `APP_BOOTSTRAP_TOKEN`\n- `APP_DELETE_TOKEN`\n- `SESSION_SECRET`\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 Val itself also contains a copy of this README and exposes a required “View source” link.\n",[166],"df509fd1-3004-4668-a9be-ed6d1763e40b","scripts","f6625940-f161-4cf0-b862-081103dfd8b4",14,["D",1785327805216],"directory",[174],"c48219a0-f722-4a49-9b6b-09e7d2e33882","frontend","019fada5-614d-738d-bbb2-876b78247f7e",["D",1785324724390],[181],"pulls","branches",10,"forks","envVars",{"_193":195,"_196":64},"connections",{"_193":64,"_194":64},"count","unfilledCount",12,"emptyCount",{"_43":180,"_32":181,"_30":182,"_156":-5,"_41":42,"_40":170,"_158":60,"_38":277,"_13":64,"_34":178,"_35":-5,"_24":25,"_163":-5,"_210":278,"_27":279},{"_43":273,"_32":264,"_30":259,"_156":182,"_41":42,"_40":170,"_158":60,"_38":274,"_13":64,"_34":178,"_35":-5,"_24":25,"_163":-5,"_210":275,"_27":276},{"_43":265,"_32":266,"_30":267,"_156":259,"_41":42,"_40":268,"_158":25,"_38":269,"_13":245,"_34":220,"_35":270,"_24":25,"_163":-5,"_210":271,"_27":272},{"_43":256,"_32":257,"_30":258,"_156":259,"_41":42,"_40":170,"_158":60,"_38":260,"_13":64,"_34":220,"_35":261,"_24":25,"_163":-5,"_210":262,"_27":263},{"_43":248,"_32":249,"_30":250,"_156":182,"_41":42,"_40":251,"_158":60,"_38":252,"_13":170,"_34":20,"_35":253,"_24":25,"_163":-5,"_210":254,"_27":255},{"_43":243,"_32":33,"_30":31,"_156":182,"_41":42,"_40":14,"_158":25,"_38":244,"_13":245,"_34":20,"_35":37,"_24":25,"_163":-5,"_210":246,"_27":247},{"_43":235,"_32":236,"_30":237,"_156":182,"_41":42,"_40":238,"_158":60,"_38":239,"_13":170,"_34":220,"_35":240,"_24":25,"_163":-5,"_210":241,"_27":242},{"_43":227,"_32":228,"_30":229,"_156":182,"_41":42,"_40":230,"_158":25,"_38":231,"_13":170,"_34":20,"_35":232,"_24":25,"_163":-5,"_210":233,"_27":234},{"_43":173,"_32":174,"_30":175,"_156":-5,"_41":42,"_40":176,"_158":60,"_38":224,"_13":64,"_34":178,"_35":-5,"_24":25,"_163":-5,"_210":225,"_27":226},{"_43":216,"_32":217,"_30":218,"_156":175,"_41":42,"_40":176,"_158":25,"_38":219,"_13":64,"_34":220,"_35":221,"_24":25,"_163":-5,"_210":222,"_27":223},{"_43":165,"_32":166,"_30":167,"_156":-5,"_41":42,"_40":168,"_158":25,"_38":213,"_13":170,"_34":20,"_35":171,"_24":25,"_163":-5,"_210":214,"_27":215},{"_43":154,"_32":155,"_30":58,"_156":-5,"_41":42,"_40":157,"_158":25,"_38":209,"_13":160,"_34":161,"_35":162,"_24":25,"_163":45,"_210":211,"_27":212},["D",1785328240030],"children",[],[155],["D",1785326048205],[],[166],"1d04b0f5-83d2-436a-9e5c-ee8d3e3699da","db-audit.ts","4be4e316-8b48-11f1-9a71-1607ee4eb77e",["D",1785327805216],"script","import { createClient } from \"npm:@libsql/client/web\";\n\nconst db = createClient({\n url: Deno.env.get(\"TURSO_DATABASE_URL\") ?? \"\",\n authToken: Deno.env.get(\"TURSO_AUTH_TOKEN\") ?? \"\",\n});\n\nconst tables = [\"internal_users\",\"partners\",\"projects\",\"comments\",\"payments\",\"milestones\",\"stakeholders\",\"project_links\",\"project_credentials\",\"sessions\",\"activity_reads\",\"user_project_access\",\"app_settings\"];\nconst counts: Record = {};\nfor (const table of tables) {\n try {\n const result = await db.execute(`SELECT COUNT(*) AS count FROM ${table}`);\n counts[table] = Number(result.rows[0]?.count ?? 0);\n } catch (error) {\n counts[table] = \"missing\";\n }\n}\nconsole.log(JSON.stringify(counts));\nexport default counts;\n",[],[174,217],["D",1785327805216],[206],[174],"6c22f859-5bbf-44f7-8dc9-a313b074b3aa","styles.css","2bc34f40-8b44-11f1-9ddb-1607ee4eb77e",17,["D",1785328251519],":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 { color: white; 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\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\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.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.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.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-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: 74px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 12px; display: flex; gap: 10px; align-items: center; }\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 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.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.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\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-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-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 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.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-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",[],[181,228],"b1258ecb-87f0-4d5c-8448-d7d85848d499","index.tsx","019fada5-614d-738d-bbb2-82a7c44fa0b5",6,["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",[],[181,236],"9574fc7d-d60d-44c0-9a06-b24e3942dd62",["D",1785328256802],3,[],[181,33],"792cd95e-3b1b-44e6-8f8a-d1be5f910593","favicon.svg","019fada5-614d-738d-bbb2-7b9783b42d7c",7,["D",1785326044201],"\n\n",[],[181,249],"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",[],[181,264,257],"components","c43423a3-e7d9-414c-bef3-cb5bc01eb82a","App.tsx","019fada5-614d-738d-bbb2-6e31626896ea",16,["D",1785328246334],"/** @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\",\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\nasync function request(path: string, options: RequestInit = {}) {\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}\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 initials = (name = \"AFLABS\") => name.split(/\\s+/).slice(0, 2).map((part) => part[0]).join(\"\").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 };\n return ;\n}\n\nfunction Button({ children, variant = \"primary\", icon, className = \"\", ...props }: any) {\n return ;\n}\nfunction Field({ label, hint, children }: any) {\n return {label}{children}{hint && {hint}};\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 }: any) {\n return

\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 }: { onDone: () => void }) {\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 }: { clientToken?: string; onDone: () => void }) {\n const initial = clientToken ? \"client\" : \"internal\";\n const [mode, setMode] = useState(initial), [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 {\n await post(mode === \"partner\" ? \"/api/auth/partner\" : mode === \"client\" ? \"/api/auth/client\" : \"/api/auth/login\", {\n ...data, token: clientToken,\n });\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, onSave, compact = false }: any) {\n const [busy, setBusy] = useState(false), [error, setError] = useState(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const form = e.currentTarget, data: any = Object.fromEntries(new FormData(form));\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 {!partner && !compact && <>\n <Field label=\"Status\"><select name=\"status\">{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=\"Start date\"><input name=\"start_date\" type=\"date\"/></Field>\n <Field label=\"Target end date\"><input name=\"end_date\" type=\"date\"/></Field>\n <Field label=\"Partner\"><select name=\"partner_id\"><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\"><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=\"0\"/></Field>\n <Field label=\"Partner-managed client cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\"0.01\" defaultValue=\"0\"/></Field>\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 <Field label=\"Commission document URL\"><input name=\"commission_document_url\" type=\"url\" placeholder=\"https://…\"/></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 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.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 {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 <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(\"\");\n const submit = async (e: any) => {\n e.preventDefault(); setBusy(true); setError(\"\");\n const data: any = Object.fromEntries(new FormData(e.currentTarget));\n data.client_visible = data.client_visible === \"on\";\n try {\n const paths: any = {\n link: \"links\", credential: \"credentials\", stakeholder: \"stakeholders\",\n milestone: \"milestones\", payment: \"payments\", comment: \"comments\",\n };\n await post(`/api/projects/${projectId}/${paths[kind]}`, data);\n e.currentTarget.reset(); done();\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 {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 </>}\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>reference</option><option>document</option><option>contract</option><option>MOU</option><option>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\"/></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><Field label=\"Mobile number\"><input name=\"phone\" required placeholder=\"+91…\"/></Field><Field label=\"Role\"><input name=\"role\" placeholder=\"Founder, SPOC…\"/></Field></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>upcoming</option><option>active</option><option>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 }: any) {\n const [replying, setReplying] = useState<string | null>(null), [reply, setReply] = useState(\"\");\n const events = useMemo(() => [\n ...detail.comments.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 resolve = async (item: any) => {\n await post(`/api/comments/${item.id}/resolve`, { reply }); setReply(\"\"); setReplying(null); reload();\n };\n return <div className=\"timeline-wrap\">\n {actor.actorType !== \"client\" && canActor(actor, \"manage_comments\") && <QuickForm kind=\"comment\" projectId={detail.project.id} detail={detail} done={reload}/>}\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\">{item.timelineType === \"payment\" ? \"₹\" : item.timelineType === \"milestone\" ? \"◆\" : item.timelineType === \"blocker\" ? \"!\" : \"•\"}</div>\n <div className=\"timeline-content\">\n <div className=\"timeline-head\"><span className=\"event-type\">{typeLabels[item.timelineType] || item.timelineType}</span><time>{prettyDate(item.date)}</time>{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\" && !item.resolved_at && actor.actorType === \"internal\" && canActor(actor, \"manage_comments\") && <>\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\"/><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}\n\nfunction DetailPanel({ projectId, actor, close, refreshList, notify }: any) {\n const [detail, setDetail] = useState<any>(null), [tab, setTab] = useState(\"overview\"), [busy, setBusy] = useState(false);\n const load = async () => {\n const value = await request(`/api/projects/${projectId}`);\n setDetail(value); post(`/api/projects/${projectId}/read`).catch(() => {});\n };\n useEffect(() => { load().catch((e) => notify(e.message, \"error\")); }, [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 data = Object.fromEntries(new FormData(e.currentTarget));\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 token = prompt(\"Enter the delete token to permanently delete this project.\");\n if (!token) return;\n if (!confirm(`Permanently delete “${p.title}” and its full history?`)) return;\n try { await remove(`/api/projects/${p.id}`, { deleteToken: token }); 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 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 tabs = [\"overview\", \"timeline\", \"milestones\", \"resources\", \"people\", \"payments\", ...(internal ? [\"access\"] : [])];\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}</div><h2>{p.title}</h2><p>{p.partner_name ? `Partner · ${p.partner_name}` : \"Direct AFLABS project\"} · {p.project_type}</p></div>\n <div className=\"detail-progress\"><div><span>Completion</span><b>{p.progress}%</b></div><div className=\"progress\"><i style={{ width: `${p.progress}%` }}/></div></div>\n <button className=\"icon-button\" onClick={close} aria-label=\"Close\"><Icon name=\"close\"/></button>\n </header>\n <nav className=\"detail-tabs\">{tabs.map((name) => <button className={tab === name ? \"active\" : \"\"} onClick={() => setTab(name)}>{name}</button>)}</nav>\n <div className=\"detail-body\">\n {tab === \"overview\" && <div className=\"detail-section\">\n {internal && canActor(actor, \"edit_projects\") ? <form className=\"form-grid\" onSubmit={saveOverview}>\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={4} defaultValue={p.description}/></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 {actor.role === \"admin\" && <Field label={`Completion · ${p.progress}%`}><input name=\"progress\" type=\"range\" min=\"0\" max=\"100\" defaultValue={p.progress}/></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 <Field label=\"Partner-managed cost\"><input name=\"partner_cost\" type=\"number\" min=\"0\" step=\".01\" defaultValue={p.partner_cost}/></Field>\n <Field label=\"Commission document\"><input name=\"commission_document_url\" type=\"url\" defaultValue={p.commission_document_url || \"\"}/></Field>\n <div className=\"form-actions full\"><Button disabled={busy}>{busy ? \"Saving…\" : \"Save changes\"}</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\"><p>{p.description || \"No description yet.\"}</p><dl><div><dt>Start</dt><dd>{prettyDate(p.start_date)}</dd></div><div><dt>Target</dt><dd>{prettyDate(p.end_date)}</dd></div><div><dt>Type</dt><dd>{p.project_type}</dd></div></dl></div>}\n </div>}\n {tab === \"timeline\" && <Timeline detail={detail} actor={actor} reload={load}/>}\n {tab === \"milestones\" && <div className=\"detail-section\">\n {internal && canActor(actor, \"manage_milestones\") && <QuickForm kind=\"milestone\" projectId={p.id} detail={detail} done={load}/>}\n <div className=\"item-list\">{detail.milestones.map((x: any) => <div className=\"item-row\"><span className={`milestone-state state-${x.status}`}>{x.status === \"complete\" ? \"✓\" : x.status === \"active\" ? \"●\" : \"○\"}</span><div><b>{x.title}</b><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\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/milestones/${x.id}`)}>Remove</button>}</div>)}</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-heading\"><h3>Links</h3><p>Documents, contracts, references, and repositories.</p></div>{internal && canActor(actor, \"manage_links\") && <QuickForm kind=\"link\" projectId={p.id} detail={detail} done={load}/>}<div className=\"item-list\">{detail.links.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"link\"/></span><div><a href={x.url} target=\"_blank\" rel=\"noreferrer\">{x.label}</a><p>{x.link_type}{x.client_visible ? \" · Client visible\" : \" · Internal\"}</p></div>{internal && canActor(actor, \"manage_links\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/links/${x.id}`)}>Remove</button>}</div>)}</div></section>\n {internal && canActor(actor, \"view_credentials\") && <section><div className=\"section-heading\"><h3>Credentials</h3><p>Plain fields for project access. Never shown to clients.</p></div>{canActor(actor, \"manage_credentials\") && <QuickForm kind=\"credential\" projectId={p.id} detail={detail} done={load}/>}<div className=\"credential-list\">{detail.credentials.map((x: any) => <div className=\"credential\"><div><b>{x.label}</b><span>{x.username || \"No username\"}</span></div><code>{x.secret || \"—\"}</code>{x.url && <a href={x.url} target=\"_blank\">Open</a>}{canActor(actor, \"manage_credentials\") && <button onClick={() => removeItem(`/api/credentials/${x.id}`)}>Remove</button>}</div>)}</div></section>}\n </div>}\n {tab === \"people\" && <div className=\"detail-section\"><div className=\"section-heading\"><h3>Stakeholders</h3><p>Clients select their identity from this list before asking a question.</p></div>{internal && canActor(actor, \"manage_stakeholders\") && <QuickForm kind=\"stakeholder\" projectId={p.id} detail={detail} done={load}/>}<div className=\"people-grid\">{detail.stakeholders.map((x: any) => <div className=\"person\"><span>{initials(x.name)}</span><div><b>{x.name}</b><p>{x.role || \"Stakeholder\"}</p><small>{x.phone}</small></div>{internal && canActor(actor, \"manage_stakeholders\") && <button onClick={() => removeItem(`/api/stakeholders/${x.id}`)}>×</button>}</div>)}</div>{!detail.stakeholders.length && <Empty title=\"No stakeholders\" text=\"Add client contacts so questions are attributable.\"/>}</div>}\n {tab === \"payments\" && <div className=\"detail-section\"><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>{(actor.actorType === \"partner\" || canActor(actor, \"manage_payments\")) && <QuickForm kind=\"payment\" projectId={p.id} detail={detail} done={load}/>}<div className=\"item-list\">{detail.payments.map((x: any) => <div className=\"item-row\"><span className=\"resource-icon\"><Icon name=\"rupee\"/></span><div><b>{money(x.amount, x.currency)}</b><p>{prettyDate(x.paid_date)} · {x.note || \"Payment received\"}</p></div>{internal && canActor(actor, \"manage_payments\") && <button className=\"text-danger\" onClick={() => removeItem(`/api/payments/${x.id}`)}>Remove</button>}</div>)}</div></div>}\n {tab === \"access\" && <div className=\"detail-section access-grid\"><section><div className=\"section-heading\"><h3>Client portal</h3><p>Share both the private link and PIN with the client.</p></div><div className=\"copy-field\"><code>{location.origin}/client/{p.client_token}</code><Button variant=\"secondary\" icon=\"copy\" onClick={copyPortal}>Copy</Button></div><form className=\"inline-form\" onSubmit={async (e: any) => { e.preventDefault(); try { await patch(`/api/projects/${p.id}`, Object.fromEntries(new FormData(e.currentTarget))); notify(\"Client PIN updated\"); load(); } catch (x: any) { notify(x.message, \"error\"); } }}><Field label=\"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>Never visible to clients</h3><ul><li>Credentials and internal-only comments</li><li>Regular and partner cost configuration</li><li>Commission documents and admin controls</li><li>Non-client-visible links and milestones</li></ul></section></div>}\n </div>\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\n const load = async () => {\n const [userData, partnerData, brandData] = await Promise.all([\n request(\"/api/admin/users\"),\n request(\"/api/admin/partners\"),\n request(\"/api/admin/branding\"),\n ]);\n setUsers(userData.users);\n setPartners(partnerData.partners);\n setBranding(brandData.branding);\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 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 destroy = async (type: string, item: any) => {\n const token = prompt(`Enter the delete token to permanently remove ${item.name}.`);\n if (!token) return;\n try {\n await remove(`/api/admin/${type}/${item.id}`, { deleteToken: token });\n await load();\n notify(`${item.name} removed`);\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const editPartnerBrand = async (item: any) => {\n const brand_name = prompt(\"Client-facing brand name\", item.brand_name || item.name);\n if (brand_name === null) return;\n const logo_url = prompt(\"Logo URL (leave blank for initials)\", item.logo_url || \"\");\n if (logo_url === null) return;\n const accent_color = prompt(\"Accent color (#RRGGBB or OKLCH)\", item.accent_color || \"#2467a5\");\n if (accent_color === null) return;\n const contact_info = prompt(\"Client-facing contact information\", item.contact_info || \"\");\n if (contact_info === null) return;\n try {\n await patch(`/api/admin/partners/${item.id}`, { brand_name, logo_url, accent_color, contact_info });\n await load();\n notify(\"Partner branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n const saveBranding = async (e: any) => {\n e.preventDefault();\n try {\n const result = await patch(\"/api/admin/branding\", Object.fromEntries(new FormData(e.currentTarget)));\n setBranding(result.branding);\n notify(\"Client portal branding updated\");\n } catch (x: any) { notify(x.message, \"error\"); }\n };\n\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 </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><Field label=\"Mobile\"><input name=\"phone\" required placeholder=\"+91…\"/></Field></div>\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\"><option value=\"user\">User</option><option value=\"admin\">Admin</option></select></Field></div>\n <fieldset><legend>Allowed actions</legend><div className=\"permission-grid\">{config.permissions.map((x: any) => <label className=\"check\"><input type=\"checkbox\" name={`perm_${x.key}`} defaultChecked={userDefaults[x.key]}/>{x.label}</label>)}</div></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\">{projects.map((p: any) => <label className=\"check\"><input type=\"checkbox\" name=\"project_ids\" value={p.id}/>{p.title}</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}</p><small>{u.role === \"admin\" ? \"Full administrative access\" : `${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\">{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\n {tab === \"partners\" && <div className=\"directory-layout\">\n <section className=\"directory-form\">\n <h2>Add partner</h2>\n <p>Each partner has one account. Partner branding overrides the AFLABS client branding on linked projects.</p>\n <form className=\"stack\" onSubmit={addPartner}>\n <div className=\"form-row\"><Field label=\"Partner name\"><input name=\"name\" required/></Field><Field label=\"Mobile\"><input name=\"phone\" required placeholder=\"+966…\"/></Field></div>\n <div className=\"form-row\"><Field label=\"PIN\"><input name=\"pin\" required inputMode=\"numeric\" pattern=\"\\d{4,8}\"/></Field><Field label=\"Brand name\"><input name=\"brand_name\"/></Field></div>\n <Field label=\"Logo URL\"><input name=\"logo_url\" type=\"url\" placeholder=\"https://…\"/></Field>\n <div className=\"form-row\"><Field label=\"Accent color\"><input name=\"accent_color\" placeholder=\"#2467a5\"/></Field><Field label=\"Contact information\"><input name=\"contact_info\" placeholder=\"Email or support line\"/></Field></div>\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 || \"No separate brand\"} · {p.project_count} projects</small></div>\n <div className=\"row-actions\"><Button variant=\"secondary\" onClick={() => editPartnerBrand(p)}>Brand</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\n {tab === \"branding\" && branding && <div className=\"branding-layout\">\n <section className=\"branding-form\">\n <h2>Direct client portal</h2>\n <p>These defaults apply to projects without a partner. Partner projects continue using that partner’s logo and accent.</p>\n <form className=\"stack\" key={JSON.stringify(branding)} onSubmit={saveBranding}>\n <div className=\"form-row\"><Field label=\"Brand name\"><input name=\"name\" defaultValue={branding.name} required/></Field><Field label=\"Portal label\"><input name=\"portal_label\" defaultValue={branding.portal_label} required/></Field></div>\n <Field label=\"Logo URL\" hint=\"The supplied AFLABS logo is available at /frontend/logo.png\"><input name=\"logo_url\" defaultValue={branding.logo_url} required/></Field>\n <div className=\"form-row\"><Field label=\"Accent color\"><input name=\"accent_color\" defaultValue={branding.accent_color} required/></Field><Field label=\"Contact information\"><input name=\"contact_info\" defaultValue={branding.contact_info}/></Field></div>\n <Field label=\"Timeline introduction\"><textarea name=\"welcome_message\" rows={3} defaultValue={branding.welcome_message}/></Field>\n <div className=\"form-actions\"><Button>Save branding</Button></div>\n </form>\n </section>\n <aside className=\"branding-preview\" style={{ \"--preview-accent\": branding.accent_color } as any}>\n <span className=\"preview-label\">Client preview</span>\n <div className=\"preview-brand\"><img src={branding.logo_url || \"/frontend/logo.png\"} alt=\"\"/><div><b>{branding.name}</b><small>{branding.portal_label}</small></div></div>\n <div className=\"preview-project\"><span>In progress</span><h3>Your project title</h3><p>{branding.welcome_message}</p><div><i/></div></div>\n {branding.contact_info && <small className=\"preview-contact\">{branding.contact_info}</small>}\n </aside>\n </div>}\n </div>;\n}\n\nfunction Workspace({ actor, config, refreshActor, notify }: any) {\n const [projects, setProjects] = useState<Project[]>([]), [partners, setPartners] = 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 load = async () => {\n const p = await request(`/api/projects?archived=${archived ? 1 : 0}`);\n setProjects(p.projects);\n if (actor.role === \"admin\") request(\"/api/admin/partners\").then((x) => setPartners(x.partners)).catch(() => {});\n };\n useEffect(() => { load().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 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 === \"board\" && !archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(false); }}><Icon name=\"board\"/>Projects</button><button className={view === \"board\" && archived ? \"active\" : \"\"} onClick={() => { setView(\"board\"); setArchived(true); }}><Icon name=\"archive\"/>Archive</button>{actor.role === \"admin\" && <button className={view === \"directory\" ? \"active\" : \"\"} onClick={() => setView(\"directory\")}><Icon name=\"users\"/>People & partners</button>}</nav>\n <div className=\"sidebar-foot\"><a href=\"/source\" target=\"_blank\"><Icon name=\"link\" size={15}/>View source</a><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 {view === \"directory\" ? <AdminDirectory actor={actor} config={config} projects={projects} 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 icon=\"plus\" onClick={() => setAddOpen(true)}>New project</Button>}</div></header>\n <div className=\"mobile-nav\"><button onClick={() => setArchived(false)} className={!archived ? \"active\" : \"\"}>Active</button><button onClick={() => setArchived(true)} className={archived ? \"active\" : \"\"}>Archive</button>{actor.role === \"admin\" && <button onClick={() => setView(\"directory\")}>People</button>}</div>\n {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)} 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 the project record and its private client portal.\"}</p></div><button className=\"icon-button\" onClick={() => setAddOpen(false)}><Icon name=\"close\"/></button></div><div className=\"modal-content\"><ProjectForm actor={actor} config={config} partners={partners} onSave={async (data: any) => { await post(\"/api/projects\", data); setAddOpen(false); load(); notify(\"Project added\"); }}/></div></Modal>\n <Modal open={Boolean(selected)} close={() => setSelected(null)} wide>{selected && <DetailPanel projectId={selected} actor={actor} close={() => setSelected(null)} refreshList={load} notify={notify}/>}</Modal>\n </div>;\n}\n\nfunction ClientPortal({ actor, notify }: 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 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.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 try { await post(`/api/projects/${p.id}/comments`, Object.fromEntries(new FormData(e.currentTarget))); e.currentTarget.reset(); await load(); notify(\"Your question was added\"); } 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\" 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><button onClick={logout}>Close project <Icon name=\"logout\" size={15}/></button></header>\n <section className=\"client-hero\"><div className=\"client-status\"><span className={`status-dot status-${p.status}`}/>{statusMeta[p.status]?.label}</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>Target</small><b>{prettyDate(p.end_date)}</b></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) => <article><div className={`client-node node-${x.timelineType}`}>{x.timelineType === \"milestone\" ? \"◆\" : x.timelineType === \"payment\" ? \"₹\" : x.timelineType === \"blocker\" ? \"!\" : \"•\"}</div><div><header><span>{typeLabels[x.timelineType] || x.timelineType}</span><time>{prettyDate(x.date)}</time></header><h3>{x.timelineType === \"milestone\" ? x.title : x.author_name}</h3>{x.body && <p>{x.body}</p>}{x.resolved_at && <small className=\"resolved\">Answered by the project team</small>}</div></article>)}</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><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><a href=\"/source\" target=\"_blank\">View source</a></footer>\n </main>;\n}\n\nexport function App() {\n const [config, setConfig] = useState<any>(null), [actor, setActor] = useState<Actor | null | undefined>(undefined), [toast, setToast] = useState<any>(null);\n const clientToken = location.pathname.match(/^\\/client\\/([^/]+)/)?.[1];\n const notify = (message: string, kind = \"success\") => setToast({ message, kind });\n const refresh = async () => {\n const [cfg, me] = await Promise.all([request(\"/api/config\"), request(\"/api/me\")]);\n setConfig(cfg); setActor(me.actor);\n };\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 return <><Toast value={toast} clear={() => setToast(null)}/>{!config.initialized ? <Bootstrap onDone={refresh}/> : !actor ? <Login clientToken={clientToken} onDone={refresh}/> : actor.actorType === \"client\" ? <ClientPortal actor={actor} notify={notify}/> : <Workspace actor={actor} config={config} refreshActor={refresh} notify={notify}/>}</>;\n}\n",[],[181,264,266],"10f61a74-b9f9-436c-9448-3524b7b0a8e1",["D",1785324724390],[199,200],[181,264],["D",1785324724390],[198,201,202,203,204],[181],["D",1785324724390],["D",1789492855745],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"ctx",{"_83":-5,"_135":318,"_319":320,"_321":322,"_323":25,"_324":25,"_325":25,"_326":60,"_327":-5,"_328":-7,"_329":-7,"_330":64,"_331":25,"_332":25,"_333":-5,"_334":25,"_335":25,"_336":25,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":91,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"] </article></body></html>

Diff · v18