helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-05-18 20:08:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: helix-admin:fd7ee4fc1ffcf7b25a3f98532cb1831b0f6cfdd2
Branches Tags
helix-admin:dev helix-admin:ui-dev-mouli helix-admin:hardening/apr-week3 helix-admin:master helix-admin:hardening/apr-week2 helix-admin:feature/barge-whisper helix-admin:feature/omnichannel-widget helix-admin:dev-mouli helix-admin:dev-kartik helix-admin:dev-main
helix-admin:v0.13-ai-coaching helix-admin:v0.12-supervisor-ui helix-admin:v0.11-ui-consistency helix-admin:v0.10-apr-16-ui-redesign helix-admin:v0.9.1-quick-wins helix-admin:v0.9-pre-barge helix-admin:demo-v1
..
compare: helix-admin:dev-mouli
Branches Tags
helix-admin:ui-dev-mouli helix-admin:hardening/apr-week3 helix-admin:master helix-admin:hardening/apr-week2 helix-admin:feature/barge-whisper helix-admin:feature/omnichannel-widget helix-admin:dev-mouli helix-admin:dev-kartik helix-admin:dev helix-admin:dev-main
helix-admin:v0.13-ai-coaching helix-admin:v0.12-supervisor-ui helix-admin:v0.11-ui-consistency helix-admin:v0.10-apr-16-ui-redesign helix-admin:v0.9.1-quick-wins helix-admin:v0.9-pre-barge helix-admin:demo-v1

1 Commits
fd7ee4fc1f ... dev-mouli

Author SHA1 Message Date
moulichand16
932f8ecb2f added platform integration with script and added invisible captcha 2026-04-08 16:27:40 +05:30
123 changed files with 2299 additions and 19215 deletions
Expand all files Collapse all files

16
.claude/settings.local.json
View File

@@ -1,16 +0,0 @@
{
"permissions": {
"allow": [
"Bash(ps -eo pid,pcpu,rss,comm -r)",
"Bash(awk 'NR<=20{printf \"%-8s %-8s %-10s %s\\\\n\", $1, $2, $3/1024 \"MB\", $4}')",
"Bash(top -l 1 -o cpu -n 15 -stats pid,command,cpu,mem,th)",
"Bash(vm_stat)",
"Bash(sysctl hw.memsize)",
"Bash(awk '{print \"Total RAM: \" $2/1024/1024/1024 \" GB\"}')",
"Bash(ps aux:*)",
"Bash(pmset -g thermlog)",
"Bash(sudo powermetrics:*)",
"Bash(sysctl machdep.xcpm.cpu_thermal_level)"
]
}
}

8
.env.production
View File

@@ -1,9 +1,5 @@
# EC2 deployment — Caddy reverse-proxies /auth/* and /api/* to the sidecar VITE_API_URL=https://engage-api.srv1477139.hstgr.cloud
# on the same domain, so VITE_API_URL is empty (same-origin). VITE_SIDECAR_URL=https://engage-api.srv1477139.hstgr.cloud
VITE_API_URL=
# SIP defaults — used as fallback if login response doesn't include agent config.
# Per-agent SIP config from the Agent entity (returned at login) takes precedence.
VITE_SIP_URI=sip:523590@blr-pub-rtc4.ozonetel.com VITE_SIP_URI=sip:523590@blr-pub-rtc4.ozonetel.com
VITE_SIP_PASSWORD=523590 VITE_SIP_PASSWORD=523590
VITE_SIP_WS_SERVER=wss://blr-pub-rtc4.ozonetel.com:444 VITE_SIP_WS_SERVER=wss://blr-pub-rtc4.ozonetel.com:444

4
.gitignore vendored
View File

@@ -23,7 +23,3 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
.env .env
# Playwright
test-results/
playwright-report/

57
.woodpecker.yml
View File

@@ -1,57 +0,0 @@
# Woodpecker CI pipeline for Helix Engage
#
# Reports at operations.healix360.net/reports/{pipeline-number}/
when:
- event: [push, manual]
steps:
typecheck:
image: node:20
commands:
- corepack enable
- yarn install --frozen-lockfile || yarn install
- yarn tsc --noEmit
e2e-tests:
image: mcr.microsoft.com/playwright:v1.52.0-noble
commands:
- corepack enable
- yarn install --frozen-lockfile || yarn install
- npx playwright install chromium
- npx playwright test --reporter=list,html,json || true
- "node -e \"const r=require('./test-results.json');const t=r.suites.flatMap(s=>(s.suites||[s])).reduce((n,s)=>n+(s.specs?.length||0),0);const p=r.suites.flatMap(s=>(s.suites||[s])).reduce((n,s)=>n+(s.specs?.filter(x=>x.ok).length||0),0);const f=t-p;require('fs').writeFileSync('test-summary.txt',f>0?f+' of '+t+' failed':'All '+t+' passed');\" || echo '40 tests completed' > test-summary.txt"
- cat test-summary.txt
environment:
E2E_BASE_URL: https://ramaiah.engage.healix360.net
PLAYWRIGHT_HTML_REPORT: playwright-report
PLAYWRIGHT_JSON_OUTPUT_NAME: test-results.json
publish-report:
image: plugins/s3
settings:
bucket: test-reports
source: playwright-report/**/*
target: /${CI_PIPELINE_NUMBER}
strip_prefix: playwright-report/
path_style: true
endpoint: http://minio:9000
access_key:
from_secret: s3_access_key
secret_key:
from_secret: s3_secret_key
when:
- status: [success, failure]
notify-teams:
image: curlimages/curl
environment:
TEAMS_WEBHOOK:
from_secret: teams_webhook
commands:
- "SUMMARY=$(cat test-summary.txt 2>/dev/null || echo 'Tests completed')"
- "REPORT=https://operations.healix360.net/reports/${CI_PIPELINE_NUMBER}/index.html"
- "PIPELINE=https://operations.healix360.net/repos/1/pipeline/${CI_PIPELINE_NUMBER}"
- "curl -s -X POST \"$TEAMS_WEBHOOK\" -H 'Content-Type:application/json' -d '{\"type\":\"message\",\"attachments\":[{\"contentType\":\"application/vnd.microsoft.card.adaptive\",\"content\":{\"type\":\"AdaptiveCard\",\"version\":\"1.4\",\"body\":[{\"type\":\"TextBlock\",\"size\":\"Medium\",\"weight\":\"Bolder\",\"text\":\"Helix Engage — Build #'\"$CI_PIPELINE_NUMBER\"'\"},{\"type\":\"TextBlock\",\"text\":\"Branch: '\"$CI_COMMIT_BRANCH\"'\",\"wrap\":true},{\"type\":\"TextBlock\",\"text\":\"'\"$SUMMARY\"'\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.OpenUrl\",\"title\":\"View Report\",\"url\":\"'\"$REPORT\"'\"},{\"type\":\"Action.OpenUrl\",\"title\":\"View Pipeline\",\"url\":\"'\"$PIPELINE\"'\"}]}}]}'"
when:
- status: [success, failure]

248
docs/architecture.md
View File

@@ -1,248 +0,0 @@
# Helix Engage — Architecture
Single EC2 instance (Mumbai `ap-south-1`) hosting two isolated Helix Engage
workspaces on top of a shared FortyTwo platform. Each workspace has its own
dedicated sidecar container, its own Redis, and its own persistent data
volume — isolation is enforced at the **container boundary**, not at the
application layer.
**Host:** `13.234.31.194` (m6i.xlarge, Ubuntu 22.04)
**DNS:** Cloudflare zone `healix360.net`
**TLS:** Caddy + Let's Encrypt, HTTP-01 challenge per hostname
---
## Principles
1. **Platform is multi-tenant by design.** One `server` container, one
Postgres, one `worker`, one ClickHouse, one Redpanda, one MinIO — these
all understand multiple workspaces natively and scope by workspace id.
2. **Sidecar is single-tenant by design.** It wraps the platform with
call-center features (Ozonetel SIP, telephony state, theme, widget keys,
setup state, rules engine, live monitor). Every instance boots with
**one** `PLATFORM_API_KEY` and **one** `PLATFORM_WORKSPACE_SUBDOMAIN`.
We run one instance per workspace.
3. **Caddy is strictly host-routed.** No default or catchall tenant.
A request lands on a host block or it 404s. The apex
`engage.healix360.net` returns 404 on purpose, and `/webhooks/*` is
reachable only via a workspace subdomain.
4. **Redis is per-sidecar.** Sidecars share Redis key names without a
workspace dimension. Each sidecar gets its own Redis container — hard
isolation at the database level, zero code changes.
5. **Telephony dispatcher routes events by agent.** Ozonetel event
subscriptions are account-level (not per-campaign). A single dispatcher
receives all agent/call events and routes them to the correct sidecar
using Redis-backed service discovery.
---
## URL Layout
| Who | URL | Routes to |
|---|---|---|
| Ramaiah platform UI | `https://ramaiah.app.healix360.net` | `server:4000` |
| Ramaiah Helix Engage | `https://ramaiah.engage.healix360.net` | `sidecar-ramaiah:4100` |
| Global platform UI | `https://global.app.healix360.net` | `server:4000` |
| Global Helix Engage | `https://global.engage.healix360.net` | `sidecar-global:4100` |
| Telephony dispatcher | `https://telephony.engage.healix360.net` | `telephony:4200` |
| Apex (dead-end) | `https://engage.healix360.net` | `404` |
Ozonetel campaign webhook URLs — per tenant:
| Campaign | DID | Webhook URL |
|---|---|---|
| `Inbound_918041763400` | Ramaiah | `https://ramaiah.engage.healix360.net/webhooks/ozonetel/missed-call` |
| `Inbound_918041763265` | Global (on VPS until cutover) | `https://global.engage.healix360.net/webhooks/ozonetel/missed-call` |
Ozonetel event subscription (account-level):
| Event | URL |
|---|---|
| Agent events | `https://telephony.engage.healix360.net/api/supervisor/agent-event` |
| Call events | `https://telephony.engage.healix360.net/api/supervisor/call-event` |
---
## Diagram
```mermaid
flowchart TB
subgraph Internet
OZO[Ozonetel<br/>CCaaS]
USR_R[Ramaiah users]
USR_G[Global users]
end
subgraph EC2 ["EC2 — 13.234.31.194 (ap-south-1)"]
CADDY{{"caddy<br/>host-routed<br/>Let's Encrypt"}}
subgraph TEL ["Telephony Dispatcher"]
DISP["telephony<br/>NestJS:4200<br/>routes by agentId"]
RD_T[("redis-telephony")]
end
subgraph PLATFORM ["Platform (shared, multi-tenant)"]
SRV["server<br/>NestJS:4000<br/>platform API + SPA"]
WKR["worker<br/>BullMQ"]
DB[("db<br/>postgres:16<br/>workspace-per-schema")]
CH[("clickhouse<br/>analytics")]
RP[("redpanda<br/>event bus")]
MINIO[("minio<br/>S3 storage")]
end
subgraph RAMAIAH ["Ramaiah tenant (isolated)"]
SC_R["sidecar-ramaiah<br/>NestJS:4100<br/>API_KEY=ramaiah admin"]
RD_R[("redis-ramaiah")]
VOL_R[/"data-ramaiah volume<br/>theme, telephony,<br/>widget, rules,<br/>setup-state"/]
end
subgraph GLOBAL ["Global tenant (isolated)"]
SC_G["sidecar-global<br/>NestJS:4100<br/>API_KEY=global admin"]
RD_G[("redis-global")]
VOL_G[/"data-global volume<br/>theme, telephony,<br/>widget, rules,<br/>setup-state"/]
end
end
USR_R -->|"ramaiah.app.healix360.net"| CADDY
USR_R -->|"ramaiah.engage.healix360.net"| CADDY
USR_G -->|"global.app.healix360.net"| CADDY
USR_G -->|"global.engage.healix360.net"| CADDY
OZO -->|"webhooks/ozonetel/missed-call<br/>(Ramaiah DID 918041763400)"| CADDY
OZO -.->|"webhooks/ozonetel/missed-call<br/>(Global DID 918041763265<br/>— still on VPS today)"| CADDY
OZO -->|"agent + call events<br/>(account-level subscription)"| CADDY
CADDY -->|"telephony.engage.*"| DISP
CADDY -->|"*.app.healix360.net<br/>/graphql, /auth/*, SPA"| SRV
CADDY -->|"ramaiah.engage.*<br/>/api/*, /webhooks/*, SPA"| SC_R
CADDY -->|"global.engage.*<br/>/api/*, /webhooks/*, SPA"| SC_G
DISP -->|"agentId lookup<br/>→ forward to sidecar"| SC_R
DISP -->|"agentId lookup<br/>→ forward to sidecar"| SC_G
DISP --- RD_T
SC_R -->|"self-register on boot<br/>heartbeat 30s"| DISP
SC_G -->|"self-register on boot<br/>heartbeat 30s"| DISP
SC_R -->|"GraphQL<br/>Origin: ramaiah.app.*"| SRV
SC_G -->|"GraphQL<br/>Origin: global.app.*"| SRV
SC_R --- RD_R
SC_G --- RD_G
SC_R --- VOL_R
SC_G --- VOL_G
SRV --- DB
SRV --- CH
SRV --- RP
SRV --- MINIO
WKR --- DB
WKR --- RP
classDef shared fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#000
classDef ramaiah fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#000
classDef global fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#000
classDef external fill:#f5f5f5,stroke:#757575,stroke-width:1px,color:#000
classDef edge fill:#fce4ec,stroke:#c2185b,stroke-width:2px,color:#000
classDef telephony fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000
class SRV,WKR,DB,CH,RP,MINIO shared
class SC_R,RD_R,VOL_R ramaiah
class SC_G,RD_G,VOL_G global
class OZO,USR_R,USR_G external
class CADDY edge
class DISP,RD_T telephony
```
---
## Components
| Component | Scope | Container count | Purpose |
|---|---|---|---|
| Caddy | Shared | 1 | Host-routed reverse proxy, TLS terminator |
| Platform server | Shared | 1 | Natively multi-tenant by Origin/subdomain |
| Platform worker | Shared | 1 | BullMQ jobs carry workspace context per-job |
| Postgres | Shared | 1 | Multi-tenant via per-workspace schemas |
| ClickHouse | Shared | 1 | Analytics — workspace dimension per event |
| Redpanda | Shared | 1 | Event bus — workspace dimension per message |
| MinIO | Shared | 1 | S3-compatible storage |
| **Telephony dispatcher** | **Shared** | **1** | Routes Ozonetel events to correct sidecar by agentId |
| **Redis (telephony)** | **Shared** | **1** | Service discovery registry for dispatcher |
| **Sidecar** | **Per-tenant** | **2** | Call center layer (Ramaiah + Global) |
| **Redis (sidecar)** | **Per-tenant** | **2** | Session, agent state, theme, rules cache |
| **Data volume** | **Per-tenant** | **2** | File-based config in `/app/data/` |
---
## Telephony Event Flow
Ozonetel event subscriptions are **account-level** — one subscription per Ozonetel account, not per campaign. All agent login/logout/state events and call events are POSTed to a single URL.
```
Ozonetel → POST telephony.engage.healix360.net/api/supervisor/agent-event
→ Dispatcher receives { agentId: "ramaiahadmin", action: "incall", ... }
→ Redis lookup: agentId "ramaiahadmin" → sidecar-ramaiah:4100
→ Forward event to sidecar-ramaiah
→ sidecar-ramaiah updates SupervisorService state, emits SSE
```
**Service discovery:** Each sidecar self-registers on boot via `POST /api/supervisor/register` with its agent list. Heartbeat every 30s, TTL 90s. If a sidecar goes down, its entries expire and the dispatcher stops routing to it.
---
## Request Flow
### Agent opens Ramaiah Helix Engage
```
Browser → https://ramaiah.engage.healix360.net/
→ Caddy (TLS, Host=ramaiah.engage.healix360.net)
→ static SPA from /srv/engage
Browser → POST /api/auth/login { email, password }
→ Caddy → sidecar-ramaiah:4100
→ sidecar calls platform with:
Origin: https://ramaiah.app.healix360.net
Authorization: Bearer <Ramaiah API key>
→ platform resolves workspace by Origin → Ramaiah
→ JWT returned
```
### Ozonetel POSTs a missed-call webhook
```
Ozonetel → POST https://ramaiah.engage.healix360.net/webhooks/ozonetel/missed-call
→ Caddy (Host=ramaiah.engage.healix360.net)
→ sidecar-ramaiah:4100 ONLY
→ writes call row into Ramaiah workspace via platform
```
Cross-tenant leakage is physically impossible — Caddy's host-routing guarantees a Ramaiah webhook can never reach sidecar-global.
---
## Failure Modes
| Failure | Blast radius |
|---|---|
| `sidecar-ramaiah` crashes | Ramaiah Engage 502s. Global + platform unaffected. |
| `sidecar-global` crashes | Global Engage 502s. Ramaiah + platform unaffected. |
| `redis-ramaiah` crashes | Ramaiah agents kicked from SIP. Global unaffected. |
| `telephony` crashes | Agent/call state events stop routing. Sidecars still serve UI. |
| `server` (platform) crashes | **Both workspaces** down for data. |
| `db` crashes | Same as above. |
| Caddy crashes | Nothing reachable until restart. |
---
## Adding a New Hospital
1. Add sidecar container + Redis + data volume in `docker-compose.yml`
2. Add Caddy host block for `newhospital.engage.healix360.net`
3. Create workspace on platform, generate API key
4. Set sidecar env: `PLATFORM_API_KEY`, `PLATFORM_WORKSPACE_SUBDOMAIN`
5. Configure Ozonetel campaign webhook to `newhospital.engage.healix360.net/webhooks/ozonetel/missed-call`
6. Sidecar self-registers with telephony dispatcher on boot — no dispatcher config needed

181
docs/ci-cd-operations.md
View File

@@ -1,181 +0,0 @@
# Helix Engage — CI/CD & Operations Dashboard
## Overview
Three services on EC2 provide CI/CD and operational visibility:
- **Gitea** (`git.healix360.net`) — local Git forge, mirrors Azure DevOps repos
- **Woodpecker CI** (`operations.healix360.net`) — build dashboard, runs pipelines
- **MinIO** (internal) — stores test reports, served via Caddy
## URLs
| Service | URL | Auth |
|---|---|---|
| Build Dashboard | `https://operations.healix360.net` | Gitea OAuth (helix-admin / Global@2026) |
| Test Reports | `https://operations.healix360.net/reports/{run}/index.html` | Basic auth (helix-admin / Global@2026) |
| Git Forge | `https://git.healix360.net` | helix-admin / Global@2026 |
## How It Works
```
Azure DevOps (push)
↓ mirror sync (every 15min or manual)
Gitea (git.healix360.net)
↓ webhook
Woodpecker CI (operations.healix360.net)
↓ runs pipeline steps in Docker containers
├── typecheck (node:20, yarn tsc)
├── e2e-tests (playwright, 40 smoke tests)
├── publish-report (S3 plugin → MinIO)
└── notify-teams (curl → Power Automate → Teams channel)
```
## Pipelines
### helix-engage (frontend)
Triggers on push to any branch or manual run.
**Steps:**
1. **typecheck** — `yarn install` + `tsc --noEmit` (node:20 image)
2. **e2e-tests** — 40 Playwright smoke tests against live EC2 (Ramaiah + Global, CC Agent + Supervisor)
3. **publish-report** — uploads Playwright HTML report to MinIO via S3 plugin
4. **notify-teams** — sends Adaptive Card to Teams "Deployment updates" channel with pipeline link + report link
**Report URL:** `https://operations.healix360.net/reports/{pipeline-number}/index.html`
### helix-engage-server (sidecar)
Triggers on push to any branch or manual run.
**Steps:**
1. **unit-tests** — `npm ci` + `jest --ci --forceExit` (node:20 image)
2. **notify-teams** — sends Adaptive Card to Teams with pipeline link
## Mirrored Repos
| Azure DevOps Repo | Gitea Mirror | Branch |
|---|---|---|
| `globalhealthx/EMR/_git/helix-engage` | `helix-admin/helix-engage` | feature/omnichannel-widget |
| `globalhealthx/EMR/_git/helix-engage-server` | `helix-admin/helix-engage-server` | master |
Mirror syncs every 15 minutes automatically. To force sync:
```bash
curl -s -X POST "https://git.healix360.net/api/v1/repos/helix-admin/helix-engage/mirror-sync" \
-u "helix-admin:Global@2026"
curl -s -X POST "https://git.healix360.net/api/v1/repos/helix-admin/helix-engage-server/mirror-sync" \
-u "helix-admin:Global@2026"
```
## Teams Notifications
Notifications go to the "Deployment updates" channel via Power Automate Workflow webhook.
Each notification includes:
- Project name and build number
- Branch name
- Commit message
- "View Pipeline" button (links to Woodpecker)
- "View Report" button (links to Playwright HTML report, frontend only)
## Secrets (Woodpecker)
Configured per-repo in Woodpecker Settings → Secrets:
| Secret | Used by | Purpose |
|---|---|---|
| `s3_access_key` | publish-report | MinIO access key (`minio`) |
| `s3_secret_key` | publish-report | MinIO secret key |
| `teams_webhook` | notify-teams | Power Automate webhook URL |
## Docker Containers
| Container | Image | Purpose |
|---|---|---|
| `ramaiah-prod-gitea-1` | `gitea/gitea:latest` | Git forge |
| `ramaiah-prod-woodpecker-server-1` | `woodpeckerci/woodpecker-server:v3` | CI dashboard + pipeline engine |
| `ramaiah-prod-woodpecker-agent-1` | `woodpeckerci/woodpecker-agent:v3` | Executes pipeline steps in Docker |
## Agent Configuration
The Woodpecker agent is configured to:
- Run pipeline containers on the `ramaiah-prod_default` Docker network (so they can reach Gitea and MinIO)
- Allow up to 2 concurrent workflows
## Troubleshooting
### Pipeline fails at git clone
Check that Gitea's `REQUIRE_SIGNIN_VIEW` is `false` (public repos must be cloneable without auth):
```bash
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"docker exec ramaiah-prod-gitea-1 grep REQUIRE_SIGNIN /data/gitea/conf/app.ini"
```
### npm install crashes with "Exit handler never called"
Known npm bug in CI containers. Use `yarn` instead of `npm` for the frontend. The sidecar's lockfile is clean so `npm ci` works.
### Pipeline says "pipeline definition not found"
The `.woodpecker.yml` file is missing or has invalid YAML. Check:
```bash
curl -s "https://git.healix360.net/api/v1/repos/helix-admin/helix-engage/contents/.woodpecker.yml?ref=feature/omnichannel-widget" \
-u "helix-admin:Global@2026" | python3 -c "import sys,json;print(json.load(sys.stdin).get('name','NOT FOUND'))"
```
### Teams notification not arriving
Verify the webhook secret is set in Woodpecker and the Power Automate workflow is active.
### Test reports not loading (403/XML error)
Caddy must strip the Authorization header before proxying to MinIO. Check:
```bash
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"grep -A8 'handle_path /reports' /opt/fortytwo/Caddyfile"
```
Should include `header_up -Authorization`.
### Manually trigger a pipeline
```bash
WP_TOKEN="<woodpecker-api-token>"
curl -s -X POST "https://operations.healix360.net/api/repos/1/pipelines" \
-H "Authorization: Bearer $WP_TOKEN" \
-H "Content-Type: application/json" \
-d '{"branch":"feature/omnichannel-widget"}'
```
### Delete old pipeline runs
```bash
WP_TOKEN="<woodpecker-api-token>"
for i in $(seq 1 20); do
curl -s -X DELETE "https://operations.healix360.net/api/repos/1/pipelines/$i" \
-H "Authorization: Bearer $WP_TOKEN"
done
```
## E2E Test Coverage
40 tests across 2 hospitals, 3 roles:
**Login (4):** branding, invalid creds, supervisor login, auth guard
**Ramaiah CC Agent (10):** landing, call desk, call history, patients (list + search), appointments, my performance (API + KPI), sidebar, sign-out modal, sign-out complete
**Ramaiah Supervisor (12):** landing, team performance, live monitor, leads, patients, appointments, call log, recordings, missed calls, campaigns, settings, sidebar
**Global CC Agent (7):** landing, call history, patients, appointments, my performance, sidebar, sign-out
**Global Supervisor (5):** landing, patients, appointments, campaigns, settings
**Auto-cleanup:** Last CC Agent test completes sign-out to release agent session. Setup steps call `/api/maint/unlock-agent` to clear stale locks.

486
docs/developer-operations-runbook.md
View File

@@ -2,295 +2,326 @@
## Architecture ## Architecture
See [architecture.md](./architecture.md) for the full multi-tenant topology diagram.
``` ```
Browser (India) Browser (India)
↓ HTTPS ↓ HTTPS
Caddy (reverse proxy, TLS, host-routed) Caddy (reverse proxy, TLS, static files)
├── ramaiah.engage.healix360.net → sidecar-ramaiah:4100 ├── engage.srv1477139.hstgr.cloud → /srv/engage (static frontend)
├── global.engage.healix360.net → sidecar-global:4100 ├── engage-api.srv1477139.hstgr.cloud → sidecar:4100
├── telephony.engage.healix360.net → telephony:4200 └── *.srv1477139.hstgr.cloud → server:4000 (platform)
├── *.app.healix360.net → server:4000 (platform)
├── monitoring.healix360.net → grafana:3000 Docker Compose stack:
├── operations.healix360.net → woodpecker-server:8000 ├── caddy — Reverse proxy + TLS
├── git.healix360.net → gitea:3000 ├── server — FortyTwo platform (ECR image)
└── engage.healix360.net → 404 (no catchall) ├── worker — Background jobs
├── sidecar — Helix Engage NestJS API (ECR image)
Docker Compose stack (EC2 — 13.234.31.194): ├── db — PostgreSQL 16
├── caddy — Reverse proxy + TLS (Let's Encrypt) ├── redis — Session + cache
├── server — FortyTwo platform (NestJS, port 4000) ├── clickhouse — Analytics
├── worker — BullMQ background jobs ├── minio — Object storage
├── sidecar-ramaiah — Ramaiah sidecar (NestJS, port 4100) └── redpanda — Event bus (Kafka)
├── sidecar-global — Global sidecar (NestJS, port 4100)
├── telephony — Event dispatcher (NestJS, port 4200)
├── redis-ramaiah — Ramaiah sidecar Redis
├── redis-global — Global sidecar Redis
├── redis-telephony — Telephony dispatcher Redis
├── redis — Platform Redis
├── db — PostgreSQL 16 (workspace-per-schema)
├── clickhouse — Analytics
├── minio — S3-compatible object storage
├── redpanda — Event bus (Kafka-compatible)
├── loki — Log aggregation (receives from Docker logging driver)
└── grafana — Monitoring dashboards (Loki + ClickHouse data sources)
``` ```
--- ## VPS Access
## EC2 Access
```bash ```bash
# SSH into EC2 (key passphrase handled by sshpass) # SSH into the VPS
SSHPASS='SasiSuman@2007' sshpass -P "Enter passphrase" -e \ sshpass -p 'SasiSuman@2007' ssh -o StrictHostKeyChecking=no root@148.230.67.184
ssh -i ~/Downloads/fortytwoai_hostinger -o StrictHostKeyChecking=no ubuntu@13.234.31.194
# Or with SSH key (if configured)
ssh -i ~/Downloads/fortytwoai_hostinger root@148.230.67.184
``` ```
| Detail | Value | | Detail | Value |
|---|---| |---|---|
| Host | `13.234.31.194` | | Host | 148.230.67.184 |
| User | `ubuntu` | | User | root |
| SSH key | `~/Downloads/fortytwoai_hostinger` (passphrase-protected) | | Password | SasiSuman@2007 |
| Passphrase | `SasiSuman@2007` | | Docker compose dir | /opt/fortytwo |
| Docker compose dir | `/opt/fortytwo` | | Frontend static files | /opt/fortytwo/helix-engage-frontend |
| Frontend static files | `/opt/fortytwo/helix-engage-frontend` | | Caddyfile | /opt/fortytwo/Caddyfile |
| Caddyfile | `/opt/fortytwo/Caddyfile` |
### SSH Helper
The key is passphrase-protected. Use `sshpass` to supply the passphrase non-interactively.
No need to decrypt or copy the key — use the original file directly.
```bash
# SSH shorthand
EC2_SSH="SSHPASS='SasiSuman@2007' sshpass -P 'Enter passphrase' -e ssh -i ~/Downloads/fortytwoai_hostinger -o StrictHostKeyChecking=no ubuntu@13.234.31.194"
# Verify
eval $EC2_SSH hostname
```
> **Note:** VPN may block port 22 to AWS. Disconnect VPN before SSH.
---
## URLs ## URLs
| Service | URL | | Service | URL |
|---|---| |---|---|
| Ramaiah Engage (Frontend + API) | `https://ramaiah.engage.healix360.net` | | Frontend | https://engage.srv1477139.hstgr.cloud |
| Global Engage (Frontend + API) | `https://global.engage.healix360.net` | | Sidecar API | https://engage-api.srv1477139.hstgr.cloud |
| Ramaiah Platform | `https://ramaiah.app.healix360.net` | | Platform | https://fortytwo-dev.srv1477139.hstgr.cloud |
| Global Platform | `https://global.app.healix360.net` |
| Telephony Dispatcher | `https://telephony.engage.healix360.net` |
| Monitoring (Grafana) | `https://monitoring.healix360.net` |
| CI/CD (Woodpecker) | `https://operations.healix360.net` |
| Git (Gitea) | `https://git.healix360.net` |
---
## Login Credentials ## Login Credentials
### Ramaiah Workspace
| Role | Email | Password | | Role | Email | Password |
|---|---|---| |---|---|---|
| Marketing Executive | `marketing@ramaiahcare.com` | `AdRamaiah@2026` | | CC Agent | rekha.cc@globalhospital.com | Global@123 |
| Marketing Executive | `supervisor@ramaiahcare.com` | `MrRamaiah@2026` | | CC Agent | ganesh.cc@globalhospital.com | Global@123 |
| CC Agent | `ccagent@ramaiahcare.com` | `CcRamaiah@2026` | | Marketing | sanjay.marketing@globalhospital.com | Global@123 |
| Platform Admin | `dev@fortytwo.dev` | `tim@apple.dev` | | Admin/Supervisor | dr.ramesh@globalhospital.com | Global@123 |
### Ozonetel
| Field | Value |
|---|---|
| API Key | `KK8110e6c3de02527f7243ffaa924fa93e` |
| Username | `global_healthx` |
| Ramaiah Campaign | `Inbound_918041763400` |
| Ramaiah Agent | `ramaiahadmin` / ext `524435` |
--- ---
## Local Development ## Local Testing
Always test locally before deploying to staging.
### Frontend (Vite dev server) ### Frontend (Vite dev server)
```bash ```bash
cd helix-engage cd helix-engage
npm run dev # http://localhost:5173
npx tsc --noEmit # Type check # Start dev server (hot reload)
npm run build # Production build npm run dev
# → http://localhost:5173
# Type check (catches production build errors)
npx tsc --noEmit
# Production build (same as deploy)
npm run build
``` ```
The `.env.local` controls which sidecar the frontend talks to: The `.env.local` controls which sidecar the frontend talks to:
```bash ```bash
# Remote (default — uses EC2 backend) # Remote sidecar (default — uses deployed backend)
VITE_API_URL=https://ramaiah.engage.healix360.net VITE_API_URL=https://engage-api.srv1477139.hstgr.cloud
VITE_SIDECAR_URL=https://engage-api.srv1477139.hstgr.cloud
# Local sidecar # Local sidecar (for testing sidecar changes)
# VITE_API_URL=http://localhost:4100 # VITE_API_URL=http://localhost:4100
# VITE_SIDECAR_URL=http://localhost:4100
# Split — theme endpoint local, everything else remote
# VITE_THEME_API_URL=http://localhost:4100
``` ```
**Important:** When `VITE_API_URL` points to `localhost:4100`, login and GraphQL only work if the local sidecar can reach the platform. The local sidecar's `.env` must have valid `PLATFORM_GRAPHQL_URL` and `PLATFORM_API_KEY`.
### Sidecar (NestJS dev server) ### Sidecar (NestJS dev server)
```bash ```bash
cd helix-engage-server cd helix-engage-server
npm run start:dev # http://localhost:4100 (watch mode)
npm run build # Build only # Start with watch mode (auto-restart on changes)
npm run start:dev
# → http://localhost:4100
# Build only (no run)
npm run build
# Production start
npm run start:prod
``` ```
Sidecar `.env` must have: The sidecar `.env` must have:
```bash ```bash
PLATFORM_GRAPHQL_URL=https://ramaiah.app.healix360.net/graphql PLATFORM_GRAPHQL_URL=... # Platform GraphQL endpoint
PLATFORM_API_KEY=<Ramaiah workspace API key> PLATFORM_API_KEY=... # Platform API key for server-to-server calls
PLATFORM_WORKSPACE_SUBDOMAIN=ramaiah PLATFORM_WORKSPACE_SUBDOMAIN=fortytwo-dev
REDIS_URL=redis://localhost:6379 REDIS_URL=redis://localhost:6379 # Local Redis required
``` ```
### Local Docker stack (full environment)
For testing with a local platform + database + Redis:
```bash
cd helix-engage-local
# First time — pull images + start
./deploy-local.sh up
# Deploy frontend to local stack
./deploy-local.sh frontend
# Deploy sidecar to local stack
./deploy-local.sh sidecar
# Both
./deploy-local.sh all
# Logs
./deploy-local.sh logs
# Stop
./deploy-local.sh down
```
Local stack URLs:
- Platform: `http://localhost:5001`
- Sidecar: `http://localhost:5100`
- Frontend: `http://localhost:5080`
### Pre-deploy checklist ### Pre-deploy checklist
1. `npx tsc --noEmit` — passes (frontend) Before running `deploy.sh`:
1. `npx tsc --noEmit` — passes with no errors (frontend)
2. `npm run build` — succeeds (sidecar) 2. `npm run build` — succeeds (sidecar)
3. Test the changed feature locally 3. Test the changed feature locally (dev server or local stack)
4. Check `package.json` for new dependencies → decides quick vs full deploy 4. Check `package.json` for new dependencies → decides quick vs full deploy
--- ---
## Deployment ## Deployment
### Frontend ### Prerequisites (local machine)
```bash ```bash
# Helper — reuse in all commands below # Required tools
EC2="SSHPASS='SasiSuman@2007' sshpass -P 'Enter passphrase' -e ssh -i ~/Downloads/fortytwoai_hostinger -o StrictHostKeyChecking=no ubuntu@13.234.31.194" brew install sshpass # SSH with password
EC2_RSYNC="SSHPASS='SasiSuman@2007' sshpass -P 'Enter passphrase' -e ssh -i ~/Downloads/fortytwoai_hostinger -o StrictHostKeyChecking=no" aws configure # AWS CLI (for ECR)
docker desktop # Docker with buildx
cd helix-engage && npm run build # Verify AWS access
aws sts get-caller-identity # Should show account 043728036361
rsync -avz -e "$EC2_RSYNC" \
dist/ ubuntu@13.234.31.194:/opt/fortytwo/helix-engage-frontend/
eval $EC2 "cd /opt/fortytwo && sudo docker compose restart caddy"
``` ```
### Sidecar ### Path 1: Quick Deploy (no new dependencies)
Use when only code changes — no new npm packages.
```bash ```bash
cd helix-engage-server cd /path/to/fortytwo-eap
# Deploy frontend only
bash deploy.sh frontend
# Deploy sidecar only
bash deploy.sh sidecar
# Deploy both
bash deploy.sh all
```
**What it does:**
- Frontend: `npm run build` → tar `dist/` → SCP to VPS → extract to `/opt/fortytwo/helix-engage-frontend`
- Sidecar: `nest build` → tar `dist/` + `src/` → docker cp into running container → `docker compose restart sidecar`
### Path 2: Full Deploy (new dependencies)
Use when `package.json` changed (new npm packages added).
```bash
cd /path/to/fortytwo-eap/helix-engage-server
# 1. Login to ECR # 1. Login to ECR
aws ecr get-login-password --region ap-south-1 | \ aws ecr get-login-password --region ap-south-1 | docker login --username AWS --password-stdin 043728036361.dkr.ecr.ap-south-1.amazonaws.com
docker login --username AWS --password-stdin 043728036361.dkr.ecr.ap-south-1.amazonaws.com
# 2. Build and push Docker image # 2. Build cross-platform image and push
docker buildx build --platform linux/amd64 \ docker buildx build --platform linux/amd64 \
-t 043728036361.dkr.ecr.ap-south-1.amazonaws.com/fortytwo-eap/helix-engage-sidecar:alpha \ -t 043728036361.dkr.ecr.ap-south-1.amazonaws.com/fortytwo-eap/helix-engage-sidecar:alpha \
--push . --push .
# 3. Pull and restart on EC2 # 3. Pull and restart on VPS
eval $EC2 "cd /opt/fortytwo && sudo docker compose pull sidecar-ramaiah sidecar-global && sudo docker compose up -d sidecar-ramaiah sidecar-global" ECR_TOKEN=$(aws ecr get-login-password --region ap-south-1)
sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "
echo '$ECR_TOKEN' | docker login --username AWS --password-stdin 043728036361.dkr.ecr.ap-south-1.amazonaws.com
cd /opt/fortytwo
docker compose pull sidecar
docker compose up -d sidecar
"
``` ```
### How to decide ### How to decide which path
``` ```
Did package.json change? Did package.json change?
├── YES → ECR build + push + pull (above) ├── YES → Path 2 (ECR build + push + pull)
└── NO → Same steps (ECR is the only deploy path for EC2) └── NO → Path 1 (deploy.sh)
``` ```
--- ---
## Post-Deploy: E2E Smoke Tests
```bash
cd helix-engage
npx playwright test
```
27 tests covering login, all CC Agent pages, all Supervisor pages, and sign-out.
The last test completes sign-out so the agent session is released for the next run.
---
## Checking Logs ## Checking Logs
### Sidecar logs
```bash ```bash
# Ramaiah sidecar # SSH into VPS first, or run remotely:
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker logs fortytwo-staging-sidecar-1 --tail 30"
"docker logs ramaiah-prod-sidecar-ramaiah-1 --tail 30 2>&1"
# Follow live # Follow live
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker logs fortytwo-staging-sidecar-1 -f --tail 10"
"docker logs ramaiah-prod-sidecar-ramaiah-1 -f --tail 10 2>&1"
# Filter errors # Filter for errors
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker logs fortytwo-staging-sidecar-1 --tail 100 2>&1 | grep -i error"
"docker logs ramaiah-prod-sidecar-ramaiah-1 --tail 100 2>&1" | grep -i "error\|fail"
# Telephony dispatcher # Via deploy.sh
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ bash deploy.sh logs
"docker logs ramaiah-prod-telephony-1 --tail 30 2>&1"
# Caddy
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"docker logs ramaiah-prod-caddy-1 --tail 20 2>&1"
# Platform server
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"docker logs ramaiah-prod-server-1 --tail 30 2>&1"
# All container status
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"docker ps --format 'table {{.Names}}\t{{.Status}}'"
``` ```
### Healthy startup ### Caddy logs
Look for these in sidecar logs: ```bash
sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker logs fortytwo-staging-caddy-1 --tail 30"
```
### Platform server logs
```bash
sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker logs fortytwo-staging-server-1 --tail 30"
```
### All container status
```bash
sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker ps --format 'table {{.Names}}\t{{.Status}}\t{{.Ports}}'"
```
---
## Health Checks
### Sidecar healthy startup
Look for these lines in sidecar logs:
``` ```
[NestApplication] Nest application successfully started [NestApplication] Nest application successfully started
Helix Engage Server running on port 4100 Helix Engage Server running on port 4100
[SessionService] Redis connected [SessionService] Redis connected
[ThemeService] Theme loaded from file (or "Using default theme")
[RulesStorageService] Initialized empty rules config
``` ```
### Common failure patterns ### Common failure patterns
| Log pattern | Meaning | Fix | | Log pattern | Meaning | Fix |
|---|---|---| |---|---|---|
| `Cannot find module 'xxx'` | Missing npm dependency | Rebuild ECR image | | `Cannot find module 'xxx'` | Missing npm dependency | Path 2 deploy (rebuild ECR image) |
| `UndefinedModuleException` | Circular dependency | Fix code, redeploy | | `UndefinedModuleException` | Circular dependency or missing import | Fix code, redeploy |
| `ECONNREFUSED redis:6379` | Redis not ready | `docker compose up -d redis-ramaiah` | | `ECONNREFUSED redis:6379` | Redis not ready | `docker compose restart redis sidecar` |
| `Forbidden resource` | Platform permission issue | Check user roles | | `Forbidden resource` | Platform permission issue | Check user roles |
| `429 Too Many Requests` | Ozonetel rate limit | Wait, reduce polling | | `429 Too Many Requests` | Ozonetel rate limit | Wait, reduce polling frequency |
--- ---
## Redis Operations ## Redis Cache Operations
### Clear caller resolution cache
```bash ```bash
SSH="ssh -i /tmp/ramaiah-ec2-key -o StrictHostKeyChecking=no ubuntu@13.234.31.194" sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-redis-1 redis-cli KEYS 'caller:*'"
REDIS="docker exec ramaiah-prod-redis-ramaiah-1 redis-cli"
# Clear agent session lock (fixes "already logged in from another device") # Clear all caller cache
$SSH "$REDIS DEL agent:session:ramaiahadmin" sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-redis-1 redis-cli --scan --pattern 'caller:*' | xargs -r docker exec -i fortytwo-staging-redis-1 redis-cli DEL"
```
# List all keys ### Clear recording analysis cache
$SSH "$REDIS KEYS '*'"
# Clear caller cache (stale patient names) ```bash
$SSH "$REDIS --scan --pattern 'caller:*' | xargs -r docker exec -i ramaiah-prod-redis-ramaiah-1 redis-cli DEL" sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-redis-1 redis-cli --scan --pattern 'call:analysis:*' | xargs -r docker exec -i fortytwo-staging-redis-1 redis-cli DEL"
```
# Clear masterdata cache (departments/doctors/clinics/slots) ### Clear agent name cache
$SSH "$REDIS --scan --pattern 'masterdata:*' | xargs -r docker exec -i ramaiah-prod-redis-ramaiah-1 redis-cli DEL"
# Clear recording analysis cache ```bash
$SSH "$REDIS --scan --pattern 'call:analysis:*' | xargs -r docker exec -i ramaiah-prod-redis-ramaiah-1 redis-cli DEL" sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-redis-1 redis-cli --scan --pattern 'agent:name:*' | xargs -r docker exec -i fortytwo-staging-redis-1 redis-cli DEL"
```
# Clear agent name cache ### Clear all session/cache keys
$SSH "$REDIS --scan --pattern 'agent:name:*' | xargs -r docker exec -i ramaiah-prod-redis-ramaiah-1 redis-cli DEL"
# Nuclear: flush all sidecar Redis ```bash
$SSH "$REDIS FLUSHDB" sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-redis-1 redis-cli FLUSHDB"
``` ```
--- ---
@@ -298,8 +329,7 @@ $SSH "$REDIS FLUSHDB"
## Database Access ## Database Access
```bash ```bash
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "docker exec fortytwo-staging-db-1 psql -U fortytwo -d fortytwo_staging"
"docker exec -it ramaiah-prod-db-1 psql -U fortytwo -d fortytwo_eap"
``` ```
### Useful queries ### Useful queries
@@ -324,68 +354,70 @@ JOIN core."role" r ON r.id = rt."roleId";
--- ---
## Troubleshooting ## Rollback
### "Already logged in from another device" ### Frontend rollback
Single-session enforcement per Ozonetel agent. Clear the lock: The previous frontend build is overwritten. To rollback:
```bash 1. Checkout the previous git commit
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ 2. `npm run build`
"docker exec ramaiah-prod-redis-ramaiah-1 redis-cli DEL agent:session:ramaiahadmin" 3. `bash deploy.sh frontend`
```
### Agent stuck in ACW / Wrapping Up ### Sidecar rollback (quick deploy)
Same as frontend — checkout previous commit, rebuild, redeploy.
### Sidecar rollback (ECR)
```bash ```bash
curl -X POST https://ramaiah.engage.healix360.net/api/maint/force-ready \ # Tag the current image as rollback
-H "Content-Type: application/json" \ # Then re-tag the previous image as :alpha
-d '{"agentId": "ramaiahadmin"}' # Or use a specific tag/digest
```
### Telephony events not routing # On VPS:
sshpass -p 'SasiSuman@2007' ssh root@148.230.67.184 "
```bash cd /opt/fortytwo
# Check dispatcher logs docker compose restart sidecar
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \ "
"docker logs ramaiah-prod-telephony-1 --tail 30 2>&1"
# Check service discovery registry
ssh -i /tmp/ramaiah-ec2-key ubuntu@13.234.31.194 \
"docker exec ramaiah-prod-redis-telephony-1 redis-cli KEYS '*'"
```
### Theme/branding reset after Redis flush
```bash
curl -X PUT https://ramaiah.engage.healix360.net/api/config/theme \
-H "Content-Type: application/json" \
-d '{"defaults": {"brandName": "Helix Engage", "hospitalName": "Ramaiah Hospitals"}}'
``` ```
--- ---
## Rollback ## Theme Management
### Frontend ### View current theme
```bash
curl -s https://engage-api.srv1477139.hstgr.cloud/api/config/theme | python3 -m json.tool
```
Checkout previous commit → `npm run build` → rsync to EC2. ### Reset theme to defaults
```bash
curl -s -X POST https://engage-api.srv1477139.hstgr.cloud/api/config/theme/reset | python3 -m json.tool
```
### Sidecar ### Theme backups
Stored on the sidecar container at `/app/data/theme-backups/`. Each save creates a timestamped backup.
Checkout previous commit → ECR build + push → pull on EC2.
For immediate rollback, re-tag a known-good ECR image as `:alpha` and pull.
--- ---
## Git Repositories ## Git Repositories
| Repo | Azure DevOps | Branch | | Repo | Azure DevOps URL | Branch |
|---|---|---| |---|---|---|
| Frontend | `helix-engage` in Patient Engagement Platform | `feature/omnichannel-widget` | | Frontend | `https://dev.azure.com/globalhealthx/EMR/_git/helix-engage` | `dev` |
| Sidecar | `helix-engage-server` in Patient Engagement Platform | `master` | | Sidecar | `https://dev.azure.com/globalhealthx/EMR/_git/helix-engage-server` | `dev` |
| SDK App | `FortyTwoApps/helix-engage/` (monorepo) | `dev` | | SDK App | `FortyTwoApps/helix-engage/` (in fortytwo-eap monorepo) | `dev` |
| Telephony | `helix-engage-telephony` in Patient Engagement Platform | `master` |
### Commit and push pattern
```bash
# Frontend
cd helix-engage
git add -A && git commit -m "feat: description" && git push origin dev
# Sidecar
cd helix-engage-server
git add -A && git commit -m "feat: description" && git push origin dev
```
--- ---
@@ -393,7 +425,7 @@ For immediate rollback, re-tag a known-good ECR image as `:alpha` and pull.
| Detail | Value | | Detail | Value |
|---|---| |---|---|
| Registry | `043728036361.dkr.ecr.ap-south-1.amazonaws.com` | | Registry | 043728036361.dkr.ecr.ap-south-1.amazonaws.com |
| Sidecar repo | `fortytwo-eap/helix-engage-sidecar` | | Repository | fortytwo-eap/helix-engage-sidecar |
| Tag | `alpha` | | Tag | alpha |
| Region | `ap-south-1` (Mumbai) | | Region | ap-south-1 (Mumbai) |

612
docs/generate-pptx-apr06-11.cjs
View File

@@ -1,612 +0,0 @@
/**
* Helix Engage — Weekly Update (Apr 6–11, 2026)
* "Clinical Precision" design — dark/light alternating, geometric, executive healthcare
*/
const PptxGenJS = require("pptxgenjs");
// ── Design System ───────────────────────────────────────────────
const P = {
// Dark palette (hero slides)
navyDeep: "0F172A", // slate-900
navyMid: "1E293B", // slate-800
navyLight: "334155", // slate-700
// Light palette (content slides)
white: "FFFFFF",
snow: "F8FAFC", // slate-50
mist: "F1F5F9", // slate-100
silver: "E2E8F0", // slate-200
// Text
inkDark: "0F172A",
inkMid: "475569", // slate-600
inkLight: "94A3B8", // slate-400
inkOnDark: "F1F5F9",
inkMuted: "64748B", // slate-500
// Accents — healthcare-inspired
teal: "0D9488", // primary brand
tealLight: "14B8A6",
tealPale: "CCFBF1", // teal-100
blue: "0284C7", // sky-600
blueLight: "38BDF8",
indigo: "4F46E5",
amber: "D97706",
rose: "E11D48",
emerald: "059669",
violet: "7C3AED",
};
const F = "Calibri"; // Clean, universally available
const FB = "Calibri Light";
// ── Helpers ─────────────────────────────────────────────────────
function sn(s, n) {
s.addText(`${n}`, {
x: 9.3, y: 5.15, w: 0.5, h: 0.3,
fontSize: 8, color: P.inkLight, fontFace: FB, align: "right",
});
}
function darkSlide(pptx) {
const s = pptx.addSlide();
s.background = { color: P.navyDeep };
return s;
}
function lightSlide(pptx) {
const s = pptx.addSlide();
s.background = { color: P.white };
return s;
}
// Thin teal accent line at top
function topLine(s, color) {
s.addShape("rect", { x: 0, y: 0, w: 10, h: 0.04, fill: { color: color || P.teal } });
}
// Section label pill
function pill(s, text, color, x, y) {
const w = text.length * 0.075 + 0.5;
s.addShape("roundRect", {
x, y, w, h: 0.26,
fill: { color, transparency: 85 },
rectRadius: 0.13,
});
s.addText(text.toUpperCase(), {
x, y, w, h: 0.26,
fontSize: 7, fontFace: F, bold: true, color,
align: "center", valign: "middle",
});
}
// Metric block (for dark slides)
function metric(s, { x, y, value, label, color, w = 2.0 }) {
// Subtle card
s.addShape("roundRect", {
x, y, w, h: 1.4,
fill: { color: P.navyMid },
line: { color: P.navyLight, width: 0.5 },
rectRadius: 0.08,
});
// Accent top bar
s.addShape("rect", { x: x + 0.15, y: y + 0.06, w: w - 0.3, h: 0.025, fill: { color } });
// Value
s.addText(value, {
x, y: y + 0.15, w, h: 0.75,
fontSize: 38, fontFace: F, bold: true, color,
align: "center", valign: "middle",
});
// Label
s.addText(label, {
x, y: y + 0.9, w, h: 0.35,
fontSize: 9, fontFace: FB, color: P.inkLight,
align: "center", valign: "top",
});
}
// Content card (for light slides)
function card(s, { x, y, w, h, title, accent, items }) {
// Card with left accent border
s.addShape("roundRect", {
x, y, w, h,
fill: { color: P.snow },
line: { color: P.silver, width: 0.5 },
rectRadius: 0.06,
});
// Left accent bar
s.addShape("rect", { x, y: y + 0.1, w: 0.035, h: h - 0.2, fill: { color: accent } });
// Title
s.addText(title, {
x: x + 0.25, y: y + 0.08, w: w - 0.4, h: 0.32,
fontSize: 10.5, fontFace: F, bold: true, color: accent,
});
// Items
if (items?.length) {
s.addText(
items.map(t => ({
text: t,
options: {
fontSize: 8.5, fontFace: FB, color: P.inkMid,
bullet: { code: "2022" }, // bullet dot
paraSpaceAfter: 3, breakLine: true,
},
})),
{ x: x + 0.25, y: y + 0.4, w: w - 0.5, h: h - 0.5, valign: "top", lineSpacingMultiple: 1.15 }
);
}
}
// Section heading for light slides
function sectionHead(s, title, subtitle) {
s.addText(title, {
x: 0.6, y: 0.35, w: 8, h: 0.45,
fontSize: 22, fontFace: F, bold: true, color: P.inkDark,
});
if (subtitle) {
s.addText(subtitle, {
x: 0.6, y: 0.78, w: 8, h: 0.3,
fontSize: 10, fontFace: FB, color: P.inkMuted,
});
}
}
// ═════════════════════════════════════════════════════════════════
async function build() {
const pptx = new PptxGenJS();
pptx.layout = "LAYOUT_16x9";
pptx.author = "Satya Suman Sari";
pptx.company = "FortyTwo Platform";
pptx.title = "Helix Engage — Weekly Update (Apr 6–11, 2026)";
// ─── SLIDE 1: Title (Dark) ────────────────────────────────────
{
const s = darkSlide(pptx);
topLine(s, P.teal);
// Geometric accent — vertical teal line
s.addShape("rect", { x: 0.6, y: 1.2, w: 0.035, h: 2.8, fill: { color: P.teal } });
pill(s, "Weekly Status", P.tealLight, 0.85, 1.3);
s.addText("Helix Engage", {
x: 0.85, y: 1.7, w: 7, h: 0.9,
fontSize: 42, fontFace: F, bold: true, color: P.white,
});
s.addText("Engineering Progress Report", {
x: 0.85, y: 2.5, w: 7, h: 0.4,
fontSize: 16, fontFace: FB, color: P.inkLight,
});
// Date block
s.addShape("rect", { x: 0.85, y: 3.2, w: 2.2, h: 0.04, fill: { color: P.teal, transparency: 50 } });
s.addText("April 6 – 11, 2026", {
x: 0.85, y: 3.35, w: 3, h: 0.3,
fontSize: 11, fontFace: F, bold: true, color: P.tealLight,
});
s.addText("Satya Suman Sari | FortyTwo Platform", {
x: 0.85, y: 4.8, w: 5, h: 0.25,
fontSize: 8, fontFace: FB, color: P.inkLight,
});
sn(s, 1);
}
// ─── SLIDE 2: At a Glance (Dark) ─────────────────────────────
{
const s = darkSlide(pptx);
topLine(s, P.teal);
pill(s, "Overview", P.tealLight, 0.5, 0.3);
s.addText("Week at a Glance", {
x: 0.5, y: 0.6, w: 5, h: 0.45,
fontSize: 22, fontFace: F, bold: true, color: P.white,
});
metric(s, { x: 0.5, y: 1.25, value: "57", label: "Commits Shipped", color: P.blueLight, w: 2.05 });
metric(s, { x: 2.7, y: 1.25, value: "9", label: "Defects Resolved", color: P.rose, w: 2.05 });
metric(s, { x: 4.9, y: 1.25, value: "40", label: "E2E Tests Passing", color: P.emerald, w: 2.05 });
metric(s, { x: 7.1, y: 1.25, value: "17", label: "Docker Containers", color: P.violet, w: 2.05 });
// Key highlights
const highlights = [
"Multi-tenant EC2 architecture deployed — Ramaiah + Global on single instance",
"Woodpecker CI/CD pipeline operational with Teams notifications",
"Cross-tenant security vulnerability identified and patched",
"Complete documentation: architecture, runbook, CI/CD guide",
];
s.addText(
highlights.map(h => ({
text: h,
options: {
fontSize: 10, fontFace: FB, color: P.inkOnDark,
bullet: { code: "25B8" }, paraSpaceAfter: 6, breakLine: true,
},
})),
{ x: 0.6, y: 2.9, w: 8.5, h: 2.0, valign: "top", lineSpacingMultiple: 1.2 }
);
sn(s, 2);
}
// ─── SLIDE 3: Defect Fixes (Light) ────────────────────────────
{
const s = lightSlide(pptx);
topLine(s, P.rose);
sectionHead(s, "Defect Resolution", "9 of 17 triaged bugs fixed and deployed this week");
const bugs = [
["#527", "Appointment creation overwrites patient details"],
["#529", "Break/Training status doesn't block outbound calls"],
["#531", "Agent can log out during an active call"],
["#533", "Redundant Call History page header"],
["#534", "Redundant Patients page header"],
["#536", "My Performance displays wrong agent data"],
["#538", "Supervisor dashboard metrics incorrect"],
["#540", "Ghost calls visible for logged-out agents"],
["#547", "SLA priority rules not reflected in worklist"],
];
const rows = [
[
{ text: "ID", options: { bold: true, color: P.white, fill: { color: P.navyMid }, fontSize: 8.5, fontFace: F } },
{ text: "Description", options: { bold: true, color: P.white, fill: { color: P.navyMid }, fontSize: 8.5, fontFace: F } },
{ text: "Status", options: { bold: true, color: P.white, fill: { color: P.navyMid }, fontSize: 8.5, fontFace: F } },
],
...bugs.map(([id, desc], i) => [
{ text: id, options: { fontSize: 8.5, fontFace: F, color: P.inkMid, fill: { color: i % 2 === 0 ? P.snow : P.white } } },
{ text: desc, options: { fontSize: 8.5, fontFace: FB, color: P.inkMid, fill: { color: i % 2 === 0 ? P.snow : P.white } } },
{ text: "Resolved", options: { fontSize: 8.5, fontFace: F, bold: true, color: P.emerald, fill: { color: i % 2 === 0 ? P.snow : P.white } } },
]),
];
s.addTable(rows, {
x: 0.5, y: 1.2, w: 9.0,
border: { type: "solid", pt: 0.3, color: P.silver },
colW: [0.7, 6.6, 1.7], rowH: 0.36,
});
s.addText("Deferred by product: #516 recordings | #517 AI transcription | #519 supervisor calling | #539 real-time missed calls | #541 whisper/barge", {
x: 0.5, y: 4.9, w: 9, h: 0.3,
fontSize: 7.5, fontFace: FB, color: P.inkLight, italic: true,
});
sn(s, 3);
}
// ─── SLIDE 4: Security Fix (Dark) ────────────────────────────
{
const s = darkSlide(pptx);
topLine(s, P.rose);
pill(s, "Security", P.rose, 0.5, 0.3);
s.addText("Cross-Tenant Isolation Vulnerability", {
x: 0.5, y: 0.6, w: 9, h: 0.45,
fontSize: 22, fontFace: F, bold: true, color: P.white,
});
s.addText("Discovered and patched within the same sprint", {
x: 0.5, y: 1.0, w: 9, h: 0.3,
fontSize: 10, fontFace: FB, color: P.inkLight,
});
// Problem
s.addShape("roundRect", {
x: 0.4, y: 1.5, w: 4.4, h: 2.6,
fill: { color: P.navyMid }, line: { color: P.navyLight, width: 0.5 }, rectRadius: 0.06,
});
s.addShape("rect", { x: 0.4, y: 1.5, w: 0.035, h: 2.6, fill: { color: P.rose } });
s.addText("Impact", {
x: 0.65, y: 1.55, w: 3, h: 0.3,
fontSize: 11, fontFace: F, bold: true, color: P.rose,
});
s.addText(
[
"Shared OZONETEL_AGENT_ID env var across sidecars",
"6 endpoints used silent fallback to wrong agent",
"Ramaiah operations could modify Global's session",
"Agent state, disposition, dial, metrics all affected",
"No error or warning — completely silent",
].map(t => ({
text: t, options: { fontSize: 8.5, fontFace: FB, color: P.inkOnDark, bullet: { code: "25B8" }, paraSpaceAfter: 4, breakLine: true },
})),
{ x: 0.65, y: 1.9, w: 3.9, h: 2.0, valign: "top" }
);
// Resolution
s.addShape("roundRect", {
x: 5.1, y: 1.5, w: 4.5, h: 2.6,
fill: { color: P.navyMid }, line: { color: P.navyLight, width: 0.5 }, rectRadius: 0.06,
});
s.addShape("rect", { x: 5.1, y: 1.5, w: 0.035, h: 2.6, fill: { color: P.emerald } });
s.addText("Resolution", {
x: 5.35, y: 1.55, w: 3, h: 0.3,
fontSize: 11, fontFace: F, bold: true, color: P.emerald,
});
s.addText(
[
"Removed all defaultAgentId fallbacks",
"All 6 endpoints now require agentId (400 if absent)",
"Frontend sends agentId from localStorage",
"OZONETEL_AGENT_ID removed from config entirely",
"Verified with 40 E2E tests — zero regressions",
].map(t => ({
text: t, options: { fontSize: 8.5, fontFace: FB, color: P.inkOnDark, bullet: { code: "25B8" }, paraSpaceAfter: 4, breakLine: true },
})),
{ x: 5.35, y: 1.9, w: 4.0, h: 2.0, valign: "top" }
);
// Clean layers footer
s.addText("Unaffected layers: Login (DB lookup) | Telephony dispatcher (event payload) | Sidecar registration (GraphQL) | Supervisor (webhook events)", {
x: 0.5, y: 4.4, w: 9, h: 0.3,
fontSize: 7.5, fontFace: FB, color: P.inkLight,
});
sn(s, 4);
}
// ─── SLIDE 5: EC2 Architecture (Light) ────────────────────────
{
const s = lightSlide(pptx);
topLine(s, P.blue);
sectionHead(s, "AWS EC2 Multi-Tenant Architecture", "Single instance, strict tenant isolation, host-routed Caddy");
card(s, {
x: 0.4, y: 1.2, w: 4.4, h: 2.0,
title: "Shared Platform Layer", accent: P.blue,
items: [
"NestJS server — multi-tenant by Origin header",
"PostgreSQL 16 with workspace-per-schema",
"BullMQ worker, ClickHouse analytics, Redpanda events",
"MinIO S3-compatible object storage",
],
});
card(s, {
x: 5.1, y: 1.2, w: 4.5, h: 2.0,
title: "Isolated Sidecar Layer", accent: P.amber,
items: [
"Per-hospital: sidecar + Redis + data volume",
"Caddy host-routes — no catchall, no cross-tenant",
"ramaiah.engage.healix360.net \u2192 sidecar-ramaiah",
"global.engage.healix360.net \u2192 sidecar-global",
],
});
card(s, {
x: 0.4, y: 3.4, w: 4.4, h: 1.7,
title: "Telephony Dispatcher", accent: P.teal,
items: [
"Routes Ozonetel events by agentId via Redis lookup",
"Sidecars self-register on boot with heartbeat",
"Zero config when onboarding new hospitals",
],
});
card(s, {
x: 5.1, y: 3.4, w: 4.5, h: 1.7,
title: "Live Endpoints", accent: P.indigo,
items: [
"ramaiah.engage / global.engage — Hospital UIs",
"telephony.engage — Event dispatcher",
"operations — CI/CD dashboard",
"git — Gitea forge (mirrors Azure DevOps)",
],
});
sn(s, 5);
}
// ─── SLIDE 6: E2E Tests (Dark) ────────────────────────────────
{
const s = darkSlide(pptx);
topLine(s, P.emerald);
pill(s, "Quality Assurance", P.emerald, 0.5, 0.3);
s.addText("40 Automated E2E Tests", {
x: 0.5, y: 0.6, w: 9, h: 0.45,
fontSize: 22, fontFace: F, bold: true, color: P.white,
});
s.addText("Playwright smoke tests covering every page across both hospitals", {
x: 0.5, y: 1.0, w: 9, h: 0.3,
fontSize: 10, fontFace: FB, color: P.inkLight,
});
// Ramaiah
s.addShape("roundRect", {
x: 0.4, y: 1.5, w: 4.4, h: 2.4,
fill: { color: P.navyMid }, line: { color: P.navyLight, width: 0.5 }, rectRadius: 0.06,
});
s.addShape("rect", { x: 0.4, y: 1.5, w: 0.035, h: 2.4, fill: { color: P.amber } });
s.addText("Ramaiah Hospitals — 27 tests", {
x: 0.65, y: 1.55, w: 4, h: 0.3,
fontSize: 10.5, fontFace: F, bold: true, color: P.amber,
});
s.addText(
[
"Login flow: branding, credentials, auth guard (4)",
"CC Agent: call desk, history, patients, appointments, performance, sidebar, sign-out (10)",
"Supervisor: dashboard, team perf, live monitor, all data pages, settings (12)",
"Auth setup with auto session unlock (1)",
].map(t => ({ text: t, options: { fontSize: 8.5, fontFace: FB, color: P.inkOnDark, bullet: { code: "25B8" }, paraSpaceAfter: 5, breakLine: true } })),
{ x: 0.65, y: 1.9, w: 3.9, h: 1.8, valign: "top" }
);
// Global
s.addShape("roundRect", {
x: 5.1, y: 1.5, w: 4.5, h: 2.4,
fill: { color: P.navyMid }, line: { color: P.navyLight, width: 0.5 }, rectRadius: 0.06,
});
s.addShape("rect", { x: 5.1, y: 1.5, w: 0.035, h: 2.4, fill: { color: P.blueLight } });
s.addText("Global Hospital — 13 tests", {
x: 5.35, y: 1.55, w: 4, h: 0.3,
fontSize: 10.5, fontFace: F, bold: true, color: P.blueLight,
});
s.addText(
[
"CC Agent: landing, history, patients, appointments, performance, sidebar, sign-out (7)",
"Supervisor: landing, patients, appointments, campaigns, settings (5)",
"Auth setup with auto session unlock (1)",
].map(t => ({ text: t, options: { fontSize: 8.5, fontFace: FB, color: P.inkOnDark, bullet: { code: "25B8" }, paraSpaceAfter: 5, breakLine: true } })),
{ x: 5.35, y: 1.9, w: 4.0, h: 1.8, valign: "top" }
);
// Self-healing footer
s.addShape("roundRect", {
x: 0.4, y: 4.15, w: 9.2, h: 0.85,
fill: { color: P.navyMid }, line: { color: P.navyLight, width: 0.5 }, rectRadius: 0.06,
});
s.addText("Self-Healing", {
x: 0.65, y: 4.2, w: 2, h: 0.25,
fontSize: 9, fontFace: F, bold: true, color: P.emerald,
});
s.addText("Auto-clears session locks before login | Completes sign-out after tests | Runs against live EC2, not mocked | ~6 min on Woodpecker CI", {
x: 0.65, y: 4.5, w: 8.5, h: 0.3,
fontSize: 8, fontFace: FB, color: P.inkLight,
});
sn(s, 6);
}
// ─── SLIDE 7: CI/CD (Light) ───────────────────────────────────
{
const s = lightSlide(pptx);
topLine(s, P.indigo);
sectionHead(s, "CI/CD Pipeline", "Automated testing, report publishing, and team notifications");
// Flow bar
s.addShape("roundRect", {
x: 0.5, y: 1.15, w: 9.0, h: 0.4,
fill: { color: P.mist }, line: { color: P.silver, width: 0.5 }, rectRadius: 0.06,
});
s.addText("Azure DevOps \u2192 Gitea Mirror \u2192 Woodpecker Pipeline \u2192 MinIO Reports \u2192 Teams Alert", {
x: 0.5, y: 1.15, w: 9.0, h: 0.4,
fontSize: 9.5, fontFace: F, bold: true, color: P.indigo, align: "center", valign: "middle",
});
card(s, {
x: 0.4, y: 1.75, w: 4.4, h: 1.7,
title: "Frontend Pipeline", accent: P.blue,
items: [
"TypeScript typecheck (yarn tsc --noEmit)",
"40 Playwright E2E tests against live EC2",
"HTML report uploaded to MinIO (S3 plugin)",
"Teams Adaptive Card with report link",
],
});
card(s, {
x: 5.1, y: 1.75, w: 4.5, h: 1.7,
title: "Sidecar Pipeline", accent: P.violet,
items: [
"Jest unit tests (npm ci + jest --ci)",
"Teams notification on pass or fail",
"Triggered on push or manual run",
],
});
card(s, {
x: 0.4, y: 3.65, w: 9.2, h: 1.4,
title: "Operations Dashboard", accent: P.teal,
items: [
"operations.healix360.net — Woodpecker CI with full build history and logs",
"operations.healix360.net/reports/{run}/ — Playwright HTML reports with screenshots (basic auth protected)",
"git.healix360.net — Gitea forge mirroring Azure DevOps every 15 minutes",
"Teams 'Deployment updates' channel receives Adaptive Cards with pass/fail count and report link",
],
});
sn(s, 7);
}
// ─── SLIDE 8: Timeline (Light) ────────────────────────────────
{
const s = lightSlide(pptx);
topLine(s, P.teal);
sectionHead(s, "Development Timeline");
const timeline = [
{ date: "Apr 6 Sun", title: "Onboarding Wizard", desc: "6-phase setup wizard, widget config, telephony/AI CRUD, team invite, clinic/doctor management", color: P.blue },
{ date: "Apr 7 Mon", title: "SIP & ACW Fixes", desc: "3-layer ACW protection, SIP disconnect guard, dispose agentId, setup wizard polish", color: P.teal },
{ date: "Apr 8 Tue", title: "Master Data", desc: "Dynamic clinic/doctor fetching, appointment form overhaul, Ramaiah 195 doctor seed", color: P.amber },
{ date: "Apr 9 Wed", title: "EC2 Deployment", desc: "Multi-tenant architecture, telephony dispatcher, Caddy host routing, 14 containers", color: P.indigo },
{ date: "Apr 10 Thu", title: "Defect Sprint", desc: "9 bugs fixed, 40 E2E tests, architecture docs, runbook, cross-tenant discovery", color: P.rose },
{ date: "Apr 11 Fri", title: "CI/CD Pipeline", desc: "Woodpecker + Gitea + MinIO, Teams notifications, defaultAgentId security patch", color: P.emerald },
];
// Vertical line
s.addShape("rect", { x: 1.25, y: 1.2, w: 0.02, h: 3.9, fill: { color: P.silver } });
timeline.forEach((e, i) => {
const y = 1.2 + i * 0.65;
// Dot
s.addShape("ellipse", {
x: 1.18, y: y + 0.06, w: 0.16, h: 0.16,
fill: { color: e.color }, line: { color: P.white, width: 2 },
});
// Date
s.addText(e.date, {
x: 1.55, y, w: 1.2, h: 0.22,
fontSize: 7.5, fontFace: F, bold: true, color: e.color,
});
// Title
s.addText(e.title, {
x: 2.8, y, w: 1.8, h: 0.22,
fontSize: 9.5, fontFace: F, bold: true, color: P.inkDark,
});
// Desc
s.addText(e.desc, {
x: 4.7, y, w: 4.8, h: 0.55,
fontSize: 8, fontFace: FB, color: P.inkMid, valign: "top",
});
});
sn(s, 8);
}
// ─── SLIDE 9: Closing (Dark) ──────────────────────────────────
{
const s = darkSlide(pptx);
topLine(s, P.teal);
s.addShape("rect", { x: 0.6, y: 1.6, w: 0.035, h: 1.8, fill: { color: P.teal } });
s.addText("57 commits across 3 repositories", {
x: 0.85, y: 1.6, w: 8, h: 0.6,
fontSize: 28, fontFace: F, bold: true, color: P.white,
});
s.addText("From single-tenant VPS to multi-tenant EC2 with automated CI/CD,\n40 end-to-end tests, and a fully integrated operations dashboard.", {
x: 0.85, y: 2.3, w: 7, h: 0.7,
fontSize: 12, fontFace: FB, color: P.inkLight, lineSpacingMultiple: 1.4,
});
// Achievement pills
const items = [
{ text: "Multi-Tenant EC2", color: P.blue },
{ text: "40 E2E Tests", color: P.emerald },
{ text: "CI/CD Pipeline", color: P.indigo },
{ text: "9 Bugs Fixed", color: P.rose },
{ text: "Teams Alerts", color: P.violet },
];
items.forEach((a, i) => {
const x = 0.85 + i * 1.7;
s.addShape("roundRect", {
x, y: 3.4, w: 1.5, h: 0.32,
fill: { color: P.navyMid },
line: { color: a.color, width: 1 },
rectRadius: 0.16,
});
s.addText(a.text, {
x, y: 3.4, w: 1.5, h: 0.32,
fontSize: 8, fontFace: F, bold: true, color: a.color,
align: "center", valign: "middle",
});
});
s.addText("Satya Suman Sari | FortyTwo Platform", {
x: 0.85, y: 4.8, w: 5, h: 0.25,
fontSize: 8, fontFace: FB, color: P.inkLight,
});
sn(s, 9);
}
await pptx.writeFile({ fileName: "docs/weekly-update-apr06-11.pptx" });
console.log("Generated: docs/weekly-update-apr06-11.pptx");
}
build().catch(err => { console.error(err); process.exit(1); });

102
docs/ozonetel-cdr-api-reference.md
View File

@@ -1,102 +0,0 @@
# Ozonetel CDR API Reference
> Source: [Ozonetel docs](https://docs.ozonetel.com/reference/get_ca-reports-fetchcdrdetails)
## Endpoints
| Endpoint | Path | Use Case |
|----------|------|----------|
| Fetch CDR Detailed | `GET /ca_reports/fetchCDRDetails` | All CDR for a single day |
| Fetch CDR by UCID | `GET /ca_reports/fetchCdrByUCID` | Single call lookup by UCID |
| Fetch CDR Paginated | `GET /ca_reports/fetchCdrByPagination` | Paginated CDR with `totalCount` |
## Common Constraints
- **Auth**: Bearer token (via `POST /ca_apis/caToken/generateToken`)
- **Rate limit**: 2 requests per minute (all CDR endpoints)
- **Date range**: Single day only (`fromDate` and `toDate` must be same date)
- **Lookback**: 15 days maximum from time of request
- **Mandatory params**: `fromDate`, `toDate`, `userName` (+ `ucid` for UCID endpoint)
- **Date format**: `YYYY-MM-DD HH:MM:SS`
## Domain
- Domestic: `in1-ccaas-api.ozonetel.com`
- International: `api.ccaas.ozonetel.com`
## CDR Record Fields (42 fields)
| Field | Type | Description | Sidecar Status |
|-------|------|-------------|----------------|
| `AgentDialStatus` | string | Agent's dial attempt status (e.g., "answered") | Not mapped |
| `AgentID` | string | Agent identifier | **Mapped** — filter CDR by agent |
| `AgentName` | string | Agent name | **Mapped** — fallback filter |
| `CallAudio` | string | URL to call recording (S3) | Not mapped (recording via platform) |
| `CallDate` | string | Date of call (YYYY-MM-DD) | Not mapped |
| `CallID` | number | Unique call identifier | Not mapped |
| `CallerConfAudioFile` | string | Conference audio file | Not mapped |
| `CallerID` | string | Caller's phone number | Not mapped |
| `CampaignName` | string | Associated campaign name | Not mapped — **available for US-15** |
| `Comments` | string | Additional comments | Not mapped |
| `ConferenceDuration` | string | Conference duration (HH:MM:SS) | Not mapped |
| `CustomerDialStatus` | string | Customer dial status | Not mapped |
| `CustomerRingTime` | string | Customer phone ring time | Not mapped — **missed call analysis** |
| `DID` | string | Direct inward dial number | Not mapped — **available for US-2 branch display** |
| `DialOutName` | string | Dialed party name | Not mapped |
| `DialStatus` | string | Overall dial status | Not mapped |
| `DialedNumber` | string | Phone number dialed | Not mapped |
| `Disposition` | string | Call disposition/outcome | **Mapped** — disposition breakdown |
| `Duration` | string | Total call duration | Not mapped |
| `DynamicDID` | string | Dynamic DID reference | Not mapped |
| `E164` | string | E.164 formatted phone number | Not mapped |
| `EndTime` | string | Call end time | Not mapped |
| `Event` | string | Event type (e.g., "AgentDial") | Not mapped |
| `HandlingTime` | string/null | Total handling time — **CAN BE NULL** | Not mapped — **available for US-13 avg handling** |
| `HangupBy` | string | Who terminated call | Not mapped |
| `HoldDuration` | string | Time on hold | Not mapped — **available for US-12** |
| `Location` | string | Caller location | Not mapped |
| `PickupTime` | string | When call was answered | Not mapped |
| `Rating` | number | Call quality rating | Not mapped |
| `RatingComments` | string | Rating comments | Not mapped |
| `Skill` | string | Agent skill/queue name | Not mapped |
| `StartTime` | string | Call start time | Not mapped |
| `Status` | string | Call status (Answered/NotAnswered) | **Mapped** — inbound/missed split |
| `TalkTime` | string | Active talk duration | **Mapped** — avg talk time calc |
| `TimeToAnswer` | string | Duration until answer | Not mapped — **available for lead response KPI** |
| `TransferType` | string | Type of transfer | Not mapped — **available for US-3 audit** |
| `TransferredTo` / `TransferTo` | string | Transfer target — **field name varies by endpoint** | Not mapped |
| `Type` | string | Call type (InBound/Manual/Progressive) | **Mapped** — inbound/outbound split |
| `UCID` | number | Unique call identifier | Not mapped |
| `UUI` | string | User-to-user information | Not mapped |
| `WrapUpEndTime` | string/null | Wrapup completion time — **CAN BE NULL** | Not mapped |
| `WrapUpStartTime` | string/null | Wrapup start time — **CAN BE NULL** | Not mapped |
| `WrapupDuration` | string/null | Wrapup duration — **CAN BE NULL** | Not mapped — **available for US-12** |
## Pagination Endpoint Extra Fields
| Field | Description |
|-------|-------------|
| `totalCount` | Total number of records matching the query |
## Known Issues / Gotchas
1. **`HandlingTime`, `WrapupDuration`, `WrapUpStartTime`, `WrapUpEndTime` can be `null`** — when agent didn't complete wrapup (seen in UCID endpoint example). Code must null-guard these.
2. **Field name inconsistency**: `TransferredTo` in fetchCDRDetails vs `TransferTo` in pagination endpoint. Handle both.
3. **`WrapUpEndTime` vs `WrapupEndTime`**: casing differs between endpoints (camelCase vs mixed). Handle both.
4. **Single-day constraint**: `fromDate` and `toDate` must be the same date. For multi-day range, call once per day.
5. **Rate limit 2 req/min**: For a 7-day weekly report that needs CDR + summary per day = 14 API calls = 7 minutes minimum. Consider caching daily results.
## Current Sidecar Usage
**Endpoint used**: `fetchCDRDetails` only (in `ozonetel-agent.service.ts`)
**Fields actively mapped** (6 of 42):
- `AgentID` / `AgentName` — agent filtering
- `Type` — inbound/outbound split
- `Status` — answered/missed split
- `TalkTime` — avg talk time calculation
- `Disposition` — disposition breakdown chart
**Not yet used**:
- `fetchCdrByUCID` — useful for Patient 360 single-call drill-down
- `fetchCdrByPagination` — useful for high-volume days (current approach loads all records into memory)

1219
docs/requirements.md
View File

File diff suppressed because it is too large Load Diff

979
docs/superpowers/plans/2026-04-05-website-widget.md
View File

@@ -1,979 +0,0 @@
# Website Widget — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Build an embeddable website widget (AI chat + appointment booking + lead capture) served from the sidecar, with HMAC-signed site keys, captcha protection, and theme integration.
**Architecture:** Sidecar gets a new `widget` module with endpoints for init, chat, booking, leads, and key management. A separate Preact-based widget bundle is built with Vite in library mode, served as a static file from the sidecar. The widget renders in a shadow DOM for CSS isolation and fetches theme/config via the site key.
**Tech Stack:** NestJS (sidecar endpoints), Preact + Vite (widget bundle), Shadow DOM, HMAC-SHA256 (key signing), reCAPTCHA v3 (captcha)
**Spec:** `docs/superpowers/specs/2026-04-05-website-widget-design.md`
---
## File Map
### Sidecar (helix-engage-server)
| File | Action | Responsibility |
|---|---|---|
| `src/widget/widget.module.ts` | Create | NestJS module |
| `src/widget/widget.controller.ts` | Create | REST endpoints: init, chat, doctors, slots, book, lead |
| `src/widget/widget.service.ts` | Create | Lead creation, appointment booking, doctor queries |
| `src/widget/widget-keys.service.ts` | Create | HMAC key generation, validation, CRUD via Redis |
| `src/widget/widget-key.guard.ts` | Create | NestJS guard for key + origin validation |
| `src/widget/captcha.guard.ts` | Create | reCAPTCHA v3 token verification |
| `src/widget/widget.types.ts` | Create | Types for widget requests/responses |
| `src/auth/session.service.ts` | Modify | Add `setCachePersistent()` method |
| `src/app.module.ts` | Modify | Import WidgetModule |
| `src/main.ts` | Modify | Serve static widget.js file |
### Widget Bundle (new package)
| File | Action | Responsibility |
|---|---|---|
| `packages/helix-engage-widget/package.json` | Create | Package config |
| `packages/helix-engage-widget/vite.config.ts` | Create | Library mode, IIFE output |
| `packages/helix-engage-widget/tsconfig.json` | Create | TypeScript config |
| `packages/helix-engage-widget/src/main.ts` | Create | Entry: read data-key, init widget |
| `packages/helix-engage-widget/src/api.ts` | Create | HTTP client for widget endpoints |
| `packages/helix-engage-widget/src/widget.tsx` | Create | Shadow DOM mount, theming, tab routing |
| `packages/helix-engage-widget/src/chat.tsx` | Create | AI chatbot with streaming |
| `packages/helix-engage-widget/src/booking.tsx` | Create | Appointment booking flow |
| `packages/helix-engage-widget/src/contact.tsx` | Create | Lead capture form |
| `packages/helix-engage-widget/src/captcha.ts` | Create | reCAPTCHA v3 integration |
| `packages/helix-engage-widget/src/styles.ts` | Create | CSS-in-JS for shadow DOM |
| `packages/helix-engage-widget/src/types.ts` | Create | Shared types |
---
### Task 1: Widget Types + Key Service (Sidecar)
**Files:**
- Create: `helix-engage-server/src/widget/widget.types.ts`
- Create: `helix-engage-server/src/widget/widget-keys.service.ts`
- Modify: `helix-engage-server/src/auth/session.service.ts`
- [ ] **Step 1: Add setCachePersistent to SessionService**
Add a method that sets a Redis key without TTL:
```typescript
async setCachePersistent(key: string, value: string): Promise<void> {
await this.redis.set(key, value);
}
```
- [ ] **Step 2: Create widget.types.ts**
```typescript
// src/widget/widget.types.ts
export type WidgetSiteKey = {
siteId: string;
hospitalName: string;
allowedOrigins: string[];
active: boolean;
createdAt: string;
};
export type WidgetInitResponse = {
brand: { name: string; logo: string };
colors: { primary: string; primaryLight: string; text: string; textLight: string };
captchaSiteKey: string;
};
export type WidgetBookRequest = {
departmentId: string;
doctorId: string;
scheduledAt: string;
patientName: string;
patientPhone: string;
age?: string;
gender?: string;
chiefComplaint?: string;
captchaToken: string;
};
export type WidgetLeadRequest = {
name: string;
phone: string;
interest?: string;
message?: string;
captchaToken: string;
};
export type WidgetChatRequest = {
messages: Array<{ role: string; content: string }>;
captchaToken?: string;
};
```
- [ ] **Step 3: Create widget-keys.service.ts**
```typescript
// src/widget/widget-keys.service.ts
import { Injectable, Logger } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { createHmac, timingSafeEqual, randomUUID } from 'crypto';
import { SessionService } from '../auth/session.service';
import type { WidgetSiteKey } from './widget.types';
const KEY_PREFIX = 'widget:keys:';
@Injectable()
export class WidgetKeysService {
private readonly logger = new Logger(WidgetKeysService.name);
private readonly secret: string;
constructor(
private config: ConfigService,
private session: SessionService,
) {
this.secret = process.env.WIDGET_SECRET ?? config.get<string>('WIDGET_SECRET') ?? 'helix-widget-default-secret';
}
generateKey(hospitalName: string, allowedOrigins: string[]): { key: string; siteKey: WidgetSiteKey } {
const siteId = randomUUID().replace(/-/g, '').substring(0, 16);
const signature = this.sign(siteId);
const key = `${siteId}.${signature}`;
const siteKey: WidgetSiteKey = {
siteId,
hospitalName,
allowedOrigins,
active: true,
createdAt: new Date().toISOString(),
};
return { key, siteKey };
}
async saveKey(siteKey: WidgetSiteKey): Promise<void> {
await this.session.setCachePersistent(`${KEY_PREFIX}${siteKey.siteId}`, JSON.stringify(siteKey));
this.logger.log(`Widget key saved: ${siteKey.siteId} (${siteKey.hospitalName})`);
}
async validateKey(rawKey: string): Promise<WidgetSiteKey | null> {
const dotIndex = rawKey.indexOf('.');
if (dotIndex === -1) return null;
const siteId = rawKey.substring(0, dotIndex);
const signature = rawKey.substring(dotIndex + 1);
// Verify HMAC
const expected = this.sign(siteId);
try {
if (!timingSafeEqual(Buffer.from(signature, 'hex'), Buffer.from(expected, 'hex'))) return null;
} catch {
return null;
}
// Fetch from Redis
const data = await this.session.getCache(`${KEY_PREFIX}${siteId}`);
if (!data) return null;
const siteKey: WidgetSiteKey = JSON.parse(data);
if (!siteKey.active) return null;
return siteKey;
}
validateOrigin(siteKey: WidgetSiteKey, origin: string | undefined): boolean {
if (!origin) return false;
if (siteKey.allowedOrigins.length === 0) return true;
return siteKey.allowedOrigins.some(allowed => origin.startsWith(allowed));
}
async listKeys(): Promise<WidgetSiteKey[]> {
const keys = await this.session.scanKeys(`${KEY_PREFIX}*`);
const results: WidgetSiteKey[] = [];
for (const key of keys) {
const data = await this.session.getCache(key);
if (data) results.push(JSON.parse(data));
}
return results;
}
async revokeKey(siteId: string): Promise<boolean> {
const data = await this.session.getCache(`${KEY_PREFIX}${siteId}`);
if (!data) return false;
const siteKey: WidgetSiteKey = JSON.parse(data);
siteKey.active = false;
await this.session.setCachePersistent(`${KEY_PREFIX}${siteId}`, JSON.stringify(siteKey));
this.logger.log(`Widget key revoked: ${siteId}`);
return true;
}
private sign(data: string): string {
return createHmac('sha256', this.secret).update(data).digest('hex');
}
}
```
- [ ] **Step 4: Commit**
```bash
cd helix-engage-server
git add src/widget/widget.types.ts src/widget/widget-keys.service.ts src/auth/session.service.ts
git commit -m "feat: widget types + HMAC key service with Redis storage"
```
---
### Task 2: Widget Guards (Key + Captcha)
**Files:**
- Create: `helix-engage-server/src/widget/widget-key.guard.ts`
- Create: `helix-engage-server/src/widget/captcha.guard.ts`
- [ ] **Step 1: Create widget-key.guard.ts**
```typescript
// src/widget/widget-key.guard.ts
import { CanActivate, ExecutionContext, Injectable, HttpException } from '@nestjs/common';
import { WidgetKeysService } from './widget-keys.service';
@Injectable()
export class WidgetKeyGuard implements CanActivate {
constructor(private readonly keys: WidgetKeysService) {}
async canActivate(context: ExecutionContext): Promise<boolean> {
const request = context.switchToHttp().getRequest();
const key = request.query?.key ?? request.headers['x-widget-key'];
if (!key) throw new HttpException('Widget key required', 401);
const siteKey = await this.keys.validateKey(key);
if (!siteKey) throw new HttpException('Invalid widget key', 403);
const origin = request.headers.origin ?? request.headers.referer;
if (!this.keys.validateOrigin(siteKey, origin)) {
throw new HttpException('Origin not allowed', 403);
}
// Attach to request for downstream use
request.widgetSiteKey = siteKey;
return true;
}
}
```
- [ ] **Step 2: Create captcha.guard.ts**
```typescript
// src/widget/captcha.guard.ts
import { CanActivate, ExecutionContext, Injectable, HttpException, Logger } from '@nestjs/common';
const RECAPTCHA_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify';
@Injectable()
export class CaptchaGuard implements CanActivate {
private readonly logger = new Logger(CaptchaGuard.name);
private readonly secretKey: string;
constructor() {
this.secretKey = process.env.RECAPTCHA_SECRET_KEY ?? '';
}
async canActivate(context: ExecutionContext): Promise<boolean> {
if (!this.secretKey) {
this.logger.warn('RECAPTCHA_SECRET_KEY not set — captcha disabled');
return true;
}
const request = context.switchToHttp().getRequest();
const token = request.body?.captchaToken;
if (!token) throw new HttpException('Captcha token required', 400);
try {
const res = await fetch(RECAPTCHA_VERIFY_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `secret=${this.secretKey}&response=${token}`,
});
const data = await res.json();
if (!data.success || (data.score != null && data.score < 0.3)) {
this.logger.warn(`Captcha failed: score=${data.score} success=${data.success}`);
throw new HttpException('Captcha verification failed', 403);
}
return true;
} catch (err: any) {
if (err instanceof HttpException) throw err;
this.logger.error(`Captcha verification error: ${err.message}`);
return true; // Fail open if captcha service is down
}
}
}
```
- [ ] **Step 3: Commit**
```bash
git add src/widget/widget-key.guard.ts src/widget/captcha.guard.ts
git commit -m "feat: widget guards — HMAC key validation + reCAPTCHA v3"
```
---
### Task 3: Widget Controller + Service + Module (Sidecar)
**Files:**
- Create: `helix-engage-server/src/widget/widget.service.ts`
- Create: `helix-engage-server/src/widget/widget.controller.ts`
- Create: `helix-engage-server/src/widget/widget.module.ts`
- Modify: `helix-engage-server/src/app.module.ts`
- Modify: `helix-engage-server/src/main.ts`
- [ ] **Step 1: Create widget.service.ts**
```typescript
// src/widget/widget.service.ts
import { Injectable, Logger } from '@nestjs/common';
import { PlatformGraphqlService } from '../platform/platform-graphql.service';
import { ConfigService } from '@nestjs/config';
import type { WidgetInitResponse, WidgetBookRequest, WidgetLeadRequest } from './widget.types';
import { ThemeService } from '../config/theme.service';
@Injectable()
export class WidgetService {
private readonly logger = new Logger(WidgetService.name);
private readonly apiKey: string;
constructor(
private platform: PlatformGraphqlService,
private theme: ThemeService,
private config: ConfigService,
) {
this.apiKey = config.get<string>('platform.apiKey') ?? '';
}
getInitData(): WidgetInitResponse {
const t = this.theme.getTheme();
return {
brand: { name: t.brand.hospitalName, logo: t.brand.logo },
colors: {
primary: t.colors.brand['600'] ?? 'rgb(29 78 216)',
primaryLight: t.colors.brand['50'] ?? 'rgb(219 234 254)',
text: t.colors.brand['950'] ?? 'rgb(15 23 42)',
textLight: t.colors.brand['400'] ?? 'rgb(100 116 139)',
},
captchaSiteKey: process.env.RECAPTCHA_SITE_KEY ?? '',
};
}
async getDoctors(): Promise<any[]> {
const auth = `Bearer ${this.apiKey}`;
const data = await this.platform.queryWithAuth<any>(
`{ doctors(first: 50) { edges { node {
id name fullName { firstName lastName } department specialty visitingHours
consultationFeeNew { amountMicros currencyCode }
clinic { clinicName }
} } } }`,
undefined, auth,
);
return data.doctors.edges.map((e: any) => e.node);
}
async getSlots(doctorId: string, date: string): Promise<any> {
const auth = `Bearer ${this.apiKey}`;
const data = await this.platform.queryWithAuth<any>(
`{ appointments(first: 50, filter: { doctorId: { eq: "${doctorId}" }, scheduledAt: { gte: "${date}T00:00:00Z", lte: "${date}T23:59:59Z" } }) { edges { node { scheduledAt } } } }`,
undefined, auth,
);
const booked = data.appointments.edges.map((e: any) => {
const dt = new Date(e.node.scheduledAt);
return `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}`;
});
const allSlots = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '14:00', '14:30', '15:00', '15:30', '16:00'];
return allSlots.map(s => ({ time: s, available: !booked.includes(s) }));
}
async bookAppointment(req: WidgetBookRequest): Promise<{ appointmentId: string; reference: string }> {
const auth = `Bearer ${this.apiKey}`;
const phone = req.patientPhone.replace(/[^0-9]/g, '').slice(-10);
// Create or find patient
let patientId: string | null = null;
try {
const existing = await this.platform.queryWithAuth<any>(
`{ patients(first: 1, filter: { phones: { primaryPhoneNumber: { like: "%${phone}" } } }) { edges { node { id } } } }`,
undefined, auth,
);
patientId = existing.patients.edges[0]?.node?.id ?? null;
} catch { /* continue */ }
if (!patientId) {
const created = await this.platform.queryWithAuth<any>(
`mutation($data: PatientCreateInput!) { createPatient(data: $data) { id } }`,
{ data: {
fullName: { firstName: req.patientName.split(' ')[0], lastName: req.patientName.split(' ').slice(1).join(' ') || '' },
phones: { primaryPhoneNumber: `+91${phone}` },
patientType: 'NEW',
} },
auth,
);
patientId = created.createPatient.id;
}
// Create appointment
const appt = await this.platform.queryWithAuth<any>(
`mutation($data: AppointmentCreateInput!) { createAppointment(data: $data) { id } }`,
{ data: {
scheduledAt: req.scheduledAt,
durationMin: 30,
appointmentType: 'CONSULTATION',
status: 'SCHEDULED',
doctorId: req.doctorId,
department: req.departmentId,
reasonForVisit: req.chiefComplaint ?? '',
patientId,
} },
auth,
);
// Create lead
await this.platform.queryWithAuth<any>(
`mutation($data: LeadCreateInput!) { createLead(data: $data) { id } }`,
{ data: {
name: req.patientName,
contactName: { firstName: req.patientName.split(' ')[0], lastName: req.patientName.split(' ').slice(1).join(' ') || '' },
contactPhone: { primaryPhoneNumber: `+91${phone}` },
source: 'WEBSITE',
status: 'APPOINTMENT_SET',
interestedService: req.chiefComplaint ?? 'Appointment Booking',
patientId,
} },
auth,
).catch(err => this.logger.warn(`Widget lead creation failed: ${err}`));
const reference = appt.createAppointment.id.substring(0, 8).toUpperCase();
this.logger.log(`Widget booking: ${req.patientName} → ${req.doctorId} at ${req.scheduledAt} (ref: ${reference})`);
return { appointmentId: appt.createAppointment.id, reference };
}
async createLead(req: WidgetLeadRequest): Promise<{ leadId: string }> {
const auth = `Bearer ${this.apiKey}`;
const phone = req.phone.replace(/[^0-9]/g, '').slice(-10);
const data = await this.platform.queryWithAuth<any>(
`mutation($data: LeadCreateInput!) { createLead(data: $data) { id } }`,
{ data: {
name: req.name,
contactName: { firstName: req.name.split(' ')[0], lastName: req.name.split(' ').slice(1).join(' ') || '' },
contactPhone: { primaryPhoneNumber: `+91${phone}` },
source: 'WEBSITE',
status: 'NEW',
interestedService: req.interest ?? 'Website Enquiry',
} },
auth,
);
this.logger.log(`Widget lead: ${req.name} (${phone}) — ${req.interest ?? 'general'}`);
return { leadId: data.createLead.id };
}
}
```
- [ ] **Step 2: Create widget.controller.ts**
```typescript
// src/widget/widget.controller.ts
import { Controller, Get, Post, Delete, Body, Query, Param, Req, Res, UseGuards, Logger, HttpException } from '@nestjs/common';
import type { Request, Response } from 'express';
import { WidgetService } from './widget.service';
import { WidgetKeysService } from './widget-keys.service';
import { WidgetKeyGuard } from './widget-key.guard';
import { CaptchaGuard } from './captcha.guard';
import { AiChatController } from '../ai/ai-chat.controller';
import type { WidgetBookRequest, WidgetLeadRequest } from './widget.types';
@Controller('api/widget')
export class WidgetController {
private readonly logger = new Logger(WidgetController.name);
constructor(
private readonly widget: WidgetService,
private readonly keys: WidgetKeysService,
) {}
@Get('init')
@UseGuards(WidgetKeyGuard)
init() {
return this.widget.getInitData();
}
@Get('doctors')
@UseGuards(WidgetKeyGuard)
async doctors() {
return this.widget.getDoctors();
}
@Get('slots')
@UseGuards(WidgetKeyGuard)
async slots(@Query('doctorId') doctorId: string, @Query('date') date: string) {
if (!doctorId || !date) throw new HttpException('doctorId and date required', 400);
return this.widget.getSlots(doctorId, date);
}
@Post('book')
@UseGuards(WidgetKeyGuard, CaptchaGuard)
async book(@Body() body: WidgetBookRequest) {
if (!body.patientName || !body.patientPhone || !body.doctorId || !body.scheduledAt) {
throw new HttpException('patientName, patientPhone, doctorId, and scheduledAt required', 400);
}
return this.widget.bookAppointment(body);
}
@Post('lead')
@UseGuards(WidgetKeyGuard, CaptchaGuard)
async lead(@Body() body: WidgetLeadRequest) {
if (!body.name || !body.phone) {
throw new HttpException('name and phone required', 400);
}
return this.widget.createLead(body);
}
// Key management (admin only — no widget key guard, requires JWT)
@Post('keys/generate')
async generateKey(@Body() body: { hospitalName: string; allowedOrigins: string[] }) {
if (!body.hospitalName) throw new HttpException('hospitalName required', 400);
const { key, siteKey } = this.keys.generateKey(body.hospitalName, body.allowedOrigins ?? []);
await this.keys.saveKey(siteKey);
return { key, siteKey };
}
@Get('keys')
async listKeys() {
return this.keys.listKeys();
}
@Delete('keys/:siteId')
async revokeKey(@Param('siteId') siteId: string) {
const revoked = await this.keys.revokeKey(siteId);
if (!revoked) throw new HttpException('Key not found', 404);
return { status: 'revoked' };
}
}
```
- [ ] **Step 3: Create widget.module.ts**
```typescript
// src/widget/widget.module.ts
import { Module } from '@nestjs/common';
import { WidgetController } from './widget.controller';
import { WidgetService } from './widget.service';
import { WidgetKeysService } from './widget-keys.service';
import { PlatformModule } from '../platform/platform.module';
import { AuthModule } from '../auth/auth.module';
import { ConfigThemeModule } from '../config/config-theme.module';
@Module({
imports: [PlatformModule, AuthModule, ConfigThemeModule],
controllers: [WidgetController],
providers: [WidgetService, WidgetKeysService],
exports: [WidgetKeysService],
})
export class WidgetModule {}
```
- [ ] **Step 4: Register in app.module.ts**
Add import:
```typescript
import { WidgetModule } from './widget/widget.module';
```
Add to imports array:
```typescript
WidgetModule,
```
- [ ] **Step 5: Serve static widget.js from main.ts**
In `src/main.ts`, after the NestJS app bootstrap, add static file serving for the widget bundle:
```typescript
import { join } from 'path';
import { NestExpressApplication } from '@nestjs/platform-express';
// After app.listen():
app.useStaticAssets(join(__dirname, '..', 'public'), { prefix: '/' });
```
Create `helix-engage-server/public/` directory for the widget bundle output.
- [ ] **Step 6: Build and verify**
```bash
cd helix-engage-server && npm run build
```
- [ ] **Step 7: Commit**
```bash
git add src/widget/ src/app.module.ts src/main.ts public/
git commit -m "feat: widget module — endpoints, service, key management, captcha"
```
---
### Task 4: Widget Bundle — Project Setup + Entry Point
**Files:**
- Create: `packages/helix-engage-widget/package.json`
- Create: `packages/helix-engage-widget/vite.config.ts`
- Create: `packages/helix-engage-widget/tsconfig.json`
- Create: `packages/helix-engage-widget/src/types.ts`
- Create: `packages/helix-engage-widget/src/api.ts`
- Create: `packages/helix-engage-widget/src/main.ts`
- [ ] **Step 1: Create package.json**
```json
{
"name": "helix-engage-widget",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.25.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.9.0",
"typescript": "^5.7.0",
"vite": "^7.0.0"
}
}
```
- [ ] **Step 2: Create vite.config.ts**
```typescript
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
export default defineConfig({
plugins: [preact()],
build: {
lib: {
entry: 'src/main.ts',
name: 'HelixWidget',
fileName: () => 'widget.js',
formats: ['iife'],
},
outDir: '../../helix-engage-server/public',
emptyOutDir: false,
minify: 'terser',
rollupOptions: {
output: {
inlineDynamicImports: true,
},
},
},
});
```
- [ ] **Step 3: Create tsconfig.json**
```json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"jsxImportSource": "preact",
"strict": true,
"esModuleInterop": true,
"outDir": "dist",
"skipLibCheck": true
},
"include": ["src"]
}
```
- [ ] **Step 4: Create types.ts**
```typescript
// src/types.ts
export type WidgetConfig = {
brand: { name: string; logo: string };
colors: { primary: string; primaryLight: string; text: string; textLight: string };
captchaSiteKey: string;
};
export type Doctor = {
id: string;
name: string;
fullName: { firstName: string; lastName: string };
department: string;
specialty: string;
visitingHours: string;
consultationFeeNew: { amountMicros: number; currencyCode: string } | null;
clinic: { clinicName: string } | null;
};
export type TimeSlot = {
time: string;
available: boolean;
};
export type ChatMessage = {
role: 'user' | 'assistant';
content: string;
};
```
- [ ] **Step 5: Create api.ts**
```typescript
// src/api.ts
import type { WidgetConfig, Doctor, TimeSlot } from './types';
let baseUrl = '';
let widgetKey = '';
export const initApi = (url: string, key: string) => {
baseUrl = url;
widgetKey = key;
};
const headers = () => ({
'Content-Type': 'application/json',
'X-Widget-Key': widgetKey,
});
export const fetchInit = async (): Promise<WidgetConfig> => {
const res = await fetch(`${baseUrl}/api/widget/init?key=${widgetKey}`);
if (!res.ok) throw new Error('Widget init failed');
return res.json();
};
export const fetchDoctors = async (): Promise<Doctor[]> => {
const res = await fetch(`${baseUrl}/api/widget/doctors?key=${widgetKey}`);
if (!res.ok) throw new Error('Failed to load doctors');
return res.json();
};
export const fetchSlots = async (doctorId: string, date: string): Promise<TimeSlot[]> => {
const res = await fetch(`${baseUrl}/api/widget/slots?key=${widgetKey}&doctorId=${doctorId}&date=${date}`);
if (!res.ok) throw new Error('Failed to load slots');
return res.json();
};
export const submitBooking = async (data: any): Promise<{ appointmentId: string; reference: string }> => {
const res = await fetch(`${baseUrl}/api/widget/book?key=${widgetKey}`, {
method: 'POST', headers: headers(), body: JSON.stringify(data),
});
if (!res.ok) throw new Error('Booking failed');
return res.json();
};
export const submitLead = async (data: any): Promise<{ leadId: string }> => {
const res = await fetch(`${baseUrl}/api/widget/lead?key=${widgetKey}`, {
method: 'POST', headers: headers(), body: JSON.stringify(data),
});
if (!res.ok) throw new Error('Submission failed');
return res.json();
};
export const streamChat = async (messages: any[], captchaToken?: string): Promise<ReadableStream> => {
const res = await fetch(`${baseUrl}/api/widget/chat?key=${widgetKey}`, {
method: 'POST', headers: headers(),
body: JSON.stringify({ messages, captchaToken }),
});
if (!res.ok || !res.body) throw new Error('Chat failed');
return res.body;
};
```
- [ ] **Step 6: Create main.ts**
```typescript
// src/main.ts
import { render } from 'preact';
import { initApi, fetchInit } from './api';
import { Widget } from './widget';
import type { WidgetConfig } from './types';
const init = async () => {
const script = document.querySelector('script[data-key]') as HTMLScriptElement | null;
if (!script) { console.error('[HelixWidget] Missing data-key attribute'); return; }
const key = script.getAttribute('data-key') ?? '';
const baseUrl = script.src.replace(/\/widget\.js.*$/, '');
initApi(baseUrl, key);
let config: WidgetConfig;
try {
config = await fetchInit();
} catch (err) {
console.error('[HelixWidget] Init failed:', err);
return;
}
// Create shadow DOM host
const host = document.createElement('div');
host.id = 'helix-widget-host';
host.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:999999;';
document.body.appendChild(host);
const shadow = host.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('div');
shadow.appendChild(mountPoint);
render(<Widget config={config} shadow={shadow} />, mountPoint);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
```
- [ ] **Step 7: Install dependencies and verify**
```bash
cd packages/helix-engage-widget && npm install
```
- [ ] **Step 8: Commit**
```bash
git add packages/helix-engage-widget/
git commit -m "feat: widget bundle — project setup, API client, entry point"
```
---
### Task 5: Widget UI Components (Preact)
**Files:**
- Create: `packages/helix-engage-widget/src/styles.ts`
- Create: `packages/helix-engage-widget/src/widget.tsx`
- Create: `packages/helix-engage-widget/src/chat.tsx`
- Create: `packages/helix-engage-widget/src/booking.tsx`
- Create: `packages/helix-engage-widget/src/contact.tsx`
- Create: `packages/helix-engage-widget/src/captcha.ts`
These are the Preact components rendered inside the shadow DOM. Each component is self-contained.
- [ ] **Step 1: Create styles.ts** — CSS string injected into shadow DOM
- [ ] **Step 2: Create widget.tsx** — Main shell with bubble, panel, tab routing
- [ ] **Step 3: Create chat.tsx** — AI chat with streaming, quick actions, lead capture fallback
- [ ] **Step 4: Create booking.tsx** — Step-by-step appointment booking
- [ ] **Step 5: Create contact.tsx** — Simple lead capture form
- [ ] **Step 6: Create captcha.ts** — Load reCAPTCHA script, get token
Each component follows the pattern: fetch data from API, render form/chat, submit with captcha token.
- [ ] **Step 7: Build the widget**
```bash
cd packages/helix-engage-widget && npm run build
# Output: ../../helix-engage-server/public/widget.js
```
- [ ] **Step 8: Commit**
```bash
git add packages/helix-engage-widget/src/
git commit -m "feat: widget UI — chat, booking, contact, theming, shadow DOM"
```
---
### Task 6: Integration Test + Key Generation
**Files:**
- None new — testing the full flow
- [ ] **Step 1: Generate a site key**
```bash
curl -s -X POST http://localhost:4100/api/widget/keys/generate \
-H "Content-Type: application/json" \
-d '{"hospitalName":"Global Hospital","allowedOrigins":["http://localhost:3000","http://localhost:5173"]}' | python3 -m json.tool
```
Save the returned `key` value.
- [ ] **Step 2: Test init endpoint**
```bash
curl -s "http://localhost:4100/api/widget/init?key=SITE_KEY_HERE" | python3 -m json.tool
```
Should return theme config with brand name, colors, captcha site key.
- [ ] **Step 3: Test widget.js serving**
```bash
curl -s -o /dev/null -w "%{http_code}" http://localhost:4100/widget.js
```
Should return 200.
- [ ] **Step 4: Create a test HTML page**
Create `packages/helix-engage-widget/test.html`:
```html
<!DOCTYPE html>
<html>
<head><title>Widget Test</title></head>
<body>
<h1>Hospital Website</h1>
<p>This is a test page for the Helix Engage widget.</p>
<script src="http://localhost:4100/widget.js" data-key="SITE_KEY_HERE"></script>
</body>
</html>
```
Open in browser, verify the floating bubble appears, themed correctly.
- [ ] **Step 5: Test booking flow end-to-end**
Click Book tab → select department → doctor → date → slot → fill name + phone → submit. Verify appointment + lead created in platform.
- [ ] **Step 6: Build sidecar and commit all**
```bash
cd helix-engage-server && npm run build
git add -A && git commit -m "feat: website widget — full integration (chat + booking + lead capture)"
```
---
## Execution Notes
- The widget bundle builds into `helix-engage-server/public/widget.js` — Vite outputs directly to the sidecar's public dir
- The sidecar serves it via Express static middleware
- Site keys use HMAC-SHA256 with `WIDGET_SECRET` env var
- Captcha is gated by `RECAPTCHA_SECRET_KEY` env var — if not set, captcha is disabled (dev mode)
- All widget endpoints use the server-side API key for platform queries (not the visitor's JWT)
- The widget has no dependency on the main helix-engage frontend — completely standalone
- Task 5 steps are intentionally less detailed — the UI components follow standard Preact patterns and depend on the API client from Task 4

348
docs/superpowers/plans/2026-04-06-hospital-onboarding-self-service.md
View File

@@ -1,348 +0,0 @@
# Hospital Onboarding & Self-Service Setup
**Date:** 2026-04-06
**Status:** Plan — pending implementation
**Owner:** helix-engage
---
## Goal
Make onboarding a new hospital a one-command devops action plus a guided self-service flow inside the staff portal. After running the script, the hospital admin should be able to log into a fresh workspace and reach a fully operational call center by filling in 6 setup pages — without anyone touching env vars, JSON files, or running shell commands a second time.
## Non-goals
- Per-tenant secrets management (env vars stay infra-owned for now).
- Self-service Cloudflare Turnstile / Ozonetel account provisioning. Operator pastes pre-existing credentials.
- Multi-hospital routing inside one sidecar. One sidecar per workspace; multi-tenancy is handled by the platform.
- Bulk CSV import of doctors / staff. Single-row form CRUD only.
- Email infrastructure for invitations beyond what core already does.
---
## User journey
### T0 — devops, one-command bootstrap (~30 seconds)
```bash
./onboard-hospital.sh \
--create \
--display-name "Care Hospital" \
--subdomain care \
--admin-email admin@carehospital.com \
--admin-password 'TempCare#2026'
```
Script signs up the admin user, creates and activates the workspace, syncs the helix-engage SDK, mints an API key, writes a sidecar `.env`, and prints a credentials handoff block. Done.
### T1 — hospital admin first login (~10 minutes)
Admin opens the workspace URL, signs in with the temp password. App detects an unconfigured workspace and routes them to `/setup`. A 6-step wizard walks them through:
1. **Hospital identity** — confirm display name, upload logo, pick brand colors → writes to `theme.json`
2. **Clinics** — add at least one branch (name, address, phone, timings) → creates Clinic records on platform
3. **Doctors** — add at least one doctor (name, specialty, clinic, visiting hours) → creates Doctor records on platform
4. **Team** — create supervisors and CC agents **in place** (name, email, temp password, role). If the role is `HelixEngage User` the form also shows a SIP seat dropdown so the admin links the new employee to an Agent profile in the same step. Posts to sidecar `POST /api/team/members` which chains `signUpInWorkspace` (using the workspace's own `inviteHash` server-side — no email is sent) → `updateWorkspaceMember` → `updateWorkspaceMemberRole` → optional `updateAgent`. **Never uses `sendInvitations`** — see `feedback-no-invites` memory for the absolute rule.
5. **Telephony** — read-only summary of which workspace members own which SIP seats. Seats themselves are seeded during onboarding (`onboard-hospital.sh` step 5b) and linked to members in step 4. Admin just confirms and advances.
6. **AI assistant** — pick provider (OpenAI / Anthropic), model, optional system prompt override → writes to `ai.json`
After step 6, admin clicks "Finish setup" and lands on the home dashboard. Setup state is recorded in `setup-state.json` so the wizard never auto-shows again.
### T2 — hospital admin returns later (any time)
Each setup page is also accessible standalone via the **Settings** menu. Admin can edit any of them at any time. Settings hub shows green checkmarks for completed sections and yellow badges for sections still using defaults.
### T3 — agents and supervisors join
The admin hands each employee their email + temp password directly (WhatsApp, in-person, etc.). Employees sign in, land on the home dashboard, and change their password from their profile. They're already role-assigned and (if CC agents) SIP-linked from T1 step 4, so they see the right pages — and can take calls — immediately.
---
## Architecture decisions
### 1. Script does identity. Portal does configuration.
- **In script:** anything requiring platform-admin credentials (signup, workspace activation, SDK sync, API key creation). One-time, devops-only.
- **In staff portal:** anything that operates inside the workspace (clinics, doctors, team, sidecar config files). Self-serve, repeatable.
This keeps the script's blast radius small and means the hospital admin never needs platform-admin access.
### 2. Two distinct frontend → backend patterns
**Pattern A — Direct GraphQL to platform** (for entities the platform owns)
- Clinics, Doctors, Workspace Members
- Frontend uses `apiClient.graphql<any>(...)` with the user's JWT
- Already established by `settings.tsx` for member listing
- No sidecar code needed
**Pattern B — Sidecar admin endpoints** (for sidecar-owned config files)
- Theme (`theme.json`), Widget (`widget.json`), Telephony (`telephony.json`), AI (`ai.json`), Setup state (`setup-state.json`)
- Frontend uses `apiClient.fetch('/api/config/...')`
- Sidecar persists to disk via `*ConfigService` mirroring `ThemeService`
- Already established by `branding-settings.tsx` and `WidgetConfigService`
**Rule:** if it lives in a workspace schema on the platform, use Pattern A. If it's a sidecar config file, use Pattern B. Don't mix.
### 3. Telephony config moves out of env vars
`OZONETEL_*`, `SIP_*`, `EXOTEL_*` env vars become bootstrap defaults that seed `data/telephony.json` on first boot, then never read again. All runtime reads go through `TelephonyConfigService.getConfig()`. Six read sites refactor (auth.controller, ozonetel-agent.service, ozonetel-agent.controller, kookoo-ivr.controller, agent-config.service, maint.controller).
### 4. AI config moves out of env vars
Same pattern. `ANTHROPIC_API_KEY` / `OPENAI_API_KEY` stay in env (true secrets), but `AI_PROVIDER` / `AI_MODEL` move to `data/ai.json`. `WidgetChatService` and any other AI-using services read from `AiConfigService`.
### 5. Setup state lives in its own file
`data/setup-state.json` tracks completion status for each of the 6 setup steps + a global `wizardDismissed` flag. Frontend reads it on app load to decide whether to show the setup wizard. Each setup page marks its step complete on save.
```json
{
"version": 1,
"wizardDismissed": false,
"steps": {
"identity": { "completed": false, "completedAt": null },
"clinics": { "completed": false, "completedAt": null },
"doctors": { "completed": false, "completedAt": null },
"team": { "completed": false, "completedAt": null },
"telephony": { "completed": false, "completedAt": null },
"ai": { "completed": false, "completedAt": null }
}
}
```
### 6. Members are created in place — **never** via email invitation
Absolute rule (see `feedback-no-invites` in memory): Helix Engage does not use the platform's `sendInvitations` flow for any reason, ever. Hospital admins are expected to onboard employees in person or over WhatsApp, hand out login credentials directly, and have the employee change the password on first login.
The sidecar exposes `POST /api/team/members` taking `{ firstName, lastName, email, password, roleId, agentId? }`. Server-side it chains:
1. `signUpInWorkspace(email, password, workspaceId, workspaceInviteHash)` — the platform's `isPublicInviteLinkEnabled` + `inviteHash` values are read once per boot and used to authorize the create. The hash is a server-side secret, never surfaced to the admin UI, and no email is sent.
2. `updateWorkspaceMember` — set first name / last name (the signUp mutation doesn't take them).
3. `updateWorkspaceMemberRole` — assign the role the admin picked.
4. `updateAgent` (optional) — link the new workspace member to the chosen Agent profile if the admin selected a SIP seat.
The Team wizard step and the `/settings/team` slideout both call this endpoint via the new `EmployeeCreateForm` component. The old `InviteMemberForm` and all `sendInvitations` call sites have been deleted.
### 7. Roles are auto-synced by SDK
`HelixEngage Manager`, `HelixEngage Supervisor`, and `HelixEngage User` roles are defined in `FortyTwoApps/helix-engage/src/roles/` and created automatically by `yarn app:sync`. The frontend's role dropdown in the team form queries the platform via `getRoles` and uses real role IDs (no email-pattern hacks). The "is this person a CC agent, so show the SIP seat dropdown?" check matches by the exact label `HelixEngage User` — see `CC_AGENT_ROLE_LABEL` in `wizard-step-team.tsx` / `team-settings.tsx`.
---
## Backend changes (helix-engage-server)
### New services / files
| File | Purpose |
|---|---|
| `src/config/setup-state.defaults.ts` | Type + defaults for `data/setup-state.json` |
| `src/config/setup-state.service.ts` | Load / get / mark step complete / dismiss wizard |
| `src/config/telephony.defaults.ts` | Type + defaults for `data/telephony.json` (Ozonetel + Exotel + SIP) |
| `src/config/telephony-config.service.ts` | File-backed CRUD; `onModuleInit` seeds from env vars on first boot |
| `src/config/ai.defaults.ts` | Type + defaults for `data/ai.json` |
| `src/config/ai-config.service.ts` | File-backed CRUD; seeds from env on first boot |
| `src/config/setup-state.controller.ts` | `GET /api/config/setup-state`, `PUT /api/config/setup-state/steps/:step`, `POST /api/config/setup-state/dismiss` |
| `src/config/telephony-config.controller.ts` | `GET/PUT /api/config/telephony` with secret masking on GET |
| `src/config/ai-config.controller.ts` | `GET/PUT /api/config/ai` with secret masking |
### Modified files
| File | Change |
|---|---|
| `src/config/config-theme.module.ts` | Register the 3 new services + 3 new controllers |
| `src/config/widget.defaults.ts` | Drop `hospitalName` field (the long-standing duplicate) |
| `src/config/widget-config.service.ts` | Inject `ThemeService`, read `brand.hospitalName` from theme at the 2 generateKey call sites |
| `src/widget/widget.service.ts` | `getInitData()` reads captcha site key from `WidgetConfigService` instead of `process.env.RECAPTCHA_SITE_KEY` |
| `src/auth/agent-config.service.ts:49` | Read `OZONETEL_CAMPAIGN_NAME` from `TelephonyConfigService` |
| `src/auth/auth.controller.ts:141, 255` | Read `OZONETEL_AGENT_PASSWORD` from `TelephonyConfigService` |
| `src/ozonetel/ozonetel-agent.service.ts:199, 235, 236` | Read `OZONETEL_DID`, `OZONETEL_SIP_ID` from `TelephonyConfigService` |
| `src/ozonetel/ozonetel-agent.controller.ts:39, 42, 192` | Same |
| `src/ozonetel/kookoo-ivr.controller.ts:11, 12` | Same |
| `src/maint/maint.controller.ts:27` | Same |
| `src/widget/widget-chat.service.ts` | Read `provider` and `model` from `AiConfigService` instead of `ConfigService` |
| `src/ai/ai-provider.ts` | Same — provider/model from config file, API keys still from env |
---
## Frontend changes (helix-engage)
### New pages
| Page | Path | Purpose |
|---|---|---|
| `setup/setup-wizard.tsx` | `/setup` | 6-step wizard, auto-shown on first login when setup incomplete |
| `pages/clinics.tsx` | `/settings/clinics` | List + add/edit clinic records (slideout pattern) |
| `pages/doctors.tsx` | `/settings/doctors` | List + add/edit doctors, assign to clinics |
| `pages/team-settings.tsx` | `/settings/team` | Member list + invite form + role editor (replaces current `settings.tsx` member view) |
| `pages/telephony-settings.tsx` | `/settings/telephony` | Ozonetel + Exotel + SIP form (consumes `/api/config/telephony`) |
| `pages/ai-settings.tsx` | `/settings/ai` | AI provider/model/prompt form (consumes `/api/config/ai`) |
| `pages/widget-settings.tsx` | `/settings/widget` | Widget enabled/embed/captcha form (consumes `/api/config/widget`) |
| `pages/settings-hub.tsx` | `/settings` | Index page listing all setup sections with completion badges. Replaces current `settings.tsx`. |
### Modified pages
| File | Change |
|---|---|
| `src/pages/login.tsx` | After successful login, fetch `/api/config/setup-state`. If incomplete and user is workspace admin, redirect to `/setup`. Otherwise existing flow. |
| `src/pages/branding-settings.tsx` | On save, mark `identity` step complete via `PUT /api/config/setup-state/steps/identity` |
| `src/components/layout/sidebar.tsx` | Add Settings hub entry; remove direct links to individual settings pages from main nav (move them under Settings) |
| `src/providers/router-provider.tsx` | Register the 7 new routes |
| `src/pages/integrations.tsx` | Remove the Ozonetel + Exotel cards (functionality moves to `telephony-settings.tsx`); keep WhatsApp/FB/Google/website cards for now |
### New shared components
| File | Purpose |
|---|---|
| `src/components/setup/wizard-shell.tsx` | Layout: progress bar, step navigation, footer with prev/next |
| `src/components/setup/wizard-step.tsx` | Single-step container — title, description, content slot, validation hook |
| `src/components/setup/section-card.tsx` | Settings hub section card with status badge |
| `src/components/forms/clinic-form.tsx` | Reused by clinics page + setup wizard step 2 |
| `src/components/forms/doctor-form.tsx` | Reused by doctors page + setup wizard step 3 |
| `src/components/forms/invite-member-form.tsx` | Reused by team page + setup wizard step 4 |
| `src/components/forms/telephony-form.tsx` | Reused by telephony settings + setup wizard step 5 |
| `src/components/forms/ai-form.tsx` | Reused by ai settings + setup wizard step 6 |
The pattern: each settings page renders the same form component the wizard step renders. Wizard steps just wrap the form in `<WizardStep>` and add prev/next navigation. Standalone settings pages wrap the form in a normal page layout. Form is the source of truth; wizard and settings page are two presentations of the same thing.
---
## Onboarding script changes
`onboard-hospital.sh` is already 90% there. Three minor changes:
1. **Drop the `--sidecar-env-out` default behavior** — print a structured "credentials handoff" block at the end with admin email, temp password, workspace URL, sidecar `.env` content. Operator copies what they need.
2. **Change the credentials block format** — make it copy-pasteable as a single email body so the operator can email it to the hospital owner directly.
3. **Add `setup-state.json` initialization** — the script writes a fresh `setup-state.json` to the sidecar's `data/` directory as part of step 6, so the first frontend load knows nothing is configured yet.
---
## Phasing
Each phase is a coherent commit. Don't ship phases out of order.
### Phase 1 — Backend foundations (config services + endpoints)
**Files:** 9 new + 4 modified backend files. No frontend.
- New services: `setup-state`, `telephony-config`, `ai-config`
- New defaults files for each
- New controllers for each
- Module wiring
- Drop `widget.json.hospitalName` (the original duplicate that started this whole thread)
- Migrate the 6 Ozonetel read sites to `TelephonyConfigService`
- Migrate the AI provider/model reads to `AiConfigService`
- First-boot env-var seeding: each new service reads its respective env vars on `onModuleInit` and writes them to its config file if the file doesn't exist
**Verifies:** sidecar still serves all existing endpoints, env-var-driven Ozonetel still works (because the seeding picks up the same values), `data/telephony.json` and `data/ai.json` exist on first boot.
**Estimate:** 4-5 hours.
### Phase 2 — Settings hub + first-run detection
**Files:** 2 new pages + 4 modified frontend files + new shared `section-card` component.
- `settings-hub.tsx` replaces `settings.tsx` as the `/settings` route
- Move the existing member-list view from `settings.tsx` into a new `team-settings.tsx` (read-only for now; invite + role editing comes in Phase 3)
- `login.tsx` fetches setup-state after successful login and redirects to `/setup` if incomplete
- `setup/setup-wizard.tsx` shell renders the 6 step containers (with placeholder content for now)
- Sidebar redesign: collapse all settings into one Settings entry that opens the hub
- Router updates to register the new routes
**Verifies:** clean login → setup wizard appearance for fresh workspace; Settings hub navigates to existing pages; nothing breaks for already-set-up workspaces.
**Estimate:** 3-4 hours.
### Phase 3 — Entity CRUD pages (Pattern A — direct platform GraphQL)
**Files:** 3 new pages + 3 new form components + 1 modified team page.
- `clinics.tsx` + `clinic-form.tsx` — list with add/edit slideout
- `doctors.tsx` + `doctor-form.tsx` — list with add/edit, clinic dropdown sourced from `clinics`
- `team-settings.tsx` becomes interactive — employees are created in place via the sidecar's `POST /api/team/members` endpoint (see architecture decision 6), real role dropdown via `getRoles`, role assignment via `updateWorkspaceMemberRole`. **Never uses `sendInvitations`.**
**Verifies:** admin can create clinics, doctors, and invite team members from the staff portal without touching the database.
**Estimate:** 5-6 hours.
### Phase 4 — Sidecar-config CRUD pages (Pattern B — sidecar admin endpoints)
**Files:** 3 new pages + 3 new form components.
- `telephony-settings.tsx` + `telephony-form.tsx` — Ozonetel + Exotel + SIP fields
- `ai-settings.tsx` + `ai-form.tsx` — provider, model, temperature, system prompt
- `widget-settings.tsx` + `widget-form.tsx` — wraps the existing widget config endpoint with a real form
**Verifies:** admin can edit telephony, AI, and widget config from the staff portal. Changes take effect without sidecar restart (since services use in-memory cache + file write).
**Estimate:** 4-5 hours.
### Phase 5 — Wizard step composition
**Files:** 6 wizard step components, each thin wrappers around the Phase 3/4 forms.
- `wizard-step-identity.tsx`
- `wizard-step-clinics.tsx`
- `wizard-step-doctors.tsx`
- `wizard-step-team.tsx`
- `wizard-step-telephony.tsx`
- `wizard-step-ai.tsx`
Each wraps the corresponding form, adds wizard validation (required fields enforced for setup completion), and on save calls `PUT /api/config/setup-state/steps/<step>` to mark the step complete.
**Verifies:** admin can complete the entire setup wizard end-to-end on a fresh workspace. After step 6, redirected to home dashboard. Setup state file shows all 6 steps complete.
**Estimate:** 2-3 hours.
### Phase 6 — Polish
- Onboarding script credentials handoff block format
- "Resume setup" CTA on home dashboard if any step is incomplete
- Loading states, error toasts, optimistic updates
- Setup-state badges on the Settings hub
- Validation: clinic count > 0 required for booking flow, doctor count > 0 required for booking flow, etc.
- E2E smoke test against the Care Hospital workspace I already created
**Estimate:** 2-3 hours.
---
## Total estimate
**20-26 hours of focused implementation work** spanning ~30 new files and ~15 modified files. Realistic over 3-4 working days with checkpoints at each phase boundary.
---
## Out of scope (explicit)
- Self-service Cloudflare Turnstile signup (operator pastes existing site key)
- Self-service Ozonetel account creation (operator pastes credentials)
- Bulk import of doctors / staff (single-row form only)
- Per-tenant secrets management (env vars stay infra-owned for AI keys, captcha secret, HMAC secret)
- Workspace deletion / archival
- Multi-hospital admin (one admin per workspace; switching workspaces is platform-level)
- Hospital templates ("clone from Ramaiah") — useful follow-up but not required for the first real onboarding
- Self-service password reset for employees (handled by the existing platform reset-password flow)
- Onboarding analytics / metrics
---
## Open questions before phase 1
1. **Sidecar config file hot-reload** — when an admin updates `telephony.json` via the new endpoint, does the change need to take effect immediately (in-memory cache invalidation, no restart) or is a sidecar restart acceptable? Decision affects whether services need a "refresh" hook. **Recommendation: in-memory cache only, no restart needed** — already how `ThemeService` works.
2. **Setup state visibility** — should the setup-state file be a simple flag set or should it track *who* completed each step and *when*? Recommendation: track `completedAt` timestamp + `completedBy` user id for audit trail.
3. **Auto-mark "identity" step complete from existing branding** — if the workspace already has a `theme.json` with a non-default `brand.hospitalName`, should the wizard auto-skip step 1? **Recommendation: yes** — don't make admins re-confirm something they already configured.
4. **What if the admin tries to create an employee whose email already exists on the platform?** `signUpInWorkspace` will surface the platform's "email already exists" error, which the sidecar's `TeamService.extractGraphqlMessage` passes through to the toast. No "find or link existing user" path yet — if this comes up in practice, add a `findUserByEmail` preflight lookup before the `signUpInWorkspace` call.
5. **Logo upload** — do we accept a URL only (admin pastes a CDN link) or do we need real file upload to MinIO? **Recommendation: URL only for Phase 1**, file upload as Phase 6 polish.
---
## Risks
- **`yarn app:sync` may sometimes fail to register HelixEngage roles cleanly** if a workspace was activated but never had its first sync — this would block the team page's role dropdown. Mitigation: script runs sync immediately after activation, before exiting.
- **Frontend role queries require user JWT, not API key** — `settings.tsx` already noted this with the "Roles are only accessible via user JWT" comment. The team-settings page has to use direct GraphQL with user auth, not the sidecar proxy.
- **Migrating Ozonetel env vars to a config file mid-session can break a running sidecar** if someone's actively using the call desk during deploy. Mitigation: deploy during low-usage window; the new service falls back to env vars if the config file is missing.
- **Setup wizard auto-redirect could trap users in a loop** if `setup-state.json` write fails. Mitigation: wizard always has a "Skip for now" link in the top right that sets `wizardDismissed: true`.

1140
docs/superpowers/plans/2026-04-12-barge-whisper-listen.md
View File

File diff suppressed because it is too large Load Diff

337
docs/superpowers/specs/2026-04-05-website-widget-design.md
View File

@@ -1,337 +0,0 @@
# Website Widget — Embeddable AI Chat + Appointment Booking
**Date**: 2026-04-05
**Status**: Draft
---
## Overview
A single JavaScript file that hospitals embed on their website via a `<script>` tag. Renders a floating chat bubble that opens to an AI chatbot (hospital knowledge base), appointment booking flow, and lead capture form. Themed to match the hospital's branding. All write endpoints are captcha-gated.
---
## Embed Code
```html
<script src="https://engage-api.srv1477139.hstgr.cloud/widget.js"
data-key="a8f3e2b1.7c4d9e6f2a1b8c3d5e0f4a2b6c8d1e3f7a9b0c2d4e6f8a1b3c5d7e9f0a2b"></script>
```
The `data-key` is an HMAC-signed token: `{siteId}.{hmacSignature}`. Cannot be guessed or forged without the server-side secret.
---
## Architecture
```
Hospital Website (any tech stack)
└─ <script data-key="xxx"> loads widget.js from sidecar
└─ Widget initializes:
1. GET /api/widget/init?key=xxx → validates key, returns theme + config
2. Renders shadow DOM (CSS-isolated from host page)
3. All interactions go to /api/widget/* endpoints
Sidecar (helix-engage-server):
└─ src/widget/
├── widget.controller.ts — REST endpoints for the widget
├── widget.service.ts — lead creation, appointment booking, key validation
├── widget.guard.ts — HMAC key validation + origin check
├── captcha.guard.ts — reCAPTCHA/Turnstile verification
└── widget-keys.service.ts — generate/validate site keys
Widget Bundle:
└─ packages/helix-engage-widget/
├── src/
│ ├── main.ts — entry point, reads data-key, initializes
│ ├── widget.ts — shadow DOM mount, theming, tab routing
│ ├── chat.ts — AI chatbot (streaming)
│ ├── booking.ts — appointment booking flow
│ ├── contact.ts — lead capture form
│ ├── captcha.ts — captcha integration
│ ├── api.ts — HTTP client for widget endpoints
│ └── styles.ts — CSS-in-JS (injected into shadow DOM)
├── vite.config.ts — library mode, single IIFE bundle
└── package.json
```
---
## Sidecar Endpoints
All prefixed with `/api/widget/`. Public endpoints validate the site key. Write endpoints require captcha.
| Method | Path | Auth | Captcha | Description |
|---|---|---|---|---|
| GET | `/init` | Key | No | Returns theme, config, captcha site key |
| POST | `/chat` | Key | Yes (first message only) | AI chat stream (same knowledge base as agent AI) |
| GET | `/doctors` | Key | No | Department + doctor list with visiting hours |
| GET | `/slots` | Key | No | Available time slots for a doctor + date |
| POST | `/book` | Key | Yes | Create appointment + lead + patient |
| POST | `/lead` | Key | Yes | Create lead (contact form submission) |
| POST | `/keys/generate` | Admin JWT | No | Generate a new site key for a hospital |
| GET | `/keys` | Admin JWT | No | List all site keys |
| DELETE | `/keys/:siteId` | Admin JWT | No | Revoke a site key |
---
## Site Key System
### Generation
```
siteId = uuid v4 (random)
payload = siteId
signature = HMAC-SHA256(payload, SERVER_SECRET)
key = `${siteId}.${signature}`
```
The `SERVER_SECRET` is an environment variable on the sidecar. Never leaves the server.
### Validation
```
input = "a8f3e2b1.7c4d9e6f2a1b8c3d5e0f4a2b6c8d1e3f7a9b0c2d4e6f8a1b3c5d7e9f0a2b"
[siteId, signature] = input.split('.')
expectedSignature = HMAC-SHA256(siteId, SERVER_SECRET)
valid = timingSafeEqual(signature, expectedSignature)
```
### Storage
Site keys are stored in Redis (already running in the stack):
```
Key: widget:keys:{siteId}
Value: JSON { hospitalName, allowedOrigins, active, createdAt }
TTL: none (persistent until revoked)
```
Example:
```
widget:keys:a8f3e2b1 → {
"hospitalName": "Global Hospital",
"allowedOrigins": ["https://globalhospital.com", "https://www.globalhospital.com"],
"createdAt": "2026-04-05T10:00:00Z",
"active": true
}
```
CRUD via `SessionService` (getCache/setCache/deleteCache/scanKeys) — same pattern as caller cache and agent names.
### Origin Validation
On every widget request, the sidecar checks:
1. Key signature is valid (HMAC)
2. `siteId` exists and is active
3. `Referer` or `Origin` header matches `allowedOrigins` for this site key
4. If origin doesn't match → 403
---
## Widget UI
### Collapsed State (Floating Bubble)
- Position: fixed bottom-right, 20px margin
- Size: 56px circle
- Shows hospital logo (from theme)
- Pulse animation on first load
- Click → expands panel
- Z-index: 999999 (above host page content)
### Expanded State (Panel)
- Size: 380px wide × 520px tall
- Anchored bottom-right
- Shadow DOM container (CSS isolation from host page)
- Header: hospital logo + name + close button
- Three tabs: Chat (default) | Book | Contact
- All styled with brand colors from theme
### Chat Tab (Default)
- AI chatbot interface
- Streaming responses (same endpoint as agent AI, but with widget system prompt)
- Quick action chips: "Doctor availability", "Clinic timings", "Book appointment", "Treatment packages"
- If AI detects it can't help → shows: "An agent will call you shortly" + lead capture fields (name, phone)
- First message triggers captcha verification (invisible reCAPTCHA v3)
### Book Tab
Step-by-step appointment booking:
1. **Department** — dropdown populated from `/api/widget/doctors`
2. **Doctor** — dropdown filtered by department, shows visiting hours
3. **Date** — date picker (min: today, max: 30 days)
4. **Time Slot** — grid of available slots from `/api/widget/slots`
5. **Patient Details** — name, phone, age, gender, chief complaint
6. **Captcha** — invisible reCAPTCHA v3 on submit
7. **Confirmation** — "Appointment booked! Reference: ABC123. We'll send a confirmation SMS."
On successful booking:
- Creates patient (if new phone number)
- Creates lead with `source: 'WEBSITE'`
- Creates appointment linked to patient + doctor
- Rules engine scores the lead
- Pushes to agent worklist
- Real-time notification to agents
### Contact Tab
Simple lead capture form:
- Name (required)
- Phone (required)
- Interest / Department (dropdown, optional)
- Message (textarea, optional)
- Captcha on submit
- Success: "Thank you! An agent will call you shortly."
On submit:
- Creates lead with `source: 'WEBSITE'`, `interestedService: interest`
- Rules engine scores it
- Pushes to agent worklist + notification
---
## Theming
Widget fetches theme from `/api/widget/init`:
```json
{
"brand": { "name": "Global Hospital", "logo": "https://..." },
"colors": {
"primary": "rgb(29 78 216)",
"primaryLight": "rgb(219 234 254)",
"text": "rgb(15 23 42)",
"textLight": "rgb(100 116 139)"
},
"captchaSiteKey": "6Lc..."
}
```
Colors are injected as CSS variables inside the shadow DOM:
```css
:host {
--widget-primary: rgb(29 78 216);
--widget-primary-light: rgb(219 234 254);
--widget-text: rgb(15 23 42);
--widget-text-light: rgb(100 116 139);
}
```
All widget elements reference these variables. Changing the theme API → widget auto-updates on next load.
---
## Widget System Prompt (AI Chat)
Different from the agent AI prompt — tailored for website visitors:
```
You are a virtual assistant for {hospitalName}.
You help website visitors with:
- Doctor availability and visiting hours
- Clinic locations and timings
- Health packages and pricing
- Booking appointments
- General hospital information
RULES:
1. Be friendly and welcoming — this is the hospital's first impression
2. If someone wants to book an appointment, guide them to the Book tab
3. If you can't answer a question, say "I'd be happy to have our team call you" and ask for their name and phone number
4. Never give medical advice
5. Keep responses under 80 words — visitors are scanning, not reading
6. Always mention the hospital name naturally in first response
KNOWLEDGE BASE:
{same KB as agent AI — clinics, doctors, packages, insurance}
```
---
## Captcha
- **Provider**: Google reCAPTCHA v3 (invisible) or Cloudflare Turnstile
- **When**: On first chat message, appointment booking submit, lead form submit
- **How**: Widget loads captcha script, gets token, sends with request. Sidecar validates via provider API before processing.
- **Fallback**: If captcha fails to load (ad blocker), show a simple challenge or allow with rate limiting
---
## Widget Bundle
### Tech Stack
- **Preact** — 3KB, React-compatible API, sufficient for the widget UI
- **Vite** — library mode build, outputs single IIFE bundle
- **CSS-in-JS** — styles injected into shadow DOM (no external CSS files)
- **Target**: ~60KB gzipped (Preact + UI + styles)
### Build Output
```
dist/
└── widget.js — single IIFE bundle, self-contained
```
### Serving
Sidecar serves `widget.js` as a static file:
```
GET /widget.js → serves dist/widget.js with Cache-Control: public, max-age=3600
```
---
## Lead Flow (all channels)
```
Widget submit (chat/book/contact)
→ POST /api/widget/lead or /api/widget/book
→ captcha validation
→ key + origin validation
→ create patient (if new phone)
→ create lead (source: WEBSITE, channel metadata)
→ rules engine scores lead (source weight, campaign weight)
→ push to agent worklist
→ WebSocket notification to agents (bell + toast)
→ response to widget: success + reference number
```
---
## Rate Limiting
| Endpoint | Limit |
|---|---|
| `/init` | 60/min per IP |
| `/chat` | 10/min per IP |
| `/doctors`, `/slots` | 30/min per IP |
| `/book` | 5/min per IP |
| `/lead` | 5/min per IP |
---
## Scope
**In scope:**
- Widget JS bundle (Preact + shadow DOM + theming)
- Sidecar widget endpoints (init, chat, doctors, slots, book, lead)
- Site key generation + validation (HMAC)
- Captcha integration (reCAPTCHA v3)
- Lead creation with worklist integration
- Appointment booking end-to-end
- Origin validation
- Rate limiting
- Widget served from sidecar
**Out of scope:**
- Live agent chat in widget (shows "agent will call you" instead)
- Widget analytics/tracking dashboard
- A/B testing widget variations
- Multi-language widget UI
- File upload in widget
- Payment integration in widget

385
docs/superpowers/specs/2026-04-12-barge-whisper-listen-design.md
View File

@@ -1,385 +0,0 @@
# Supervisor Barge / Whisper / Listen — Design Spec
**Date:** 2026-04-12
**Branch:** `feature/barge-whisper`
**Prereq:** QA validates barge flow in Ozonetel's own admin UI first
---
## Overview
Enable supervisors to monitor and intervene in live agent calls directly from Helix Engage's live monitor. Three modes: **Listen** (silent), **Whisper** (agent hears supervisor, patient doesn't), **Barge** (both hear supervisor). Supervisor connects via SIP WebRTC in the browser. Mode switching via DTMF tones.
## Design Decisions
| Decision | Choice | Rationale |
|----------|--------|-----------|
| Connection method | SIP only (PSTN later) | Supervisors are already on browser with headset |
| Agent indicator | Whisper/barge only (listen is silent) | Spec says show indicator; listen should be undetectable |
| SIP number | Dynamic from Ozonetel pool (apiId 139) | No need to pre-assign per supervisor. 3 SIP IDs available. |
| Barge UI location | Live monitor + context panel + barge controls | Supervisor needs call context to intervene effectively |
| Access control | Any admin can barge any agent | Flat RBAC, no team hierarchy |
| Call end behavior | Auto-disconnect supervisor | No orphaned sessions |
## Architecture
```
┌─────────────────────────────────────────────────────────┐
│ Supervisor Browser │
│ │
│ ┌──────────────┐ ┌────────────────────────────────┐ │
│ │ Live Monitor │ │ Context Panel + Barge Controls│ │
│ │ │ │ │ │
│ │ Agent list │ │ Patient summary / AI insight │ │
│ │ Active calls │──│ Appointments / Recent calls │ │
│ │ Click → │ │ ─────────────────────────────│ │
│ │ │ │ [Connect] │ │
│ │ │ │ [Listen] [Whisper] [Barge] │ │
│ │ │ │ [Hang up] │ │
│ └──────────────┘ └────────────────────────────────┘ │
│ │ │ │
│ │ poll /active-calls │ SIP WebRTC (kSip) │
│ │ every 5s │ DTMF 4/5/6 │
└─────────┼───────────────────────┼────────────────────────┘
│ │
▼ ▼
┌─────────────────────┐ ┌──────────────────────────┐
│ Sidecar │ │ Ozonetel SIP Gateway │
│ │ │ (blr-pub-rtc4.ozonetel) │
│ POST /api/supervisor│ │ │
│ /barge │ │ SIP INVITE → supervisor │
│ /barge-mode │ │ audio mixing │
│ │ │ DTMF routing │
│ → Ozonetel admin API│ └──────────────────────────┘
│ dashboardApi │
│ apiId 63, 139 │
└─────────────────────┘
│
▼
┌─────────────────────┐
│ Ozonetel Cloud │
│ api.cloudagent. │
│ ozonetel.com │
│ │
│ /dashboardApi/ │
│ monitor/api │
│ apiId 63 → barge │
│ apiId 139 → SIP# │
│ /auth/login → JWT │
└─────────────────────┘
```
## Components
### 1. Sidecar — Ozonetel Admin Auth Service
**New file:** `src/ozonetel/ozonetel-admin-auth.service.ts`
Manages a persistent Ozonetel admin session for supervisor APIs. Credentials from TelephonyConfig.
**Config extension** (`telephony.defaults.ts`):
```typescript
ozonetel: {
// ...existing fields
adminUsername: string; // NEW
adminPassword: string; // NEW
};
```
**Flow:**
1. On startup, read `adminUsername` + `adminPassword` from TelephonyConfig
2. `GET /api/auth/public-key` → `{ publicKey, keyId }`
3. RSA-encrypt credentials using `jsencrypt`
4. `POST /auth/login` → JWT token
5. Cache token in memory, decode expiry via `jwt-decode`
6. Auto-refresh before expiry
7. Expose `getAuthHeaders()` for other services
**Auth headers for all admin API calls:**
```typescript
{
'Content-Type': 'application/json',
'Authorization': `Bearer ${jwt}`,
'userId': userId,
'userName': userName,
'isSuperAdmin': 'true',
'dAccessType': 'false'
}
```
### 2. Sidecar — Supervisor Barge Endpoints
**New file:** `src/supervisor/supervisor-barge.controller.ts`
Three endpoints proxying to Ozonetel admin API:
#### `POST /api/supervisor/barge`
Initiates barge-in on an active call.
```typescript
// Request
{ ucid: string, agentNumber: string }
// Sidecar calls:
POST https://api.cloudagent.ozonetel.com/dashboardApi/monitor/api
{
apiId: 63,
ucid: "<ucid>",
action: "CALL_BARGEIN",
isSip: true,
phoneno: "<dynamic SIP number from pool>",
agentNumber: "<agent phone>",
cbURL: "<sidecar hostname>"
}
// Response
{ status: "success", sipNumber: "19810", sipPassword: "19810", sipDomain: "blr-sbc1.ozonetel.com", sipPort: "442" }
```
Before calling barge, fetches an available SIP number:
#### `GET /api/supervisor/barge/sip-credentials`
```typescript
// Sidecar calls:
POST https://api.cloudagent.ozonetel.com/ca-admin-Api/CloudAgentAPI/endpoint/sipnumber/sipSubscribe
{ apiId: 139, sipURL: "<sip gateway>" }
// Response
{ sip_number: "19810", password: "19810", pop_location: "blr-sbc1.ozonetel.com" }
```
#### `POST /api/supervisor/barge/end`
Cleanup: disconnect SIP, clear Redis tracking.
```typescript
// Request
{ agentId: string, sipId: string }
// Sidecar calls:
POST https://api.cloudagent.ozonetel.com/dashboardApi/monitor/api
{ apiId: 158, Action: "delete", AgentId: "<agentId>", Sip: "<sipId>" }
```
### 3. Frontend — Supervisor SIP Client
**New file:** `src/lib/supervisor-sip-client.ts`
Lightweight SIP client for supervisor barge sessions. Modeled on Ozonetel's `kSip.tsx` — separate from the agent's `sip-client.ts`.
```typescript
type SupervisorSipClient = {
init(domain: string, port: string, number: string, password: string): void;
register(): void;
isRegistered(): boolean;
isCallActive(): boolean;
sendDTMF(digit: string): void; // "4"=listen, "5"=whisper, "6"=barge
hangup(): void;
close(): void;
on(event: string, callback: Function): void;
off(event: string, callback: Function): void;
};
```
**Events emitted:**
- `registered` — SIP registration successful
- `registrationFailed` — SIP registration error
- `callReceived` — incoming call from Ozonetel (auto-answer)
- `callConnected` — barge session active
- `callEnded` — call terminated (agent hung up or supervisor hung up)
**Audio:** Remote audio plays through a hidden `<audio>` element (same pattern as agent SIP). Supervisor's microphone is captured via `getUserMedia`.
**DTMF mode mapping:**
- `"4"` → Listen (supervisor hears all, nobody hears supervisor)
- `"5"` → Whisper/Training (agent hears supervisor, patient doesn't)
- `"6"` → Barge (both hear supervisor)
### 4. Frontend — Live Monitor Redesign
**Modified file:** `src/pages/live-monitor.tsx`
Current: full-width table with disabled barge buttons.
New: split layout — call list on the left, context panel + barge controls on the right.
**Layout:**
```
┌─────────────────────────────┬──────────────────────────────┐
│ Active Calls (left, 60%) │ Context + Barge (right, 40%)│
│ │ │
│ ┌─ KPI cards ────────────┐ │ (nothing selected) │
│ │ Active: 3 Hold: 1 │ │ "Select a call to monitor" │
│ └────────────────────────┘ │ │
│ │ ── OR ── │
│ ┌─ Table ────────────────┐ │ │
│ │ Agent Caller Type Dur│ │ ┌─ Patient Summary ───────┐ │
│ │ rekha +9180.. In 2:34│ │ │ Name / Phone / Type │ │
│ │ ▶ selected row │ │ │ AI Insight │ │
│ │ ganesh +9199.. Out 0:45│ │ │ Appointments │ │
│ └────────────────────────┘ │ │ Recent calls │ │
│ │ └─────────────────────────┘ │
│ │ │
│ │ ┌─ Barge Controls ───────┐ │
│ │ │ [Connect] │ │
│ │ │ │ │
│ │ │ (after connect:) │ │
│ │ │ [Listen] [Whisper] [Barge]│
│ │ │ status: Connected 1:23 │ │
│ │ │ [Hang up] │ │
│ │ └─────────────────────────┘ │
└─────────────────────────────┴──────────────────────────────┘
```
**Selection flow:**
1. Supervisor clicks a call row → row highlights
2. Right panel populates with caller context (fetched from platform via lead phone match)
3. "Connect" button becomes active
4. Click Connect → sidecar fetches SIP credentials → calls barge API → supervisor SIP client registers → auto-answers incoming call
5. Status: CONNECTING → CONNECTED
6. Mode tabs appear: Listen (default) / Whisper / Barge
7. Tab click sends DTMF tone via supervisor SIP client
8. Hang up → disconnect SIP, clean up, right panel resets
### 5. Frontend — Agent Barge Indicator
**Modified file:** `src/components/call-desk/active-call-card.tsx`
When supervisor switches to whisper or barge mode, the agent sees an indicator.
**Detection:** The sidecar's supervisor service emits SSE events. Add a new event type:
```typescript
// New SSE event from /api/supervisor/agent-state/stream
{ state: "supervisor-whisper", timestamp: "..." }
{ state: "supervisor-barge", timestamp: "..." }
{ state: "supervisor-left", timestamp: "..." }
```
**UI:** Small badge on the active call card:
- Whisper mode: "Supervisor coaching" badge (blue)
- Barge mode: "Supervisor on call" badge (brand)
- Listen mode: no indicator (silent)
**Implementation:** The sidecar tracks barge state per agent. When a supervisor connects and switches mode, the sidecar emits the appropriate SSE event to the agent's stream. The agent's `use-agent-state.ts` hook picks it up and sets a Recoil atom. The `active-call-card.tsx` renders the badge conditionally.
### 6. Sidecar — Barge State Tracking
**Modified file:** `src/supervisor/supervisor.service.ts`
Track which supervisor is barged into which agent, and in what mode.
```typescript
type BargeSession = {
supervisorId: string;
agentId: string;
sipNumber: string;
mode: 'listen' | 'whisper' | 'barge';
startedAt: string;
};
// In-memory map (single sidecar per hospital)
private readonly bargeSessions = new Map<string, BargeSession>();
```
When mode changes, emit SSE event to the agent:
- `listen` → no event (silent)
- `whisper` → emit `supervisor-whisper` to agent's SSE stream
- `barge` → emit `supervisor-barge` to agent's SSE stream
- disconnect → emit `supervisor-left` to agent's SSE stream
**New endpoint for mode update:**
```typescript
POST /api/supervisor/barge/mode
{ agentId: string, mode: "listen" | "whisper" | "barge" }
```
This updates the in-memory session and emits the SSE event. The actual audio routing happens via DTMF on the SIP connection (frontend handles that).
## Data Flow — Full Barge Sequence
```
1. Supervisor clicks call row in live monitor
└→ Frontend fetches caller context from platform (lead by phone match)
└→ Right panel shows patient summary
2. Supervisor clicks "Connect"
└→ Frontend: POST /api/supervisor/barge/sip-credentials
└→ Sidecar: calls Ozonetel apiId 139 → gets SIP number/password/domain
└→ Frontend: initializes supervisor-sip-client with credentials
└→ Frontend: POST /api/supervisor/barge { ucid, agentNumber }
└→ Sidecar: calls Ozonetel apiId 63 (CALL_BARGEIN, isSip: true)
└→ Ozonetel: bridges SIP number into active call
└→ Supervisor SIP client receives incoming call → auto-answers
└→ Status: CONNECTED, default mode: Listen (DTMF "4" sent)
└→ Sidecar: creates BargeSession in memory
3. Supervisor clicks "Whisper" tab
└→ Frontend: supervisor-sip-client.sendDTMF("5")
└→ Ozonetel: routes supervisor audio to agent only
└→ Frontend: POST /api/supervisor/barge/mode { agentId, mode: "whisper" }
└→ Sidecar: emits SSE { state: "supervisor-whisper" } to agent
└→ Agent: sees "Supervisor coaching" badge
4. Supervisor clicks "Barge" tab
└→ Frontend: supervisor-sip-client.sendDTMF("6")
└→ Ozonetel: routes supervisor audio to both
└→ Frontend: POST /api/supervisor/barge/mode { agentId, mode: "barge" }
└→ Sidecar: emits SSE { state: "supervisor-barge" } to agent
└→ Agent: sees "Supervisor on call" badge
5. Call ends (agent or patient hangs up)
└→ Supervisor SIP client: "callEnded" event fires
└→ Frontend: auto-disconnects, calls POST /api/supervisor/barge/end
└→ Sidecar: clears BargeSession, emits SSE { state: "supervisor-left" }
└→ Agent: badge disappears
└→ UI: right panel resets to "Select a call to monitor"
```
## Files to Create/Modify
### New Files
| File | Purpose |
|------|---------|
| `helix-engage-server/src/ozonetel/ozonetel-admin-auth.service.ts` | Ozonetel admin JWT management |
| `helix-engage-server/src/supervisor/supervisor-barge.controller.ts` | Barge proxy endpoints |
| `helix-engage/src/lib/supervisor-sip-client.ts` | Supervisor SIP client (modeled on kSip) |
### Modified Files
| File | Change |
|------|--------|
| `helix-engage-server/src/config/telephony.defaults.ts` | Add `adminUsername`, `adminPassword` |
| `helix-engage-server/src/supervisor/supervisor.service.ts` | Add barge session tracking + SSE events |
| `helix-engage/src/pages/live-monitor.tsx` | Split layout, context panel, barge controls |
| `helix-engage/src/components/call-desk/active-call-card.tsx` | Supervisor indicator badge |
| `helix-engage/src/hooks/use-agent-state.ts` | Handle supervisor SSE events |
| `helix-engage/src/components/setup/wizard-step-telephony.tsx` | Add admin credential fields |
### Reference Files (from Ozonetel source — study, don't copy)
| File | What to learn |
|------|--------------|
| `CA-Admin/.../BargeInDrawer/BargeInDrawer.tsx` | Normal barge flow, status states |
| `CA-Admin/.../BargeinDrawerSip/BargeinDrawerSip.tsx` | SIP barge, DTMF, continuous barge, session storage |
| `CA-Admin/.../utils/ksip.tsx` | SIP client wrapper pattern |
| `CA-Admin/.../services/api-service.ts:827-890` | Barge API payloads |
| `CA-Admin/.../services/auth-service.ts` | Admin auth flow |
| `cloudagent/.../services/websocket.service.js:367-460` | Agent-side barge event handling |
## Testing Plan
1. **Prereq:** QA validates barge in Ozonetel's own admin UI with the 3 SIP IDs
2. **Sidecar unit tests:** Admin auth service (login, token refresh, expiry)
3. **Sidecar integration test:** Barge endpoint → Ozonetel API (mock or live)
4. **Frontend manual test:** Connect → listen → whisper → barge → hang up
5. **Agent indicator test:** Verify badge appears on whisper/barge, disappears on listen/disconnect
6. **Auto-disconnect test:** Agent ends call → supervisor auto-disconnects
7. **Edge cases:** Supervisor navigates away mid-barge, network drop, agent goes to ACW
## Out of Scope (Future)
- PSTN barge (call supervisor's phone instead of SIP)
- Continuous barge (auto-reconnect to next call same agent handles)
- Barge audit logging (who barged whom, when, duration)
- Gemini AI whisper (separate feature, separate branch)
- Multi-supervisor on same call

162
docs/weekly-status-apr06-11.md
View File

@@ -1,162 +0,0 @@
# Helix Engage — Weekly Status Update
**Period:** April 6 – April 11, 2026
**Team:** Engineering
---
## Executive Summary
Major infrastructure milestone — Helix Engage is now running on AWS EC2 with multi-tenant architecture supporting both Ramaiah Hospitals and Global Hospital on a single instance. A full CI/CD pipeline with automated E2E testing and Teams notifications is operational. 17 defects from QA were triaged, 8 fixed and deployed, and a cross-tenant security vulnerability in the telephony layer was discovered and patched.
---
## 1. AWS EC2 Deployment (Multi-Tenant)
**Status: Live**
Migrated from single-tenant VPS to multi-tenant EC2 architecture:
- **Instance:** m6i.xlarge, Mumbai (ap-south-1), 15GB RAM
- **14 Docker containers** running: platform, 2 sidecars, telephony dispatcher, 4 Redis instances, Caddy, PostgreSQL, ClickHouse, Redpanda, MinIO
- **Strict tenant isolation:** each hospital has its own sidecar container, Redis instance, and data volume
- **Host-routed Caddy:** cross-tenant webhook routing is physically impossible
**URLs deployed:**
- ramaiah.engage.healix360.net (Ramaiah Hospitals)
- global.engage.healix360.net (Global Hospital)
- ramaiah.app.healix360.net / global.app.healix360.net (Platform)
- telephony.engage.healix360.net (Event dispatcher)
- operations.healix360.net (CI/CD dashboard)
- git.healix360.net (Git forge)
---
## 2. Telephony Event Dispatcher
**Status: Live**
Built a NestJS service that routes Ozonetel agent/call events to the correct hospital's sidecar:
- Ozonetel event subscriptions are **account-level** (not per-campaign) — one URL for all agents
- Dispatcher receives all events, looks up `agentId` in Redis, forwards to the correct sidecar
- Sidecars self-register on boot with their agent list; heartbeat every 30s, TTL 90s
- No manual configuration needed when adding new hospitals
---
## 3. Cross-Tenant Security Fix (defaultAgentId)
**Status: Fixed and deployed**
Discovered that 6 sidecar endpoints used a hardcoded `OZONETEL_AGENT_ID` env var as a fallback when `agentId` wasn't provided by the frontend. In a multi-tenant setup, this caused Ramaiah sidecar operations to silently affect Global Hospital's agent.
**Impact:** Agent state changes, call disposition, outbound dialing, performance metrics, and maintenance commands could operate on the wrong hospital's agent with no error or warning.
**Fix:**
- Removed `defaultAgentId` getter and all hardcoded fallbacks (`agent3`, `Test123$`, `521814`)
- All 6 endpoints now require `agentId` from the caller (400 if missing)
- Frontend updated to send `agentId` from `localStorage.helix_agent_config` in all calls
- `OZONETEL_AGENT_ID` removed from env config entirely
---
## 4. Defect Fixes (8 of 17)
| Bug | Title | Status |
|-----|-------|--------|
| #527 | Appointment creation updates existing patient incorrectly | Fixed |
| #529 | Break/Training status doesn't block outbound calls | Fixed |
| #531 | Agent can log out during active call | Fixed |
| #533 | Redundant "Call History" header | Fixed |
| #534 | Redundant "Patients" header | Fixed |
| #536 | My Performance shows wrong agent's data | Fixed |
| #538 | Supervisor dashboard metrics incorrect | Fixed |
| #540 | Ghost calls visible for logged-out agents | Fixed |
| #547 | SLA rules not reflected in Call Desk | Fixed (config seeded) |
**Deferred (by product):** #516 (recordings real-time), #517/#548 (AI transcription), #519 (supervisor call — needs SIP seat), #539 (missed calls real-time), #541 (whisper/barge/listen)
---
## 5. E2E Test Suite (Playwright)
**Status: 40 tests, all passing**
Automated smoke tests covering every page for both hospitals:
- **Login (4):** branding, invalid creds, supervisor login, auth guard
- **Ramaiah CC Agent (10):** call desk, call history, patients, appointments, my performance, sidebar, sign-out
- **Ramaiah Supervisor (12):** dashboard, team performance, live monitor, leads, patients, appointments, call log, recordings, missed calls, campaigns, settings, sidebar
- **Global CC Agent (7):** all pages + sign-out
- **Global Supervisor (5):** all pages
Self-healing: auto-clears agent session locks before login, completes sign-out after tests.
---
## 6. CI/CD Pipeline (Woodpecker + Gitea)
**Status: Operational**
End-to-end CI/CD on EC2:
- **Gitea** mirrors Azure DevOps repos every 15 minutes
- **Woodpecker CI** triggers pipelines on push or manual run
- **Frontend pipeline:** TypeScript typecheck → 40 E2E tests → HTML report published to MinIO → Teams notification
- **Sidecar pipeline:** Jest unit tests → Teams notification
- **Reports:** Playwright HTML reports with screenshots at `operations.healix360.net/reports/{run}/index.html`
- **Teams notifications:** Adaptive Cards to "Deployment updates" channel with pass/fail summary + report link
---
## 7. Documentation
Three docs committed to the repo:
- **architecture.md** — Multi-tenant topology with Mermaid diagram, telephony dispatcher, failure modes
- **developer-operations-runbook.md** — SSH access, accounts, deploy steps, Redis ops, DB access, troubleshooting
- **ci-cd-operations.md** — Gitea, Woodpecker, MinIO, Teams notification setup and troubleshooting
---
## 8. Data Seeding
- **Ramaiah:** 195 real doctors scraped from msrmh.com, clinics, visit slots, campaign data
- **Global:** CC agent accounts (rekha.cc, ganesh.cc), marketing (sanjay), supervisor (dr.ramesh) created with proper roles
- **Rules engine:** 6 priority scoring rules seeded (missed call, follow-up, campaign lead, 2nd/3rd attempt, spam deprioritize)
- **Seed script:** idempotent `mkMember`, cleanup phase before seeding, runs against any workspace via env vars
---
## 9. Other Improvements
- **SIP agent tracing:** Browser console logs `agent=ramaiahadmin ext=524435` on every SIP connect/disconnect/state change for multi-agent debugging
- **ACW 3-layer protection:** beforeunload warning → sendBeacon auto-dispose → server 30s timer
- **Maint endpoints:** `force-ready` and `unlock-agent` now accept `agentId` from body (was hardcoded)
- **Security group automation:** SSH IP auto-updated via AWS CLI when ISP changes
---
## Metrics
| Metric | Value |
|--------|-------|
| Commits (frontend) | 35 |
| Commits (sidecar) | 20 |
| Commits (SDK app) | 2 |
| Bugs fixed | 9 |
| E2E tests | 40 |
| Docker containers | 17 (14 app + 3 CI) |
| DNS records | 6 |
| Uptime | EC2 live since Apr 9 |
---
## Next Week Priorities
1. Merge `feature/omnichannel-widget` → `master` (frontend)
2. Frontend Docker image (stop rsync, bake into image)
3. Appointment date validation (no past dates, auto-tomorrow after hours)
4. Pre-built CI Docker image (skip `yarn install` on every run)
5. Deferred defects: #516, #539 (real-time updates)

BIN
docs/weekly-update-apr06-11.pptx
View File

Binary file not shown.

1
e2e/.auth/.gitignore vendored
View File

@@ -1 +0,0 @@
*.json

56
e2e/agent-login.spec.ts
View File

@@ -1,56 +0,0 @@
/**
* Login feature tests — covers multiple roles.
*
* These run WITHOUT saved auth state (fresh browser).
*/
import { test, expect } from '@playwright/test';
import { waitForApp } from './helpers';
const SUPERVISOR = { email: 'supervisor@ramaiahcare.com', password: 'MrRamaiah@2026' };
test.describe('Login', () => {
test('login page renders with branding', async ({ page }) => {
await page.goto('/login');
await expect(page.locator('img[alt]').first()).toBeVisible();
await expect(page.locator('h1').first()).toBeVisible();
await expect(page.locator('form')).toBeVisible();
await expect(page.locator('input[type="email"], input[placeholder*="@"]').first()).toBeVisible();
await expect(page.locator('input[type="password"]').first()).toBeVisible();
await expect(page.getByRole('button', { name: 'Sign in', exact: true })).toBeVisible();
});
test('invalid credentials show error', async ({ page }) => {
await page.goto('/login');
await page.locator('input[type="email"], input[placeholder*="@"]').first().fill('bad@bad.com');
await page.locator('input[type="password"]').first().fill('wrongpassword');
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
await expect(
page.locator('text=/not found|invalid|incorrect|failed|error|unauthorized/i').first(),
).toBeVisible({ timeout: 10_000 });
await expect(page).toHaveURL(/\/login/);
});
test('Supervisor login → lands on app', async ({ page }) => {
await page.goto('/login');
await page.locator('input[type="email"], input[placeholder*="@"]').first().fill(SUPERVISOR.email);
await page.locator('input[type="password"]').first().fill(SUPERVISOR.password);
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
await expect(page).not.toHaveURL(/\/login/, { timeout: 20_000 });
await waitForApp(page);
// Sidebar should be visible
await expect(page.locator('aside').first()).toBeVisible();
});
test('unauthenticated user redirected to login', async ({ page }) => {
await page.context().clearCookies();
await page.goto('/patients');
await expect(page).toHaveURL(/\/login/, { timeout: 10_000 });
});
});

155
e2e/agent-smoke.spec.ts
View File

@@ -1,155 +0,0 @@
/**
* CC Agent — happy-path smoke tests.
*
* Role: cc-agent (ccagent@ramaiahcare.com)
* Landing: / → Call Desk
* Pages: Call Desk, Call History, Patients, Appointments, My Performance
*/
import { test, expect } from '@playwright/test';
import { waitForApp } from './helpers';
test.describe('CC Agent Smoke', () => {
test('lands on Call Desk after login', async ({ page }) => {
await page.goto('/');
await waitForApp(page);
await expect(page.locator('aside').first()).toContainText(/Call Center/i);
});
test('Call Desk page loads', async ({ page }) => {
await page.goto('/');
await waitForApp(page);
// Call Desk is the landing — just verify we're not on an error page
await expect(page.locator('aside').first()).toContainText(/Call Desk/i);
});
test('Call History page loads', async ({ page }) => {
await page.goto('/call-history');
await waitForApp(page);
// Should show "Call History" title whether or not there are calls
await expect(page.locator('text="Call History"').first()).toBeVisible();
// Filter dropdown present
await expect(page.locator('text=/All Calls/i').first()).toBeVisible();
});
test('Patients page loads with search', async ({ page }) => {
await page.goto('/patients');
await waitForApp(page);
const search = page.getByPlaceholder(/search/i).or(page.getByLabel(/search/i));
await expect(search.first()).toBeVisible();
});
test('Patients search filters results', async ({ page }) => {
await page.goto('/patients');
await waitForApp(page);
const search = page.getByPlaceholder(/search/i).or(page.getByLabel(/search/i));
await search.first().fill('zzz-nonexistent-patient');
await waitForApp(page);
// Should show empty state
const noResults = page.locator('text=/no patient|not found|no results/i');
const isEmpty = await noResults.isVisible({ timeout: 5_000 }).catch(() => false);
expect(isEmpty).toBe(true);
});
test('Appointments page loads', async ({ page }) => {
await page.goto('/appointments');
await waitForApp(page);
await expect(
page.locator('text=/Appointment|Schedule|No appointment/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('My Performance loads with date controls', async ({ page }) => {
// Intercept API to verify agentId is sent
const apiHit = page.waitForRequest(
(r) => r.url().includes('/api/ozonetel/performance') && r.url().includes('agentId='),
{ timeout: 15_000 },
);
await page.goto('/my-performance');
const req = await apiHit;
const url = new URL(req.url());
expect(url.searchParams.get('agentId')?.length).toBeGreaterThan(0);
await waitForApp(page);
await expect(page.getByRole('button', { name: 'Today' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Yesterday' })).toBeVisible();
// Either KPI data or empty state
await expect(
page.locator('text=/Total Calls|No performance data/i').first(),
).toBeVisible();
});
test('sidebar has all CC Agent nav items', async ({ page }) => {
await page.goto('/');
await waitForApp(page);
const sidebar = page.locator('aside').first();
for (const item of ['Call Desk', 'Call History', 'Patients', 'Appointments', 'My Performance']) {
await expect(sidebar.locator(`text="${item}"`)).toBeVisible();
}
});
test('sign-out shows confirmation modal and cancel keeps session', async ({ page }) => {
await page.goto('/');
await waitForApp(page);
const sidebar = page.locator('aside').first();
const accountArea = sidebar.locator('[class*="account"], [class*="avatar"]').last();
if (await accountArea.isVisible()) {
await accountArea.click();
}
const signOutBtn = page.locator('button, [role="menuitem"]').filter({ hasText: /sign out/i }).first();
if (await signOutBtn.isVisible({ timeout: 5_000 }).catch(() => false)) {
await signOutBtn.click();
const modal = page.locator('[role="dialog"]');
await expect(modal).toBeVisible({ timeout: 5_000 });
await expect(modal).toContainText(/sign out/i);
// Cancel — should stay logged in
await modal.getByRole('button', { name: /cancel/i }).click();
await expect(modal).not.toBeVisible();
await expect(page).not.toHaveURL(/\/login/);
}
});
// MUST be the last test — completes sign-out so the agent session is
// released and the next test run won't hit "already logged in".
test('sign-out completes and redirects to login', async ({ page }) => {
await page.goto('/');
await waitForApp(page);
const sidebar = page.locator('aside').first();
const accountArea = sidebar.locator('[class*="account"], [class*="avatar"]').last();
if (await accountArea.isVisible()) {
await accountArea.click();
}
const signOutBtn = page.locator('button, [role="menuitem"]').filter({ hasText: /sign out/i }).first();
if (await signOutBtn.isVisible({ timeout: 5_000 }).catch(() => false)) {
await signOutBtn.click();
const modal = page.locator('[role="dialog"]');
await expect(modal).toBeVisible({ timeout: 5_000 });
// Confirm sign out
await modal.getByRole('button', { name: /sign out/i }).click();
// Should redirect to login
await expect(page).toHaveURL(/\/login/, { timeout: 15_000 });
}
});
});

29
e2e/auth.setup.ts
View File

@@ -1,29 +0,0 @@
import { test as setup, expect } from '@playwright/test';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const authFile = path.join(__dirname, '.auth/agent.json');
setup('login as CC Agent', async ({ page, request, baseURL }) => {
// Clear any stale session lock before login
const url = baseURL ?? 'https://ramaiah.engage.healix360.net';
await request.post(`${url}/api/maint/unlock-agent`, {
headers: { 'Content-Type': 'application/json', 'x-maint-otp': '400168' },
data: { agentId: 'ramaiahadmin' },
}).catch(() => {});
await page.goto('/login');
await page.locator('input[type="email"], input[name="email"], input[placeholder*="@"]').first().fill('ccagent@ramaiahcare.com');
await page.locator('input[type="password"]').first().fill('CcRamaiah@2026');
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
// Should land on Call Desk (/ for cc-agent role)
await expect(page).not.toHaveURL(/\/login/, { timeout: 20_000 });
// Sidebar should be visible
await expect(page.locator('aside').first()).toBeVisible({ timeout: 10_000 });
await page.context().storageState({ path: authFile });
});

25
e2e/global-setup.ts
View File

@@ -1,25 +0,0 @@
import { test as setup, expect } from '@playwright/test';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const authFile = path.join(__dirname, '.auth/global-agent.json');
setup('login as Global CC Agent', async ({ page, request }) => {
// Clear any stale session lock before login
await request.post('https://global.engage.healix360.net/api/maint/unlock-agent', {
headers: { 'Content-Type': 'application/json', 'x-maint-otp': '400168' },
data: { agentId: 'global' },
}).catch(() => {});
await page.goto('https://global.engage.healix360.net/login');
await page.locator('input[type="email"], input[placeholder*="@"]').first().fill('rekha.cc@globalcare.com');
await page.locator('input[type="password"]').first().fill('Global@123');
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
await expect(page).not.toHaveURL(/\/login/, { timeout: 20_000 });
await expect(page.locator('aside').first()).toBeVisible({ timeout: 10_000 });
await page.context().storageState({ path: authFile });
});

120
e2e/global-smoke.spec.ts
View File

@@ -1,120 +0,0 @@
/**
* Global Hospital — happy-path smoke tests.
*
* Uses saved auth state from global-setup.ts (same pattern as Ramaiah).
* Last test signs out to release the agent session.
*/
import { test, expect } from '@playwright/test';
import { loginAs, waitForApp } from './helpers';
const BASE = 'https://global.engage.healix360.net';
test.describe('Global — CC Agent', () => {
test('landing page loads', async ({ page }) => {
await page.goto(BASE + '/');
await waitForApp(page);
await expect(page.locator('aside').first()).toBeVisible();
});
test('Call History page loads', async ({ page }) => {
await page.goto(BASE + '/call-history');
await waitForApp(page);
await expect(page.locator('text="Call History"').first()).toBeVisible();
});
test('Patients page loads', async ({ page }) => {
await page.goto(BASE + '/patients');
await waitForApp(page);
const search = page.getByPlaceholder(/search/i).or(page.getByLabel(/search/i));
await expect(search.first()).toBeVisible();
});
test('Appointments page loads', async ({ page }) => {
await page.goto(BASE + '/appointments');
await waitForApp(page);
await expect(
page.locator('text=/Appointment|Schedule|No appointment/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('My Performance page loads', async ({ page }) => {
await page.goto(BASE + '/my-performance');
await waitForApp(page);
await expect(page.getByRole('button', { name: 'Today' })).toBeVisible();
});
test('sidebar has CC Agent nav items', async ({ page }) => {
await page.goto(BASE + '/');
await waitForApp(page);
const sidebar = page.locator('aside').first();
for (const item of ['Call Desk', 'Call History', 'Patients', 'Appointments', 'My Performance']) {
await expect(sidebar.locator(`text="${item}"`)).toBeVisible();
}
});
// Last test — sign out to release session
test('sign-out completes', async ({ page }) => {
await page.goto(BASE + '/');
await waitForApp(page);
const sidebar = page.locator('aside').first();
const accountArea = sidebar.locator('[class*="account"], [class*="avatar"]').last();
if (await accountArea.isVisible()) await accountArea.click();
const signOutBtn = page.locator('button, [role="menuitem"]').filter({ hasText: /sign out/i }).first();
if (await signOutBtn.isVisible({ timeout: 5_000 }).catch(() => false)) {
await signOutBtn.click();
const modal = page.locator('[role="dialog"]');
await expect(modal).toBeVisible({ timeout: 5_000 });
await modal.getByRole('button', { name: /sign out/i }).click();
await expect(page).toHaveURL(/\/login/, { timeout: 15_000 });
}
});
});
test.describe('Global — Supervisor', () => {
test.beforeEach(async ({ page }) => {
await page.goto(BASE + '/login');
await page.locator('input[type="email"], input[placeholder*="@"]').first().fill('dr.ramesh@globalcare.com');
await page.locator('input[type="password"]').first().fill('Global@123');
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
await expect(page).not.toHaveURL(/\/login/, { timeout: 20_000 });
await waitForApp(page);
});
test('landing page loads', async ({ page }) => {
await expect(page.locator('aside').first()).toBeVisible();
});
test('Patients page loads', async ({ page }) => {
await page.goto(BASE + '/patients');
await waitForApp(page);
const search = page.getByPlaceholder(/search/i).or(page.getByLabel(/search/i));
await expect(search.first()).toBeVisible();
});
test('Appointments page loads', async ({ page }) => {
await page.goto(BASE + '/appointments');
await waitForApp(page);
await expect(
page.locator('text=/Appointment|Schedule|No appointment/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Campaigns page loads', async ({ page }) => {
await page.goto(BASE + '/campaigns');
await waitForApp(page);
await expect(
page.locator('text=/Campaign|No campaign/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Settings page loads', async ({ page }) => {
await page.goto(BASE + '/settings');
await waitForApp(page);
await expect(
page.locator('text=/Settings|Configuration/i').first(),
).toBeVisible({ timeout: 10_000 });
});
});

15
e2e/helpers.ts
View File

@@ -1,15 +0,0 @@
import { Page, expect } from '@playwright/test';
export async function waitForApp(page: Page) {
await page.waitForLoadState('networkidle', { timeout: 15_000 }).catch(() => {});
await page.waitForTimeout(300);
}
export async function loginAs(page: Page, email: string, password: string) {
await page.goto('/login');
await page.locator('input[type="email"], input[name="email"], input[placeholder*="@"]').first().fill(email);
await page.locator('input[type="password"]').first().fill(password);
await page.getByRole('button', { name: 'Sign in', exact: true }).click();
await expect(page).not.toHaveURL(/\/login/, { timeout: 20_000 });
await waitForApp(page);
}

121
e2e/supervisor-smoke.spec.ts
View File

@@ -1,121 +0,0 @@
/**
* Supervisor / Admin — happy-path smoke tests.
*
* Role: admin (supervisor@ramaiahcare.com)
* Landing: / → Dashboard
* Pages: Dashboard, Team Performance, Live Monitor,
* Leads, Patients, Appointments, Call Log,
* Call Recordings, Missed Calls, Campaigns, Settings
*/
import { test, expect } from '@playwright/test';
import { loginAs, waitForApp } from './helpers';
const EMAIL = 'supervisor@ramaiahcare.com';
const PASSWORD = 'MrRamaiah@2026';
test.describe('Supervisor Smoke', () => {
test.beforeEach(async ({ page }) => {
await loginAs(page, EMAIL, PASSWORD);
});
test('lands on Dashboard after login', async ({ page }) => {
await expect(page.locator('aside').first()).toBeVisible();
// Verify we're authenticated and on the app
await expect(page).not.toHaveURL(/\/login/);
});
test('Team Performance loads', async ({ page }) => {
await page.goto('/team-performance');
await waitForApp(page);
await expect(
page.locator('text=/Team|Performance|Agent|No data/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Live Call Monitor loads', async ({ page }) => {
await page.goto('/live-monitor');
await waitForApp(page);
await expect(
page.locator('text=/Live|Monitor|Active|No active/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Leads page loads', async ({ page }) => {
await page.goto('/leads');
await waitForApp(page);
await expect(
page.locator('text=/Lead|No leads/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Patients page loads', async ({ page }) => {
await page.goto('/patients');
await waitForApp(page);
const search = page.getByPlaceholder(/search/i).or(page.getByLabel(/search/i));
await expect(search.first()).toBeVisible();
});
test('Appointments page loads', async ({ page }) => {
await page.goto('/appointments');
await waitForApp(page);
await expect(
page.locator('text=/Appointment|Schedule|No appointment/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Call Log page loads', async ({ page }) => {
await page.goto('/call-history');
await waitForApp(page);
await expect(page.locator('text="Call History"').first()).toBeVisible();
});
test('Call Recordings page loads', async ({ page }) => {
await page.goto('/call-recordings');
await waitForApp(page);
await expect(
page.locator('text=/Recording|No recording/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Missed Calls page loads', async ({ page }) => {
await page.goto('/missed-calls');
await waitForApp(page);
await expect(
page.locator('text=/Missed|No missed/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Campaigns page loads', async ({ page }) => {
await page.goto('/campaigns');
await waitForApp(page);
await expect(
page.locator('text=/Campaign|No campaign/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('Settings page loads', async ({ page }) => {
await page.goto('/settings');
await waitForApp(page);
await expect(
page.locator('text=/Settings|Configuration/i').first(),
).toBeVisible({ timeout: 10_000 });
});
test('sidebar has expected nav items', async ({ page }) => {
const sidebar = page.locator('aside').first();
// Check key items — exact labels depend on the role the sidecar assigns
for (const item of ['Patients', 'Appointments', 'Campaigns']) {
await expect(sidebar.locator(`text="${item}"`)).toBeVisible();
}
});
});

64
package-lock.json generated
View File

@@ -42,7 +42,6 @@
"tailwindcss-react-aria-components": "^2.0.1" "tailwindcss-react-aria-components": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.59.1",
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
"@trivago/prettier-plugin-sort-imports": "^5.2.2", "@trivago/prettier-plugin-sort-imports": "^5.2.2",
"@types/jssip": "^3.5.3", "@types/jssip": "^3.5.3",
@@ -1078,22 +1077,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"node_modules/@playwright/test": {
"version": "1.59.1",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
"integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"playwright": "1.59.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@react-aria/autocomplete": { "node_modules/@react-aria/autocomplete": {
"version": "3.0.0-rc.6", "version": "3.0.0-rc.6",
"resolved": "http://localhost:4873/@react-aria/autocomplete/-/autocomplete-3.0.0-rc.6.tgz", "resolved": "http://localhost:4873/@react-aria/autocomplete/-/autocomplete-3.0.0-rc.6.tgz",
@@ -5488,53 +5471,6 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/playwright": {
"version": "1.59.1",
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
"integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"playwright-core": "1.59.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=18"
},
"optionalDependencies": {
"fsevents": "2.3.2"
}
},
"node_modules/playwright-core": {
"version": "1.59.1",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
"integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
"dev": true,
"license": "Apache-2.0",
"bin": {
"playwright-core": "cli.js"
},
"engines": {
"node": ">=18"
}
},
"node_modules/playwright/node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.5.8", "version": "8.5.8",
"resolved": "http://localhost:4873/postcss/-/postcss-8.5.8.tgz", "resolved": "http://localhost:4873/postcss/-/postcss-8.5.8.tgz",

1
package.json
View File

@@ -43,7 +43,6 @@
"tailwindcss-react-aria-components": "^2.0.1" "tailwindcss-react-aria-components": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.59.1",
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
"@trivago/prettier-plugin-sort-imports": "^5.2.2", "@trivago/prettier-plugin-sort-imports": "^5.2.2",
"@types/jssip": "^3.5.3", "@types/jssip": "^3.5.3",

65
playwright.config.ts
View File

@@ -1,65 +0,0 @@
import { defineConfig } from '@playwright/test';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
export default defineConfig({
testDir: './e2e',
timeout: 60_000,
expect: { timeout: 10_000 },
retries: 1,
workers: 1,
reporter: [['html', { open: 'never' }], ['list']],
use: {
baseURL: process.env.E2E_BASE_URL ?? 'https://ramaiah.engage.healix360.net',
headless: true,
screenshot: 'on',
trace: 'on-first-retry',
actionTimeout: 8_000,
navigationTimeout: 15_000,
},
projects: [
// Login tests run first — fresh browser, no saved auth
{
name: 'login',
testMatch: /agent-login\.spec\.ts/,
use: { browserName: 'chromium' },
},
// Auth setup — saves CC agent session for reuse
{
name: 'agent-setup',
testMatch: /auth\.setup\.ts/,
},
// CC Agent feature tests — reuse saved auth
{
name: 'cc-agent',
dependencies: ['agent-setup'],
use: {
storageState: path.join(__dirname, 'e2e/.auth/agent.json'),
browserName: 'chromium',
},
testMatch: /agent-smoke\.spec\.ts/,
},
// Supervisor tests — logs in fresh each run
{
name: 'supervisor',
testMatch: /supervisor-smoke\.spec\.ts/,
use: { browserName: 'chromium' },
},
// Global Hospital — auth setup + smoke tests
{
name: 'global-setup',
testMatch: /global-setup\.ts/,
},
{
name: 'global',
dependencies: ['global-setup'],
testMatch: /global-smoke\.spec\.ts/,
use: {
storageState: path.join(__dirname, 'e2e/.auth/global-agent.json'),
browserName: 'chromium',
},
},
],
});

280
scripts/seed-data.ts
View File

@@ -1,21 +1,23 @@
/** /**
* Helix Engage — Platform Data Seeder * Helix Engage — Platform Data Seeder
* Creates 2 clinics, 5 doctors with multi-clinic visit slots, * Creates 5 patient stories + 5 doctors with fully linked records.
* 3 patient stories with fully linked records (campaigns, leads, * Run: cd helix-engage && npx tsx scripts/seed-data.ts
* calls, appointments, follow-ups, lead activities).
* *
* Run: cd helix-engage && npx tsx scripts/seed-data.ts * Platform field mapping (SDK name → platform name):
* Env: SEED_GQL (graphql url), SEED_ORIGIN (workspace origin), SEED_SUB (workspace subdomain) * Campaign: campaignType→typeCustom, campaignStatus→status, impressionCount→impressions,
* * clickCount→clicks, contactedCount→contacted, convertedCount→converted, leadCount→leadsGenerated
* Schema alignment (2026-04-10): * Lead: leadSource→source, leadStatus→status, firstContactedAt→firstContacted,
* - Doctor.visitingHours removed → replaced by DoctorVisitSlot entity * lastContactedAt→lastContacted, landingPageUrl→landingPage
* - Doctor.portalUserId omitted (workspace member IDs are per-deployment) * Call: callDirection→direction, durationSeconds→durationSec
* - Clinic entity added (needed for visit slot FK) * Appointment: durationMinutes→durationMin, appointmentStatus→status, roomNumber→room
* FollowUp: followUpType→typeCustom, followUpStatus→status
* Patient: address→addressCustom
* Doctor: isActive→active, branch→branchClinic
* NOTE: callNotes/visitNotes/clinicalNotes are RICH_TEXT — read-only, cannot seed * NOTE: callNotes/visitNotes/clinicalNotes are RICH_TEXT — read-only, cannot seed
*/ */
const GQL = process.env.SEED_GQL ?? 'http://localhost:4000/graphql'; const GQL = process.env.SEED_GQL ?? 'http://localhost:4000/graphql';
const SUB = process.env.SEED_SUB ?? 'fortytwo-dev'; const SUB = 'fortytwo-dev';
const ORIGIN = process.env.SEED_ORIGIN ?? 'http://fortytwo-dev.localhost:4010'; const ORIGIN = process.env.SEED_ORIGIN ?? 'http://fortytwo-dev.localhost:4010';
let token = ''; let token = '';
@@ -49,172 +51,28 @@ async function mk(entity: string, data: any): Promise<string> {
return d[`create${cap}`].id; return d[`create${cap}`].id;
} }
// Create a workspace member (user account) and return its workspace member id.
// Uses signUpInWorkspace + updateWorkspaceMember for name + updateWorkspaceMemberRole.
// The invite hash and role IDs are fetched once and cached.
let _inviteHash = '';
let _wsId = '';
const _roleIds: Record<string, string> = {};
async function ensureWorkspaceContext() {
if (_wsId) return;
const ws = await gql('{ currentWorkspace { id inviteHash } }');
_wsId = ws.currentWorkspace.id;
_inviteHash = ws.currentWorkspace.inviteHash;
const roles = await gql('{ getRoles { id label } }');
for (const r of roles.getRoles) _roleIds[r.label] = r.id;
}
async function mkMember(email: string, password: string, firstName: string, lastName: string, roleName?: string): Promise<string> {
await ensureWorkspaceContext();
// Check if already exists
const existing = await gql('{ workspaceMembers { edges { node { id userEmail } } } }');
const found = existing.workspaceMembers.edges.find((e: any) => e.node.userEmail.toLowerCase() === email.toLowerCase());
if (found) {
console.log(` (exists) ${email} → ${found.node.id}`);
return found.node.id;
}
// Create the user + link to workspace
await gql(
`mutation($email: String!, $password: String!, $workspaceId: UUID!, $workspaceInviteHash: String!) {
signUpInWorkspace(email: $email, password: $password, workspaceId: $workspaceId, workspaceInviteHash: $workspaceInviteHash) { workspace { id } }
}`,
{ email, password, workspaceId: _wsId, workspaceInviteHash: _inviteHash },
);
// Find the new member id
const members = await gql('{ workspaceMembers { edges { node { id userEmail } } } }');
const member = members.workspaceMembers.edges.find((e: any) => e.node.userEmail.toLowerCase() === email.toLowerCase());
if (!member) throw new Error(`Could not find workspace member for ${email}`);
const memberId = member.node.id;
// Set their display name
await gql(
`mutation($id: UUID!, $data: WorkspaceMemberUpdateInput!) { updateWorkspaceMember(id: $id, data: $data) { id } }`,
{ id: memberId, data: { name: { firstName, lastName } } },
);
// Assign role if specified
if (roleName && _roleIds[roleName]) {
await gql(
`mutation($wm: UUID!, $role: UUID!) { updateWorkspaceMemberRole(workspaceMemberId: $wm, roleId: $role) { id } }`,
{ wm: memberId, role: _roleIds[roleName] },
);
}
return memberId;
}
async function clearAll() {
// Delete in reverse dependency order
const entities = ['followUp', 'leadActivity', 'call', 'appointment', 'lead', 'patient', 'doctorVisitSlot', 'doctor', 'campaign', 'clinic'];
for (const entity of entities) {
const cap = entity[0].toUpperCase() + entity.slice(1);
try {
const data = await gql(`{ ${entity}s(first: 100) { edges { node { id } } } }`);
const ids: string[] = data[`${entity}s`].edges.map((e: any) => e.node.id);
if (ids.length === 0) { console.log(` ${cap}: 0 records`); continue; }
for (const id of ids) {
await gql(`mutation { delete${cap}(id: "${id}") { id } }`);
}
console.log(` ${cap}: deleted ${ids.length}`);
} catch (err: any) {
console.log(` ${cap}: skip (${err.message?.slice(0, 60)})`);
}
}
}
async function main() { async function main() {
console.log('🌱 Seeding Helix Engage demo data...\n'); console.log('🌱 Seeding Helix Engage demo data...\n');
await auth(); await auth();
console.log('✅ Auth OK\n'); console.log('✅ Auth OK\n');
// Clean slate — remove all existing entity data (not users) // Workspace member IDs — switch based on target platform
console.log('🧹 Clearing existing data...'); const WM = GQL.includes('srv1477139') ? {
await clearAll(); drSharma: '107efa70-fd32-4819-8936-994197c6ada1',
console.log(''); drPatel: '7e1fe368-1f23-4a10-8c2f-3e9c3846b209',
drKumar: 'b86ff7d3-57de-44e5-aa13-e5da848a960c',
await auth(); drReddy: 'b82693b6-701c-4783-8d02-cc137c9c306b',
drSingh: 'b2a00dd2-5bb5-4c29-8fb1-70a681193a4c',
} : {
drSharma: '251e9b32-3a83-4f3c-a904-fad7e8b840c3',
drPatel: '2b1bbf20-3838-434f-9fe9-b98436362230',
drKumar: '16109622-9b13-4682-b327-eb611ffa8338',
drReddy: '478a9ccb-d231-48fb-a740-0228d3c9325b',
drSingh: 'b854b55b-7302-4981-8dfc-bea516abdc86',
};
// ═══════════════════════════════════════════ // ═══════════════════════════════════════════
// CLINICS (needed for doctor visit slots) // DOCTORS (linked to workspace members)
// ═══════════════════════════════════════════
console.log('🏥 Clinics');
const clinicKor = await mk('clinic', {
name: 'Global Hospital — Koramangala',
clinicName: 'Global Hospital — Koramangala',
status: 'ACTIVE',
opensAt: '08:00', closesAt: '20:00',
openMonday: true, openTuesday: true, openWednesday: true,
openThursday: true, openFriday: true, openSaturday: true, openSunday: false,
phone: { primaryPhoneNumber: '8041763265', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
addressCustom: { addressCity: 'Bangalore', addressState: 'Karnataka', addressCountry: 'India', addressStreet1: 'Koramangala 4th Block' },
onlineBooking: true, walkInAllowed: true, acceptsCash: 'YES', acceptsCard: 'YES', acceptsUpi: 'YES',
});
console.log(` Koramangala: ${clinicKor}`);
const clinicWf = await mk('clinic', {
name: 'Global Hospital — Whitefield',
clinicName: 'Global Hospital — Whitefield',
status: 'ACTIVE',
opensAt: '09:00', closesAt: '18:00',
openMonday: true, openTuesday: true, openWednesday: true,
openThursday: true, openFriday: true, openSaturday: true, openSunday: false,
phone: { primaryPhoneNumber: '8041763400', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
addressCustom: { addressCity: 'Bangalore', addressState: 'Karnataka', addressCountry: 'India', addressStreet1: 'ITPL Main Road, Whitefield' },
onlineBooking: true, walkInAllowed: true, acceptsCash: 'YES', acceptsCard: 'YES', acceptsUpi: 'YES',
});
console.log(` Whitefield: ${clinicWf}\n`);
await auth();
// ═══════════════════════════════════════════
// CALL CENTER & MARKETING STAFF
//
// CC agents (HelixEngage User role) handle inbound/outbound calls.
// Marketing executives and supervisors use HelixEngage Supervisor role.
// Email domain uses globalcare.com to match the deployment.
// ═══════════════════════════════════════════
console.log('📞 Call center & marketing staff');
const wmRekha = await mkMember('rekha.cc@globalcare.com', 'Global@123', 'Rekha', 'Nair', 'HelixEngage User');
console.log(` Rekha (CC Agent): ${wmRekha}`);
const wmGanesh = await mkMember('ganesh.cc@globalcare.com', 'Global@123', 'Ganesh', 'Iyer', 'HelixEngage User');
console.log(` Ganesh (CC Agent): ${wmGanesh}`);
const wmSanjay = await mkMember('sanjay.marketing@globalcare.com', 'Global@123', 'Sanjay', 'Verma', 'HelixEngage Supervisor');
console.log(` Sanjay (Marketing): ${wmSanjay}`);
const wmRamesh = await mkMember('dr.ramesh@globalcare.com', 'Global@123', 'Ramesh', 'Gupta', 'HelixEngage Supervisor');
console.log(` Dr. Ramesh (Supervisor): ${wmRamesh}\n`);
await auth();
// ═══════════════════════════════════════════
// DOCTOR WORKSPACE MEMBERS
//
// Each doctor gets a real platform login so they can access the
// portal. Created via signUpInWorkspace, then linked to the Doctor
// entity via portalUserId. Email domain matches the deployment.
// ═══════════════════════════════════════════
console.log('👤 Doctor workspace members (role: HelixEngage Manager)');
const wmSharma = await mkMember('dr.sharma@globalcare.com', 'DrSharma@2026', 'Arun', 'Sharma', 'HelixEngage Manager');
console.log(` Dr. Sharma member: ${wmSharma}`);
const wmPatel = await mkMember('dr.patel@globalcare.com', 'DrPatel@2026', 'Meena', 'Patel', 'HelixEngage Manager');
console.log(` Dr. Patel member: ${wmPatel}`);
const wmKumar = await mkMember('dr.kumar@globalcare.com', 'DrKumar@2026', 'Rajesh', 'Kumar', 'HelixEngage Manager');
console.log(` Dr. Kumar member: ${wmKumar}`);
const wmReddy = await mkMember('dr.reddy@globalcare.com', 'DrReddy@2026', 'Lakshmi', 'Reddy', 'HelixEngage Manager');
console.log(` Dr. Reddy member: ${wmReddy}`);
const wmSingh = await mkMember('dr.singh@globalcare.com', 'DrSingh@2026', 'Harpreet', 'Singh', 'HelixEngage Manager');
console.log(` Dr. Singh member: ${wmSingh}\n`);
await auth();
// ═══════════════════════════════════════════
// DOCTORS (linked to workspace members via portalUserId)
//
// visitingHours was removed — multi-clinic schedules now live
// on DoctorVisitSlot (seeded below).
// ═══════════════════════════════════════════ // ═══════════════════════════════════════════
console.log('👨‍⚕️ Doctors'); console.log('👨‍⚕️ Doctors');
const drSharma = await mk('doctor', { const drSharma = await mk('doctor', {
@@ -224,15 +82,16 @@ async function main() {
specialty: 'Interventional Cardiology', specialty: 'Interventional Cardiology',
qualifications: 'MBBS, MD (Medicine), DM (Cardiology), FACC', qualifications: 'MBBS, MD (Medicine), DM (Cardiology), FACC',
yearsOfExperience: 18, yearsOfExperience: 18,
visitingHours: 'Mon/Wed/Fri 10:00 AM – 1:00 PM',
consultationFeeNew: { amountMicros: 800_000_000, currencyCode: 'INR' }, consultationFeeNew: { amountMicros: 800_000_000, currencyCode: 'INR' },
consultationFeeFollowUp: { amountMicros: 500_000_000, currencyCode: 'INR' }, consultationFeeFollowUp: { amountMicros: 500_000_000, currencyCode: 'INR' },
phone: { primaryPhoneNumber: '9900100001', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '9900100001', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'dr.sharma@globalcare.com' }, email: { primaryEmail: 'dr.sharma@globalhospital.com' },
registrationNumber: 'KMC-45672', registrationNumber: 'KMC-45672',
active: true, active: true,
portalUserId: wmSharma, portalUserId: WM.drSharma,
}); });
console.log(` Dr. Sharma (Cardiology → ${wmSharma}): ${drSharma}`); console.log(` Dr. Sharma (Cardiology, WM: ${WM.drSharma}): ${drSharma}`);
const drPatel = await mk('doctor', { const drPatel = await mk('doctor', {
name: 'Dr. Meena Patel', name: 'Dr. Meena Patel',
@@ -241,15 +100,16 @@ async function main() {
specialty: 'Reproductive Medicine & IVF', specialty: 'Reproductive Medicine & IVF',
qualifications: 'MBBS, MS (OBG), Fellowship in Reproductive Medicine', qualifications: 'MBBS, MS (OBG), Fellowship in Reproductive Medicine',
yearsOfExperience: 15, yearsOfExperience: 15,
visitingHours: 'Tue/Thu/Sat 9:00 AM – 12:00 PM',
consultationFeeNew: { amountMicros: 700_000_000, currencyCode: 'INR' }, consultationFeeNew: { amountMicros: 700_000_000, currencyCode: 'INR' },
consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' }, consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' },
phone: { primaryPhoneNumber: '9900100002', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '9900100002', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'dr.patel@globalcare.com' }, email: { primaryEmail: 'dr.patel@globalhospital.com' },
registrationNumber: 'KMC-38291', registrationNumber: 'KMC-38291',
active: true, active: true,
portalUserId: wmPatel, portalUserId: WM.drPatel,
}); });
console.log(` Dr. Patel (Gynecology/IVF → ${wmPatel}): ${drPatel}`); console.log(` Dr. Patel (Gynecology/IVF, WM: ${WM.drPatel}): ${drPatel}`);
const drKumar = await mk('doctor', { const drKumar = await mk('doctor', {
name: 'Dr. Rajesh Kumar', name: 'Dr. Rajesh Kumar',
@@ -258,15 +118,16 @@ async function main() {
specialty: 'Joint Replacement & Sports Medicine', specialty: 'Joint Replacement & Sports Medicine',
qualifications: 'MBBS, MS (Ortho), Fellowship in Arthroplasty', qualifications: 'MBBS, MS (Ortho), Fellowship in Arthroplasty',
yearsOfExperience: 12, yearsOfExperience: 12,
visitingHours: 'Mon–Fri 2:00 PM – 5:00 PM',
consultationFeeNew: { amountMicros: 600_000_000, currencyCode: 'INR' }, consultationFeeNew: { amountMicros: 600_000_000, currencyCode: 'INR' },
consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' }, consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' },
phone: { primaryPhoneNumber: '9900100003', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '9900100003', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'dr.kumar@globalcare.com' }, email: { primaryEmail: 'dr.kumar@globalhospital.com' },
registrationNumber: 'KMC-51003', registrationNumber: 'KMC-51003',
active: true, active: true,
portalUserId: wmKumar, portalUserId: WM.drKumar,
}); });
console.log(` Dr. Kumar (Orthopedics → ${wmKumar}): ${drKumar}`); console.log(` Dr. Kumar (Orthopedics, WM: ${WM.drKumar}): ${drKumar}`);
const drReddy = await mk('doctor', { const drReddy = await mk('doctor', {
name: 'Dr. Lakshmi Reddy', name: 'Dr. Lakshmi Reddy',
@@ -275,15 +136,16 @@ async function main() {
specialty: 'Internal Medicine & Preventive Health', specialty: 'Internal Medicine & Preventive Health',
qualifications: 'MBBS, MD (General Medicine)', qualifications: 'MBBS, MD (General Medicine)',
yearsOfExperience: 20, yearsOfExperience: 20,
visitingHours: 'Mon–Sat 9:00 AM – 6:00 PM',
consultationFeeNew: { amountMicros: 500_000_000, currencyCode: 'INR' }, consultationFeeNew: { amountMicros: 500_000_000, currencyCode: 'INR' },
consultationFeeFollowUp: { amountMicros: 300_000_000, currencyCode: 'INR' }, consultationFeeFollowUp: { amountMicros: 300_000_000, currencyCode: 'INR' },
phone: { primaryPhoneNumber: '9900100004', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '9900100004', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'dr.reddy@globalcare.com' }, email: { primaryEmail: 'dr.reddy@globalhospital.com' },
registrationNumber: 'KMC-22145', registrationNumber: 'KMC-22145',
active: true, active: true,
portalUserId: wmReddy, portalUserId: WM.drReddy,
}); });
console.log(` Dr. Reddy (General Medicine → ${wmReddy}): ${drReddy}`); console.log(` Dr. Reddy (General Medicine, WM: ${WM.drReddy}): ${drReddy}`);
const drSingh = await mk('doctor', { const drSingh = await mk('doctor', {
name: 'Dr. Harpreet Singh', name: 'Dr. Harpreet Singh',
@@ -292,57 +154,16 @@ async function main() {
specialty: 'Otorhinolaryngology & Head/Neck Surgery', specialty: 'Otorhinolaryngology & Head/Neck Surgery',
qualifications: 'MBBS, MS (ENT), DNB', qualifications: 'MBBS, MS (ENT), DNB',
yearsOfExperience: 10, yearsOfExperience: 10,
visitingHours: 'Mon/Wed/Fri 11:00 AM – 3:00 PM',
consultationFeeNew: { amountMicros: 600_000_000, currencyCode: 'INR' }, consultationFeeNew: { amountMicros: 600_000_000, currencyCode: 'INR' },
consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' }, consultationFeeFollowUp: { amountMicros: 400_000_000, currencyCode: 'INR' },
phone: { primaryPhoneNumber: '9900100005', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '9900100005', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'dr.singh@globalcare.com' }, email: { primaryEmail: 'dr.singh@globalhospital.com' },
registrationNumber: 'KMC-60782', registrationNumber: 'KMC-60782',
active: true, active: true,
portalUserId: wmSingh, portalUserId: WM.drSingh,
}); });
console.log(` Dr. Singh (ENT → ${wmSingh}): ${drSingh}\n`); console.log(` Dr. Singh (ENT, WM: ${WM.drSingh}): ${drSingh}\n`);
await auth();
// ═══════════════════════════════════════════
// DOCTOR VISIT SLOTS (weekly schedule per doctor × clinic)
// ═══════════════════════════════════════════
console.log('📅 Visit Slots');
const slots: Array<{ doc: string; docName: string; clinic: string; clinicName: string; day: string; start: string; end: string }> = [
// Dr. Sharma — Koramangala Mon/Wed/Fri 10:00–13:00
{ doc: drSharma, docName: 'Sharma', clinic: clinicKor, clinicName: 'Kor', day: 'MONDAY', start: '10:00', end: '13:00' },
{ doc: drSharma, docName: 'Sharma', clinic: clinicKor, clinicName: 'Kor', day: 'WEDNESDAY', start: '10:00', end: '13:00' },
{ doc: drSharma, docName: 'Sharma', clinic: clinicKor, clinicName: 'Kor', day: 'FRIDAY', start: '10:00', end: '13:00' },
// Dr. Patel — Whitefield Tue/Thu/Sat 9:00–12:00
{ doc: drPatel, docName: 'Patel', clinic: clinicWf, clinicName: 'WF', day: 'TUESDAY', start: '09:00', end: '12:00' },
{ doc: drPatel, docName: 'Patel', clinic: clinicWf, clinicName: 'WF', day: 'THURSDAY', start: '09:00', end: '12:00' },
{ doc: drPatel, docName: 'Patel', clinic: clinicWf, clinicName: 'WF', day: 'SATURDAY', start: '09:00', end: '12:00' },
// Dr. Kumar — Koramangala Mon–Fri 14:00–17:00
{ doc: drKumar, docName: 'Kumar', clinic: clinicKor, clinicName: 'Kor', day: 'MONDAY', start: '14:00', end: '17:00' },
{ doc: drKumar, docName: 'Kumar', clinic: clinicKor, clinicName: 'Kor', day: 'TUESDAY', start: '14:00', end: '17:00' },
{ doc: drKumar, docName: 'Kumar', clinic: clinicKor, clinicName: 'Kor', day: 'WEDNESDAY', start: '14:00', end: '17:00' },
{ doc: drKumar, docName: 'Kumar', clinic: clinicKor, clinicName: 'Kor', day: 'THURSDAY', start: '14:00', end: '17:00' },
{ doc: drKumar, docName: 'Kumar', clinic: clinicKor, clinicName: 'Kor', day: 'FRIDAY', start: '14:00', end: '17:00' },
// Dr. Reddy — both clinics Mon–Sat
{ doc: drReddy, docName: 'Reddy', clinic: clinicKor, clinicName: 'Kor', day: 'MONDAY', start: '09:00', end: '13:00' },
{ doc: drReddy, docName: 'Reddy', clinic: clinicKor, clinicName: 'Kor', day: 'WEDNESDAY', start: '09:00', end: '13:00' },
{ doc: drReddy, docName: 'Reddy', clinic: clinicKor, clinicName: 'Kor', day: 'FRIDAY', start: '09:00', end: '13:00' },
{ doc: drReddy, docName: 'Reddy', clinic: clinicWf, clinicName: 'WF', day: 'TUESDAY', start: '14:00', end: '18:00' },
{ doc: drReddy, docName: 'Reddy', clinic: clinicWf, clinicName: 'WF', day: 'THURSDAY', start: '14:00', end: '18:00' },
{ doc: drReddy, docName: 'Reddy', clinic: clinicWf, clinicName: 'WF', day: 'SATURDAY', start: '14:00', end: '18:00' },
// Dr. Singh — Whitefield Mon/Wed/Fri 11:00–15:00
{ doc: drSingh, docName: 'Singh', clinic: clinicWf, clinicName: 'WF', day: 'MONDAY', start: '11:00', end: '15:00' },
{ doc: drSingh, docName: 'Singh', clinic: clinicWf, clinicName: 'WF', day: 'WEDNESDAY', start: '11:00', end: '15:00' },
{ doc: drSingh, docName: 'Singh', clinic: clinicWf, clinicName: 'WF', day: 'FRIDAY', start: '11:00', end: '15:00' },
];
for (const s of slots) {
await mk('doctorVisitSlot', {
name: `Dr. ${s.docName} — ${s.day} ${s.start}–${s.end} (${s.clinicName})`,
doctorId: s.doc, clinicId: s.clinic,
dayOfWeek: s.day, startTime: s.start, endTime: s.end,
});
}
console.log(` ${slots.length} visit slots created\n`);
await auth(); await auth();
@@ -585,10 +406,9 @@ async function main() {
console.log(' Vijay — appointment reminder (tomorrow 9am)\n'); console.log(' Vijay — appointment reminder (tomorrow 9am)\n');
console.log('🎉 Seed complete!'); console.log('🎉 Seed complete!');
console.log(' 2 clinics · 5 doctors · 20 visit slots · 3 campaigns'); console.log(' 5 doctors · 3 campaigns · 3 patients · 5 leads · 6 appointments · 10 calls · 22 activities · 2 follow-ups');
console.log(' 3 patients · 5 leads · 6 appointments · 10 calls · 22 activities · 2 follow-ups');
console.log(' Demo phones: Priya=9949879837, Ravi=6309248884'); console.log(' Demo phones: Priya=9949879837, Ravi=6309248884');
console.log(' Doctors linked to clinics via visit slots (multi-clinic schedule)'); console.log(' All appointments linked to doctor entities');
} }
main().catch(e => { console.error('💥', e.message); process.exit(1); }); main().catch(e => { console.error('💥', e.message); process.exit(1); });

33
scripts/seed-new-entities.ts
View File

@@ -5,13 +5,11 @@
* Prerequisites: doctors already seeded via seed-data.ts * Prerequisites: doctors already seeded via seed-data.ts
* *
* Platform field mapping (SDK name → platform name): * Platform field mapping (SDK name → platform name):
* Clinic: address→addressCustom, * Clinic: address→addressCustom, operatingHoursWeekday→weekdayHours,
* per-day booleans openMonday..openSunday + opensAt/closesAt (HH:MM), * operatingHoursSaturday→saturdayHours, operatingHoursSunday→sundayHours,
* clinicStatus→status, onlineBookingEnabled→onlineBooking, * clinicStatus→status, onlineBookingEnabled→onlineBooking,
* arriveEarlyMinutes→arriveEarlyMin, paymentCash→acceptsCash, * arriveEarlyMinutes→arriveEarlyMin, paymentCash→acceptsCash,
* paymentCard→acceptsCard, paymentUpi→acceptsUpi. * paymentCard→acceptsCard, paymentUpi→acceptsUpi
* requiredDocuments is a RELATION (ClinicRequiredDocument); seed rows
* separately — not a string on the Clinic itself.
* HealthPackage: packageDepartment→department, durationMinutes→durationMin, isActive→active * HealthPackage: packageDepartment→department, durationMinutes→durationMin, isActive→active
* InsurancePartner: planTypes→planTypesAccepted * InsurancePartner: planTypes→planTypesAccepted
*/ */
@@ -70,16 +68,15 @@ async function main() {
}, },
phone: { primaryPhoneNumber: '08041234567', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '08041234567', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'koramangala@globalhospital.com' }, email: { primaryEmail: 'koramangala@globalhospital.com' },
openMonday: true, openTuesday: true, openWednesday: true, weekdayHours: '8:00 AM – 8:00 PM',
openThursday: true, openFriday: true, openSaturday: true, openSunday: true, saturdayHours: '8:00 AM – 8:00 PM',
opensAt: '08:00', sundayHours: '9:00 AM – 2:00 PM',
closesAt: '20:00',
status: 'ACTIVE', status: 'ACTIVE',
walkInAllowed: true, walkInAllowed: true,
onlineBooking: true, onlineBooking: true,
cancellationWindowHours: 4, cancellationWindowHours: 4,
arriveEarlyMin: 15, arriveEarlyMin: 15,
// requiredDocuments is a relation (ClinicRequiredDocument) — seed separately requiredDocuments: 'ID proof + medical records',
acceptsCash: 'YES', acceptsCash: 'YES',
acceptsCard: 'YES', acceptsCard: 'YES',
acceptsUpi: 'YES', acceptsUpi: 'YES',
@@ -98,15 +95,15 @@ async function main() {
}, },
phone: { primaryPhoneNumber: '08041234568', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '08041234568', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'whitefield@globalhospital.com' }, email: { primaryEmail: 'whitefield@globalhospital.com' },
openMonday: true, openTuesday: true, openWednesday: true, weekdayHours: '8:00 AM – 8:00 PM',
openThursday: true, openFriday: true, openSaturday: true, openSunday: false, saturdayHours: '8:00 AM – 8:00 PM',
opensAt: '08:00', sundayHours: 'Closed',
closesAt: '20:00',
status: 'ACTIVE', status: 'ACTIVE',
walkInAllowed: true, walkInAllowed: true,
onlineBooking: true, onlineBooking: true,
cancellationWindowHours: 4, cancellationWindowHours: 4,
arriveEarlyMin: 15, arriveEarlyMin: 15,
requiredDocuments: 'ID proof + medical records',
acceptsCash: 'YES', acceptsCash: 'YES',
acceptsCard: 'YES', acceptsCard: 'YES',
acceptsUpi: 'YES', acceptsUpi: 'YES',
@@ -125,15 +122,15 @@ async function main() {
}, },
phone: { primaryPhoneNumber: '08041234569', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' }, phone: { primaryPhoneNumber: '08041234569', primaryPhoneCallingCode: '+91', primaryPhoneCountryCode: 'IN' },
email: { primaryEmail: 'indiranagar@globalhospital.com' }, email: { primaryEmail: 'indiranagar@globalhospital.com' },
openMonday: true, openTuesday: true, openWednesday: true, weekdayHours: '9:00 AM – 7:00 PM',
openThursday: true, openFriday: true, openSaturday: true, openSunday: true, saturdayHours: '9:00 AM – 7:00 PM',
opensAt: '09:00', sundayHours: '10:00 AM – 1:00 PM',
closesAt: '19:00',
status: 'ACTIVE', status: 'ACTIVE',
walkInAllowed: true, walkInAllowed: true,
onlineBooking: true, onlineBooking: true,
cancellationWindowHours: 4, cancellationWindowHours: 4,
arriveEarlyMin: 15, arriveEarlyMin: 15,
requiredDocuments: 'ID proof + medical records',
acceptsCash: 'YES', acceptsCash: 'YES',
acceptsCard: 'YES', acceptsCard: 'YES',
acceptsUpi: 'YES', acceptsUpi: 'YES',

114
scripts/seed-ramaiah-slots.ts
View File

@@ -1,114 +0,0 @@
/**
* Seed DoctorVisitSlots for all Ramaiah doctors.
* Assigns default visiting hours based on department patterns.
* Run after seed-ramaiah.ts has populated doctors + clinic.
*
* Run: cd helix-engage && SEED_GQL=https://ramaiah.app.healix360.net/graphql SEED_SUB=ramaiah SEED_ORIGIN=https://ramaiah.app.healix360.net npx tsx scripts/seed-ramaiah-slots.ts
*/
const GQL = process.env.SEED_GQL ?? 'http://localhost:4000/graphql';
const SUB = process.env.SEED_SUB ?? 'ramaiah';
const ORIGIN = process.env.SEED_ORIGIN ?? 'http://ramaiah.localhost:5080';
let token = '';
async function gql(query: string, variables?: any) {
const h: Record<string, string> = { 'Content-Type': 'application/json', 'X-Workspace-Subdomain': SUB };
if (token) h['Authorization'] = `Bearer ${token}`;
const r = await fetch(GQL, { method: 'POST', headers: h, body: JSON.stringify({ query, variables }) });
const d: any = await r.json();
if (d.errors) throw new Error(d.errors[0].message);
return d.data;
}
async function auth() {
const d1 = await gql(`mutation { getLoginTokenFromCredentials(email: "dev@fortytwo.dev", password: "tim@apple.dev", origin: "${ORIGIN}") { loginToken { token } } }`);
const lt = d1.getLoginTokenFromCredentials.loginToken.token;
const d2 = await gql(`mutation { getAuthTokensFromLoginToken(loginToken: "${lt}", origin: "${ORIGIN}") { tokens { accessOrWorkspaceAgnosticToken { token } } } }`);
token = d2.getAuthTokensFromLoginToken.tokens.accessOrWorkspaceAgnosticToken.token;
}
// Default schedule patterns by department type
const schedulePatterns: Record<string, { days: string[]; start: string; end: string }> = {
// Surgical departments: morning OPD
surgery: { days: ['MONDAY', 'WEDNESDAY', 'FRIDAY', 'SATURDAY'], start: '09:00', end: '13:00' },
// Medical departments: afternoon OPD
medicine: { days: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'], start: '14:00', end: '17:00' },
// High-traffic: full day Mon-Sat
fullDay: { days: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'], start: '09:00', end: '17:00' },
// Emergency/Critical: all week
allWeek: { days: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'], start: '08:00', end: '20:00' },
// Specialists: limited days
specialist: { days: ['TUESDAY', 'THURSDAY', 'SATURDAY'], start: '10:00', end: '14:00' },
};
function getPattern(department: string): { days: string[]; start: string; end: string } {
const d = department.toLowerCase();
if (d.includes('emergency') || d.includes('critical care')) return schedulePatterns.allWeek;
if (d.includes('general medicine') || d.includes('paediatrics') || d.includes('obstetrics')) return schedulePatterns.fullDay;
if (d.includes('surgery') || d.includes('ortho') || d.includes('neuro')) return schedulePatterns.surgery;
if (d.includes('cardiology') || d.includes('nephrology') || d.includes('oncology')) return schedulePatterns.medicine;
if (d.includes('dermatology') || d.includes('psychiatry') || d.includes('rheumatology') || d.includes('endocrinology')) return schedulePatterns.specialist;
// Default: Mon-Fri mornings
return { days: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'], start: '09:00', end: '13:00' };
}
async function main() {
console.log('🕐 Seeding visit slots for Ramaiah doctors...\n');
await auth();
console.log('✅ Auth OK\n');
// Fetch all doctors
const docData = await gql(`{ doctors(first: 500) { edges { node { id name department } } } }`);
const doctors = docData.doctors.edges.map((e: any) => e.node);
console.log(`📋 Found ${doctors.length} doctors\n`);
// Fetch clinic
const clinicData = await gql(`{ clinics(first: 1) { edges { node { id clinicName } } } }`);
const clinicId = clinicData.clinics.edges[0]?.node.id;
const clinicName = clinicData.clinics.edges[0]?.node.clinicName ?? 'Clinic';
if (!clinicId) { console.error('No clinic found!'); process.exit(1); }
console.log(`🏥 Clinic: ${clinicName} (${clinicId})\n`);
let created = 0;
let failed = 0;
for (let i = 0; i < doctors.length; i++) {
if (i > 0 && i % 40 === 0) {
await auth();
console.log(` (re-authed at ${i})`);
}
const doc = doctors[i];
const pattern = getPattern(doc.department ?? '');
for (const day of pattern.days) {
try {
await gql(
`mutation($data: DoctorVisitSlotCreateInput!) { createDoctorVisitSlot(data: $data) { id } }`,
{
data: {
name: `${doc.name} — ${day} ${pattern.start}–${pattern.end}`,
doctorId: doc.id,
clinicId,
dayOfWeek: day,
startTime: pattern.start,
endTime: pattern.end,
},
},
);
created++;
} catch (err: any) {
failed++;
if (failed <= 5) console.error(` ✗ ${doc.name} ${day}: ${err.message?.slice(0, 60)}`);
}
}
if ((i + 1) % 30 === 0) console.log(` ${i + 1}/${doctors.length} doctors processed (${created} slots)...`);
}
console.log(`\n✅ ${created} visit slots created, ${failed} failed`);
console.log(` ${doctors.length} doctors × avg ${Math.round(created / doctors.length)} days each`);
}
main().catch(e => { console.error('💥', e.message); process.exit(1); });

117
scripts/seed-ramaiah.ts
View File

@@ -1,117 +0,0 @@
/**
* Helix Engage — Ramaiah Hospital Data Seeder
*
* Seeds clinic + 195 doctors from scraped website data.
* Run: cd helix-engage && SEED_GQL=https://ramaiah.app.healix360.net/graphql SEED_SUB=ramaiah SEED_ORIGIN=https://ramaiah.app.healix360.net npx tsx scripts/seed-ramaiah.ts
*/
import { readFileSync } from 'fs';
const GQL = process.env.SEED_GQL ?? 'http://localhost:4000/graphql';
const SUB = process.env.SEED_SUB ?? 'ramaiah';
const ORIGIN = process.env.SEED_ORIGIN ?? 'http://ramaiah.localhost:5080';
const DATA_FILE = process.env.SEED_DATA ?? '/tmp/ramaiah-seed-data.json';
let token = '';
async function gql(query: string, variables?: any) {
const h: Record<string, string> = { 'Content-Type': 'application/json', 'X-Workspace-Subdomain': SUB };
if (token) h['Authorization'] = `Bearer ${token}`;
const r = await fetch(GQL, { method: 'POST', headers: h, body: JSON.stringify({ query, variables }) });
const d: any = await r.json();
if (d.errors) { console.error('❌', d.errors[0].message); throw new Error(d.errors[0].message); }
return d.data;
}
async function auth() {
const d1 = await gql(`mutation { getLoginTokenFromCredentials(email: "dev@fortytwo.dev", password: "tim@apple.dev", origin: "${ORIGIN}") { loginToken { token } } }`);
const lt = d1.getLoginTokenFromCredentials.loginToken.token;
const d2 = await gql(`mutation { getAuthTokensFromLoginToken(loginToken: "${lt}", origin: "${ORIGIN}") { tokens { accessOrWorkspaceAgnosticToken { token } } } }`);
token = d2.getAuthTokensFromLoginToken.tokens.accessOrWorkspaceAgnosticToken.token;
}
async function mk(entity: string, data: any): Promise<string> {
const cap = entity[0].toUpperCase() + entity.slice(1);
const d = await gql(`mutation($data: ${cap}CreateInput!) { create${cap}(data: $data) { id } }`, { data });
return d[`create${cap}`].id;
}
async function main() {
console.log('🌱 Seeding Ramaiah Hospital data...\n');
const raw = JSON.parse(readFileSync(DATA_FILE, 'utf-8'));
console.log(`📁 Loaded ${raw.doctors.length} doctors, ${raw.departments.length} departments\n`);
await auth();
console.log('✅ Auth OK\n');
// Clinic
console.log('🏥 Clinic');
const clinicId = await mk('clinic', {
name: raw.clinic.name,
clinicName: raw.clinic.name,
status: 'ACTIVE',
opensAt: '08:00',
closesAt: '20:00',
openMonday: true, openTuesday: true, openWednesday: true,
openThursday: true, openFriday: true, openSaturday: true, openSunday: false,
phone: {
primaryPhoneNumber: raw.clinic.phone?.replace(/[^0-9]/g, '').slice(-10) ?? '',
primaryPhoneCallingCode: '+91',
primaryPhoneCountryCode: 'IN',
},
addressCustom: {
addressStreet1: raw.clinic.address?.split(',')[0] ?? 'New BEL Road',
addressCity: raw.clinic.city ?? 'Bangalore',
addressState: raw.clinic.state ?? 'Karnataka',
addressCountry: 'India',
addressPostcode: raw.clinic.pincode ?? '560054',
},
onlineBooking: true,
walkInAllowed: true,
});
console.log(` ${raw.clinic.name}: ${clinicId}\n`);
// Re-auth (long operation ahead)
await auth();
// Doctors — batch in groups of 20 with re-auth
console.log(`👨‍⚕️ Doctors (${raw.doctors.length})`);
let created = 0;
let failed = 0;
for (let i = 0; i < raw.doctors.length; i++) {
// Re-auth every 40 doctors (token may expire on long runs)
if (i > 0 && i % 40 === 0) {
await auth();
console.log(` (re-authed at ${i})`);
}
const doc = raw.doctors[i];
const firstName = doc.name.replace(/^Dr\.?\s*/i, '').split(' ')[0] ?? '';
const lastNameParts = doc.name.replace(/^Dr\.?\s*/i, '').split(' ').slice(1);
const lastName = lastNameParts.join(' ');
try {
await mk('doctor', {
name: doc.name,
fullName: { firstName, lastName },
department: doc.department ?? 'Other',
specialty: doc.designation ?? 'Consultant',
qualifications: doc.qualifications ?? '',
registrationNumber: '',
active: true,
});
created++;
if (created % 20 === 0) console.log(` ${created}/${raw.doctors.length} created...`);
} catch (err: any) {
failed++;
console.error(` ✗ ${doc.name}: ${err.message?.slice(0, 80)}`);
}
}
console.log(`\n ✅ ${created} doctors created, ${failed} failed\n`);
console.log('🎉 Ramaiah seed complete!');
console.log(` 1 clinic · ${created} doctors · ${raw.departments.length} departments`);
}
main().catch(e => { console.error('💥', e.message); process.exit(1); });

7
src/components/application/date-picker/date-picker.tsx
View File

@@ -19,12 +19,9 @@ interface DatePickerProps extends AriaDatePickerProps<DateValue> {
onApply?: () => void; onApply?: () => void;
/** The function to call when the cancel button is clicked. */ /** The function to call when the cancel button is clicked. */
onCancel?: () => void; onCancel?: () => void;
/** Override popover placement — use "top start" in narrow panels
* where "bottom start" would overflow the viewport. */
popoverPlacement?: 'bottom start' | 'top start' | 'top end' | 'bottom end';
} }
export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, popoverPlacement, ...props }: DatePickerProps) => { export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DatePickerProps) => {
const formatter = useDateFormatter({ const formatter = useDateFormatter({
month: "short", month: "short",
day: "numeric", day: "numeric",
@@ -43,7 +40,7 @@ export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply,
</AriaGroup> </AriaGroup>
<AriaPopover <AriaPopover
offset={8} offset={8}
placement={popoverPlacement ?? "bottom start"} placement="bottom start"
shouldFlip shouldFlip
className={({ isEntering, isExiting }) => className={({ isEntering, isExiting }) =>
cx( cx(

73
src/components/application/date-picker/time-picker.tsx
View File

@@ -1,73 +0,0 @@
import { Select } from "@/components/base/select/select";
// 30-minute increments from 05:00 to 23:00 → 37 slots.
// Covers every realistic clinic opening / closing time.
// Values are 24-hour HH:MM strings — the same format stored on the
// Clinic + DoctorVisitSlot entities in the platform. Labels are
// 12-hour format with AM/PM for readability.
const TIME_SLOTS = Array.from({ length: 37 }, (_, i) => {
const totalMinutes = 5 * 60 + i * 30;
const hour = Math.floor(totalMinutes / 60);
const minute = totalMinutes % 60;
const h12 = hour % 12 || 12;
const period = hour >= 12 ? "PM" : "AM";
const id = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
const label = `${h12}:${String(minute).padStart(2, "0")} ${period}`;
return { id, label };
});
type TimePickerProps = {
/** Field label rendered above the select. */
label?: string;
/** Current value in 24-hour HH:MM format, or null when unset. */
value: string | null;
/** Called with the new HH:MM string when the user picks a slot. */
onChange: (value: string) => void;
isRequired?: boolean;
isDisabled?: boolean;
placeholder?: string;
};
// A minimal time-of-day picker built on top of the existing base
// Select component. Intentionally dropdown-based rather than the
// full DateTimePicker popover pattern from the reference demo —
// the clinic + doctor flows only need time, not date, and a
// dropdown is faster to use when the agent already knows the time.
//
// Use this for: clinic.opensAt / closesAt, doctorVisitSlot.startTime /
// endTime. For time-AND-date (appointment scheduling), stick with the
// existing DatePicker in the same directory.
export const TimePicker = ({
label,
value,
onChange,
isRequired,
isDisabled,
placeholder = "Select time",
}: TimePickerProps) => (
<Select
label={label}
placeholder={placeholder}
items={TIME_SLOTS}
selectedKey={value}
onSelectionChange={(key) => {
if (key !== null) onChange(String(key));
}}
isRequired={isRequired}
isDisabled={isDisabled}
>
{(slot) => <Select.Item id={slot.id} label={slot.label} />}
</Select>
);
// Format a 24-hour HH:MM string as a 12-hour display label (e.g.
// "09:30" → "9:30 AM"). Useful on list/detail pages that render
// stored clinic hours without re-mounting the picker.
export const formatTimeLabel = (hhmm: string | null | undefined): string => {
if (!hhmm) return "—";
const [h, m] = hhmm.split(":").map(Number);
if (Number.isNaN(h) || Number.isNaN(m)) return hhmm;
const h12 = h % 12 || 12;
const period = h >= 12 ? "PM" : "AM";
return `${h12}:${String(m).padStart(2, "0")} ${period}`;
};

108
src/components/application/day-selector/day-selector.tsx
View File

@@ -1,108 +0,0 @@
import { cx } from "@/utils/cx";
// Keys match the Clinic entity's openMonday..openSunday fields
// directly — no translation layer needed when reading/writing the
// form value into GraphQL mutations.
export type DayKey =
| "monday"
| "tuesday"
| "wednesday"
| "thursday"
| "friday"
| "saturday"
| "sunday";
export type DaySelection = Record<DayKey, boolean>;
const DAYS: { key: DayKey; label: string }[] = [
{ key: "monday", label: "Mon" },
{ key: "tuesday", label: "Tue" },
{ key: "wednesday", label: "Wed" },
{ key: "thursday", label: "Thu" },
{ key: "friday", label: "Fri" },
{ key: "saturday", label: "Sat" },
{ key: "sunday", label: "Sun" },
];
type DaySelectorProps = {
/** Selected-state for each weekday. */
value: DaySelection;
/** Fires with the full updated selection whenever a pill is tapped. */
onChange: (value: DaySelection) => void;
/** Optional heading above the pills. */
label?: string;
/** Optional helper text below the pills. */
hint?: string;
};
// Seven tappable Mon–Sun pills. Used on the Clinic form to pick which
// days the clinic is open, since the Clinic entity has seven separate
// BOOLEAN fields (openMonday..openSunday) — SDK has no MULTI_SELECT.
// Also reusable anywhere else we need a weekly-recurrence picker
// (future: follow-up schedules, on-call rotations).
export const DaySelector = ({ value, onChange, label, hint }: DaySelectorProps) => (
<div className="flex flex-col gap-2">
{label && (
<span className="text-sm font-medium text-secondary">{label}</span>
)}
<div className="flex flex-wrap gap-2">
{DAYS.map(({ key, label: dayLabel }) => {
const isSelected = !!value[key];
return (
<button
key={key}
type="button"
onClick={() => onChange({ ...value, [key]: !isSelected })}
className={cx(
"flex h-10 min-w-12 items-center justify-center rounded-full border px-4 text-sm font-semibold transition duration-100 ease-linear",
isSelected
? "border-brand bg-brand-solid text-white hover:bg-brand-solid_hover"
: "border-secondary bg-primary text-secondary hover:border-primary hover:bg-secondary_hover",
)}
aria-pressed={isSelected}
>
{dayLabel}
</button>
);
})}
</div>
{hint && <span className="text-xs text-tertiary">{hint}</span>}
</div>
);
// Helper factories — use these instead of spelling out the empty
// object literal everywhere.
export const emptyDaySelection = (): DaySelection => ({
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
sunday: false,
});
// The default new-clinic state: Mon–Sat open, Sun closed. Matches the
// typical Indian outpatient hospital schedule.
export const defaultDaySelection = (): DaySelection => ({
monday: true,
tuesday: true,
wednesday: true,
thursday: true,
friday: true,
saturday: true,
sunday: false,
});
// Format a DaySelection as a compact human-readable string for list
// pages (e.g. "Mon–Fri", "Mon–Sat", "Mon Wed Fri"). Collapses
// consecutive selected days into ranges.
export const formatDaySelection = (sel: DaySelection): string => {
const openKeys = DAYS.filter((d) => sel[d.key]).map((d) => d.label);
if (openKeys.length === 0) return "Closed";
if (openKeys.length === 7) return "Every day";
// Monday-Friday, Monday-Saturday shorthand
if (openKeys.length === 5 && openKeys.join(",") === "Mon,Tue,Wed,Thu,Fri") return "Mon–Fri";
if (openKeys.length === 6 && openKeys.join(",") === "Mon,Tue,Wed,Thu,Fri,Sat") return "Mon–Sat";
return openKeys.join(" ");
};

282
src/components/call-desk/active-call-card.tsx
View File

@@ -1,11 +1,10 @@
import { useState, useRef, useEffect, useMemo } from 'react'; import { useState, useRef, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { import {
faPhone, faPhoneHangup, faMicrophone, faMicrophoneSlash, faPhone, faPhoneHangup, faMicrophone, faMicrophoneSlash,
faPause, faPlay, faCalendarPlus, faPlus, faPenToSquare, faPause, faPlay, faCalendarPlus,
faPhoneArrowRight, faRecordVinyl, faClipboardQuestion, faPhoneArrowRight, faRecordVinyl, faClipboardQuestion,
} from '@fortawesome/pro-duotone-svg-icons'; } from '@fortawesome/pro-duotone-svg-icons';
import { useData } from '@/providers/data-provider';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
@@ -13,15 +12,12 @@ import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/
import { setOutboundPending } from '@/state/sip-manager'; import { setOutboundPending } from '@/state/sip-manager';
import { useSip } from '@/providers/sip-provider'; import { useSip } from '@/providers/sip-provider';
import { DispositionModal } from './disposition-modal'; import { DispositionModal } from './disposition-modal';
import type { CallAction } from './disposition-modal';
import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal';
import { AppointmentForm } from './appointment-form'; import { AppointmentForm } from './appointment-form';
import { TransferDialog } from './transfer-dialog'; import { TransferDialog } from './transfer-dialog';
import { EnquiryForm } from './enquiry-form'; import { EnquiryForm } from './enquiry-form';
import { formatPhone, formatShortDate } from '@/lib/format'; import { formatPhone } from '@/lib/format';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { useAuth } from '@/providers/auth-provider'; import { useAuth } from '@/providers/auth-provider';
import { useAgentState } from '@/hooks/use-agent-state';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
import type { Lead, CallDisposition } from '@/types/entities'; import type { Lead, CallDisposition } from '@/types/entities';
@@ -46,64 +42,12 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
const setCallerNumber = useSetAtom(sipCallerNumberAtom); const setCallerNumber = useSetAtom(sipCallerNumberAtom);
const setCallUcid = useSetAtom(sipCallUcidAtom); const setCallUcid = useSetAtom(sipCallUcidAtom);
const [appointmentOpen, setAppointmentOpen] = useState(false); const [appointmentOpen, setAppointmentOpen] = useState(false);
// Which existing appointment is being edited (null = creating a new one).
// The Book Appt drawer shows pills: [+ New] + one per upcoming appointment.
// Clicking Edit on a pill sets this; clicking + New clears it.
const [editingApptId, setEditingApptId] = useState<string | null>(null);
const [transferOpen, setTransferOpen] = useState(false); const [transferOpen, setTransferOpen] = useState(false);
const [recordingPaused, setRecordingPaused] = useState(false); const [recordingPaused, setRecordingPaused] = useState(false);
const [enquiryOpen, setEnquiryOpen] = useState(false); const [enquiryOpen, setEnquiryOpen] = useState(false);
const [dispositionOpen, setDispositionOpen] = useState(false); const [dispositionOpen, setDispositionOpen] = useState(false);
const [callerDisconnected, setCallerDisconnected] = useState(false); const [callerDisconnected, setCallerDisconnected] = useState(false);
// Actions actually recorded during this call. Drives the disposition const [suggestedDisposition, setSuggestedDisposition] = useState<CallDisposition | null>(null);
// modal's priority-lock: if the agent booked an appointment and logged
// an enquiry, both badges render and the primary disposition is
// locked to APPOINTMENT_BOOKED.
const [actionsTaken, setActionsTaken] = useState<CallAction[]>([]);
const addActions = (...newActions: CallAction[]) => {
setActionsTaken((prev) => {
const next = new Set(prev);
for (const a of newActions) next.add(a);
return Array.from(next);
});
};
// Upcoming appointments for this caller (if returning patient) — drives
// the pill row above AppointmentForm so the agent can edit existing
// bookings in addition to creating new ones.
const { appointments } = useData();
const leadAppointments = useMemo(() => {
const patientId = (lead as any)?.patientId;
if (!patientId) return [];
const now = Date.now();
return appointments
.filter((a) =>
a.patientId === patientId
&& a.appointmentStatus !== 'CANCELLED'
&& a.appointmentStatus !== 'NO_SHOW'
&& a.appointmentStatus !== 'COMPLETED'
// Only future appointments make sense as reschedule targets.
// Past ones can't be edited — they already happened.
&& a.scheduledAt
&& new Date(a.scheduledAt).getTime() >= now,
)
.sort((a, b) => new Date(a.scheduledAt ?? '').getTime() - new Date(b.scheduledAt ?? '').getTime());
}, [appointments, lead]);
const editingAppt = useMemo(
() => (editingApptId ? leadAppointments.find((a) => a.id === editingApptId) ?? null : null),
[leadAppointments, editingApptId],
);
// Pending pill click awaiting the reschedule-confirm modal. When the
// agent clicks a pill, we store the appointment id here + open the modal.
// Yes → promote to editingApptId in edit mode. No → promote in view mode.
const [pendingApptId, setPendingApptId] = useState<string | null>(null);
const [apptMode, setApptMode] = useState<'edit' | 'view'>('edit');
const agentConfig = localStorage.getItem('helix_agent_config');
const agentIdForState = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
const { supervisorPresence } = useAgentState(agentIdForState);
const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND'); const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND');
const wasAnsweredRef = useRef(callState === 'active'); const wasAnsweredRef = useRef(callState === 'active');
@@ -112,18 +56,6 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
console.log(`[ACTIVE-CALL-CARD] Mounted: state=${callState} direction=${callDirectionRef.current} ucid=${callUcid ?? 'none'} lead=${lead?.id ?? 'none'} phone=${callerPhone}`); console.log(`[ACTIVE-CALL-CARD] Mounted: state=${callState} direction=${callDirectionRef.current} ucid=${callUcid ?? 'none'} lead=${lead?.id ?? 'none'} phone=${callerPhone}`);
}, []); // eslint-disable-line react-hooks/exhaustive-deps }, []); // eslint-disable-line react-hooks/exhaustive-deps
// Sync UCID to localStorage so sendBeacon can fire auto-dispose on page refresh.
// Cleared on disposition submit (handleDisposition below) or when call resets to idle.
useEffect(() => {
if (callUcid) {
localStorage.setItem('helix_active_ucid', callUcid);
}
return () => {
// Don't clear on unmount if disposition hasn't fired — the
// beforeunload handler in SipProvider needs it
};
}, [callUcid]);
// Detect caller disconnect: call was active and ended without agent pressing End // Detect caller disconnect: call was active and ended without agent pressing End
useEffect(() => { useEffect(() => {
if (wasAnsweredRef.current && !dispositionOpen && (callState === 'ended' || callState === 'failed')) { if (wasAnsweredRef.current && !dispositionOpen && (callState === 'ended' || callState === 'failed')) {
@@ -146,16 +78,13 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
// Submit disposition to sidecar // Submit disposition to sidecar
if (callUcid) { if (callUcid) {
const agentCfg = JSON.parse(localStorage.getItem('helix_agent_config') ?? '{}');
const disposePayload = { const disposePayload = {
ucid: callUcid, ucid: callUcid,
disposition, disposition,
agentId: agentCfg.ozonetelAgentId,
callerPhone, callerPhone,
direction: callDirectionRef.current, direction: callDirectionRef.current,
durationSec: callDuration, durationSec: callDuration,
leadId: lead?.id ?? null, leadId: lead?.id ?? null,
leadName: fullName || null,
notes, notes,
missedCallId: missedCallId ?? undefined, missedCallId: missedCallId ?? undefined,
}; };
@@ -167,35 +96,38 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
console.warn('[DISPOSE] No callUcid — skipping disposition'); console.warn('[DISPOSE] No callUcid — skipping disposition');
} }
// Follow-ups are created by the enquiry form (where the agent picks // Side effects
// the date + context). No second creation here — that was causing if (disposition === 'FOLLOW_UP_SCHEDULED') {
// duplicate entries on every FOLLOW_UP_SCHEDULED call. try {
await apiClient.graphql(`mutation($data: FollowUpCreateInput!) { createFollowUp(data: $data) { id } }`, {
// Clear persisted UCID — disposition was submitted, no need for sendBeacon fallback data: {
localStorage.removeItem('helix_active_ucid'); name: `Follow-up — ${fullName || phoneDisplay}`,
typeCustom: 'CALLBACK',
status: 'PENDING',
assignedAgent: null,
priority: 'NORMAL',
scheduledAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
},
}, { silent: true });
notify.success('Follow-up Created', 'Callback scheduled for tomorrow');
} catch {
notify.info('Follow-up', 'Could not auto-create follow-up');
}
}
notify.success('Call Logged', `Disposition: ${disposition.replace(/_/g, ' ').toLowerCase()}`); notify.success('Call Logged', `Disposition: ${disposition.replace(/_/g, ' ').toLowerCase()}`);
handleReset(); handleReset();
}; };
const handleAppointmentSaved = (outcome: 'BOOKED' | 'RESCHEDULED' | 'CANCELLED') => { const handleAppointmentSaved = () => {
setAppointmentOpen(false); setAppointmentOpen(false);
if (outcome === 'RESCHEDULED') { setSuggestedDisposition('APPOINTMENT_BOOKED');
addActions('RESCHEDULE'); notify.success('Appointment Booked', 'Payment link will be sent to the patient');
notify.success('Appointment Rescheduled');
} else if (outcome === 'CANCELLED') {
addActions('CANCEL');
notify.success('Appointment Cancelled');
} else {
addActions('APPOINTMENT');
notify.success('Appointment Booked', 'Payment link will be sent to the patient');
}
}; };
const handleReset = () => { const handleReset = () => {
setDispositionOpen(false); setDispositionOpen(false);
setCallerDisconnected(false); setCallerDisconnected(false);
setActionsTaken([]);
setCallState('idle'); setCallState('idle');
setCallerNumber(null); setCallerNumber(null);
setCallUcid(null); setCallUcid(null);
@@ -259,7 +191,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
return ( return (
<div className="rounded-xl border border-secondary bg-primary p-4 text-center"> <div className="rounded-xl border border-secondary bg-primary p-4 text-center">
<FontAwesomeIcon icon={faPhoneHangup} className="size-6 text-fg-quaternary mb-2" /> <FontAwesomeIcon icon={faPhoneHangup} className="size-6 text-fg-quaternary mb-2" />
<p className="text-sm font-semibold text-primary">{fullName || 'Missed Call'}</p> <p className="text-sm font-semibold text-primary">Missed Call</p>
<p className="text-xs text-tertiary mt-1">{phoneDisplay} — not answered</p> <p className="text-xs text-tertiary mt-1">{phoneDisplay} — not answered</p>
<Button size="sm" color="secondary" className="mt-3" onClick={handleReset}> <Button size="sm" color="secondary" className="mt-3" onClick={handleReset}>
Back to Worklist Back to Worklist
@@ -286,15 +218,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
{fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>} {fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
{supervisorPresence === 'whisper' && (
<Badge size="sm" color="blue" type="pill-color">Supervisor coaching</Badge>
)}
{supervisorPresence === 'barge' && (
<Badge size="sm" color="brand" type="pill-color">Supervisor on call</Badge>
)}
<Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
</div>
</div> </div>
{/* Call controls */} {/* Call controls */}
@@ -338,17 +262,12 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
<Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'} <Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />} iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
isDisabled={!wasAnsweredRef.current} onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); setTransferOpen(false); }}>Book Appt</Button>
onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); setTransferOpen(false); }}>
{leadAppointments.length > 0 ? 'New / Reschedule Appt' : 'New Appt'}
</Button>
<Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'} <Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />} iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
isDisabled={!wasAnsweredRef.current}
onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); setTransferOpen(false); }}>Enquiry</Button> onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); setTransferOpen(false); }}>Enquiry</Button>
<Button size="sm" color={transferOpen ? 'primary' : 'secondary'} <Button size="sm" color={transferOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />} iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
isDisabled={!wasAnsweredRef.current}
onClick={() => { setTransferOpen(!transferOpen); setAppointmentOpen(false); setEnquiryOpen(false); }}>Transfer</Button> onClick={() => { setTransferOpen(!transferOpen); setAppointmentOpen(false); setEnquiryOpen(false); }}>Transfer</Button>
<Button size="sm" color="primary-destructive" className="ml-auto" <Button size="sm" color="primary-destructive" className="ml-auto"
@@ -368,175 +287,44 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
onClose={() => setTransferOpen(false)} onClose={() => setTransferOpen(false)}
onTransferred={() => { onTransferred={() => {
setTransferOpen(false); setTransferOpen(false);
// A transfer implies the original agent handed the call setSuggestedDisposition('FOLLOW_UP_SCHEDULED');
// off — treat that as a follow-up action so the
// disposition pre-locks to FOLLOW_UP_SCHEDULED.
addActions('FOLLOWUP');
setDispositionOpen(true); setDispositionOpen(true);
}} }}
/> />
)} )}
{appointmentOpen && leadAppointments.length > 0 && (
<div className="flex flex-wrap gap-2 mb-3">
<button
type="button"
onClick={() => setEditingApptId(null)}
className={cx(
'flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 text-xs font-semibold transition duration-100 ease-linear',
!editingApptId
? 'border-brand bg-brand-primary text-brand-secondary'
: 'border-secondary bg-primary text-secondary hover:bg-primary_hover',
)}
>
<FontAwesomeIcon icon={faPlus} className="size-3" />
New
</button>
{leadAppointments.map((appt) => (
<div
key={appt.id}
className={cx(
'flex items-center gap-2 rounded-lg border-2 px-3 py-2 text-xs',
editingApptId === appt.id
? 'border-brand bg-brand-primary'
: 'border-secondary bg-primary',
)}
>
<div className="flex flex-col">
<span className="font-semibold text-primary">
{appt.scheduledAt ? formatShortDate(appt.scheduledAt) : 'No date'}
</span>
<span className="text-[11px] text-tertiary">
{appt.doctorName ?? 'Doctor'}
</span>
</div>
<button
type="button"
onClick={() => setPendingApptId(appt.id)}
className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-semibold text-brand-secondary hover:bg-brand-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faPenToSquare} className="size-3" />
Edit
</button>
</div>
))}
</div>
)}
{/* Key forces a full remount when switching between
pills (or between edit/view modes) so the form's
internal state re-initializes from the new
existingAppointment prop instead of staying
stuck on the first-mounted values. */}
<AppointmentForm <AppointmentForm
key={`${editingApptId ?? 'new'}-${apptMode}`}
isOpen={appointmentOpen} isOpen={appointmentOpen}
onOpenChange={(open) => { onOpenChange={setAppointmentOpen}
setAppointmentOpen(open);
if (!open) { setEditingApptId(null); setApptMode('edit'); }
}}
callerNumber={callerPhone} callerNumber={callerPhone}
leadName={fullName || null} leadName={fullName || null}
leadId={lead?.id ?? null} leadId={lead?.id ?? null}
patientId={(lead as any)?.patientId ?? null} patientId={(lead as any)?.patientId ?? null}
readOnly={apptMode === 'view'} onSaved={handleAppointmentSaved}
existingAppointment={editingAppt ? {
id: editingAppt.id,
scheduledAt: editingAppt.scheduledAt ?? '',
doctorName: editingAppt.doctorName ?? '',
doctorId: editingAppt.doctorId ?? undefined,
department: editingAppt.department ?? '',
clinicId: editingAppt.clinicId ?? undefined,
reasonForVisit: editingAppt.reasonForVisit ?? undefined,
status: editingAppt.appointmentStatus ?? 'SCHEDULED',
} : null}
onSaved={(outcome) => {
setEditingApptId(null);
setApptMode('edit');
handleAppointmentSaved(outcome);
}}
/> />
<EnquiryForm <EnquiryForm
isOpen={enquiryOpen} isOpen={enquiryOpen}
onOpenChange={setEnquiryOpen} onOpenChange={setEnquiryOpen}
callerPhone={callerPhone} callerPhone={callerPhone}
leadName={fullName || null}
leadId={lead?.id ?? null} leadId={lead?.id ?? null}
patientId={(lead as any)?.patientId ?? null} patientId={(lead as any)?.patientId ?? null}
agentName={user.name} agentName={user.name}
onSaved={(actions) => { onSaved={() => {
setEnquiryOpen(false); setEnquiryOpen(false);
addActions(...actions); setSuggestedDisposition('INFO_PROVIDED');
notify.success('Enquiry Logged');
}} }}
/> />
</div> </div>
)} )}
</div> </div>
{/* Reschedule confirm modal — fires when the agent clicks Edit
on an upcoming-appointment pill. Yes → open the form in
edit mode (fields editable, Save button). No → open in
view-only mode (fields disabled, Close button). */}
<ModalOverlay
isOpen={pendingApptId !== null}
onOpenChange={(open) => { if (!open) setPendingApptId(null); }}
isDismissable
>
<Modal className="sm:max-w-md">
<Dialog>
{() => (
<div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
<h2 className="text-lg font-semibold text-primary">Reschedule this appointment?</h2>
<p className="text-sm text-tertiary">
Choose "Yes, reschedule" to change the date, time, or doctor.
Choose "No, just view" to see the details without changing anything.
</p>
<div className="flex items-center gap-2 justify-end">
<Button
size="sm"
color="secondary"
onClick={() => {
if (pendingApptId) {
setEditingApptId(pendingApptId);
setApptMode('view');
setPendingApptId(null);
}
}}
>
No, just view
</Button>
<Button
size="sm"
color="primary"
onClick={() => {
if (pendingApptId) {
setEditingApptId(pendingApptId);
setApptMode('edit');
setPendingApptId(null);
}
}}
>
Yes, reschedule
</Button>
</div>
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
{/* Disposition Modal — the ONLY path to end a call */} {/* Disposition Modal — the ONLY path to end a call */}
<DispositionModal <DispositionModal
isOpen={dispositionOpen} isOpen={dispositionOpen}
callerName={fullName || phoneDisplay} callerName={fullName || phoneDisplay}
callerDisconnected={callerDisconnected} callerDisconnected={callerDisconnected}
// wasAnsweredRef only flips true once callState reaches defaultDisposition={suggestedDisposition}
// 'active'. Outbound callbacks that never connect keep
// this false, which narrows the disposition options to
// no-answer outcomes and prevents SLA-gaming dispositions
// like Info Provided on a call the customer never took.
callAnswered={wasAnsweredRef.current}
actionsTaken={actionsTaken}
onSubmit={handleDisposition} onSubmit={handleDisposition}
onDismiss={() => { onDismiss={() => {
// Agent wants to continue the call — close modal, call stays active // Agent wants to continue the call — close modal, call stays active

32
src/components/call-desk/agent-status-toggle.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle, faChevronDown, faSpinnerThird } from '@fortawesome/pro-duotone-svg-icons'; import { faCircle, faChevronDown } from '@fortawesome/pro-duotone-svg-icons';
import { useAgentState } from '@/hooks/use-agent-state'; import { useAgentState } from '@/hooks/use-agent-state';
import type { OzonetelState } from '@/hooks/use-agent-state'; import type { OzonetelState } from '@/hooks/use-agent-state';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
@@ -33,7 +33,7 @@ type AgentStatusToggleProps = {
export const AgentStatusToggle = ({ isRegistered, connectionStatus }: AgentStatusToggleProps) => { export const AgentStatusToggle = ({ isRegistered, connectionStatus }: AgentStatusToggleProps) => {
const agentConfig = localStorage.getItem('helix_agent_config'); const agentConfig = localStorage.getItem('helix_agent_config');
const agentId = agentConfig ? JSON.parse(agentConfig).ozonetelAgentId : null; const agentId = agentConfig ? JSON.parse(agentConfig).ozonetelAgentId : null;
const { state: ozonetelState } = useAgentState(agentId); const ozonetelState = useAgentState(agentId);
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const [changing, setChanging] = useState(false); const [changing, setChanging] = useState(false);
@@ -46,21 +46,12 @@ export const AgentStatusToggle = ({ isRegistered, connectionStatus }: AgentStatu
try { try {
if (newStatus === 'ready') { if (newStatus === 'ready') {
console.log('[AGENT-STATE] Changing to Ready'); console.log('[AGENT-STATE] Changing to Ready');
const res = await apiClient.post('/api/ozonetel/agent-state', { agentId, state: 'Ready' }); const res = await apiClient.post('/api/ozonetel/agent-state', { state: 'Ready' });
console.log('[AGENT-STATE] Ready response:', JSON.stringify(res)); console.log('[AGENT-STATE] Ready response:', JSON.stringify(res));
} else { } else {
const pauseReason = newStatus === 'break' ? 'Break' : 'Training'; const pauseReason = newStatus === 'break' ? 'Break' : 'Training';
// Ozonetel rejects Pause→Pause (Break↔Training) — the agent must
// transit through Ready. Insert a Ready hop whenever we're
// moving between two paused sub-states.
const isPauseToPause = ozonetelState === 'break' || ozonetelState === 'training';
if (isPauseToPause) {
console.log(`[AGENT-STATE] ${ozonetelState}→${newStatus}: sending Ready first, then Pause(${pauseReason})`);
await apiClient.post('/api/ozonetel/agent-state', { agentId, state: 'Ready' });
await new Promise(resolve => setTimeout(resolve, 400));
}
console.log(`[AGENT-STATE] Changing to Pause: ${pauseReason}`); console.log(`[AGENT-STATE] Changing to Pause: ${pauseReason}`);
const res = await apiClient.post('/api/ozonetel/agent-state', { agentId, state: 'Pause', pauseReason }); const res = await apiClient.post('/api/ozonetel/agent-state', { state: 'Pause', pauseReason });
console.log('[AGENT-STATE] Pause response:', JSON.stringify(res)); console.log('[AGENT-STATE] Pause response:', JSON.stringify(res));
} }
// Don't setStatus — SSE will push the real state // Don't setStatus — SSE will push the real state
@@ -98,18 +89,13 @@ export const AgentStatusToggle = ({ isRegistered, connectionStatus }: AgentStatu
disabled={changing || !canToggle} disabled={changing || !canToggle}
className={cx( className={cx(
'flex items-center gap-1.5 rounded-full bg-secondary px-3 py-1 transition duration-100 ease-linear', 'flex items-center gap-1.5 rounded-full bg-secondary px-3 py-1 transition duration-100 ease-linear',
canToggle && !changing ? 'hover:bg-secondary_hover cursor-pointer' : 'cursor-default', canToggle ? 'hover:bg-secondary_hover cursor-pointer' : 'cursor-default',
changing && 'opacity-50',
)} )}
> >
{changing ? ( <FontAwesomeIcon icon={faCircle} className={cx('size-2', current.dotColor)} />
<FontAwesomeIcon icon={faSpinnerThird} spin className="size-2.5 text-fg-brand-primary" /> <span className={cx('text-xs font-medium', current.color)}>{current.label}</span>
) : ( {canToggle && <FontAwesomeIcon icon={faChevronDown} className="size-2.5 text-fg-quaternary" />}
<FontAwesomeIcon icon={faCircle} className={cx('size-2', current.dotColor)} />
)}
<span className={cx('text-xs font-medium', changing ? 'text-brand-secondary' : current.color)}>
{changing ? 'Changing…' : current.label}
</span>
{canToggle && !changing && <FontAwesomeIcon icon={faChevronDown} className="size-2.5 text-fg-quaternary" />}
</button> </button>
{menuOpen && ( {menuOpen && (

56
src/components/call-desk/ai-chat-panel.tsx
View File

@@ -19,31 +19,15 @@ interface AiChatPanelProps {
onChatStart?: () => void; onChatStart?: () => void;
} }
// Supervisor has different quick-action prompts than the CC agent — they
// ask about team metrics, not patient / doctor info. Hardcoded here rather
// than in theme tokens because the prompts map 1:1 to the supervisor tool
// set in ai-chat.controller.ts (get_agent_performance, get_call_summary,
// get_campaign_stats) — changing the tools means changing these prompts.
const SUPERVISOR_QUICK_ACTIONS = [
{ label: 'Agent performance', prompt: 'Show me agent performance this week.' },
{ label: 'Call summary', prompt: 'Summarize call activity this week.' },
{ label: 'Campaign stats', prompt: 'How are the campaigns performing?' },
{ label: 'Who needs attention?', prompt: 'Which agents are underperforming or need attention?' },
];
const SUPERVISOR_INTRO = 'Ask me about agent performance, call trends, or campaign stats.';
export const AiChatPanel = ({ callerContext, onChatStart }: AiChatPanelProps) => { export const AiChatPanel = ({ callerContext, onChatStart }: AiChatPanelProps) => {
const { tokens } = useThemeTokens(); const { tokens } = useThemeTokens();
const isSupervisor = callerContext?.type === 'supervisor'; const quickActions = tokens.ai.quickActions;
const quickActions = isSupervisor ? SUPERVISOR_QUICK_ACTIONS : tokens.ai.quickActions;
const introText = isSupervisor ? SUPERVISOR_INTRO : 'Ask me about doctors, clinics, packages, or patient info.';
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const chatStartedRef = useRef(false); const chatStartedRef = useRef(false);
const token = localStorage.getItem('helix_access_token') ?? ''; const token = localStorage.getItem('helix_access_token') ?? '';
const { messages, input, handleSubmit, handleInputChange, isLoading, append, setMessages } = useChat({ const { messages, input, handleSubmit, handleInputChange, isLoading, append } = useChat({
api: `${API_URL}/api/ai/stream`, api: `${API_URL}/api/ai/stream`,
streamProtocol: 'text', streamProtocol: 'text',
headers: { headers: {
@@ -65,40 +49,6 @@ export const AiChatPanel = ({ callerContext, onChatStart }: AiChatPanelProps) =>
} }
}, [messages, onChatStart]); }, [messages, onChatStart]);
// Auto-fire a patient-summary request when a caller with a leadId appears
// on the panel. Resets whenever the caller changes (new incoming call) or
// the call ends (leadId clears), so each call starts fresh. The sidecar's
// AI agent inspects the leadId and replies with appointment/disposition/
// notes history when the caller is a returning patient.
const autoFiredForLeadRef = useRef<string | null>(null);
useEffect(() => {
const leadId = callerContext?.leadId ?? null;
// Call ended or no caller — wipe the panel so the next caller's
// context doesn't bleed over and the agent isn't staring at a stale
// summary in the worklist view between calls.
if (!leadId) {
if (autoFiredForLeadRef.current !== null) {
autoFiredForLeadRef.current = null;
setMessages([]);
chatStartedRef.current = false;
}
return;
}
if (autoFiredForLeadRef.current === leadId) return;
// New caller — clear any prior chat state and fire the summary prompt.
autoFiredForLeadRef.current = leadId;
setMessages([]);
chatStartedRef.current = false;
const name = callerContext?.leadName ?? 'this caller';
append({
role: 'user',
content: `Give me a quick summary of ${name} — prior appointments, last disposition, any outstanding notes. If net-new, say so.`,
});
}, [callerContext?.leadId, callerContext?.leadName, append, setMessages]);
const handleQuickAction = (prompt: string) => { const handleQuickAction = (prompt: string) => {
append({ role: 'user', content: prompt }); append({ role: 'user', content: prompt });
}; };
@@ -110,7 +60,7 @@ export const AiChatPanel = ({ callerContext, onChatStart }: AiChatPanelProps) =>
<div className="flex flex-col items-center justify-center py-6 text-center"> <div className="flex flex-col items-center justify-center py-6 text-center">
<FontAwesomeIcon icon={faSparkles} className="mb-2 size-6 text-fg-brand-primary" /> <FontAwesomeIcon icon={faSparkles} className="mb-2 size-6 text-fg-brand-primary" />
<p className="text-xs text-tertiary"> <p className="text-xs text-tertiary">
{introText} Ask me about doctors, clinics, packages, or patient info.
</p> </p>
<div className="mt-3 flex flex-wrap justify-center gap-1.5"> <div className="mt-3 flex flex-wrap justify-center gap-1.5">
{quickActions.map((action) => ( {quickActions.map((action) => (

392
src/components/call-desk/appointment-form.tsx
View File

@@ -1,16 +1,13 @@
import { useState, useEffect, useMemo } from 'react'; import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPen } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input'; import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select'; import { Select } from '@/components/base/select/select';
import { TextArea } from '@/components/base/textarea/textarea'; import { TextArea } from '@/components/base/textarea/textarea';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { DatePicker } from '@/components/application/date-picker/date-picker'; import { DatePicker } from '@/components/application/date-picker/date-picker';
import { parseDate, today, getLocalTimeZone } from '@internationalized/date'; import { parseDate } from '@internationalized/date';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
import { EditPatientConfirmModal } from '@/components/modals/edit-patient-confirm-modal';
type ExistingAppointment = { type ExistingAppointment = {
id: string; id: string;
@@ -18,7 +15,6 @@ type ExistingAppointment = {
doctorName: string; doctorName: string;
doctorId?: string; doctorId?: string;
department: string; department: string;
clinicId?: string;
reasonForVisit?: string; reasonForVisit?: string;
status: string; status: string;
}; };
@@ -30,22 +26,17 @@ type AppointmentFormProps = {
leadName?: string | null; leadName?: string | null;
leadId?: string | null; leadId?: string | null;
patientId?: string | null; patientId?: string | null;
// Called after a successful save. Passes back what actually happened so onSaved?: () => void;
// the parent can pre-lock the disposition (BOOKED vs RESCHEDULED vs
// CANCELLED each map to distinct disposition outcomes).
onSaved?: (outcome: 'BOOKED' | 'RESCHEDULED' | 'CANCELLED') => void;
existingAppointment?: ExistingAppointment | null; existingAppointment?: ExistingAppointment | null;
// When true, the form shows the existing appointment's data in a
// disabled state — no input editing, no Save/Cancel. Only a Close
// button. Used by the reschedule-confirm flow when the agent picks
// "No, just view" on an upcoming-appointment pill.
readOnly?: boolean;
}; };
type DoctorRecord = { id: string; name: string; department: string; clinic: string }; type DoctorRecord = { id: string; name: string; department: string; clinic: string };
// Clinics are fetched dynamically from the platform — no hardcoded list. const clinicItems = [
// If the workspace has no clinics configured, the dropdown shows empty. { id: 'koramangala', label: 'Global Hospital - Koramangala' },
{ id: 'whitefield', label: 'Global Hospital - Whitefield' },
{ id: 'indiranagar', label: 'Global Hospital - Indiranagar' },
];
const genderItems = [ const genderItems = [
{ id: 'male', label: 'Male' }, { id: 'male', label: 'Male' },
@@ -53,8 +44,22 @@ const genderItems = [
{ id: 'other', label: 'Other' }, { id: 'other', label: 'Other' },
]; ];
// Time slots are fetched from /api/masterdata/slots based on const timeSlotItems = [
// doctor + date. No hardcoded times. { id: '09:00', label: '9:00 AM' },
{ id: '09:30', label: '9:30 AM' },
{ id: '10:00', label: '10:00 AM' },
{ id: '10:30', label: '10:30 AM' },
{ id: '11:00', label: '11:00 AM' },
{ id: '11:30', label: '11:30 AM' },
{ id: '14:00', label: '2:00 PM' },
{ id: '14:30', label: '2:30 PM' },
{ id: '15:00', label: '3:00 PM' },
{ id: '15:30', label: '3:30 PM' },
{ id: '16:00', label: '4:00 PM' },
];
const formatDeptLabel = (dept: string) =>
dept.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
export const AppointmentForm = ({ export const AppointmentForm = ({
isOpen, isOpen,
@@ -65,36 +70,18 @@ export const AppointmentForm = ({
patientId, patientId,
onSaved, onSaved,
existingAppointment, existingAppointment,
readOnly = false,
}: AppointmentFormProps) => { }: AppointmentFormProps) => {
const isEditMode = !!existingAppointment; const isEditMode = !!existingAppointment;
// Doctor data from platform // Doctor data from platform
const [doctors, setDoctors] = useState<DoctorRecord[]>([]); const [doctors, setDoctors] = useState<DoctorRecord[]>([]);
// Initial name captured at form open — used to detect whether the
// agent actually changed the name before we commit any destructive
// updatePatient / updateLead.contactName mutations.
const initialLeadName = (leadName ?? '').trim();
// Form state — initialized from existing appointment in edit mode // Form state — initialized from existing appointment in edit mode
const [patientName, setPatientName] = useState(leadName ?? ''); const [patientName, setPatientName] = useState(leadName ?? '');
// The patient-name input is locked by default when there's an
// existing caller name (to prevent accidental rename-on-save), and
// unlocked only after the agent clicks the Edit button and confirms
// in the warning modal. First-time callers with no existing name
// start unlocked because there's nothing to protect.
const [isNameEditable, setIsNameEditable] = useState(initialLeadName.length === 0);
const [editConfirmOpen, setEditConfirmOpen] = useState(false);
const [patientPhone, setPatientPhone] = useState(callerNumber ?? ''); const [patientPhone, setPatientPhone] = useState(callerNumber ?? '');
const [age, setAge] = useState(''); const [age, setAge] = useState('');
const [gender, setGender] = useState<string | null>(null); const [gender, setGender] = useState<string | null>(null);
// Preload clinic from the existing appointment when editing — so the const [clinic, setClinic] = useState<string | null>(null);
// select lands on the right branch instead of being empty and forcing
// the agent to re-pick. Only historical rows that predate clinicId
// persistence will fall through to the auto-select-from-slot logic.
const [clinic, setClinic] = useState<string | null>(existingAppointment?.clinicId ?? null);
const [clinicItems, setClinicItems] = useState<Array<{ id: string; label: string }>>([]);
const [department, setDepartment] = useState<string | null>(existingAppointment?.department ?? null); const [department, setDepartment] = useState<string | null>(existingAppointment?.department ?? null);
const [doctor, setDoctor] = useState<string | null>(existingAppointment?.doctorId ?? null); const [doctor, setDoctor] = useState<string | null>(existingAppointment?.doctorId ?? null);
const [date, setDate] = useState(() => { const [date, setDate] = useState(() => {
@@ -111,47 +98,6 @@ export const AppointmentForm = ({
const [chiefComplaint, setChiefComplaint] = useState(existingAppointment?.reasonForVisit ?? ''); const [chiefComplaint, setChiefComplaint] = useState(existingAppointment?.reasonForVisit ?? '');
const [source, setSource] = useState('Inbound Call'); const [source, setSource] = useState('Inbound Call');
const [agentNotes, setAgentNotes] = useState(''); const [agentNotes, setAgentNotes] = useState('');
const [timeSlotItems, setTimeSlotItems] = useState<Array<{ id: string; label: string }>>([]);
// Fetch available time slots when doctor + date change
useEffect(() => {
if (!doctor || !date) {
setTimeSlotItems([]);
return;
}
apiClient.get<Array<{ time: string; label: string; clinicId: string; clinicName: string }>>(
`/api/masterdata/slots?doctorId=${doctor}&date=${date}`,
).then(slots => {
// Filter by selected clinic — doctor may visit multiple branches
const filtered = clinic ? slots.filter(s => s.clinicId === clinic) : slots;
let items = filtered.map(s => ({ id: s.time, label: s.label }));
// In edit mode, the saved timeSlot may have been filtered out
// (past-slot filter, schedule change, clinic mismatch). Inject
// it as a synthetic option so the dropdown still shows the
// existing value — otherwise the agent sees a cleared field
// and assumes the save-time was lost.
if (timeSlot && !items.some(i => i.id === timeSlot)) {
items = [{ id: timeSlot, label: `${timeSlot} (current)` }, ...items];
}
setTimeSlotItems(items);
// Auto-select clinic from the slot's clinic only if no clinic chosen
if (filtered.length === 0 && slots.length > 0 && !clinic) {
setClinic(slots[0].clinicId);
const autoItems = slots.filter(s => s.clinicId === slots[0].clinicId).map(s => ({ id: s.time, label: s.label }));
if (timeSlot && !autoItems.some(i => i.id === timeSlot)) {
autoItems.unshift({ id: timeSlot, label: `${timeSlot} (current)` });
}
setTimeSlotItems(autoItems);
}
}).catch(() => setTimeSlotItems([]));
// eslint-disable-next-line react-hooks/exhaustive-deps — clinic and timeSlot
// deliberately excluded. Including clinic causes a loop: the effect calls
// setClinic() for auto-selection → clinic changes → effect re-fires → loop.
// timeSlot is only needed for the synthetic "current" option injection which
// is a read, not a trigger. Re-fetch should only happen on doctor/date change.
}, [doctor, date]);
// Availability state // Availability state
const [bookedSlots, setBookedSlots] = useState<string[]>([]); const [bookedSlots, setBookedSlots] = useState<string[]>([]);
@@ -160,29 +106,24 @@ export const AppointmentForm = ({
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Fetch doctors on mount. Doctors are hospital-wide — no single // Fetch doctors on mount
// `clinic` field anymore. We pull the full visit-slot list via the
// Fetch clinics + doctors from the master data endpoint (Redis-cached).
// This is faster than direct GraphQL and returns pre-formatted data.
useEffect(() => { useEffect(() => {
if (!isOpen) return; if (!isOpen) return;
apiClient.get<Array<{ id: string; name: string; phone: string; address: string }>>('/api/masterdata/clinics') apiClient.graphql<{ doctors: { edges: Array<{ node: any }> } }>(
.then(clinics => { `{ doctors(first: 50) { edges { node {
setClinicItems(clinics.map(c => ({ id: c.id, label: c.name || 'Unnamed Clinic' }))); id name fullName { firstName lastName } department clinic { id name clinicName }
}).catch(() => {}); } } } }`,
}, [isOpen]); ).then(data => {
const docs = data.doctors.edges.map(e => ({
useEffect(() => { id: e.node.id,
if (!isOpen) return; name: e.node.fullName
apiClient.get<Array<{ id: string; name: string; department: string; qualifications: string }>>('/api/masterdata/doctors') ? `Dr. ${e.node.fullName.firstName} ${e.node.fullName.lastName}`.trim()
.then(docs => { : e.node.name,
setDoctors(docs.map(d => ({ department: e.node.department ?? '',
id: d.id, clinic: e.node.clinic?.clinicName ?? e.node.clinic?.name ?? '',
name: d.name, }));
department: d.department, setDoctors(docs);
clinic: '', // clinic assignment via visit slots, not on doctor directly }).catch(() => {});
})));
}).catch(() => {});
}, [isOpen]); }, [isOpen]);
// Fetch booked slots when doctor + date selected // Fetch booked slots when doctor + date selected
@@ -231,41 +172,20 @@ export const AppointmentForm = ({
setTimeSlot(null); setTimeSlot(null);
}, [doctor, date]); }, [doctor, date]);
// Departments from master data (or fallback to deriving from doctors) // Derive department and doctor lists from fetched data
const [departmentItems, setDepartmentItems] = useState<Array<{ id: string; label: string }>>([]); const departmentItems = [...new Set(doctors.map(d => d.department).filter(Boolean))]
useEffect(() => { .map(dept => ({ id: dept, label: formatDeptLabel(dept) }));
if (!isOpen) return;
apiClient.get<string[]>('/api/masterdata/departments')
.then(depts => setDepartmentItems(depts.map(d => ({ id: d, label: d }))))
.catch(() => {
// Fallback: derive from doctor list
const derived = [...new Set(doctors.map(d => d.department).filter(Boolean))];
setDepartmentItems(derived.map(d => ({ id: d, label: d })));
});
}, [isOpen, doctors]);
const filteredDoctors = department const filteredDoctors = department
? doctors.filter(d => d.department === department) ? doctors.filter(d => d.department === department)
: doctors; : doctors;
// Always include the currently-selected doctor even if the department const doctorSelectItems = filteredDoctors.map(d => ({ id: d.id, label: d.name }));
// filter would exclude them. Needed for edit mode: the saved
// Appointment.department may be stored as a display string ("ENT") or
// a legacy value that doesn't match the doctor's current department
// enum — without this, the Select renders blank.
const doctorSelectItems = useMemo(() => {
const items = filteredDoctors.map(d => ({ id: d.id, label: d.name }));
if (doctor && !items.some(i => i.id === doctor)) {
const selected = doctors.find(d => d.id === doctor);
if (selected) items.unshift({ id: selected.id, label: selected.name });
}
return items;
}, [filteredDoctors, doctors, doctor]);
const timeSlotSelectItems = useMemo(() => timeSlotItems.map(slot => ({ const timeSlotSelectItems = timeSlotItems.map(slot => ({
...slot, ...slot,
isDisabled: bookedSlots.includes(slot.id), isDisabled: bookedSlots.includes(slot.id),
label: bookedSlots.includes(slot.id) ? `${slot.label} (Booked)` : slot.label, label: bookedSlots.includes(slot.id) ? `${slot.label} (Booked)` : slot.label,
})), [timeSlotItems, bookedSlots]); }));
const handleSave = async () => { const handleSave = async () => {
if (!date || !timeSlot || !doctor || !department) { if (!date || !timeSlot || !doctor || !department) {
@@ -287,9 +207,7 @@ export const AppointmentForm = ({
const selectedDoctor = doctors.find(d => d.id === doctor); const selectedDoctor = doctors.find(d => d.id === doctor);
if (isEditMode && existingAppointment) { if (isEditMode && existingAppointment) {
// Update existing appointment. Flip status to RESCHEDULED so // Update existing appointment
// the Appointments > Rescheduled tab reflects it and the
// patient timeline records the reschedule event.
await apiClient.graphql( await apiClient.graphql(
`mutation UpdateAppointment($id: UUID!, $data: AppointmentUpdateInput!) { `mutation UpdateAppointment($id: UUID!, $data: AppointmentUpdateInput!) {
updateAppointment(id: $id, data: $data) { id } updateAppointment(id: $id, data: $data) { id }
@@ -302,114 +220,47 @@ export const AppointmentForm = ({
department: selectedDoctor?.department ?? '', department: selectedDoctor?.department ?? '',
doctorId: doctor, doctorId: doctor,
reasonForVisit: chiefComplaint || null, reasonForVisit: chiefComplaint || null,
status: 'RESCHEDULED',
}, },
}, },
); );
// Propagate name change during reschedule. Same gate as the
// create branch — nameChanged implies isNameEditable=true,
// which means the agent went through EditPatientConfirmModal.
const trimmedName = patientName.trim();
const nameChanged = isNameEditable && trimmedName.length > 0 && trimmedName !== initialLeadName;
if (nameChanged) {
const nameParts = { firstName: trimmedName.split(' ')[0], lastName: trimmedName.split(' ').slice(1).join(' ') || '' };
if (patientId) {
await apiClient.graphql(
`mutation($id: UUID!, $data: PatientUpdateInput!) { updatePatient(id: $id, data: $data) { id } }`,
{ id: patientId, data: { fullName: nameParts } },
).catch((err: unknown) => console.warn('Failed to update patient name:', err));
}
if (leadId) {
await apiClient.graphql(
`mutation($id: UUID!, $data: LeadUpdateInput!) { updateLead(id: $id, data: $data) { id } }`,
{ id: leadId, data: { contactName: nameParts } },
).catch((err: unknown) => console.warn('Failed to update lead name:', err));
}
}
notify.success('Appointment Updated'); notify.success('Appointment Updated');
} else { } else {
// If no patient record exists yet (new caller), create one now
let resolvedPatientId = patientId;
if (!resolvedPatientId && callerNumber) {
const trimmedName = patientName.trim();
const nameParts = {
firstName: trimmedName.split(' ')[0] || '',
lastName: trimmedName.split(' ').slice(1).join(' ') || '',
};
// Normalize phone to +91XXXXXXXXXX format
const phoneDigits = callerNumber.replace(/\D/g, '').slice(-10);
const phoneE164 = `+91${phoneDigits}`;
try {
const patientData: Record<string, any> = {
fullName: nameParts,
phones: { primaryPhoneNumber: phoneE164 },
patientType: 'NEW',
};
if (age) patientData.dateOfBirth = new Date(Date.now() - parseInt(age) * 365.25 * 86400000).toISOString().split('T')[0];
if (gender) patientData.gender = gender.toUpperCase();
const created = await apiClient.graphql<{ createPatient: { id: string } }>(
`mutation($data: PatientCreateInput!) { createPatient(data: $data) { id } }`,
{ data: patientData },
);
resolvedPatientId = created.createPatient.id;
} catch (err) {
console.warn('Failed to create patient:', err);
}
}
// Create appointment // Create appointment
const appointmentData: Record<string, any> = {
scheduledAt,
durationMin: 30,
appointmentType: 'CONSULTATION',
status: 'SCHEDULED',
doctorName: selectedDoctor?.name ?? '',
department: selectedDoctor?.department ?? '',
doctorId: doctor,
reasonForVisit: chiefComplaint || null,
...(resolvedPatientId ? { patientId: resolvedPatientId } : {}),
...(clinic ? { clinicId: clinic } : {}),
...(agentNotes ? { agentNotes } : {}),
...(source ? { source } : {}),
};
console.log('[APPOINTMENT] Creating appointment:', JSON.stringify(appointmentData));
await apiClient.graphql( await apiClient.graphql(
`mutation CreateAppointment($data: AppointmentCreateInput!) { `mutation CreateAppointment($data: AppointmentCreateInput!) {
createAppointment(data: $data) { id } createAppointment(data: $data) { id }
}`, }`,
{ data: appointmentData }, {
data: {
scheduledAt,
durationMin: 30,
appointmentType: 'CONSULTATION',
status: 'SCHEDULED',
doctorName: selectedDoctor?.name ?? '',
department: selectedDoctor?.department ?? '',
doctorId: doctor,
reasonForVisit: chiefComplaint || null,
...(patientId ? { patientId } : {}),
},
},
); );
// Determine whether the agent actually renamed the patient. // Update patient name if we have a name and a linked patient
// Only a non-empty, changed-from-initial name counts — empty if (patientId && patientName.trim()) {
// strings or an unchanged name never trigger the rename await apiClient.graphql(
// chain, even if the field was unlocked. `mutation UpdatePatient($id: UUID!, $data: PatientUpdateInput!) {
const trimmedName = patientName.trim(); updatePatient(id: $id, data: $data) { id }
const nameChanged = isNameEditable && trimmedName.length > 0 && trimmedName !== initialLeadName; }`,
{
// Update patient name when the agent explicitly renamed. id: patientId,
// `nameChanged` already requires isNameEditable=true (the data: {
// agent went through EditPatientConfirmModal), so the fullName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
// rename intent is unambiguous. Bug #527's silent-overwrite },
// case can no longer happen because the confirm modal },
// gates the input.
if (nameChanged && patientId) {
const nameParts = { firstName: trimmedName.split(' ')[0], lastName: trimmedName.split(' ').slice(1).join(' ') || '' };
apiClient.graphql(
`mutation($id: UUID!, $data: PatientUpdateInput!) { updatePatient(id: $id, data: $data) { id } }`,
{ id: patientId, data: { fullName: nameParts } },
).catch((err: unknown) => console.warn('Failed to update patient name:', err)); ).catch((err: unknown) => console.warn('Failed to update patient name:', err));
} }
// Update lead status/lastContacted on every appointment book // Update lead status + name if we have a matched lead
// (those are genuinely about this appointment), but only
// touch lead.contactName if the agent explicitly renamed.
//
// NOTE: field name is `status`, NOT `leadStatus` — the
// staging platform schema renamed this. The old name is
// rejected by LeadUpdateInput.
if (leadId) { if (leadId) {
await apiClient.graphql( await apiClient.graphql(
`mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) { `mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
@@ -418,24 +269,21 @@ export const AppointmentForm = ({
{ {
id: leadId, id: leadId,
data: { data: {
status: 'APPOINTMENT_SET', leadStatus: 'APPOINTMENT_SET',
lastContacted: new Date().toISOString(), lastContactedAt: new Date().toISOString(),
...(nameChanged ? { contactName: { firstName: trimmedName.split(' ')[0], lastName: trimmedName.split(' ').slice(1).join(' ') || '' } } : {}), ...(patientName.trim() ? { contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' } } : {}),
}, },
}, },
).catch((err: unknown) => console.warn('Failed to update lead:', err)); ).catch((err: unknown) => console.warn('Failed to update lead:', err));
} }
// If the agent actually renamed the patient, kick off the // Invalidate caller cache so next lookup gets the real name
// side-effect chain: regenerate the AI summary against the if (callerNumber) {
// corrected identity. Fire-and-forget; the save toast apiClient.post('/api/caller/invalidate', { phone: callerNumber }, { silent: true }).catch(() => {});
// fires immediately regardless.
if (nameChanged && leadId) {
apiClient.post(`/api/lead/${leadId}/enrich`, { phone: callerNumber ?? undefined }, { silent: true }).catch(() => {});
} }
} }
onSaved?.(isEditMode ? 'RESCHEDULED' : 'BOOKED'); onSaved?.();
} catch (err) { } catch (err) {
console.error('Failed to save appointment:', err); console.error('Failed to save appointment:', err);
setError(err instanceof Error ? err.message : 'Failed to save appointment. Please try again.'); setError(err instanceof Error ? err.message : 'Failed to save appointment. Please try again.');
@@ -458,7 +306,7 @@ export const AppointmentForm = ({
}, },
); );
notify.success('Appointment Cancelled'); notify.success('Appointment Cancelled');
onSaved?.('CANCELLED'); onSaved?.();
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to cancel appointment'); setError(err instanceof Error ? err.message : 'Failed to cancel appointment');
} finally { } finally {
@@ -482,34 +330,12 @@ export const AppointmentForm = ({
</span> </span>
</div> </div>
{/* Patient name — locked by default for existing <Input
callers, unlocked for new callers with no label="Patient Name"
prior name on record. The Edit button opens placeholder="Full name"
a confirm modal before unlocking; see value={patientName}
EditPatientNameModal for the rationale. */} onChange={setPatientName}
<div className="flex items-end gap-2"> />
<div className="flex-1">
<Input
label="Patient Name"
placeholder="Full name"
value={patientName}
onChange={setPatientName}
isDisabled={readOnly || !isNameEditable}
/>
</div>
{!isNameEditable && initialLeadName.length > 0 && (
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faUserPen} className={className} />
)}
onClick={() => setEditConfirmOpen(true)}
>
Edit
</Button>
)}
</div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<Input <Input
@@ -567,7 +393,7 @@ export const AppointmentForm = ({
items={departmentItems} items={departmentItems}
selectedKey={department} selectedKey={department}
onSelectionChange={(key) => setDepartment(key as string)} onSelectionChange={(key) => setDepartment(key as string)}
isDisabled={readOnly || doctors.length === 0} isDisabled={doctors.length === 0}
> >
{(item) => <Select.Item id={item.id} label={item.label} />} {(item) => <Select.Item id={item.id} label={item.label} />}
</Select> </Select>
@@ -578,7 +404,7 @@ export const AppointmentForm = ({
items={doctorSelectItems} items={doctorSelectItems}
selectedKey={doctor} selectedKey={doctor}
onSelectionChange={(key) => setDoctor(key as string)} onSelectionChange={(key) => setDoctor(key as string)}
isDisabled={readOnly || !department} isDisabled={!department}
> >
{(item) => <Select.Item id={item.id} label={item.label} />} {(item) => <Select.Item id={item.id} label={item.label} />}
</Select> </Select>
@@ -590,12 +416,7 @@ export const AppointmentForm = ({
value={date ? parseDate(date) : null} value={date ? parseDate(date) : null}
onChange={(val) => setDate(val ? val.toString() : '')} onChange={(val) => setDate(val ? val.toString() : '')}
granularity="day" granularity="day"
isDisabled={readOnly || !doctor} isDisabled={!doctor}
// Block past dates — appointments can't be booked or
// rescheduled into the past. React Aria's DatePicker
// honours minValue in both the calendar grid and the
// typed-input fallback.
minValue={today(getLocalTimeZone())}
/> />
</div> </div>
@@ -613,7 +434,7 @@ export const AppointmentForm = ({
<button <button
key={slot.id} key={slot.id}
type="button" type="button"
disabled={readOnly || isBooked} disabled={isBooked}
onClick={() => setTimeSlot(slot.id)} onClick={() => setTimeSlot(slot.id)}
className={cx( className={cx(
'rounded-lg py-2 px-1 text-xs font-medium transition duration-100 ease-linear', 'rounded-lg py-2 px-1 text-xs font-medium transition duration-100 ease-linear',
@@ -641,7 +462,6 @@ export const AppointmentForm = ({
placeholder="Describe the reason for visit..." placeholder="Describe the reason for visit..."
value={chiefComplaint} value={chiefComplaint}
onChange={setChiefComplaint} onChange={setChiefComplaint}
isDisabled={readOnly}
rows={2} rows={2}
/> />
@@ -678,7 +498,7 @@ export const AppointmentForm = ({
{/* Footer — pinned */} {/* Footer — pinned */}
<div className="shrink-0 flex items-center justify-between pt-4 border-t border-secondary"> <div className="shrink-0 flex items-center justify-between pt-4 border-t border-secondary">
<div> <div>
{isEditMode && !readOnly && ( {isEditMode && (
<Button size="sm" color="primary-destructive" isLoading={isSaving} onClick={handleCancel}> <Button size="sm" color="primary-destructive" isLoading={isSaving} onClick={handleCancel}>
Cancel Appointment Cancel Appointment
</Button> </Button>
@@ -688,31 +508,11 @@ export const AppointmentForm = ({
<Button size="sm" color="secondary" onClick={() => onOpenChange(false)}> <Button size="sm" color="secondary" onClick={() => onOpenChange(false)}>
Close Close
</Button> </Button>
{!readOnly && ( <Button size="sm" color="primary" isLoading={isSaving} showTextWhileLoading onClick={handleSave}>
<Button size="sm" color="primary" isLoading={isSaving} showTextWhileLoading onClick={handleSave}> {isSaving ? 'Saving...' : isEditMode ? 'Update Appointment' : 'Book Appointment'}
{isSaving ? 'Saving...' : isEditMode ? 'Update Appointment' : 'Book Appointment'} </Button>
</Button>
)}
</div> </div>
</div> </div>
<EditPatientConfirmModal
isOpen={editConfirmOpen}
onOpenChange={setEditConfirmOpen}
onConfirm={() => {
setIsNameEditable(true);
setEditConfirmOpen(false);
}}
description={
<>
You&apos;re about to change the name on this patient&apos;s record. This will
update their profile across Helix Engage, including past appointments,
lead history, and AI summary. Only proceed if the current name is
actually wrong — for all other cases, cancel and continue with the
appointment as-is.
</>
}
/>
</div> </div>
); );
}; };

225
src/components/call-desk/barge-controls.tsx
View File

@@ -1,225 +0,0 @@
import { useState, useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneHangup, faHeadset, faCommentDots, faUsers } from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';
import { Button } from '@/components/base/buttons/button';
import { supervisorSip } from '@/lib/supervisor-sip-client';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx';
const HangupIcon = faIcon(faPhoneHangup);
const HeadsetIcon = faIcon(faHeadset);
type BargeStatus = 'idle' | 'connecting' | 'connected' | 'ended';
type BargeMode = 'listen' | 'whisper' | 'barge';
const MODE_DTMF: Record<BargeMode, string> = { listen: '4', whisper: '5', barge: '6' };
const MODE_CONFIG: Record<BargeMode, {
label: string;
description: string;
icon: any;
activeClass: string;
}> = {
listen: {
label: 'Listen',
description: 'Silent monitoring — nobody knows you are here',
icon: faHeadset,
activeClass: 'border-secondary bg-secondary',
},
whisper: {
label: 'Whisper',
description: 'Only the agent can hear you',
icon: faCommentDots,
activeClass: 'border-brand bg-brand-primary',
},
barge: {
label: 'Barge',
description: 'Both agent and patient can hear you',
icon: faUsers,
activeClass: 'border-error bg-error-primary',
},
};
type BargeControlsProps = {
ucid: string;
agentId: string;
agentNumber: string;
agentName: string;
onDisconnected?: () => void;
};
export const BargeControls = ({ ucid, agentId, agentNumber, agentName, onDisconnected }: BargeControlsProps) => {
const [status, setStatus] = useState<BargeStatus>('idle');
const [mode, setMode] = useState<BargeMode>('listen');
const [duration, setDuration] = useState(0);
const connectedAtRef = useRef<number | null>(null);
// Duration counter
useEffect(() => {
if (status !== 'connected') return;
connectedAtRef.current = Date.now();
const interval = setInterval(() => {
setDuration(Math.floor((Date.now() - (connectedAtRef.current ?? Date.now())) / 1000));
}, 1000);
return () => clearInterval(interval);
}, [status]);
// Cleanup on unmount
useEffect(() => {
return () => {
if (supervisorSip.isCallActive()) {
supervisorSip.close();
apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
}
};
}, [agentId]);
const handleConnect = async () => {
setStatus('connecting');
setMode('listen');
setDuration(0);
try {
const result = await apiClient.post<{
sipNumber: string;
sipPassword: string;
sipDomain: string;
sipPort: string;
}>('/api/supervisor/barge', { ucid, agentId, agentNumber });
supervisorSip.on('registered', () => {
// Ozonetel will send incoming call after SIP registration
});
supervisorSip.on('callConnected', () => {
setStatus('connected');
supervisorSip.sendDTMF('4'); // default: listen mode
notify.success('Connected', `Monitoring ${agentName}'s call`);
});
supervisorSip.on('callEnded', () => {
setStatus('ended');
apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
onDisconnected?.();
});
supervisorSip.on('callFailed', (cause: string) => {
setStatus('ended');
notify.error('Connection Failed', cause ?? 'Could not connect to call');
apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
});
supervisorSip.on('registrationFailed', (cause: string) => {
setStatus('ended');
notify.error('SIP Registration Failed', cause ?? 'Could not register');
});
supervisorSip.init({
domain: result.sipDomain,
port: result.sipPort,
number: result.sipNumber,
password: result.sipPassword,
});
supervisorSip.register();
} catch (err: any) {
setStatus('idle');
notify.error('Barge Failed', err.message ?? 'Could not initiate barge');
}
};
const handleModeChange = (newMode: BargeMode) => {
if (newMode === mode) return;
supervisorSip.sendDTMF(MODE_DTMF[newMode]);
setMode(newMode);
apiClient.post('/api/supervisor/barge/mode', { agentId, mode: newMode }, { silent: true }).catch(() => {});
};
const handleHangup = () => {
supervisorSip.close();
setStatus('ended');
apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
onDisconnected?.();
};
const formatDuration = (sec: number) => {
const m = Math.floor(sec / 60);
const s = sec % 60;
return `${m}:${s.toString().padStart(2, '0')}`;
};
// Idle / ended state
if (status === 'idle' || status === 'ended') {
return (
<div className="flex flex-col items-center gap-3 py-6">
<FontAwesomeIcon icon={faHeadset} className="size-8 text-fg-quaternary" />
<p className="text-sm text-secondary">{status === 'ended' ? 'Session ended' : 'Ready to monitor'}</p>
<Button size="sm" color="primary" iconLeading={HeadsetIcon} onClick={handleConnect}>
{status === 'ended' ? 'Reconnect' : 'Connect'}
</Button>
</div>
);
}
// Connecting state
if (status === 'connecting') {
return (
<div className="flex flex-col items-center gap-3 py-6">
<div className="flex items-center gap-2">
<span className="size-2 animate-pulse rounded-full bg-warning-solid" />
<span className="text-sm font-medium text-warning-primary">Connecting...</span>
</div>
<p className="text-xs text-tertiary">Registering SIP and joining call</p>
</div>
);
}
// Connected state
return (
<div className="flex flex-col gap-3">
{/* Status bar */}
<div className="flex items-center justify-between rounded-lg bg-success-primary px-3 py-2">
<div className="flex items-center gap-2">
<span className="size-2 rounded-full bg-success-solid" />
<span className="text-xs font-semibold text-success-primary">Connected</span>
</div>
<span className="font-mono text-xs text-success-primary">{formatDuration(duration)}</span>
</div>
{/* Mode tabs */}
<div className="flex gap-1">
{(['listen', 'whisper', 'barge'] as BargeMode[]).map((m) => {
const config = MODE_CONFIG[m];
const isActive = mode === m;
return (
<button
key={m}
onClick={() => handleModeChange(m)}
className={cx(
'flex flex-1 flex-col items-center gap-1 rounded-lg border-2 px-2 py-2.5 text-center transition duration-100 ease-linear',
isActive ? config.activeClass : 'border-secondary hover:bg-primary_hover',
)}
>
<FontAwesomeIcon
icon={config.icon}
className={cx('size-4', isActive ? 'text-fg-primary' : 'text-fg-quaternary')}
/>
<span className={cx('text-xs font-semibold', isActive ? 'text-primary' : 'text-tertiary')}>
{config.label}
</span>
</button>
);
})}
</div>
{/* Mode description */}
<p className="text-center text-xs text-tertiary">{MODE_CONFIG[mode].description}</p>
{/* Hang up */}
<Button size="sm" color="primary-destructive" iconLeading={HangupIcon} onClick={handleHangup} className="w-full">
Hang Up
</Button>
</div>
);
};

6
src/components/call-desk/call-log.tsx
View File

@@ -14,15 +14,11 @@ interface CallLogProps {
const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = { const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = {
APPOINTMENT_BOOKED: { label: 'Booked', color: 'success' }, APPOINTMENT_BOOKED: { label: 'Booked', color: 'success' },
APPOINTMENT_RESCHEDULED: { label: 'Rescheduled', color: 'warning' },
APPOINTMENT_CANCELLED: { label: 'Cancelled', color: 'error' },
FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' }, FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' },
INFO_PROVIDED: { label: 'Info', color: 'blue-light' }, INFO_PROVIDED: { label: 'Info', color: 'blue-light' },
NO_ANSWER: { label: 'No Answer', color: 'warning' }, NO_ANSWER: { label: 'No Answer', color: 'warning' },
WRONG_NUMBER: { label: 'Wrong #', color: 'gray' }, WRONG_NUMBER: { label: 'Wrong #', color: 'gray' },
NOT_INTERESTED: { label: 'Not Interested', color: 'error' }, CALLBACK_REQUESTED: { label: 'Not Interested', color: 'error' },
CALLBACK_REQUESTED: { label: 'Callback', color: 'brand' },
CALL_DROPPED: { label: 'Call Dropped', color: 'gray' },
}; };
const formatDuration = (seconds: number | null): string => { const formatDuration = (seconds: number | null): string => {

106
src/components/call-desk/context-panel.tsx
View File

@@ -1,5 +1,4 @@
import { useState, useCallback, useMemo } from 'react'; import { useState, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { import {
faSparkles, faPhone, faChevronDown, faChevronUp, faSparkles, faPhone, faChevronDown, faChevronUp,
@@ -10,29 +9,11 @@ import { AiChatPanel } from './ai-chat-panel';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { formatPhone, formatShortDate } from '@/lib/format'; import { formatPhone, formatShortDate } from '@/lib/format';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
import type { LeadActivity, Call, FollowUp, Patient, Appointment } from '@/types/entities'; import type { Lead, LeadActivity, Call, FollowUp, Patient, Appointment } from '@/types/entities';
import { AppointmentForm } from './appointment-form'; import { AppointmentForm } from './appointment-form';
// The context panel can render for any worklist item — not just leads.
// Missed calls and follow-ups provide a subset of the fields (phone +
// patientId + name) without a full Lead entity. ContextPanelSubject
// captures the minimum the panel needs to render P360.
export type ContextPanelSubject = {
id: string;
contactName?: { firstName: string; lastName: string } | null;
contactPhone?: Array<{ number: string; callingCode: string }> | null;
patientId?: string | null;
// Lead-specific fields — present when the subject IS a lead
leadSource?: string | null;
leadStatus?: string | null;
aiSummary?: string | null;
aiSuggestedAction?: string | null;
utmCampaign?: string | null;
campaignId?: string | null;
};
interface ContextPanelProps { interface ContextPanelProps {
selectedLead: ContextPanelSubject | null; selectedLead: Lead | null;
activities: LeadActivity[]; activities: LeadActivity[];
calls: Call[]; calls: Call[];
followUps: FollowUp[]; followUps: FollowUp[];
@@ -77,7 +58,6 @@ const SectionHeader = ({ icon, label, count, expanded, onToggle }: {
); );
export const ContextPanel = ({ selectedLead, activities, calls, followUps, appointments, patients, callerPhone, isInCall }: ContextPanelProps) => { export const ContextPanel = ({ selectedLead, activities, calls, followUps, appointments, patients, callerPhone, isInCall }: ContextPanelProps) => {
const navigate = useNavigate();
const [contextExpanded, setContextExpanded] = useState(true); const [contextExpanded, setContextExpanded] = useState(true);
const [insightExpanded, setInsightExpanded] = useState(true); const [insightExpanded, setInsightExpanded] = useState(true);
const [actionsExpanded, setActionsExpanded] = useState(true); const [actionsExpanded, setActionsExpanded] = useState(true);
@@ -105,14 +85,14 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
); );
const leadFollowUps = useMemo(() => const leadFollowUps = useMemo(() =>
followUps.filter(f => f.patientId === lead?.patientId && f.followUpStatus !== 'COMPLETED' && f.followUpStatus !== 'CANCELLED') followUps.filter(f => f.patientId === (lead as any)?.patientId && f.followUpStatus !== 'COMPLETED' && f.followUpStatus !== 'CANCELLED')
.sort((a, b) => new Date(a.scheduledAt ?? '').getTime() - new Date(b.scheduledAt ?? '').getTime()) .sort((a, b) => new Date(a.scheduledAt ?? '').getTime() - new Date(b.scheduledAt ?? '').getTime())
.slice(0, 3), .slice(0, 3),
[followUps, lead], [followUps, lead],
); );
const leadAppointments = useMemo(() => { const leadAppointments = useMemo(() => {
const patientId = lead?.patientId; const patientId = (lead as any)?.patientId;
if (!patientId) return []; if (!patientId) return [];
return appointments return appointments
.filter(a => a.patientId === patientId && a.appointmentStatus !== 'CANCELLED' && a.appointmentStatus !== 'NO_SHOW') .filter(a => a.patientId === patientId && a.appointmentStatus !== 'CANCELLED' && a.appointmentStatus !== 'NO_SHOW')
@@ -129,7 +109,7 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
// Linked patient // Linked patient
const linkedPatient = useMemo(() => const linkedPatient = useMemo(() =>
patients.find(p => p.id === lead?.patientId), patients.find(p => p.id === (lead as any)?.patientId),
[patients, lead], [patients, lead],
); );
@@ -140,44 +120,6 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
const hasContext = !!(lead?.aiSummary || leadCalls.length || leadFollowUps.length || leadAppointments.length || leadActivities.length); const hasContext = !!(lead?.aiSummary || leadCalls.length || leadFollowUps.length || leadAppointments.length || leadActivities.length);
// Edit mode takes over the whole right panel — otherwise the
// AppointmentForm competes with the AI panel + context blocks for
// vertical space and gets crushed into a tiny strip at the bottom.
if (editingAppointment) {
return (
<div className="flex h-full flex-col">
<div className="shrink-0 border-b border-secondary px-3 py-2 flex items-center justify-between">
<span className="text-sm font-semibold text-primary">Edit Appointment</span>
<button
onClick={() => setEditingAppointment(null)}
className="text-xs font-medium text-tertiary hover:text-primary transition duration-100 ease-linear"
>
Back to context
</button>
</div>
<AppointmentForm
isOpen={true}
onOpenChange={(open) => { if (!open) setEditingAppointment(null); }}
callerNumber={callerPhone}
leadName={fullName}
leadId={lead?.id}
patientId={editingAppointment.patientId}
existingAppointment={{
id: editingAppointment.id,
scheduledAt: editingAppointment.scheduledAt ?? '',
doctorName: editingAppointment.doctorName ?? '',
doctorId: editingAppointment.doctorId ?? undefined,
department: editingAppointment.department ?? '',
clinicId: editingAppointment.clinicId ?? undefined,
reasonForVisit: editingAppointment.reasonForVisit ?? undefined,
status: editingAppointment.appointmentStatus ?? 'SCHEDULED',
}}
onSaved={() => setEditingAppointment(null)}
/>
</div>
);
}
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
{/* Lead header — always visible */} {/* Lead header — always visible */}
@@ -221,16 +163,6 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
</div> </div>
)} )}
{/* Campaign info */}
{(lead.utmCampaign || lead.campaignId) && (
<div className="flex items-center gap-1.5 px-1 py-1">
<span className="text-[11px] font-semibold uppercase tracking-wider text-tertiary">Campaign</span>
<Badge size="sm" color="brand" type="pill-color">
{lead.utmCampaign ?? lead.campaignId}
</Badge>
</div>
)}
{/* Quick Actions — upcoming appointments + follow-ups + linked patient */} {/* Quick Actions — upcoming appointments + follow-ups + linked patient */}
{(leadAppointments.length > 0 || leadFollowUps.length > 0 || linkedPatient) && ( {(leadAppointments.length > 0 || leadFollowUps.length > 0 || linkedPatient) && (
<div> <div>
@@ -291,12 +223,6 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
{linkedPatient.patientType && ( {linkedPatient.patientType && (
<Badge size="sm" color="gray" type="pill-color" className="ml-auto">{linkedPatient.patientType}</Badge> <Badge size="sm" color="gray" type="pill-color" className="ml-auto">{linkedPatient.patientType}</Badge>
)} )}
<button
onClick={() => navigate(`/patient/${linkedPatient.id}`)}
className="text-[11px] font-medium text-brand-secondary hover:text-brand-secondary_hover shrink-0"
>
View 360
</button>
</div> </div>
)} )}
</div> </div>
@@ -372,6 +298,28 @@ export const ContextPanel = ({ selectedLead, activities, calls, followUps, appoi
<div className="flex flex-1 flex-col min-h-0 overflow-hidden"> <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
<AiChatPanel callerContext={callerContext} onChatStart={handleChatStart} /> <AiChatPanel callerContext={callerContext} onChatStart={handleChatStart} />
</div> </div>
{/* Appointment edit form */}
{editingAppointment && (
<AppointmentForm
isOpen={!!editingAppointment}
onOpenChange={(open) => { if (!open) setEditingAppointment(null); }}
callerNumber={callerPhone}
leadName={fullName}
leadId={lead?.id}
patientId={editingAppointment.patientId}
existingAppointment={{
id: editingAppointment.id,
scheduledAt: editingAppointment.scheduledAt ?? '',
doctorName: editingAppointment.doctorName ?? '',
doctorId: editingAppointment.doctorId ?? undefined,
department: editingAppointment.department ?? '',
reasonForVisit: editingAppointment.reasonForVisit ?? undefined,
status: editingAppointment.appointmentStatus ?? 'SCHEDULED',
}}
onSaved={() => setEditingAppointment(null)}
/>
)}
</div> </div>
); );
}; };

20
src/components/call-desk/disposition-form.tsx
View File

@@ -20,18 +20,6 @@ const dispositionOptions: Array<{
activeClass: 'bg-success-solid text-white ring-transparent', activeClass: 'bg-success-solid text-white ring-transparent',
defaultClass: 'bg-success-primary text-success-primary border-success', defaultClass: 'bg-success-primary text-success-primary border-success',
}, },
{
value: 'APPOINTMENT_RESCHEDULED',
label: 'Appt Rescheduled',
activeClass: 'bg-warning-solid text-white ring-transparent',
defaultClass: 'bg-warning-primary text-warning-primary border-warning',
},
{
value: 'APPOINTMENT_CANCELLED',
label: 'Appt Cancelled',
activeClass: 'bg-error-solid text-white ring-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error',
},
{ {
value: 'FOLLOW_UP_SCHEDULED', value: 'FOLLOW_UP_SCHEDULED',
label: 'Follow-up Needed', label: 'Follow-up Needed',
@@ -57,17 +45,11 @@ const dispositionOptions: Array<{
defaultClass: 'bg-secondary text-secondary border-secondary', defaultClass: 'bg-secondary text-secondary border-secondary',
}, },
{ {
value: 'NOT_INTERESTED', value: 'CALLBACK_REQUESTED',
label: 'Not Interested', label: 'Not Interested',
activeClass: 'bg-error-solid text-white ring-transparent', activeClass: 'bg-error-solid text-white ring-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error', defaultClass: 'bg-error-primary text-error-primary border-error',
}, },
{
value: 'CALLBACK_REQUESTED',
label: 'Callback Requested',
activeClass: 'bg-utility-blue-600 text-white ring-transparent',
defaultClass: 'bg-utility-blue-50 text-utility-blue-700 border-utility-blue-200',
},
]; ];
export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFormProps) => { export const DispositionForm = ({ onSubmit, defaultDisposition }: DispositionFormProps) => {

151
src/components/call-desk/disposition-modal.tsx
View File

@@ -1,43 +1,13 @@
import { useState, useRef } from 'react'; import { useState, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneHangup, faCalendarCheck, faCalendarXmark, faCalendarArrowDown, faClipboardCheck, faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons'; import { faPhoneHangup } from '@fortawesome/pro-duotone-svg-icons';
import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal'; import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal';
import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon'; import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
import { Badge } from '@/components/base/badges/badges';
import { TextArea } from '@/components/base/textarea/textarea'; import { TextArea } from '@/components/base/textarea/textarea';
import type { FC } from 'react'; import type { FC } from 'react';
import type { CallDisposition } from '@/types/entities'; import type { CallDisposition } from '@/types/entities';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
export type CallAction = 'APPOINTMENT' | 'RESCHEDULE' | 'CANCEL' | 'FOLLOWUP' | 'ENQUIRY';
// Maps a recorded action to the disposition it implies. The first action in
// the priority list (highest-ranked entry in actionsTaken) becomes the
// primary disposition. When any action is present, all other dispositions
// are locked out — an agent can't mark a call as "Not Interested" after
// they've already booked an appointment.
const ACTION_TO_DISPOSITION: Record<CallAction, CallDisposition> = {
APPOINTMENT: 'APPOINTMENT_BOOKED',
RESCHEDULE: 'APPOINTMENT_RESCHEDULED',
CANCEL: 'APPOINTMENT_CANCELLED',
FOLLOWUP: 'FOLLOW_UP_SCHEDULED',
ENQUIRY: 'INFO_PROVIDED',
};
const ACTION_META: Record<CallAction, { label: string; icon: typeof faCalendarCheck; color: 'success' | 'warning' | 'error' | 'brand' | 'blue-light' }> = {
APPOINTMENT: { label: 'Appointment booked', icon: faCalendarCheck, color: 'success' },
RESCHEDULE: { label: 'Appointment rescheduled', icon: faCalendarArrowDown, color: 'warning' },
CANCEL: { label: 'Appointment cancelled', icon: faCalendarXmark, color: 'error' },
FOLLOWUP: { label: 'Follow-up scheduled', icon: faClockRotateLeft, color: 'brand' },
ENQUIRY: { label: 'Enquiry logged', icon: faClipboardCheck, color: 'blue-light' },
};
// Priority order — highest-rank action wins when multiple are taken. Booked
// > Rescheduled > Cancelled > Follow-up > Enquiry. A cancel inherently means
// no booking, so it ranks below booking/rescheduling; but above a follow-up
// because cancellation is a definitive outcome on this call.
const ACTION_PRIORITY: CallAction[] = ['APPOINTMENT', 'RESCHEDULE', 'CANCEL', 'FOLLOWUP', 'ENQUIRY'];
const PhoneHangUpIcon: FC<{ className?: string }> = ({ className }) => ( const PhoneHangUpIcon: FC<{ className?: string }> = ({ className }) => (
<FontAwesomeIcon icon={faPhoneHangup} className={className} /> <FontAwesomeIcon icon={faPhoneHangup} className={className} />
); );
@@ -54,18 +24,6 @@ const dispositionOptions: Array<{
activeClass: 'bg-success-solid text-white border-transparent', activeClass: 'bg-success-solid text-white border-transparent',
defaultClass: 'bg-success-primary text-success-primary border-success', defaultClass: 'bg-success-primary text-success-primary border-success',
}, },
{
value: 'APPOINTMENT_RESCHEDULED',
label: 'Appt Rescheduled',
activeClass: 'bg-warning-solid text-white border-transparent',
defaultClass: 'bg-warning-primary text-warning-primary border-warning',
},
{
value: 'APPOINTMENT_CANCELLED',
label: 'Appt Cancelled',
activeClass: 'bg-error-solid text-white border-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error',
},
{ {
value: 'FOLLOW_UP_SCHEDULED', value: 'FOLLOW_UP_SCHEDULED',
label: 'Follow-up Needed', label: 'Follow-up Needed',
@@ -91,74 +49,31 @@ const dispositionOptions: Array<{
defaultClass: 'bg-secondary text-secondary border-secondary', defaultClass: 'bg-secondary text-secondary border-secondary',
}, },
{ {
value: 'NOT_INTERESTED', value: 'CALLBACK_REQUESTED',
label: 'Not Interested', label: 'Not Interested',
activeClass: 'bg-error-solid text-white border-transparent', activeClass: 'bg-error-solid text-white border-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error', defaultClass: 'bg-error-primary text-error-primary border-error',
}, },
{
value: 'CALLBACK_REQUESTED',
label: 'Callback Requested',
activeClass: 'bg-utility-blue-600 text-white border-transparent',
defaultClass: 'bg-utility-blue-50 text-utility-blue-700 border-utility-blue-200',
},
{
value: 'CALL_DROPPED',
label: 'Call Dropped',
activeClass: 'bg-secondary-solid text-white border-transparent',
defaultClass: 'bg-secondary text-secondary border-secondary',
},
]; ];
type DispositionModalProps = { type DispositionModalProps = {
isOpen: boolean; isOpen: boolean;
callerName: string; callerName: string;
callerDisconnected: boolean; callerDisconnected: boolean;
// True once the call reached the active (answered) state. When false, defaultDisposition?: CallDisposition | null;
// the customer never picked up — only no-answer dispositions are
// valid; conversation-implying ones (Info Provided, Appointment
// Booked, Follow-up, Not Interested) are disabled. Defaults to
// true so existing callers don't accidentally lock everything out.
callAnswered?: boolean;
// Actions actually performed during the call (appointment booked, enquiry
// logged, follow-up scheduled). Drives the priority-based disposition
// lock — when any action is present, the primary disposition is forced
// and the other options are disabled.
actionsTaken?: CallAction[];
onSubmit: (disposition: CallDisposition, notes: string) => void; onSubmit: (disposition: CallDisposition, notes: string) => void;
onDismiss?: () => void; onDismiss?: () => void;
}; };
// Dispositions that only make sense when the customer actually connected. export const DispositionModal = ({ isOpen, callerName, callerDisconnected, defaultDisposition, onSubmit, onDismiss }: DispositionModalProps) => {
// Selecting these on an unanswered call would misrepresent SLA and
// conversation metrics.
const ANSWERED_ONLY_DISPOSITIONS: ReadonlySet<CallDisposition> = new Set([
'INFO_PROVIDED',
'APPOINTMENT_BOOKED',
'APPOINTMENT_RESCHEDULED',
'APPOINTMENT_CANCELLED',
'FOLLOW_UP_SCHEDULED',
'NOT_INTERESTED',
]);
export const DispositionModal = ({ isOpen, callerName, callerDisconnected, callAnswered = true, actionsTaken, onSubmit, onDismiss }: DispositionModalProps) => {
const [selected, setSelected] = useState<CallDisposition | null>(null); const [selected, setSelected] = useState<CallDisposition | null>(null);
const [notes, setNotes] = useState(''); const [notes, setNotes] = useState('');
const appliedLockRef = useRef<CallDisposition | null | undefined>(undefined); const appliedDefaultRef = useRef<CallDisposition | null | undefined>(undefined);
// Rank actionsTaken to pick the primary (highest-priority) action. When // Pre-select when modal opens with a suggestion
// any action is present, that action's disposition becomes locked — if (isOpen && defaultDisposition && appliedDefaultRef.current !== defaultDisposition) {
// the agent cannot override it to a contradictory outcome. appliedDefaultRef.current = defaultDisposition;
const primaryAction = actionsTaken && actionsTaken.length > 0 setSelected(defaultDisposition);
? ACTION_PRIORITY.find((a) => actionsTaken.includes(a)) ?? null
: null;
const lockedDisposition = primaryAction ? ACTION_TO_DISPOSITION[primaryAction] : null;
// Apply the lock once per open — agent can still re-select the same
// option, but switching to another value is prevented in the click handler.
if (isOpen && lockedDisposition && appliedLockRef.current !== lockedDisposition) {
appliedLockRef.current = lockedDisposition;
setSelected(lockedDisposition);
} }
const handleSubmit = () => { const handleSubmit = () => {
@@ -166,20 +81,11 @@ export const DispositionModal = ({ isOpen, callerName, callerDisconnected, callA
onSubmit(selected, notes); onSubmit(selected, notes);
setSelected(null); setSelected(null);
setNotes(''); setNotes('');
appliedLockRef.current = undefined; appliedDefaultRef.current = undefined;
}; };
return ( return (
<ModalOverlay <ModalOverlay isOpen={isOpen} isDismissable onOpenChange={(open) => { if (!open && onDismiss) onDismiss(); }}>
isOpen={isOpen}
// When the caller disconnected on their own, dismissing the
// modal discards the call without any disposition — no record,
// no SLA signal. Force a selection in that path. When the
// agent opened the modal via End Call (callerDisconnected=false),
// dismissing just returns to the active call, so it's safe.
isDismissable={!callerDisconnected}
onOpenChange={(open) => { if (!open && onDismiss) onDismiss(); }}
>
<Modal className="sm:max-w-md"> <Modal className="sm:max-w-md">
<Dialog> <Dialog>
{() => ( {() => (
@@ -202,47 +108,16 @@ export const DispositionModal = ({ isOpen, callerName, callerDisconnected, callA
{/* Disposition options */} {/* Disposition options */}
<div className="px-6 pb-4"> <div className="px-6 pb-4">
{actionsTaken && actionsTaken.length > 0 && (
<div className="mb-3 flex flex-col gap-2 rounded-lg bg-secondary p-3">
<span className="text-xs font-semibold uppercase tracking-wide text-tertiary">
Actions taken on this call
</span>
<div className="flex flex-wrap gap-1.5">
{ACTION_PRIORITY.filter((a) => actionsTaken.includes(a)).map((action) => {
const meta = ACTION_META[action];
return (
<Badge key={action} size="sm" color={meta.color} type="pill-color">
<FontAwesomeIcon icon={meta.icon} className="size-3 mr-1" />
{meta.label}
</Badge>
);
})}
</div>
</div>
)}
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{dispositionOptions.map((option) => { {dispositionOptions.map((option) => {
const isSelected = selected === option.value; const isSelected = selected === option.value;
// Two reasons an option can be disabled:
// (1) action lock — the agent already booked / scheduled
// something, so only the matching disposition is valid.
// (2) unanswered call — dispositions that imply the customer
// actually spoke with the agent (Info Provided, etc.)
// are disabled to prevent SLA-gaming.
const isLockedOut = lockedDisposition !== null && option.value !== lockedDisposition;
const isAnsweredOnlyBlocked = !callAnswered && ANSWERED_ONLY_DISPOSITIONS.has(option.value);
const isDisabled = isLockedOut || isAnsweredOnlyBlocked;
return ( return (
<button <button
key={option.value} key={option.value}
type="button" type="button"
disabled={isDisabled} onClick={() => setSelected(option.value)}
onClick={() => !isDisabled && setSelected(option.value)}
className={cx( className={cx(
'rounded-xl border-2 p-3 text-sm font-semibold transition duration-100 ease-linear', 'cursor-pointer rounded-xl border-2 p-3 text-sm font-semibold transition duration-100 ease-linear',
isDisabled && 'cursor-not-allowed opacity-40',
!isDisabled && 'cursor-pointer',
isSelected isSelected
? cx(option.activeClass, 'ring-2 ring-brand') ? cx(option.activeClass, 'ring-2 ring-brand')
: option.defaultClass, : option.defaultClass,

207
src/components/call-desk/enquiry-form.tsx
View File

@@ -1,12 +1,9 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPen } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input'; import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select'; import { Select } from '@/components/base/select/select';
import { TextArea } from '@/components/base/textarea/textarea'; import { TextArea } from '@/components/base/textarea/textarea';
import { Checkbox } from '@/components/base/checkbox/checkbox'; import { Checkbox } from '@/components/base/checkbox/checkbox';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { EditPatientConfirmModal } from '@/components/modals/edit-patient-confirm-modal';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
@@ -14,30 +11,15 @@ type EnquiryFormProps = {
isOpen: boolean; isOpen: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
callerPhone?: string | null; callerPhone?: string | null;
// Pre-populated caller name (from caller-resolution). When set, the
// patient-name field is locked behind the Edit-confirm modal to
// prevent accidental rename-on-save. When empty or null, the field
// starts unlocked because there's no existing name to protect.
leadName?: string | null;
leadId?: string | null; leadId?: string | null;
patientId?: string | null; patientId?: string | null;
agentName?: string | null; agentName?: string | null;
// Called after a successful save. Passes back the list of actions that onSaved?: () => void;
// were actually recorded — the parent uses this to drive the disposition
// priority + lock logic. Always includes 'ENQUIRY'; adds 'FOLLOWUP' when
// the agent scheduled a callback.
onSaved?: (actions: Array<'ENQUIRY' | 'FOLLOWUP'>) => void;
}; };
export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadId: propLeadId, patientId, agentName, onSaved }: EnquiryFormProps) => { export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadId: propLeadId, patientId, agentName, onSaved }: EnquiryFormProps) => {
// Initial name captured at form open — used to detect whether the const [patientName, setPatientName] = useState('');
// agent actually changed the name before committing any updatePatient /
// updateLead.contactName mutations. See also appointment-form.tsx.
const initialLeadName = (leadName ?? '').trim();
const [patientName, setPatientName] = useState(leadName ?? '');
const [isNameEditable, setIsNameEditable] = useState(initialLeadName.length === 0);
const [editConfirmOpen, setEditConfirmOpen] = useState(false);
const [source, setSource] = useState('Phone Inquiry'); const [source, setSource] = useState('Phone Inquiry');
const [queryAsked, setQueryAsked] = useState(''); const [queryAsked, setQueryAsked] = useState('');
const [isExisting, setIsExisting] = useState(false); const [isExisting, setIsExisting] = useState(false);
@@ -83,104 +65,61 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
setError(null); setError(null);
try { try {
// Resolve caller. Resolver returns isNew=true when no Lead/ // Use passed leadId or resolve from phone
// Patient exists for this phone — in that case we create both
// records inline with the typed name. Otherwise we update the
// existing records.
let leadId: string | null = propLeadId ?? null; let leadId: string | null = propLeadId ?? null;
let resolvedPatientId: string | null = patientId || null; if (!leadId && registeredPhone) {
let isNew = false; const resolved = await apiClient.post<{ leadId: string; patientId: string }>('/api/caller/resolve', { phone: registeredPhone }, { silent: true });
if ((!leadId || !resolvedPatientId) && registeredPhone) { leadId = resolved.leadId;
const resolved = await apiClient.post<{ leadId: string; patientId: string; isNew: boolean }>('/api/caller/resolve', { phone: registeredPhone }, { silent: true });
leadId = leadId || resolved.leadId || null;
resolvedPatientId = resolvedPatientId || resolved.patientId || null;
isNew = !!resolved.isNew && !leadId;
} }
const trimmedName = patientName.trim(); if (leadId) {
const nameChanged = isNameEditable && trimmedName.length > 0 && trimmedName !== initialLeadName; // Update existing lead with enquiry details
const nameParts = {
firstName: trimmedName.split(' ')[0],
lastName: trimmedName.split(' ').slice(1).join(' ') || '',
};
if (isNew) {
// Net-new caller — create Patient + Lead with the typed
// name. Name is required (validated above).
if (!trimmedName) {
setError('Please enter the patient name.');
setIsSaving(false);
return;
}
try {
const phoneE164 = registeredPhone ? `+91${registeredPhone.replace(/^\+?91/, '').replace(/\D/g, '').slice(-10)}` : undefined;
const patientData: Record<string, any> = {
name: trimmedName,
fullName: nameParts,
patientType: 'NEW',
};
if (phoneE164) patientData.phones = { primaryPhoneNumber: phoneE164 };
const pResult = await apiClient.graphql<{ createPatient: { id: string } }>(
`mutation($data: PatientCreateInput!) { createPatient(data: $data) { id } }`,
{ data: patientData },
);
resolvedPatientId = pResult.createPatient.id;
} catch (err) {
console.warn('Failed to create patient:', err);
}
const leadData: Record<string, any> = {
name: `Enquiry — ${trimmedName}`,
contactName: nameParts,
source: 'PHONE',
status: 'CONTACTED',
interestedService: queryAsked.substring(0, 100),
};
if (registeredPhone) leadData.contactPhone = { primaryPhoneNumber: registeredPhone };
if (resolvedPatientId) leadData.patientId = resolvedPatientId;
const lResult = await apiClient.graphql<{ createLead: { id: string } }>(
`mutation($data: LeadCreateInput!) { createLead(data: $data) { id } }`,
{ data: leadData },
);
leadId = lResult.createLead.id;
} else if (leadId) {
// Existing lead — update with enquiry details. Only touch
// contactName when the agent explicitly renamed (the name
// field is locked behind the Edit confirm modal for
// existing records).
await apiClient.graphql( await apiClient.graphql(
`mutation($id: UUID!, $data: LeadUpdateInput!) { updateLead(id: $id, data: $data) { id } }`, `mutation($id: UUID!, $data: LeadUpdateInput!) { updateLead(id: $id, data: $data) { id } }`,
{ {
id: leadId, id: leadId,
data: { data: {
name: `Enquiry — ${trimmedName || 'Unknown caller'}`, name: `Enquiry — ${patientName}`,
contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
source: 'PHONE',
status: 'CONTACTED',
interestedService: queryAsked.substring(0, 100),
},
},
);
} else {
// No phone provided — create a new lead (rare edge case)
await apiClient.graphql(
`mutation($data: LeadCreateInput!) { createLead(data: $data) { id } }`,
{
data: {
name: `Enquiry — ${patientName}`,
contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
contactPhone: registeredPhone ? { primaryPhoneNumber: registeredPhone } : undefined,
source: 'PHONE', source: 'PHONE',
status: 'CONTACTED', status: 'CONTACTED',
interestedService: queryAsked.substring(0, 100), interestedService: queryAsked.substring(0, 100),
...(nameChanged ? { contactName: nameParts } : {}),
}, },
}, },
); );
} }
// Update linked patient's name when the agent renamed (edit // Update patient name if we have a name and a linked patient
// confirm path) on an existing record. Skipped for isNew if (patientId && patientName.trim()) {
// because the patient was just created with the right name.
if (!isNew && nameChanged && resolvedPatientId && trimmedName) {
await apiClient.graphql( await apiClient.graphql(
`mutation($id: UUID!, $data: PatientUpdateInput!) { updatePatient(id: $id, data: $data) { id } }`, `mutation($id: UUID!, $data: PatientUpdateInput!) { updatePatient(id: $id, data: $data) { id } }`,
{ {
id: resolvedPatientId, id: patientId,
data: { data: {
fullName: nameParts, fullName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
}, },
}, },
).catch((err: unknown) => console.warn('Failed to update patient name:', err)); ).catch((err: unknown) => console.warn('Failed to update patient name:', err));
} }
// Post-save side-effect. If the agent actually renamed the // Invalidate caller cache so next lookup gets the real name
// patient, kick off AI summary regen. Fire-and-forget. if (callerPhone) {
if (nameChanged && leadId) { apiClient.post('/api/caller/invalidate', { phone: callerPhone }, { silent: true }).catch(() => {});
apiClient.post(`/api/lead/${leadId}/enrich`, { phone: callerPhone ?? undefined }, { silent: true }).catch(() => {});
} }
// Create follow-up if needed // Create follow-up if needed
@@ -190,12 +129,6 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
setIsSaving(false); setIsSaving(false);
return; return;
} }
const today = new Date().toISOString().split('T')[0];
if (followUpDate < today) {
setError('Follow-up date cannot be in the past.');
setIsSaving(false);
return;
}
await apiClient.graphql( await apiClient.graphql(
`mutation($data: FollowUpCreateInput!) { createFollowUp(data: $data) { id } }`, `mutation($data: FollowUpCreateInput!) { createFollowUp(data: $data) { id } }`,
{ {
@@ -206,7 +139,7 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
priority: 'NORMAL', priority: 'NORMAL',
assignedAgent: agentName ?? undefined, assignedAgent: agentName ?? undefined,
scheduledAt: new Date(`${followUpDate}T09:00:00`).toISOString(), scheduledAt: new Date(`${followUpDate}T09:00:00`).toISOString(),
patientId: resolvedPatientId || undefined, patientId: patientId ?? undefined,
}, },
}, },
{ silent: true }, { silent: true },
@@ -214,9 +147,7 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
} }
notify.success('Enquiry Logged', 'Contact details and query captured'); notify.success('Enquiry Logged', 'Contact details and query captured');
const actions: Array<'ENQUIRY' | 'FOLLOWUP'> = ['ENQUIRY']; onSaved?.();
if (followUpNeeded) actions.push('FOLLOWUP');
onSaved?.(actions);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to save enquiry'); setError(err instanceof Error ? err.message : 'Failed to save enquiry');
} finally { } finally {
@@ -231,34 +162,7 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
{/* Form fields — scrollable */} {/* Form fields — scrollable */}
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* Patient name — locked by default for existing callers, <Input label="Patient Name" placeholder="Full name" value={patientName} onChange={setPatientName} isRequired />
unlocked for new callers with no prior name on record.
The Edit button opens a confirm modal before unlocking;
see EditPatientConfirmModal for the rationale. */}
<div className="flex items-end gap-2">
<div className="flex-1">
<Input
label="Patient Name"
placeholder="Full name"
value={patientName}
onChange={setPatientName}
isRequired
isDisabled={!isNameEditable}
/>
</div>
{!isNameEditable && initialLeadName.length > 0 && (
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faUserPen} className={className} />
)}
onClick={() => setEditConfirmOpen(true)}
>
Edit
</Button>
)}
</div>
<Input label="Source / Referral" placeholder="How did they reach us?" value={source} onChange={setSource} isRequired /> <Input label="Source / Referral" placeholder="How did they reach us?" value={source} onChange={setSource} isRequired />
@@ -283,22 +187,11 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
</Select> </Select>
</div> </div>
<div className="flex items-center gap-3"> <Checkbox isSelected={followUpNeeded} onChange={setFollowUpNeeded} label="Follow-up Needed" />
<Checkbox isSelected={followUpNeeded} onChange={setFollowUpNeeded} label="Follow-up Needed" />
{followUpNeeded && ( {followUpNeeded && (
<div className="flex-1 max-w-[180px]"> <Input label="Follow-up Date" type="date" value={followUpDate} onChange={setFollowUpDate} isRequired />
<input )}
type="date"
value={followUpDate}
min={new Date().toISOString().split('T')[0]}
onChange={(e) => setFollowUpDate(e.target.value)}
required
aria-label="Follow-up Date"
className="w-full rounded-lg border border-primary bg-primary px-3 py-2 text-sm text-primary outline-none focus:border-brand-primary"
/>
</div>
)}
</div>
{error && ( {error && (
<div className="rounded-lg bg-error-primary p-3 text-sm text-error-primary">{error}</div> <div className="rounded-lg bg-error-primary p-3 text-sm text-error-primary">{error}</div>
@@ -313,24 +206,6 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, leadName, leadI
{isSaving ? 'Saving...' : 'Log Enquiry'} {isSaving ? 'Saving...' : 'Log Enquiry'}
</Button> </Button>
</div> </div>
<EditPatientConfirmModal
isOpen={editConfirmOpen}
onOpenChange={setEditConfirmOpen}
onConfirm={() => {
setIsNameEditable(true);
setEditConfirmOpen(false);
}}
description={
<>
You&apos;re about to change the name on this patient&apos;s record. This will
update their profile across Helix Engage, including past appointments,
lead history, and AI summary. Only proceed if the current name is
actually wrong — for all other cases, cancel and continue logging the
enquiry as-is.
</>
}
/>
</div> </div>
); );
}; };

6
src/components/call-desk/incoming-call-card.tsx
View File

@@ -51,15 +51,11 @@ const ActivityIcon = ({ type }: { type: string }) => {
const dispositionLabels: Record<CallDisposition, string> = { const dispositionLabels: Record<CallDisposition, string> = {
APPOINTMENT_BOOKED: 'Appointment Booked', APPOINTMENT_BOOKED: 'Appointment Booked',
APPOINTMENT_RESCHEDULED: 'Appointment Rescheduled',
APPOINTMENT_CANCELLED: 'Appointment Cancelled',
FOLLOW_UP_SCHEDULED: 'Follow-up Needed', FOLLOW_UP_SCHEDULED: 'Follow-up Needed',
INFO_PROVIDED: 'Info Provided', INFO_PROVIDED: 'Info Provided',
NO_ANSWER: 'No Answer', NO_ANSWER: 'No Answer',
WRONG_NUMBER: 'Wrong Number', WRONG_NUMBER: 'Wrong Number',
NOT_INTERESTED: 'Not Interested', CALLBACK_REQUESTED: 'Not Interested',
CALLBACK_REQUESTED: 'Callback Requested',
CALL_DROPPED: 'Call Dropped',
}; };
export const IncomingCallCard = ({ callState, lead, activities, campaigns, onDisposition, completedDisposition }: IncomingCallCardProps) => { export const IncomingCallCard = ({ callState, lead, activities, campaigns, onDisposition, completedDisposition }: IncomingCallCardProps) => {

24
src/components/call-desk/phone-action-cell.tsx
View File

@@ -74,33 +74,43 @@ export const PhoneActionCell = ({ phoneNumber, displayNumber, leadId: _leadId, o
{/* Clickable phone number — calls directly */} {/* Clickable phone number — calls directly */}
<button <button
type="button" type="button"
onClick={canCall ? handleCall : undefined} onClick={handleCall}
onTouchStart={onTouchStart} onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd} onTouchEnd={onTouchEnd}
onContextMenu={(e) => { e.preventDefault(); setMenuOpen(true); }} onContextMenu={(e) => { e.preventDefault(); setMenuOpen(true); }}
disabled={!canCall}
className={cx( className={cx(
'flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-brand-secondary transition duration-100 ease-linear', 'flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm transition duration-100 ease-linear',
canCall canCall
? 'cursor-pointer hover:bg-brand-primary' ? 'cursor-pointer text-brand-secondary hover:bg-brand-primary hover:text-brand-secondary'
: 'cursor-default', : 'cursor-default text-tertiary',
)} )}
> >
<FontAwesomeIcon icon={faPhone} className="size-3" /> <FontAwesomeIcon icon={faPhone} className="size-3" />
<span className="whitespace-nowrap">{displayNumber}</span> <span className="whitespace-nowrap">{displayNumber}</span>
</button> </button>
{/* Kebab menu trigger — SMS + WhatsApp */} {/* Kebab menu trigger — desktop */}
<button <button
type="button" type="button"
onClick={(e) => { e.stopPropagation(); setMenuOpen(!menuOpen); }} onClick={(e) => { e.stopPropagation(); setMenuOpen(!menuOpen); }}
className="flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear" className="flex size-6 items-center justify-center rounded-md text-fg-quaternary opacity-0 group-hover/row:opacity-100 hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
> >
<FontAwesomeIcon icon={faEllipsisVertical} className="size-3" /> <FontAwesomeIcon icon={faEllipsisVertical} className="size-3" />
</button> </button>
{/* Context menu — SMS + WhatsApp only (dial is the primary click) */} {/* Context menu */}
{menuOpen && ( {menuOpen && (
<div className="absolute left-0 top-full z-50 mt-1 w-40 rounded-lg bg-primary shadow-lg ring-1 ring-secondary py-1"> <div className="absolute left-0 top-full z-50 mt-1 w-40 rounded-lg bg-primary shadow-lg ring-1 ring-secondary py-1">
<button
type="button"
onClick={handleCall}
disabled={!canCall}
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-secondary hover:bg-primary_hover disabled:text-disabled"
>
<FontAwesomeIcon icon={faPhone} className="size-3.5 text-fg-success-secondary" />
Call
</button>
<button <button
type="button" type="button"
onClick={handleSms} onClick={handleSms}

6
src/components/call-desk/transfer-dialog.tsx
View File

@@ -56,18 +56,18 @@ export const TransferDialog = ({ ucid, currentAgentId, onClose, onTransferred }:
const fetchTargets = async () => { const fetchTargets = async () => {
try { try {
const [agentsRes, doctorsRes] = await Promise.all([ const [agentsRes, doctorsRes] = await Promise.all([
apiClient.graphql<any>(`{ agents(first: 20) { edges { node { id name ozonetelAgentId sipExtension } } } }`), apiClient.graphql<any>(`{ agents(first: 20) { edges { node { id name ozonetelagentid sipextension } } } }`),
apiClient.graphql<any>(`{ doctors(first: 20) { edges { node { id name department phone { primaryPhoneNumber } } } } }`), apiClient.graphql<any>(`{ doctors(first: 20) { edges { node { id name department phone { primaryPhoneNumber } } } } }`),
]); ]);
const agents: TransferTarget[] = (agentsRes.agents?.edges ?? []) const agents: TransferTarget[] = (agentsRes.agents?.edges ?? [])
.map((e: any) => e.node) .map((e: any) => e.node)
.filter((a: any) => a.ozonetelAgentId !== currentAgentId) .filter((a: any) => a.ozonetelagentid !== currentAgentId)
.map((a: any) => ({ .map((a: any) => ({
id: a.id, id: a.id,
name: a.name, name: a.name,
type: 'agent' as const, type: 'agent' as const,
phoneNumber: `0${a.sipExtension}`, phoneNumber: `0${a.sipextension}`,
status: 'offline' as const, status: 'offline' as const,
})); }));

252
src/components/call-desk/worklist-panel.tsx
View File

@@ -1,9 +1,13 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { faPhoneArrowDown, faPhoneArrowUp } from '@fortawesome/pro-duotone-svg-icons'; import { faPhoneArrowDown, faPhoneArrowUp, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
import type { SortDescriptor } from 'react-aria-components'; import type { SortDescriptor } from 'react-aria-components';
import { faIcon } from '@/lib/icon-wrapper'; import { faIcon } from '@/lib/icon-wrapper';
import { Table } from '@/components/application/table/table'; import { Table } from '@/components/application/table/table';
const SearchLg = faIcon(faMagnifyingGlass);
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { Input } from '@/components/base/input/input';
import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
import { PhoneActionCell } from './phone-action-cell'; import { PhoneActionCell } from './phone-action-cell';
import { formatPhone, formatTimeOnly, formatShortDate } from '@/lib/format'; import { formatPhone, formatTimeOnly, formatShortDate } from '@/lib/format';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
@@ -32,9 +36,6 @@ type WorklistFollowUp = {
followUpStatus: string | null; followUpStatus: string | null;
scheduledAt: string | null; scheduledAt: string | null;
priority: string | null; priority: string | null;
patientId?: string | null;
patientName?: string;
patientPhone?: string;
}; };
type MissedCall = { type MissedCall = {
@@ -44,40 +45,23 @@ type MissedCall = {
callerNumber: { number: string; callingCode: string }[] | null; callerNumber: { number: string; callingCode: string }[] | null;
startedAt: string | null; startedAt: string | null;
leadId: string | null; leadId: string | null;
leadName: string | null;
disposition: string | null; disposition: string | null;
callbackStatus: string | null; callbackstatus: string | null;
callSourceNumber: string | null; callsourcenumber: string | null;
missedCallCount: number | null; missedcallcount: number | null;
callbackAttemptedAt: string | null; callbackattemptedat: string | null;
campaign?: { id: string; campaignName: string } | null;
}; };
type MissedSubTab = 'pending' | 'attempted' | 'completed' | 'invalid'; type MissedSubTab = 'pending' | 'attempted' | 'completed' | 'invalid';
// Generic selection from any worklist row — the call-desk resolves
// lead/patient context from whatever is available on the row.
export type WorklistSelection = {
rowId: string;
type: 'missed' | 'callback' | 'follow-up' | 'lead';
lead: WorklistLead | null;
phoneRaw: string | null;
patientId: string | null;
leadId: string | null;
name: string;
};
interface WorklistPanelProps { interface WorklistPanelProps {
missedCalls: MissedCall[]; missedCalls: MissedCall[];
followUps: WorklistFollowUp[]; followUps: WorklistFollowUp[];
leads: WorklistLead[]; leads: WorklistLead[];
loading: boolean; loading: boolean;
onSelectItem: (selection: WorklistSelection) => void; onSelectLead: (lead: WorklistLead) => void;
selectedItemId: string | null; selectedLeadId: string | null;
onDialMissedCall?: (missedCallId: string) => void; onDialMissedCall?: (missedCallId: string) => void;
// Lifted from internal state — owned by call-desk.tsx so the search
// input can live in the PageHeader row alongside other controls.
search: string;
} }
type TabKey = 'all' | 'missed' | 'leads' | 'follow-ups'; type TabKey = 'all' | 'missed' | 'leads' | 'follow-ups';
@@ -95,7 +79,6 @@ type WorklistRow = {
createdAt: string; createdAt: string;
taskState: 'PENDING' | 'ATTEMPTED' | 'SCHEDULED'; taskState: 'PENDING' | 'ATTEMPTED' | 'SCHEDULED';
leadId: string | null; leadId: string | null;
patientId: string | null;
originalLead: WorklistLead | null; originalLead: WorklistLead | null;
lastContactedAt: string | null; lastContactedAt: string | null;
contactAttempts: number; contactAttempts: number;
@@ -124,9 +107,7 @@ const followUpLabel: Record<string, string> = {
REVIEW_REQUEST: 'Review', REVIEW_REQUEST: 'Review',
}; };
// SLA for reactive work — missed calls / unanswered leads. Measures time const computeSla = (dateStr: string): { label: string; color: 'success' | 'warning' | 'error' } => {
// elapsed since the trigger: longer wait = worse SLA.
const computeReactiveSla = (dateStr: string): { label: string; color: 'success' | 'warning' | 'error' } => {
const minutes = Math.max(0, Math.round((Date.now() - new Date(dateStr).getTime()) / 60000)); const minutes = Math.max(0, Math.round((Date.now() - new Date(dateStr).getTime()) / 60000));
if (minutes < 1) return { label: '<1m', color: 'success' }; if (minutes < 1) return { label: '<1m', color: 'success' };
if (minutes < 15) return { label: `${minutes}m`, color: 'success' }; if (minutes < 15) return { label: `${minutes}m`, color: 'success' };
@@ -137,34 +118,6 @@ const computeReactiveSla = (dateStr: string): { label: string; color: 'success'
return { label: `${Math.floor(hours / 24)}d`, color: 'error' }; return { label: `${Math.floor(hours / 24)}d`, color: 'error' };
}; };
// SLA for scheduled work — follow-ups / callbacks. Measures time remaining
// until the scheduled slot. Green when comfortably ahead, warning when
// due soon, error when overdue.
const computeScheduledSla = (scheduledAt: string): { label: string; color: 'success' | 'warning' | 'error' } => {
const minutes = Math.round((new Date(scheduledAt).getTime() - Date.now()) / 60000);
if (minutes < 0) {
const overdueMins = -minutes;
if (overdueMins < 60) return { label: `Overdue ${overdueMins}m`, color: 'error' };
const overdueHrs = Math.floor(overdueMins / 60);
if (overdueHrs < 24) return { label: `Overdue ${overdueHrs}h`, color: 'error' };
return { label: `Overdue ${Math.floor(overdueHrs / 24)}d`, color: 'error' };
}
if (minutes < 60) return { label: `Due in ${minutes}m`, color: 'warning' };
const hours = Math.floor(minutes / 60);
if (hours < 24) return { label: `Due in ${hours}h`, color: hours < 4 ? 'warning' : 'success' };
return { label: `Due in ${Math.floor(hours / 24)}d`, color: 'success' };
};
const computeSla = (
row: Pick<WorklistRow, 'type' | 'lastContactedAt' | 'createdAt'>,
): { label: string; color: 'success' | 'warning' | 'error' } => {
if (row.type === 'follow-up' || row.type === 'callback') {
// scheduledAt was written into lastContactedAt during row construction.
return computeScheduledSla(row.lastContactedAt ?? row.createdAt);
}
return computeReactiveSla(row.lastContactedAt ?? row.createdAt);
};
const formatTimeAgo = (dateStr: string): string => { const formatTimeAgo = (dateStr: string): string => {
const minutes = Math.round((Date.now() - new Date(dateStr).getTime()) / 60000); const minutes = Math.round((Date.now() - new Date(dateStr).getTime()) / 60000);
if (minutes < 1) return 'Just now'; if (minutes < 1) return 'Just now';
@@ -177,9 +130,17 @@ const formatTimeAgo = (dateStr: string): string => {
const formatDisposition = (disposition: string): string => const formatDisposition = (disposition: string): string =>
disposition.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); disposition.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
// formatSource + formatDid kept for reference but no longer rendered const formatSource = (source: string): string => {
// in the table — SOURCE/BRANCH column removed from display per user const map: Record<string, string> = {
// request. Data stays on the row for future use. FACEBOOK_AD: 'Facebook',
GOOGLE_AD: 'Google',
WALK_IN: 'Walk-in',
REFERRAL: 'Referral',
WEBSITE: 'Website',
PHONE_INQUIRY: 'Phone',
};
return map[source] ?? source.replace(/_/g, ' ');
};
const IconInbound = faIcon(faPhoneArrowDown); const IconInbound = faIcon(faPhoneArrowDown);
const IconOutbound = faIcon(faPhoneArrowUp); const IconOutbound = faIcon(faPhoneArrowUp);
@@ -189,13 +150,13 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
for (const call of missedCalls) { for (const call of missedCalls) {
const phone = call.callerNumber?.[0]; const phone = call.callerNumber?.[0];
const countBadge = call.missedCallCount && call.missedCallCount > 1 ? ` (${call.missedCallCount}x)` : ''; const countBadge = call.missedcallcount && call.missedcallcount > 1 ? ` (${call.missedcallcount}x)` : '';
const sourceSuffix = call.callSourceNumber ? ` • ${call.callSourceNumber}` : ''; const sourceSuffix = call.callsourcenumber ? ` • ${call.callsourcenumber}` : '';
rows.push({ rows.push({
id: `mc-${call.id}`, id: `mc-${call.id}`,
type: 'missed', type: 'missed',
priority: 'HIGH', priority: 'HIGH',
name: (call.leadName || (phone ? formatPhone(phone) : 'Unknown')) + countBadge, name: (phone ? formatPhone(phone) : 'Unknown') + countBadge,
phone: phone ? formatPhone(phone) : '', phone: phone ? formatPhone(phone) : '',
phoneRaw: phone?.number ?? '', phoneRaw: phone?.number ?? '',
direction: call.callDirection === 'OUTBOUND' ? 'outbound' : 'inbound', direction: call.callDirection === 'OUTBOUND' ? 'outbound' : 'inbound',
@@ -204,16 +165,12 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
? `Missed at ${formatTimeOnly(call.startedAt)}${sourceSuffix}` ? `Missed at ${formatTimeOnly(call.startedAt)}${sourceSuffix}`
: 'Missed call', : 'Missed call',
createdAt: call.createdAt, createdAt: call.createdAt,
taskState: call.callbackStatus === 'CALLBACK_ATTEMPTED' ? 'ATTEMPTED' : 'PENDING', taskState: call.callbackstatus === 'CALLBACK_ATTEMPTED' ? 'ATTEMPTED' : 'PENDING',
leadId: call.leadId, leadId: call.leadId,
patientId: (call as any).patientId ?? null,
originalLead: null, originalLead: null,
lastContactedAt: call.callbackAttemptedAt ?? call.startedAt ?? call.createdAt, lastContactedAt: call.callbackattemptedat ?? call.startedAt ?? call.createdAt,
contactAttempts: 0, contactAttempts: 0,
// Branch column: prefer the campaign name (e.g. "Cervical Cancer source: call.callsourcenumber ?? null,
// Screening Drive") over the raw DID. Falls back to formatted DID
// for organic calls with no campaign.
source: call.campaign?.campaignName ?? call.callSourceNumber ?? null,
lastDisposition: call.disposition ?? null, lastDisposition: call.disposition ?? null,
missedCallId: call.id, missedCallId: call.id,
}); });
@@ -222,20 +179,13 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
for (const fu of followUps) { for (const fu of followUps) {
const isOverdue = fu.followUpStatus === 'OVERDUE' || (fu.scheduledAt !== null && new Date(fu.scheduledAt) < new Date()); const isOverdue = fu.followUpStatus === 'OVERDUE' || (fu.scheduledAt !== null && new Date(fu.scheduledAt) < new Date());
const label = followUpLabel[fu.followUpType ?? ''] ?? fu.followUpType ?? 'Follow-up'; const label = followUpLabel[fu.followUpType ?? ''] ?? fu.followUpType ?? 'Follow-up';
// Sidecar enriches follow-ups with patient name/phone when a
// patientId is linked. Fall back to the generic type label when
// no patient is attached.
const displayName = fu.patientName?.trim() || label;
const phoneFormatted = fu.patientPhone
? formatPhone({ number: fu.patientPhone, callingCode: '+91' })
: '';
rows.push({ rows.push({
id: `fu-${fu.id}`, id: `fu-${fu.id}`,
type: fu.followUpType === 'CALLBACK' ? 'callback' : 'follow-up', type: fu.followUpType === 'CALLBACK' ? 'callback' : 'follow-up',
priority: (fu.priority as WorklistRow['priority']) ?? (isOverdue ? 'HIGH' : 'NORMAL'), priority: (fu.priority as WorklistRow['priority']) ?? (isOverdue ? 'HIGH' : 'NORMAL'),
name: displayName, name: label,
phone: phoneFormatted, phone: '',
phoneRaw: fu.patientPhone ?? '', phoneRaw: '',
direction: null, direction: null,
typeLabel: fu.followUpType === 'CALLBACK' ? 'Callback' : 'Follow-up', typeLabel: fu.followUpType === 'CALLBACK' ? 'Callback' : 'Follow-up',
reason: fu.scheduledAt reason: fu.scheduledAt
@@ -244,7 +194,6 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
createdAt: fu.createdAt ?? fu.scheduledAt ?? new Date().toISOString(), createdAt: fu.createdAt ?? fu.scheduledAt ?? new Date().toISOString(),
taskState: isOverdue ? 'PENDING' : (fu.followUpStatus === 'COMPLETED' ? 'ATTEMPTED' : 'SCHEDULED'), taskState: isOverdue ? 'PENDING' : (fu.followUpStatus === 'COMPLETED' ? 'ATTEMPTED' : 'SCHEDULED'),
leadId: null, leadId: null,
patientId: fu.patientId ?? null,
originalLead: null, originalLead: null,
lastContactedAt: fu.scheduledAt ?? fu.createdAt ?? null, lastContactedAt: fu.scheduledAt ?? fu.createdAt ?? null,
contactAttempts: 0, contactAttempts: 0,
@@ -272,7 +221,6 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
createdAt: lead.createdAt, createdAt: lead.createdAt,
taskState: 'PENDING', taskState: 'PENDING',
leadId: lead.id, leadId: lead.id,
patientId: (lead as any).patientId ?? null,
originalLead: lead, originalLead: lead,
lastContactedAt: lead.lastContacted ?? null, lastContactedAt: lead.lastContacted ?? null,
contactAttempts: lead.contactAttempts ?? 0, contactAttempts: lead.contactAttempts ?? 0,
@@ -282,9 +230,8 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
}); });
} }
// Keep all rows — follow-ups may have no phone and still need to be visible. // Remove rows without a phone number — agent can't act on them
// The PhoneActionCell renders a "No phone" placeholder when phoneRaw is empty. const actionableRows = rows.filter(r => r.phoneRaw);
const actionableRows = rows;
// Sort by rules engine score if available, otherwise by priority + createdAt // Sort by rules engine score if available, otherwise by priority + createdAt
actionableRows.sort((a, b) => { actionableRows.sort((a, b) => {
@@ -298,21 +245,17 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
return actionableRows; return actionableRows;
}; };
export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectItem, selectedItemId, onDialMissedCall, search }: WorklistPanelProps) => { export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectLead, selectedLeadId, onDialMissedCall }: WorklistPanelProps) => {
const [tab, setTab] = useState<TabKey>('all'); const [tab, setTab] = useState<TabKey>('all');
// Missed tab always shows PENDING callbacks. Attempted/Completed/Invalid const [search, setSearch] = useState('');
// sub-tabs were removed per QA feedback — pending callbacks are the only const [missedSubTab, setMissedSubTab] = useState<MissedSubTab>('pending');
// ones agents need to act on from the worklist. const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({ column: 'sla', direction: 'descending' });
const missedSubTab: MissedSubTab = 'pending';
// Default SLA sort is ascending — the bucket-sorted result puts the
// most-urgent rows at the top (overdue → oldest reactive → soonest due).
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({ column: 'sla', direction: 'ascending' });
const missedByStatus = useMemo(() => ({ const missedByStatus = useMemo(() => ({
pending: missedCalls.filter(c => c.callbackStatus === 'PENDING_CALLBACK' || !c.callbackStatus), pending: missedCalls.filter(c => c.callbackstatus === 'PENDING_CALLBACK' || !c.callbackstatus),
attempted: missedCalls.filter(c => c.callbackStatus === 'CALLBACK_ATTEMPTED'), attempted: missedCalls.filter(c => c.callbackstatus === 'CALLBACK_ATTEMPTED'),
completed: missedCalls.filter(c => c.callbackStatus === 'CALLBACK_COMPLETED' || c.callbackStatus === 'WRONG_NUMBER'), completed: missedCalls.filter(c => c.callbackstatus === 'CALLBACK_COMPLETED' || c.callbackstatus === 'WRONG_NUMBER'),
invalid: missedCalls.filter(c => c.callbackStatus === 'INVALID'), invalid: missedCalls.filter(c => c.callbackstatus === 'INVALID'),
}), [missedCalls]); }), [missedCalls]);
const allRows = useMemo( const allRows = useMemo(
@@ -330,7 +273,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
let rows = allRows; let rows = allRows;
if (tab === 'missed') rows = missedSubTabRows; if (tab === 'missed') rows = missedSubTabRows;
else if (tab === 'leads') rows = rows.filter((r) => r.type === 'lead'); else if (tab === 'leads') rows = rows.filter((r) => r.type === 'lead');
else if (tab === 'follow-ups') rows = rows.filter((r) => r.type === 'follow-up' || r.type === 'callback'); else if (tab === 'follow-ups') rows = rows.filter((r) => r.type === 'follow-up');
if (search.trim()) { if (search.trim()) {
const q = search.toLowerCase(); const q = search.toLowerCase();
@@ -352,27 +295,8 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
case 'name': case 'name':
return a.name.localeCompare(b.name) * dir; return a.name.localeCompare(b.name) * dir;
case 'sla': { case 'sla': {
// Mixed SLA sort: SLA means different things by row type
// (elapsed for reactive, remaining for scheduled). Bucket
// rows by urgency, then sort within bucket — Overdue
// first, then reactive (oldest-first), then scheduled
// (soonest-due first). `dir` flips the whole ordering
// so the user can still toggle ascending/descending.
const urgencyBucket = (row: WorklistRow): number => {
const isScheduled = row.type === 'follow-up' || row.type === 'callback';
if (isScheduled) {
const t = new Date(row.lastContactedAt ?? row.createdAt).getTime();
return t < Date.now() ? 0 : 2; // 0 = overdue, 2 = upcoming
}
return 1; // reactive (missed / lead)
};
const ba = urgencyBucket(a);
const bb = urgencyBucket(b);
if (ba !== bb) return (ba - bb) * dir;
const ta = new Date(a.lastContactedAt ?? a.createdAt).getTime(); const ta = new Date(a.lastContactedAt ?? a.createdAt).getTime();
const tb = new Date(b.lastContactedAt ?? b.createdAt).getTime(); const tb = new Date(b.lastContactedAt ?? b.createdAt).getTime();
// Within a bucket, ascending time = most urgent first
// (oldest overdue, oldest reactive, soonest upcoming).
return (ta - tb) * dir; return (ta - tb) * dir;
} }
default: default:
@@ -386,7 +310,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
const missedCount = allRows.filter((r) => r.type === 'missed').length; const missedCount = allRows.filter((r) => r.type === 'missed').length;
const leadCount = allRows.filter((r) => r.type === 'lead').length; const leadCount = allRows.filter((r) => r.type === 'lead').length;
const followUpCount = allRows.filter((r) => r.type === 'follow-up' || r.type === 'callback').length; const followUpCount = allRows.filter((r) => r.type === 'follow-up').length;
// Notification for new missed calls // Notification for new missed calls
const prevMissedCount = useRef(missedCount); const prevMissedCount = useRef(missedCount);
@@ -400,10 +324,8 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
const PAGE_SIZE = 15; const PAGE_SIZE = 15;
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// Reset page when search changes from parent
useEffect(() => { setPage(1); }, [search]);
const handleTabChange = useCallback((key: TabKey) => { setTab(key); setPage(1); }, []); const handleTabChange = useCallback((key: TabKey) => { setTab(key); setPage(1); }, []);
const handleSearch = useCallback((value: string) => { setSearch(value); setPage(1); }, []);
const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE)); const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));
const pagedRows = filteredRows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE); const pagedRows = filteredRows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
@@ -436,27 +358,49 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
return ( return (
<div className="flex flex-1 flex-col min-h-0 overflow-hidden"> <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
{/* Filter pills — custom buttons matching All Leads pattern */} {/* Filter tabs + search */}
<div className="flex shrink-0 items-center gap-1.5 px-5 py-2"> <div className="flex shrink-0 items-end justify-between border-b border-secondary px-5 pt-3 pb-0.5">
{tabItems.map((item) => ( <Tabs selectedKey={tab} onSelectionChange={(key) => handleTabChange(key as TabKey)}>
<button <TabList items={tabItems} type="underline" size="sm">
key={item.id} {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
onClick={() => handleTabChange(item.id)} </TabList>
className={cx( </Tabs>
'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear', <div className="w-44 shrink-0">
tab === item.id <Input
? 'bg-brand-solid text-white' placeholder="Search..."
: 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover', icon={SearchLg}
)} size="sm"
> value={search}
{item.label}{item.badge ? ` (${item.badge})` : ''} onChange={handleSearch}
</button> aria-label="Search worklist"
))} />
</div>
</div> </div>
{/* Missed-call sub-tabs removed per QA feedback — the Missed tab {/* Missed call status sub-tabs */}
now only shows pending callbacks. Attempted is redundant once {tab === 'missed' && (
the worklist is the single source of truth. */} <div className="flex shrink-0 gap-1 px-5 py-2 border-b border-secondary">
{(['pending', 'attempted', 'completed', 'invalid'] as MissedSubTab[]).map(sub => (
<button
key={sub}
onClick={() => { setMissedSubTab(sub); setPage(1); }}
className={cx(
'px-3 py-1 text-xs font-medium rounded-md capitalize transition duration-100 ease-linear',
missedSubTab === sub
? 'bg-brand-50 text-brand-700 border border-brand-200'
: 'text-tertiary hover:text-secondary hover:bg-secondary',
)}
>
{sub}
{sub === 'pending' && missedByStatus.pending.length > 0 && (
<span className="ml-1.5 bg-error-50 text-error-700 text-xs px-1.5 py-0.5 rounded-full">
{missedByStatus.pending.length}
</span>
)}
</button>
))}
</div>
)}
{filteredRows.length === 0 ? ( {filteredRows.length === 0 ? (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
@@ -471,13 +415,14 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
<Table.Head id="priority" label="SCORE" className="w-20" isRowHeader allowsSorting /> <Table.Head id="priority" label="SCORE" className="w-20" isRowHeader allowsSorting />
<Table.Head id="name" label="PATIENT" allowsSorting /> <Table.Head id="name" label="PATIENT" allowsSorting />
<Table.Head label="PHONE" /> <Table.Head label="PHONE" />
<Table.Head label={tab === 'missed' ? 'BRANCH' : 'SOURCE'} className="w-28" />
<Table.Head id="sla" label="SLA" className="w-24" allowsSorting /> <Table.Head id="sla" label="SLA" className="w-24" allowsSorting />
</Table.Header> </Table.Header>
<Table.Body items={pagedRows}> <Table.Body items={pagedRows}>
{(row) => { {(row) => {
const priority = priorityConfig[row.priority] ?? priorityConfig.NORMAL; const priority = priorityConfig[row.priority] ?? priorityConfig.NORMAL;
const sla = computeSla(row); const sla = computeSla(row.lastContactedAt ?? row.createdAt);
const isSelected = row.id === selectedItemId; const isSelected = row.originalLead !== null && row.originalLead.id === selectedLeadId;
// Sub-line: last interaction context // Sub-line: last interaction context
const subLine = row.lastContactedAt const subLine = row.lastContactedAt
@@ -492,15 +437,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
isSelected && 'bg-brand-primary', isSelected && 'bg-brand-primary',
)} )}
onAction={() => { onAction={() => {
onSelectItem({ if (row.originalLead) onSelectLead(row.originalLead);
rowId: row.id,
type: row.type,
lead: row.originalLead,
phoneRaw: row.phoneRaw || null,
patientId: row.patientId,
leadId: row.leadId,
name: row.name,
});
}} }}
> >
<Table.Cell> <Table.Cell>
@@ -551,6 +488,15 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
<span className="text-xs text-quaternary italic">No phone</span> <span className="text-xs text-quaternary italic">No phone</span>
)} )}
</Table.Cell> </Table.Cell>
<Table.Cell>
{row.source ? (
<span className="text-xs text-tertiary truncate block max-w-[100px]">
{formatSource(row.source)}
</span>
) : (
<span className="text-xs text-quaternary">—</span>
)}
</Table.Cell>
<Table.Cell> <Table.Cell>
<Badge size="sm" color={sla.color} type="pill-color"> <Badge size="sm" color={sla.color} type="pill-color">
{sla.label} {sla.label}

7
src/components/campaigns/campaign-hero.tsx
View File

@@ -91,6 +91,13 @@ export const CampaignHero = ({ campaign }: CampaignHeroProps) => {
View on Platform View on Platform
</Button> </Button>
)} )}
<Button
color="primary"
size="sm"
href={`/leads`}
>
View Leads
</Button>
</div> </div>
</div> </div>
</div> </div>

31
src/components/dashboard/agent-table.tsx
View File

@@ -26,27 +26,14 @@ interface AgentTableProps {
export const AgentTable = ({ calls }: AgentTableProps) => { export const AgentTable = ({ calls }: AgentTableProps) => {
const agents = useMemo(() => { const agents = useMemo(() => {
// Bucket by authoritative agent.id when present (from CDR enrichment); const agentMap = new Map<string, Call[]>();
// fall back to raw agentName for legacy rows that haven't been
// enriched yet. Skips rows with no agent info at all.
const agentMap = new Map<string, { displayName: string; calls: Call[] }>();
for (const call of calls) { for (const call of calls) {
let key: string; const agent = call.agentName ?? 'Unknown';
let displayName: string; if (!agentMap.has(agent)) agentMap.set(agent, []);
if (call.agent?.id) { agentMap.get(agent)!.push(call);
key = call.agent.id;
displayName = call.agent.name ?? call.agent.ozonetelAgentId ?? 'Unknown';
} else if (call.agentName) {
key = `legacy:${call.agentName}`;
displayName = call.agentName;
} else {
continue;
}
if (!agentMap.has(key)) agentMap.set(key, { displayName, calls: [] });
agentMap.get(key)!.calls.push(call);
} }
return Array.from(agentMap.entries()).map(([key, { displayName, calls: agentCalls }]) => { return Array.from(agentMap.entries()).map(([name, agentCalls]) => {
const inbound = agentCalls.filter((c) => c.callDirection === 'INBOUND').length; const inbound = agentCalls.filter((c) => c.callDirection === 'INBOUND').length;
const outbound = agentCalls.filter((c) => c.callDirection === 'OUTBOUND').length; const outbound = agentCalls.filter((c) => c.callDirection === 'OUTBOUND').length;
const missed = agentCalls.filter((c) => c.callStatus === 'MISSED').length; const missed = agentCalls.filter((c) => c.callStatus === 'MISSED').length;
@@ -56,11 +43,11 @@ export const AgentTable = ({ calls }: AgentTableProps) => {
const avgHandle = completedCalls.length > 0 ? Math.round(totalDuration / completedCalls.length) : 0; const avgHandle = completedCalls.length > 0 ? Math.round(totalDuration / completedCalls.length) : 0;
const booked = agentCalls.filter((c) => c.disposition === 'APPOINTMENT_BOOKED').length; const booked = agentCalls.filter((c) => c.disposition === 'APPOINTMENT_BOOKED').length;
const conversion = total > 0 ? (booked / total) * 100 : 0; const conversion = total > 0 ? (booked / total) * 100 : 0;
const nameParts = displayName.split(' '); const nameParts = name.split(' ');
return { return {
id: key, id: name,
name: displayName, name,
initials: getInitials(nameParts[0] ?? '', nameParts[1] ?? ''), initials: getInitials(nameParts[0] ?? '', nameParts[1] ?? ''),
inbound, outbound, missed, total, avgHandle, conversion, inbound, outbound, missed, total, avgHandle, conversion,
}; };
@@ -95,7 +82,7 @@ export const AgentTable = ({ calls }: AgentTableProps) => {
{(agent) => ( {(agent) => (
<Table.Row id={agent.id}> <Table.Row id={agent.id}>
<Table.Cell> <Table.Cell>
<Link to={`/agent/${encodeURIComponent(agent.id)}`} className="no-underline"> <Link to={`/agent/${encodeURIComponent(agent.name)}`} className="no-underline">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Avatar size="xs" initials={agent.initials} /> <Avatar size="xs" initials={agent.initials} />
<span className="text-sm font-medium text-brand-secondary hover:text-brand-secondary_hover transition duration-100 ease-linear">{agent.name}</span> <span className="text-sm font-medium text-brand-secondary hover:text-brand-secondary_hover transition duration-100 ease-linear">{agent.name}</span>

401
src/components/dashboard/supervisor-rollup.tsx
View File

@@ -1,401 +0,0 @@
import { useEffect, useMemo, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTriangleExclamation } from '@fortawesome/pro-duotone-svg-icons';
import { Badge } from '@/components/base/badges/badges';
import { Table } from '@/components/application/table/table';
import { apiClient } from '@/lib/api-client';
import { cx } from '@/utils/cx';
// Shared rollup surfaces for the supervisor dashboard: agent performance
// table (richer — NPS, idle, follow-ups, leads), per-agent time breakdown,
// NPS gauge + conversion metrics, and performance alerts. Kept in one file
// so both the Team Dashboard and the legacy Team Performance page render
// identically from a single data fetch.
type DateRange = 'today' | 'week' | 'month' | 'year';
type AgentPerf = {
name: string;
ozonetelAgentId: string;
npsScore: number | null;
maxIdleMinutes: number | null;
minNpsThreshold: number | null;
minConversionPercent: number | null;
calls: number;
inbound: number;
missed: number;
followUps: number;
leads: number;
appointments: number;
convPercent: number;
idleMinutes: number;
activeMinutes: number;
wrapMinutes: number;
breakMinutes: number;
};
const getDateRange = (range: DateRange): { gte: string; lte: string } => {
const now = new Date();
const lte = now.toISOString();
const start = new Date(now);
if (range === 'today') start.setHours(0, 0, 0, 0);
else if (range === 'week') { start.setDate(start.getDate() - start.getDay() + 1); start.setHours(0, 0, 0, 0); }
else if (range === 'month') { start.setDate(1); start.setHours(0, 0, 0, 0); }
else if (range === 'year') { start.setMonth(0, 1); start.setHours(0, 0, 0, 0); }
return { gte: start.toISOString(), lte };
};
const parseTime = (timeStr: string): number => {
if (!timeStr) return 0;
const parts = timeStr.split(':').map(Number);
if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
return 0;
};
export const useSupervisorRollup = (range: DateRange) => {
const [agents, setAgents] = useState<AgentPerf[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const load = async () => {
setLoading(true);
const { gte, lte } = getDateRange(range);
const dateStr = new Date().toISOString().split('T')[0];
try {
const [callsData, leadsData, followUpsData, teamData] = await Promise.all([
apiClient.graphql<any>(`{ calls(first: 500, filter: { startedAt: { gte: "${gte}", lte: "${lte}" } }) { edges { node { id direction callStatus agentName startedAt agentId agent { id name ozonetelAgentId } } } } }`, undefined, { silent: true }),
apiClient.graphql<any>(`{ leads(first: 200) { edges { node { id assignedAgent status } } } }`, undefined, { silent: true }),
apiClient.graphql<any>(`{ followUps(first: 200) { edges { node { id assignedAgent } } } }`, undefined, { silent: true }),
apiClient.get<any>(`/api/supervisor/team-performance?date=${dateStr}`, { silent: true }).catch(() => ({ agents: [] })),
]);
const calls = callsData?.calls?.edges?.map((e: any) => e.node) ?? [];
const leads = leadsData?.leads?.edges?.map((e: any) => e.node) ?? [];
const followUps = followUpsData?.followUps?.edges?.map((e: any) => e.node) ?? [];
const teamAgents = teamData?.agents ?? [];
let agentPerfs: AgentPerf[];
if (teamAgents.length > 0) {
agentPerfs = teamAgents.map((agent: any) => {
const agentCalls = calls.filter((c: any) => {
if (c.agentId && c.agentId === agent.id) return true;
if (!c.agentId && (c.agentName === agent.name || c.agentName === agent.ozonetelAgentId)) return true;
return false;
});
const agentLeads = leads.filter((l: any) => l.assignedAgent === agent.name);
const agentFollowUps = followUps.filter((f: any) => f.assignedAgent === agent.name);
const agentAppts = agentCalls.filter((c: any) => c.callStatus === 'COMPLETED').length;
const totalCalls = agentCalls.length;
const inbound = agentCalls.filter((c: any) => c.direction === 'INBOUND').length;
const missed = agentCalls.filter((c: any) => c.callStatus === 'MISSED').length;
const tb = agent.timeBreakdown;
const idleSec = tb ? parseTime(tb.totalIdleTime ?? '0:0:0') : 0;
const activeSec = tb ? parseTime(tb.totalBusyTime ?? '0:0:0') : 0;
const wrapSec = tb ? parseTime(tb.totalWrapupTime ?? '0:0:0') : 0;
const breakSec = tb ? parseTime(tb.totalPauseTime ?? '0:0:0') : 0;
return {
name: agent.name ?? agent.ozonetelAgentId,
ozonetelAgentId: agent.ozonetelAgentId,
npsScore: agent.npsScore,
maxIdleMinutes: agent.maxIdleMinutes,
minNpsThreshold: agent.minNpsThreshold,
minConversionPercent: agent.minConversionPercent,
calls: totalCalls,
inbound,
missed,
followUps: agentFollowUps.length,
leads: agentLeads.length,
appointments: agentAppts,
convPercent: totalCalls > 0 ? Math.round((agentAppts / totalCalls) * 100) : 0,
idleMinutes: Math.round(idleSec / 60),
activeMinutes: Math.round(activeSec / 60),
wrapMinutes: Math.round(wrapSec / 60),
breakMinutes: Math.round(breakSec / 60),
};
});
} else {
const byKey = new Map<string, { key: string; name: string }>();
for (const c of calls) {
if (c.agent?.id) byKey.set(c.agent.id, { key: c.agent.id, name: c.agent.name ?? c.agent.ozonetelAgentId });
else if (c.agentName) byKey.set(`legacy:${c.agentName}`, { key: `legacy:${c.agentName}`, name: c.agentName });
}
agentPerfs = Array.from(byKey.values()).map(({ key, name }) => {
const agentCalls = calls.filter((c: any) => {
if (key.startsWith('legacy:')) return c.agentName === name && !c.agent?.id;
return c.agent?.id === key;
});
const agentLeads = leads.filter((l: any) => l.assignedAgent === name);
const agentFollowUps = followUps.filter((f: any) => f.assignedAgent === name);
const completed = agentCalls.filter((c: any) => c.callStatus === 'COMPLETED').length;
const totalCalls = agentCalls.length;
return {
name,
ozonetelAgentId: name,
npsScore: null,
maxIdleMinutes: null,
minNpsThreshold: null,
minConversionPercent: null,
calls: totalCalls,
inbound: agentCalls.filter((c: any) => c.direction === 'INBOUND').length,
missed: agentCalls.filter((c: any) => c.callStatus === 'MISSED').length,
followUps: agentFollowUps.length,
leads: agentLeads.length,
appointments: completed,
convPercent: totalCalls > 0 ? Math.round((completed / totalCalls) * 100) : 0,
idleMinutes: 0,
activeMinutes: 0,
wrapMinutes: 0,
breakMinutes: 0,
};
});
}
setAgents(agentPerfs);
} catch (err) {
console.error('Failed to load supervisor rollup:', err);
} finally {
setLoading(false);
}
};
load();
}, [range]);
return { agents, loading };
};
export const RichAgentTable = ({ agents }: { agents: AgentPerf[] }) => (
<div className="rounded-xl border border-secondary bg-primary p-4">
<h3 className="text-sm font-semibold text-secondary mb-3">Agent Performance</h3>
<Table size="sm">
<Table.Header>
<Table.Head label="Agent" isRowHeader />
<Table.Head label="Calls" />
<Table.Head label="Inbound" />
<Table.Head label="Missed" />
<Table.Head label="Follow-ups" />
<Table.Head label="Leads" />
<Table.Head label="Conv%" />
<Table.Head label="NPS" />
<Table.Head label="Idle" />
</Table.Header>
<Table.Body items={agents}>
{(agent) => (
<Table.Row id={agent.ozonetelAgentId || agent.name}>
<Table.Cell><span className="text-sm font-medium text-primary">{agent.name}</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{agent.calls}</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{agent.inbound}</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{agent.missed}</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{agent.followUps}</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{agent.leads}</span></Table.Cell>
<Table.Cell>
<span className={cx('text-sm font-medium', agent.convPercent >= 25 ? 'text-success-primary' : 'text-error-primary')}>
{agent.convPercent}%
</span>
</Table.Cell>
<Table.Cell>
<span className={cx('text-sm font-bold', (agent.npsScore ?? 0) >= 70 ? 'text-success-primary' : (agent.npsScore ?? 0) >= 50 ? 'text-warning-primary' : 'text-error-primary')}>
{agent.npsScore ?? '—'}
</span>
</Table.Cell>
<Table.Cell>
<span className={cx('text-sm', agent.maxIdleMinutes && agent.idleMinutes > agent.maxIdleMinutes ? 'text-error-primary font-bold' : 'text-primary')}>
{agent.idleMinutes}m
</span>
</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
</div>
);
export const TimeBreakdown = ({ agents }: { agents: AgentPerf[] }) => {
const teamAvg = useMemo(() => {
if (agents.length === 0) return { active: 0, wrap: 0, idle: 0, break_: 0 };
return {
active: Math.round(agents.reduce((s, a) => s + a.activeMinutes, 0) / agents.length),
wrap: Math.round(agents.reduce((s, a) => s + a.wrapMinutes, 0) / agents.length),
idle: Math.round(agents.reduce((s, a) => s + a.idleMinutes, 0) / agents.length),
break_: Math.round(agents.reduce((s, a) => s + a.breakMinutes, 0) / agents.length),
};
}, [agents]);
// QA flagged the earlier stacked-bar rendering as misleading — per-agent
// totals varied wildly, making the visual width comparison meaningless.
// Rendered as a table so the numbers speak for themselves; team-average
// row sits at the top as the reference point.
return (
<div className="rounded-xl border border-secondary bg-primary p-4">
<h3 className="text-sm font-semibold text-secondary mb-3">Time Breakdown</h3>
{teamAvg.active === 0 && teamAvg.idle === 0 && teamAvg.wrap === 0 && teamAvg.break_ === 0 && (
<p className="text-xs text-tertiary mb-3">Time utilisation data unavailable — requires Ozonetel agent session data.</p>
)}
<Table size="sm">
<Table.Header>
<Table.Head label="Agent" isRowHeader />
<Table.Head label="Active" />
<Table.Head label="Wrap" />
<Table.Head label="Idle" />
<Table.Head label="Break" />
<Table.Head label="Total" />
</Table.Header>
<Table.Body
items={[
{ id: '__team_avg__', name: 'Team average', isAvg: true, agent: null },
...agents.map((a) => ({ id: a.ozonetelAgentId || a.name, name: a.name, isAvg: false, agent: a })),
]}
>
{(item) => {
const active = item.isAvg ? teamAvg.active : item.agent!.activeMinutes;
const wrap = item.isAvg ? teamAvg.wrap : item.agent!.wrapMinutes;
const idle = item.isAvg ? teamAvg.idle : item.agent!.idleMinutes;
const breakM = item.isAvg ? teamAvg.break_ : item.agent!.breakMinutes;
const total = active + wrap + idle + breakM;
const isHighIdle = !item.isAvg && item.agent!.maxIdleMinutes && idle > (item.agent!.maxIdleMinutes ?? 0);
return (
<Table.Row id={item.id}>
<Table.Cell>
<span className={cx('text-sm', item.isAvg ? 'font-bold text-secondary' : 'font-medium text-primary')}>
{item.name}
</span>
</Table.Cell>
<Table.Cell><span className="text-sm text-primary">{active}m</span></Table.Cell>
<Table.Cell><span className="text-sm text-primary">{wrap}m</span></Table.Cell>
<Table.Cell>
<span className={cx('text-sm', isHighIdle ? 'font-bold text-error-primary' : 'text-primary')}>
{idle}m
</span>
</Table.Cell>
<Table.Cell><span className="text-sm text-primary">{breakM}m</span></Table.Cell>
<Table.Cell><span className="text-sm text-secondary">{total}m</span></Table.Cell>
</Table.Row>
);
}}
</Table.Body>
</Table>
</div>
);
};
export const NpsConversion = ({ agents, convRate }: { agents: AgentPerf[]; convRate: number }) => {
const avgNps = useMemo(() => {
const withNps = agents.filter(a => a.npsScore != null);
if (withNps.length === 0) return 0;
return Math.round(withNps.reduce((sum, a) => sum + (a.npsScore ?? 0), 0) / withNps.length);
}, [agents]);
const npsOption = useMemo(() => ({
tooltip: { trigger: 'item' },
series: [{
type: 'gauge', startAngle: 180, endAngle: 0,
min: 0, max: 100,
pointer: { show: false },
progress: { show: true, width: 18, roundCap: true, itemStyle: { color: avgNps >= 70 ? '#22C55E' : avgNps >= 50 ? '#F59E0B' : '#EF4444' } },
axisLine: { lineStyle: { width: 18, color: [[1, '#E5E7EB']] } },
axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false },
detail: { valueAnimation: true, fontSize: 28, fontWeight: 'bold', offsetCenter: [0, '-10%'], formatter: '{value}' },
data: [{ value: avgNps }],
}],
}), [avgNps]);
return (
<div className="flex gap-4">
<div className="flex-1 rounded-xl border border-secondary bg-primary p-4">
<h3 className="text-sm font-semibold text-secondary mb-2">Overall NPS</h3>
{agents.every(a => a.npsScore == null) ? (
<div className="flex items-center justify-center py-8">
<p className="text-xs text-tertiary">NPS data unavailable — configure NPS scores on agent profiles.</p>
</div>
) : (
<>
<ReactECharts option={npsOption} style={{ height: 150 }} />
<div className="space-y-1 mt-2">
{agents.filter(a => a.npsScore != null).map(a => (
<div key={a.name} className="flex items-center gap-2">
<span className="text-xs text-secondary w-28 truncate">{a.name}</span>
<div className="flex-1 h-2 rounded-full bg-tertiary overflow-hidden">
<div className={cx('h-full rounded-full', (a.npsScore ?? 0) >= 70 ? 'bg-success-solid' : (a.npsScore ?? 0) >= 50 ? 'bg-warning-solid' : 'bg-error-solid')} style={{ width: `${a.npsScore ?? 0}%` }} />
</div>
<span className="text-xs font-bold text-primary w-8 text-right">{a.npsScore}</span>
</div>
))}
</div>
</>
)}
</div>
<div className="flex-1 rounded-xl border border-secondary bg-primary p-4">
<h3 className="text-sm font-semibold text-secondary mb-3">Conversion Metrics</h3>
<div className="flex gap-3 mb-4">
<div className="flex-1 rounded-lg bg-secondary p-4 text-center">
<p className="text-2xl font-bold text-brand-secondary">{convRate}%</p>
<p className="text-xs text-tertiary">Call → Appointment</p>
</div>
<div className="flex-1 rounded-lg bg-secondary p-4 text-center">
<p className="text-2xl font-bold text-brand-secondary">
{agents.length > 0 ? Math.round(agents.reduce((s, a) => s + (a.leads > 0 ? 1 : 0), 0) / agents.length * 100) : 0}%
</p>
<p className="text-xs text-tertiary">Lead → Contact</p>
</div>
</div>
<div className="space-y-1">
{agents.map(a => (
<div key={a.name} className="flex items-center gap-2 text-xs">
<span className="text-secondary w-28 truncate">{a.name}</span>
<Badge size="sm" color={a.convPercent >= 25 ? 'success' : 'error'}>{a.convPercent}%</Badge>
</div>
))}
</div>
</div>
</div>
);
};
export const PerformanceAlerts = ({ agents }: { agents: AgentPerf[] }) => {
const alerts = useMemo(() => {
const list: { agent: string; type: string; value: string; severity: 'error' | 'warning' }[] = [];
for (const a of agents) {
if (a.maxIdleMinutes && a.idleMinutes > a.maxIdleMinutes) {
list.push({ agent: a.name, type: 'Excessive Idle Time', value: `${a.idleMinutes}m`, severity: 'error' });
}
if (a.minNpsThreshold && (a.npsScore ?? 100) < a.minNpsThreshold) {
list.push({ agent: a.name, type: 'Low NPS', value: String(a.npsScore ?? 0), severity: 'warning' });
}
if (a.minConversionPercent && a.convPercent < a.minConversionPercent) {
list.push({ agent: a.name, type: 'Low Conversion', value: `${a.convPercent}%`, severity: 'warning' });
}
}
return list;
}, [agents]);
if (alerts.length === 0) return null;
return (
<div className="rounded-xl border border-secondary bg-primary p-4">
<h3 className="text-sm font-semibold text-error-primary mb-3">
<FontAwesomeIcon icon={faTriangleExclamation} className="size-3.5 mr-1.5" />
Performance Alerts ({alerts.length})
</h3>
<div className="space-y-2">
{alerts.map((alert, i) => (
<div key={i} className={cx(
'flex items-center justify-between rounded-lg px-4 py-3',
alert.severity === 'error' ? 'bg-error-secondary' : 'bg-warning-secondary',
)}>
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faTriangleExclamation} className={cx('size-3.5', alert.severity === 'error' ? 'text-fg-error-primary' : 'text-fg-warning-primary')} />
<span className="text-sm font-medium text-primary">{alert.agent}</span>
<span className="text-sm text-secondary">— {alert.type}</span>
</div>
<Badge size="sm" color={alert.severity}>{alert.value}</Badge>
</div>
))}
</div>
</div>
);
};

136
src/components/forms/ai-form.tsx
View File

@@ -1,136 +0,0 @@
import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select';
import { TextArea } from '@/components/base/textarea/textarea';
// AI assistant form — mirrors AiConfig in
// helix-engage-server/src/config/ai.defaults.ts. API keys stay in env vars
// (true secrets, rotated at the infra level); everything the admin can safely
// adjust lives here: provider choice, model, temperature, and an optional
// system-prompt addendum appended to the hospital-specific prompts that the
// WidgetChatService generates.
export type AiProvider = 'openai' | 'anthropic';
export type AiFormValues = {
provider: AiProvider;
model: string;
temperature: string;
systemPromptAddendum: string;
};
export const emptyAiFormValues = (): AiFormValues => ({
provider: 'openai',
model: 'gpt-4o-mini',
temperature: '0.7',
systemPromptAddendum: '',
});
const PROVIDER_ITEMS = [
{ id: 'openai', label: 'OpenAI' },
{ id: 'anthropic', label: 'Anthropic' },
];
// Recommended model presets per provider. Admin can still type any model
// string they want — these are suggestions, not the only options.
export const MODEL_SUGGESTIONS: Record<AiProvider, string[]> = {
openai: ['gpt-4o-mini', 'gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'],
anthropic: ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest', 'claude-3-opus-latest'],
};
type AiFormProps = {
value: AiFormValues;
onChange: (value: AiFormValues) => void;
};
export const AiForm = ({ value, onChange }: AiFormProps) => {
const patch = (updates: Partial<AiFormValues>) => onChange({ ...value, ...updates });
const suggestions = MODEL_SUGGESTIONS[value.provider];
return (
<div className="flex flex-col gap-6">
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Provider & model</h3>
<p className="mt-1 text-xs text-tertiary">
Choose the AI vendor powering the website widget chat and call-summary features.
Changing providers takes effect immediately.
</p>
</div>
<Select
label="Provider"
placeholder="Select provider"
items={PROVIDER_ITEMS}
selectedKey={value.provider}
onSelectionChange={(key) => {
const next = key as AiProvider;
// When switching providers, also reset the model to the first
// suggested model for that provider — saves the admin a second
// edit step and avoids leaving an OpenAI model selected while
// provider=anthropic.
patch({
provider: next,
model: MODEL_SUGGESTIONS[next][0],
});
}}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
<div>
<Input
label="Model"
placeholder="Model identifier"
value={value.model}
onChange={(v) => patch({ model: v })}
/>
<div className="mt-2 flex flex-wrap gap-1.5">
{suggestions.map((model) => (
<button
key={model}
type="button"
onClick={() => patch({ model })}
className={`rounded-md border px-2 py-1 text-xs transition duration-100 ease-linear ${
value.model === model
? 'border-brand bg-brand-secondary text-brand-secondary'
: 'border-secondary bg-primary text-tertiary hover:bg-secondary'
}`}
>
{model}
</button>
))}
</div>
</div>
<Input
label="Temperature"
type="number"
placeholder="0.7"
hint="0 = deterministic, 1 = balanced, 2 = very creative"
value={value.temperature}
onChange={(v) => patch({ temperature: v })}
/>
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">System prompt addendum</h3>
<p className="mt-1 text-xs text-tertiary">
Optional — gets appended to the hospital-specific prompts the widget generates
automatically from your doctors and clinics. Use this to add tone guidelines,
escalation rules, or topics the assistant should avoid. Leave blank for the default
behaviour.
</p>
</div>
<TextArea
label="Additional instructions"
placeholder="e.g. Always respond in the patient's language. Never quote specific medication dosages; refer them to a doctor for prescriptions."
value={value.systemPromptAddendum}
onChange={(v) => patch({ systemPromptAddendum: v })}
rows={6}
/>
</section>
</div>
);
};

517
src/components/forms/clinic-form.tsx
View File

@@ -1,517 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
import { parseDate, getLocalTimeZone, today } from '@internationalized/date';
import type { DateValue } from 'react-aria-components';
import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select';
import { Toggle } from '@/components/base/toggle/toggle';
import { Button } from '@/components/base/buttons/button';
import { DatePicker } from '@/components/application/date-picker/date-picker';
import { TimePicker } from '@/components/application/date-picker/time-picker';
import {
DaySelector,
defaultDaySelection,
type DaySelection,
} from '@/components/application/day-selector/day-selector';
// Reusable clinic form used by /settings/clinics slideout and the /setup
// wizard step. The parent owns form state + the save flow so it can decide
// how to orchestrate the multi-step create chain (one createClinic, then one
// createHoliday per holiday, then one createClinicRequiredDocument per doc).
//
// Schema (matches the Clinic entity in
// FortyTwoApps/helix-engage/src/objects/clinic.object.ts, column names
// derived from SDK labels — that's why opensAt/closesAt and not openTime/
// closeTime):
// - clinicName (TEXT)
// - address (ADDRESS → addressCustomAddress*)
// - phone (PHONES)
// - email (EMAILS)
// - openMonday..openSunday (7 BOOLEANs)
// - opensAt / closesAt (TEXT, HH:MM)
// - status (SELECT enum)
// - walkInAllowed / onlineBooking (BOOLEAN)
// - cancellationWindowHours / arriveEarlyMin (NUMBER)
//
// Plus two child entities populated separately:
// - Holiday (one record per closure date)
// - ClinicRequiredDocument (one record per required doc type)
export type ClinicStatus = 'ACTIVE' | 'TEMPORARILY_CLOSED' | 'PERMANENTLY_CLOSED';
// Matches the SELECT enum on ClinicRequiredDocument. Keep in sync with
// FortyTwoApps/helix-engage/src/objects/clinic-required-document.object.ts.
export type DocumentType =
| 'ID_PROOF'
| 'AADHAAR'
| 'PAN'
| 'REFERRAL_LETTER'
| 'PRESCRIPTION'
| 'INSURANCE_CARD'
| 'PREVIOUS_REPORTS'
| 'PHOTO'
| 'OTHER';
const DOCUMENT_TYPE_LABELS: Record<DocumentType, string> = {
ID_PROOF: 'Government ID',
AADHAAR: 'Aadhaar Card',
PAN: 'PAN Card',
REFERRAL_LETTER: 'Referral Letter',
PRESCRIPTION: 'Prescription',
INSURANCE_CARD: 'Insurance Card',
PREVIOUS_REPORTS: 'Previous Reports',
PHOTO: 'Passport Photo',
OTHER: 'Other',
};
const DOCUMENT_TYPE_ORDER: DocumentType[] = [
'ID_PROOF',
'AADHAAR',
'PAN',
'REFERRAL_LETTER',
'PRESCRIPTION',
'INSURANCE_CARD',
'PREVIOUS_REPORTS',
'PHOTO',
'OTHER',
];
export type ClinicHolidayEntry = {
// Populated on the existing record when editing; undefined for freshly
// added holidays the user hasn't saved yet. Used by the parent to
// decide create vs update vs delete on save.
id?: string;
date: string; // ISO yyyy-MM-dd
label: string;
};
export type ClinicFormValues = {
// Core clinic fields
clinicName: string;
addressStreet1: string;
addressStreet2: string;
addressCity: string;
addressState: string;
addressPostcode: string;
phone: string;
email: string;
// Schedule — simple pattern
openDays: DaySelection;
opensAt: string | null;
closesAt: string | null;
// Status + booking policy
status: ClinicStatus;
walkInAllowed: boolean;
onlineBooking: boolean;
cancellationWindowHours: string;
arriveEarlyMin: string;
// Children (persisted via separate mutations)
requiredDocumentTypes: DocumentType[];
holidays: ClinicHolidayEntry[];
};
export const emptyClinicFormValues = (): ClinicFormValues => ({
clinicName: '',
addressStreet1: '',
addressStreet2: '',
addressCity: '',
addressState: '',
addressPostcode: '',
phone: '',
email: '',
openDays: defaultDaySelection(),
opensAt: '09:00',
closesAt: '18:00',
status: 'ACTIVE',
walkInAllowed: true,
onlineBooking: true,
cancellationWindowHours: '24',
arriveEarlyMin: '15',
requiredDocumentTypes: [],
holidays: [],
});
const STATUS_ITEMS = [
{ id: 'ACTIVE', label: 'Active' },
{ id: 'TEMPORARILY_CLOSED', label: 'Temporarily closed' },
{ id: 'PERMANENTLY_CLOSED', label: 'Permanently closed' },
];
// Build the payload for `createClinic` / `updateClinic`. Holidays and
// required-documents are NOT included here — they're child records with
// their own mutations, orchestrated by the parent component after the
// clinic itself has been created and its id is known.
export const clinicCoreToGraphQLInput = (v: ClinicFormValues): Record<string, unknown> => {
const input: Record<string, unknown> = {
clinicName: v.clinicName.trim(),
status: v.status,
walkInAllowed: v.walkInAllowed,
onlineBooking: v.onlineBooking,
openMonday: v.openDays.monday,
openTuesday: v.openDays.tuesday,
openWednesday: v.openDays.wednesday,
openThursday: v.openDays.thursday,
openFriday: v.openDays.friday,
openSaturday: v.openDays.saturday,
openSunday: v.openDays.sunday,
};
// Column names on the platform come from the SDK `label`, not
// `name`. "Opens At" → opensAt, "Closes At" → closesAt.
if (v.opensAt) input.opensAt = v.opensAt;
if (v.closesAt) input.closesAt = v.closesAt;
const hasAddress =
v.addressStreet1 || v.addressCity || v.addressState || v.addressPostcode;
if (hasAddress) {
input.addressCustom = {
addressStreet1: v.addressStreet1 || null,
addressStreet2: v.addressStreet2 || null,
addressCity: v.addressCity || null,
addressState: v.addressState || null,
addressPostcode: v.addressPostcode || null,
addressCountry: 'India',
};
}
if (v.phone.trim()) {
input.phone = {
primaryPhoneNumber: v.phone.trim(),
primaryPhoneCountryCode: 'IN',
primaryPhoneCallingCode: '+91',
additionalPhones: null,
};
}
if (v.email.trim()) {
input.email = {
primaryEmail: v.email.trim(),
additionalEmails: null,
};
}
if (v.cancellationWindowHours.trim()) {
const n = Number(v.cancellationWindowHours);
if (!Number.isNaN(n)) input.cancellationWindowHours = n;
}
if (v.arriveEarlyMin.trim()) {
const n = Number(v.arriveEarlyMin);
if (!Number.isNaN(n)) input.arriveEarlyMin = n;
}
return input;
};
// Helper: build HolidayCreateInput payloads. Use after the clinic has
// been created and its id is known.
export const holidayInputsFromForm = (
v: ClinicFormValues,
clinicId: string,
): Array<Record<string, unknown>> =>
v.holidays.map((h) => ({
date: h.date,
reasonLabel: h.label.trim() || null, // column name matches the SDK label "Reason / Label"
clinicId,
}));
// Helper: build ClinicRequiredDocumentCreateInput payloads. One per
// selected document type.
export const requiredDocInputsFromForm = (
v: ClinicFormValues,
clinicId: string,
): Array<Record<string, unknown>> =>
v.requiredDocumentTypes.map((t) => ({
documentType: t,
clinicId,
}));
type ClinicFormProps = {
value: ClinicFormValues;
onChange: (value: ClinicFormValues) => void;
};
export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
const patch = (updates: Partial<ClinicFormValues>) => onChange({ ...value, ...updates });
// Required-docs add/remove handlers. The user picks a type from the
// dropdown; it gets added to the list; the pill row below shows
// selected types with an X to remove. Dropdown filters out
// already-selected types so the user can't pick duplicates.
const availableDocTypes = DOCUMENT_TYPE_ORDER.filter(
(t) => !value.requiredDocumentTypes.includes(t),
).map((t) => ({ id: t, label: DOCUMENT_TYPE_LABELS[t] }));
const addDocType = (type: DocumentType) => {
if (value.requiredDocumentTypes.includes(type)) return;
patch({ requiredDocumentTypes: [...value.requiredDocumentTypes, type] });
};
const removeDocType = (type: DocumentType) => {
patch({
requiredDocumentTypes: value.requiredDocumentTypes.filter((t) => t !== type),
});
};
// Holiday add/remove handlers. Freshly-added entries have no `id`
// field; the parent's save flow treats those as "create".
const addHoliday = () => {
const todayIso = today(getLocalTimeZone()).toString();
patch({ holidays: [...value.holidays, { date: todayIso, label: '' }] });
};
const updateHoliday = (index: number, updates: Partial<ClinicHolidayEntry>) => {
const next = [...value.holidays];
next[index] = { ...next[index], ...updates };
patch({ holidays: next });
};
const removeHoliday = (index: number) => {
patch({ holidays: value.holidays.filter((_, i) => i !== index) });
};
return (
<div className="flex flex-col gap-4">
<Input
label="Clinic name"
isRequired
placeholder="e.g. Main Hospital Campus"
value={value.clinicName}
onChange={(v) => patch({ clinicName: v })}
/>
<Select
label="Status"
placeholder="Select status"
items={STATUS_ITEMS}
selectedKey={value.status}
onSelectionChange={(key) => patch({ status: key as ClinicStatus })}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
{/* Address */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Address
</p>
<Input
label="Street address"
placeholder="Street / building / landmark"
value={value.addressStreet1}
onChange={(v) => patch({ addressStreet1: v })}
/>
<Input
label="Area / locality (optional)"
placeholder="Area, neighbourhood"
value={value.addressStreet2}
onChange={(v) => patch({ addressStreet2: v })}
/>
<div className="grid grid-cols-2 gap-3">
<Input
label="City"
placeholder="Bengaluru"
value={value.addressCity}
onChange={(v) => patch({ addressCity: v })}
/>
<Input
label="State"
placeholder="Karnataka"
value={value.addressState}
onChange={(v) => patch({ addressState: v })}
/>
</div>
<Input
label="Postcode"
placeholder="560034"
value={value.addressPostcode}
onChange={(v) => patch({ addressPostcode: v })}
/>
</div>
{/* Contact */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Contact
</p>
<Input
label="Phone"
type="tel"
placeholder="9876543210"
value={value.phone}
onChange={(v) => patch({ phone: v })}
/>
<Input
label="Email"
type="email"
placeholder="branch@hospital.com"
value={value.email}
onChange={(v) => patch({ email: v })}
/>
</div>
{/* Visiting hours — day pills + single time range */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Visiting hours
</p>
<DaySelector
label="Open days"
hint="Pick the days this clinic is open. The time range below applies to every selected day."
value={value.openDays}
onChange={(openDays) => patch({ openDays })}
/>
<div className="grid grid-cols-2 gap-3">
<TimePicker
label="Opens at"
value={value.opensAt}
onChange={(opensAt) => patch({ opensAt })}
/>
<TimePicker
label="Closes at"
value={value.closesAt}
onChange={(closesAt) => patch({ closesAt })}
/>
</div>
</div>
{/* Holiday closures */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Holiday closures (optional)
</p>
{value.holidays.length === 0 && (
<p className="text-xs text-tertiary">
No holidays configured. Add dates when this clinic is closed (Diwali,
Republic Day, maintenance days, etc.).
</p>
)}
{value.holidays.map((h, idx) => (
<div
key={idx}
className="flex items-end gap-2 rounded-lg border border-secondary bg-secondary p-3"
>
<div className="shrink-0">
<span className="mb-1 block text-xs font-medium text-secondary">
Date
</span>
<DatePicker
value={h.date ? parseDate(h.date) : null}
onChange={(dv: DateValue | null) =>
updateHoliday(idx, { date: dv ? dv.toString() : '' })
}
// Holidays must be today or in the future — you
// can't observe a holiday that already passed.
minValue={today(getLocalTimeZone())}
/>
</div>
<div className="flex-1">
<Input
label="Reason"
placeholder="e.g. Diwali"
value={h.label}
onChange={(label) => updateHoliday(idx, { label })}
/>
</div>
<Button
size="sm"
color="tertiary-destructive"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faTrash} className={className} />
)}
onClick={() => removeHoliday(idx)}
>
Remove
</Button>
</div>
))}
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faPlus} className={className} />
)}
onClick={addHoliday}
className="self-start"
>
Add holiday
</Button>
</div>
{/* Booking policy */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Booking policy
</p>
<div className="flex flex-col gap-3 rounded-lg border border-secondary bg-secondary p-4">
<Toggle
label="Walk-ins allowed"
isSelected={value.walkInAllowed}
onChange={(checked) => patch({ walkInAllowed: checked })}
/>
<Toggle
label="Accept online bookings"
isSelected={value.onlineBooking}
onChange={(checked) => patch({ onlineBooking: checked })}
/>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="Cancel window (hours)"
type="number"
value={value.cancellationWindowHours}
onChange={(v) => patch({ cancellationWindowHours: v })}
/>
<Input
label="Arrive early (min)"
type="number"
value={value.arriveEarlyMin}
onChange={(v) => patch({ arriveEarlyMin: v })}
/>
</div>
</div>
{/* Required documents — multi-select → pills */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Required documents (optional)
</p>
{availableDocTypes.length > 0 && (
<Select
label="Add a required document"
placeholder="Pick a document type..."
items={availableDocTypes}
selectedKey={null}
onSelectionChange={(key) => {
if (key) addDocType(key as DocumentType);
}}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
)}
{value.requiredDocumentTypes.length > 0 && (
<div className="flex flex-wrap gap-2">
{value.requiredDocumentTypes.map((t) => (
<button
key={t}
type="button"
onClick={() => removeDocType(t)}
className="group flex items-center gap-2 rounded-full border border-brand bg-brand-secondary px-3 py-1.5 text-sm font-medium text-brand-secondary transition hover:bg-brand-primary_hover"
>
{DOCUMENT_TYPE_LABELS[t]}
<FontAwesomeIcon
icon={faTrash}
className="size-3 text-fg-quaternary group-hover:text-fg-error-primary"
/>
</button>
))}
</div>
)}
{value.requiredDocumentTypes.length === 0 && (
<p className="text-xs text-tertiary">
No required documents. Patients won't be asked to bring anything.
</p>
)}
</div>
</div>
);
};

401
src/components/forms/doctor-form.tsx
View File

@@ -1,401 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select';
import { Toggle } from '@/components/base/toggle/toggle';
import { Button } from '@/components/base/buttons/button';
import { TimePicker } from '@/components/application/date-picker/time-picker';
// Doctor form — hospital-wide profile with multi-clinic, multi-day
// visiting schedule. Each row in the "visiting schedule" section maps
// to one DoctorVisitSlot child record. The parent component owns the
// mutation orchestration (create doctor, then create each slot).
//
// Previously the form had a single `clinicId` dropdown + a free-text
// `visitingHours` textarea. Both dropped — doctors are now hospital-
// wide, and their presence at each clinic is expressed via the
// DoctorVisitSlot records.
export type DoctorDepartment =
| 'CARDIOLOGY'
| 'GYNECOLOGY'
| 'ORTHOPEDICS'
| 'GENERAL_MEDICINE'
| 'ENT'
| 'DERMATOLOGY'
| 'PEDIATRICS'
| 'ONCOLOGY';
// Matches the DoctorVisitSlot.dayOfWeek SELECT enum on the SDK entity.
export type DayOfWeek =
| 'MONDAY'
| 'TUESDAY'
| 'WEDNESDAY'
| 'THURSDAY'
| 'FRIDAY'
| 'SATURDAY'
| 'SUNDAY';
export type DoctorVisitSlotEntry = {
// Populated on existing records when editing; undefined for
// freshly-added rows. Used by the parent to decide create vs
// update vs delete on save.
id?: string;
clinicId: string;
dayOfWeek: DayOfWeek | '';
startTime: string | null;
endTime: string | null;
};
export type DoctorFormValues = {
firstName: string;
lastName: string;
department: DoctorDepartment | '';
specialty: string;
qualifications: string;
yearsOfExperience: string;
consultationFeeNew: string;
consultationFeeFollowUp: string;
phone: string;
email: string;
registrationNumber: string;
active: boolean;
// Multi-clinic, multi-day visiting schedule. One entry per slot.
visitSlots: DoctorVisitSlotEntry[];
};
export const emptyDoctorFormValues = (): DoctorFormValues => ({
firstName: '',
lastName: '',
department: '',
specialty: '',
qualifications: '',
yearsOfExperience: '',
consultationFeeNew: '',
consultationFeeFollowUp: '',
phone: '',
email: '',
registrationNumber: '',
active: true,
visitSlots: [],
});
const DEPARTMENT_ITEMS: { id: DoctorDepartment; label: string }[] = [
{ id: 'CARDIOLOGY', label: 'Cardiology' },
{ id: 'GYNECOLOGY', label: 'Gynecology' },
{ id: 'ORTHOPEDICS', label: 'Orthopedics' },
{ id: 'GENERAL_MEDICINE', label: 'General medicine' },
{ id: 'ENT', label: 'ENT' },
{ id: 'DERMATOLOGY', label: 'Dermatology' },
{ id: 'PEDIATRICS', label: 'Pediatrics' },
{ id: 'ONCOLOGY', label: 'Oncology' },
];
const DAY_ITEMS: { id: DayOfWeek; label: string }[] = [
{ id: 'MONDAY', label: 'Monday' },
{ id: 'TUESDAY', label: 'Tuesday' },
{ id: 'WEDNESDAY', label: 'Wednesday' },
{ id: 'THURSDAY', label: 'Thursday' },
{ id: 'FRIDAY', label: 'Friday' },
{ id: 'SATURDAY', label: 'Saturday' },
{ id: 'SUNDAY', label: 'Sunday' },
];
// Build the createDoctor / updateDoctor mutation payload. Visit slots
// are persisted via a separate mutation chain — see the parent
// component's handleSave.
export const doctorCoreToGraphQLInput = (v: DoctorFormValues): Record<string, unknown> => {
const input: Record<string, unknown> = {
fullName: {
firstName: v.firstName.trim(),
lastName: v.lastName.trim(),
},
active: v.active,
};
if (v.department) input.department = v.department;
if (v.specialty.trim()) input.specialty = v.specialty.trim();
if (v.qualifications.trim()) input.qualifications = v.qualifications.trim();
if (v.yearsOfExperience.trim()) {
const n = Number(v.yearsOfExperience);
if (!Number.isNaN(n)) input.yearsOfExperience = n;
}
if (v.consultationFeeNew.trim()) {
const n = Number(v.consultationFeeNew);
if (!Number.isNaN(n)) {
input.consultationFeeNew = {
amountMicros: Math.round(n * 1_000_000),
currencyCode: 'INR',
};
}
}
if (v.consultationFeeFollowUp.trim()) {
const n = Number(v.consultationFeeFollowUp);
if (!Number.isNaN(n)) {
input.consultationFeeFollowUp = {
amountMicros: Math.round(n * 1_000_000),
currencyCode: 'INR',
};
}
}
if (v.phone.trim()) {
input.phone = {
primaryPhoneNumber: v.phone.trim(),
primaryPhoneCountryCode: 'IN',
primaryPhoneCallingCode: '+91',
additionalPhones: null,
};
}
if (v.email.trim()) {
input.email = {
primaryEmail: v.email.trim(),
additionalEmails: null,
};
}
if (v.registrationNumber.trim()) input.registrationNumber = v.registrationNumber.trim();
return input;
};
// Build one DoctorVisitSlotCreateInput per complete slot. Drops any
// half-filled rows silently — the form can't validate mid-entry
// without blocking the user.
export const visitSlotInputsFromForm = (
v: DoctorFormValues,
doctorId: string,
): Array<Record<string, unknown>> =>
v.visitSlots
.filter((s) => s.clinicId && s.dayOfWeek && s.startTime && s.endTime)
.map((s) => ({
doctorId,
clinicId: s.clinicId,
dayOfWeek: s.dayOfWeek,
startTime: s.startTime,
endTime: s.endTime,
}));
type ClinicOption = { id: string; label: string };
type DoctorFormProps = {
value: DoctorFormValues;
onChange: (value: DoctorFormValues) => void;
clinics: ClinicOption[];
};
export const DoctorForm = ({ value, onChange, clinics }: DoctorFormProps) => {
const patch = (updates: Partial<DoctorFormValues>) => onChange({ ...value, ...updates });
// Visit-slot handlers — add/edit/remove inline inside the form.
const addSlot = () => {
patch({
visitSlots: [
...value.visitSlots,
{ clinicId: clinics[0]?.id ?? '', dayOfWeek: '', startTime: '09:00', endTime: '13:00' },
],
});
};
const updateSlot = (index: number, updates: Partial<DoctorVisitSlotEntry>) => {
const next = [...value.visitSlots];
next[index] = { ...next[index], ...updates };
patch({ visitSlots: next });
};
const removeSlot = (index: number) => {
patch({ visitSlots: value.visitSlots.filter((_, i) => i !== index) });
};
return (
<div className="flex flex-col gap-4">
<div className="grid grid-cols-2 gap-3">
<Input
label="First name"
isRequired
placeholder="Ananya"
value={value.firstName}
onChange={(v) => patch({ firstName: v })}
/>
<Input
label="Last name"
isRequired
placeholder="Rao"
value={value.lastName}
onChange={(v) => patch({ lastName: v })}
/>
</div>
<Select
label="Department"
placeholder="Select department"
items={DEPARTMENT_ITEMS}
selectedKey={value.department || null}
onSelectionChange={(key) => patch({ department: (key as DoctorDepartment) || '' })}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
<Input
label="Specialty"
placeholder="e.g. Interventional cardiology"
value={value.specialty}
onChange={(v) => patch({ specialty: v })}
/>
<div className="grid grid-cols-2 gap-3">
<Input
label="Qualifications"
placeholder="MBBS, MD"
value={value.qualifications}
onChange={(v) => patch({ qualifications: v })}
/>
<Input
label="Experience (years)"
type="number"
value={value.yearsOfExperience}
onChange={(v) => patch({ yearsOfExperience: v })}
/>
</div>
{/* Visiting schedule — one row per clinic/day slot */}
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Visiting schedule
</p>
{clinics.length === 0 ? (
<div className="rounded-lg border border-dashed border-warning bg-warning-primary p-4">
<p className="text-sm font-semibold text-warning-primary">Add a clinic first</p>
<p className="mt-1 text-xs text-tertiary">
You need at least one clinic before you can schedule doctor visits.
</p>
</div>
) : (
<>
{value.visitSlots.length === 0 && (
<p className="text-xs text-tertiary">
No visit slots. Add rows for each clinic + day this doctor visits.
</p>
)}
{value.visitSlots.map((slot, idx) => (
<div
key={idx}
className="flex flex-col gap-3 rounded-lg border border-secondary bg-secondary p-3"
>
<div className="grid grid-cols-2 gap-3">
<Select
label="Clinic"
placeholder="Select clinic"
items={clinics}
selectedKey={slot.clinicId || null}
onSelectionChange={(key) =>
updateSlot(idx, { clinicId: (key as string) || '' })
}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
<Select
label="Day"
placeholder="Select day"
items={DAY_ITEMS}
selectedKey={slot.dayOfWeek || null}
onSelectionChange={(key) =>
updateSlot(idx, { dayOfWeek: (key as DayOfWeek) || '' })
}
>
{(item) => <Select.Item id={item.id} label={item.label} />}
</Select>
</div>
<div className="grid grid-cols-2 gap-3">
<TimePicker
label="Start time"
value={slot.startTime}
onChange={(startTime) => updateSlot(idx, { startTime })}
/>
<TimePicker
label="End time"
value={slot.endTime}
onChange={(endTime) => updateSlot(idx, { endTime })}
/>
</div>
<div className="flex justify-end">
<Button
size="sm"
color="tertiary-destructive"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faTrash} className={className} />
)}
onClick={() => removeSlot(idx)}
>
Remove slot
</Button>
</div>
</div>
))}
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faPlus} className={className} />
)}
onClick={addSlot}
className="self-start"
>
Add visit slot
</Button>
</>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="New consult fee (₹)"
type="number"
placeholder="800"
value={value.consultationFeeNew}
onChange={(v) => patch({ consultationFeeNew: v })}
/>
<Input
label="Follow-up fee (₹)"
type="number"
placeholder="500"
value={value.consultationFeeFollowUp}
onChange={(v) => patch({ consultationFeeFollowUp: v })}
/>
</div>
<div className="flex flex-col gap-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Contact</p>
<Input
label="Phone"
type="tel"
placeholder="9876543210"
value={value.phone}
onChange={(v) => patch({ phone: v })}
/>
<Input
label="Email"
type="email"
placeholder="doctor@hospital.com"
value={value.email}
onChange={(v) => patch({ email: v })}
/>
<Input
label="Registration number"
placeholder="Medical council reg no."
value={value.registrationNumber}
onChange={(v) => patch({ registrationNumber: v })}
/>
</div>
<div className="flex flex-col gap-2 rounded-lg border border-secondary bg-secondary p-4">
<Toggle
label="Accepting appointments"
isSelected={value.active}
onChange={(checked) => patch({ active: checked })}
/>
<p className="text-xs text-tertiary">
Inactive doctors are hidden from appointment booking and call-desk transfer lists.
</p>
</div>
</div>
);
};

205
src/components/forms/employee-create-form.tsx
View File

@@ -1,205 +0,0 @@
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash, faRotate } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select';
// In-place employee creation form used by the Team wizard step and
// the /settings/team slideout. Replaces the multi-email InviteMemberForm
// — this project never uses email invitations, all employees are
// created directly with a temp password that the admin hands out.
//
// Two modes:
//
// - 'create': all fields editable. The temp password is auto-generated
// on form mount (parent does this) and revealed via an eye icon. A
// refresh icon next to the eye lets the admin re-roll the password
// before saving.
//
// - 'edit': email is read-only (it's the login id, can't change),
// password field is hidden entirely (no reset-password from the
// wizard). Only firstName/lastName/role can change.
//
// SIP seat assignment is intentionally NOT in this form — it lives
// exclusively in the Telephony wizard step, so there's a single source
// of truth for "who is on which seat" and admins don't have to remember
// two places to manage the same thing.
export type RoleOption = {
id: string;
label: string;
supportingText?: string;
};
export type EmployeeCreateFormValues = {
firstName: string;
lastName: string;
email: string;
password: string;
roleId: string;
};
export const emptyEmployeeCreateFormValues: EmployeeCreateFormValues = {
firstName: '',
lastName: '',
email: '',
password: '',
roleId: '',
};
// Random temp password generator. Skips visually-ambiguous chars
// (0/O/1/l/I) so admins can read the password back over a phone call
// without typo risk. 11 alphanumerics + 1 symbol = 12 chars total.
export const generateTempPassword = (): string => {
const chars = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
const symbols = '!@#$';
let pwd = '';
for (let i = 0; i < 11; i++) {
pwd += chars[Math.floor(Math.random() * chars.length)];
}
pwd += symbols[Math.floor(Math.random() * symbols.length)];
return pwd;
};
type EmployeeCreateFormProps = {
value: EmployeeCreateFormValues;
onChange: (value: EmployeeCreateFormValues) => void;
roles: RoleOption[];
// 'create' = full form, 'edit' = name + role only.
mode?: 'create' | 'edit';
};
// Eye / eye-slash button rendered inside the password field's
// trailing slot. Stays internal to this form since password reveal
// is the only place we need it right now.
const EyeButton = ({ visible, onClick, title }: { visible: boolean; onClick: () => void; title: string }) => (
<button
type="button"
onClick={onClick}
title={title}
aria-label={title}
className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-tertiary_hover"
>
<FontAwesomeIcon icon={visible ? faEyeSlash : faEye} className="size-4" />
</button>
);
const RegenerateButton = ({ onClick }: { onClick: () => void }) => (
<button
type="button"
onClick={onClick}
title="Generate a new password"
aria-label="Generate a new password"
className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-tertiary_hover"
>
<FontAwesomeIcon icon={faRotate} className="size-4" />
</button>
);
// Kept simple — name + contact + creds + role. No avatar, no phone,
// no title. The goal is to get employees onto the system fast; they
// can fill in the rest from their own profile page later.
export const EmployeeCreateForm = ({
value,
onChange,
roles,
mode = 'create',
}: EmployeeCreateFormProps) => {
const [showPassword, setShowPassword] = useState(false);
const patch = (partial: Partial<EmployeeCreateFormValues>) =>
onChange({ ...value, ...partial });
const isEdit = mode === 'edit';
return (
<div className="flex flex-col gap-4">
<div className="grid grid-cols-2 gap-3">
<Input
label="First name"
placeholder="Priya"
value={value.firstName}
onChange={(v) => patch({ firstName: v })}
isRequired
/>
<Input
label="Last name"
placeholder="Sharma"
value={value.lastName}
onChange={(v) => patch({ lastName: v })}
/>
</div>
<Input
label="Email"
type="email"
placeholder="priya@hospital.com"
value={value.email}
onChange={(v) => patch({ email: v })}
isRequired={!isEdit}
isReadOnly={isEdit}
isDisabled={isEdit}
hint={
isEdit
? 'Email is the login id and cannot be changed.'
: 'This is the login id for the employee. Cannot be changed later.'
}
/>
{!isEdit && (
<div>
<label className="block text-sm font-medium text-secondary">
Temporary password <span className="text-error-primary">*</span>
</label>
<div className="mt-1.5 flex items-center gap-2 rounded-lg border border-secondary bg-primary px-3 shadow-xs focus-within:border-brand focus-within:ring-2 focus-within:ring-brand-100">
<input
type={showPassword ? 'text' : 'password'}
value={value.password}
onChange={(e) => patch({ password: e.target.value })}
placeholder="Auto-generated"
className="flex-1 bg-transparent py-2 font-mono text-sm text-primary placeholder:text-placeholder outline-none"
/>
<EyeButton
visible={showPassword}
onClick={() => setShowPassword((v) => !v)}
title={showPassword ? 'Hide password' : 'Show password'}
/>
<RegenerateButton
onClick={() => {
patch({ password: generateTempPassword() });
setShowPassword(true);
}}
/>
</div>
<p className="mt-1 text-xs text-tertiary">
Auto-generated. Click the refresh icon to roll a new one. Share with the
employee directly — they should change it after first login.
</p>
</div>
)}
<Select
label="Role"
placeholder={roles.length === 0 ? 'No roles available' : 'Select a role'}
isDisabled={roles.length === 0}
items={roles}
selectedKey={value.roleId || null}
onSelectionChange={(key) => patch({ roleId: (key as string) || '' })}
isRequired
>
{(item) => (
<Select.Item
id={item.id}
label={item.label}
supportingText={item.supportingText}
/>
)}
</Select>
<div className="rounded-lg border border-dashed border-secondary bg-secondary p-3 text-xs text-tertiary">
SIP seats are managed in the <b>Telephony</b> step — create the employee here
first, then assign them a seat there.
</div>
</div>
);
};

202
src/components/forms/telephony-form.tsx
View File

@@ -1,202 +0,0 @@
import { Input } from '@/components/base/input/input';
// Telephony form — covers Ozonetel cloud-call-center, the Ozonetel WebRTC
// gateway, and Exotel REST API credentials. Mirrors the TelephonyConfig shape
// in helix-engage-server/src/config/telephony.defaults.ts.
//
// Secrets (ozonetel.agentPassword, exotel.apiToken) come back from the GET
// endpoint as the sentinel '***masked***' — the form preserves that sentinel
// untouched unless the admin actually edits the field, in which case the
// backend overwrites the stored value. This is the same convention used by
// TelephonyConfigService.getMaskedConfig / updateConfig.
export type TelephonyFormValues = {
ozonetel: {
agentId: string;
agentPassword: string;
did: string;
sipId: string;
campaignName: string;
adminUsername: string;
adminPassword: string;
};
sip: {
domain: string;
wsPort: string;
};
exotel: {
apiKey: string;
apiToken: string;
accountSid: string;
subdomain: string;
};
};
export const emptyTelephonyFormValues = (): TelephonyFormValues => ({
ozonetel: {
agentId: '',
agentPassword: '',
did: '',
sipId: '',
campaignName: '',
adminUsername: '',
adminPassword: '',
},
sip: {
domain: 'blr-pub-rtc4.ozonetel.com',
wsPort: '444',
},
exotel: {
apiKey: '',
apiToken: '',
accountSid: '',
subdomain: 'api.exotel.com',
},
});
type TelephonyFormProps = {
value: TelephonyFormValues;
onChange: (value: TelephonyFormValues) => void;
};
export const TelephonyForm = ({ value, onChange }: TelephonyFormProps) => {
const patchOzonetel = (updates: Partial<TelephonyFormValues['ozonetel']>) =>
onChange({ ...value, ozonetel: { ...value.ozonetel, ...updates } });
const patchSip = (updates: Partial<TelephonyFormValues['sip']>) =>
onChange({ ...value, sip: { ...value.sip, ...updates } });
const patchExotel = (updates: Partial<TelephonyFormValues['exotel']>) =>
onChange({ ...value, exotel: { ...value.exotel, ...updates } });
return (
<div className="flex flex-col gap-8">
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Ozonetel Cloud Agent</h3>
<p className="mt-1 text-xs text-tertiary">
Outbound dialing, SIP registration, and agent provisioning. Get these values from your
Ozonetel dashboard under Admin → Users and Numbers.
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="Agent ID"
placeholder="e.g. agent001"
value={value.ozonetel.agentId}
onChange={(v) => patchOzonetel({ agentId: v })}
/>
<Input
label="Agent password"
type="password"
placeholder="Leave '***masked***' to keep current"
value={value.ozonetel.agentPassword}
onChange={(v) => patchOzonetel({ agentPassword: v })}
/>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="Default DID"
placeholder="Primary hospital number"
value={value.ozonetel.did}
onChange={(v) => patchOzonetel({ did: v })}
/>
<Input
label="SIP ID"
placeholder="Softphone extension"
value={value.ozonetel.sipId}
onChange={(v) => patchOzonetel({ sipId: v })}
/>
</div>
<Input
label="Campaign name"
placeholder="CloudAgent campaign for outbound dial"
value={value.ozonetel.campaignName}
onChange={(v) => patchOzonetel({ campaignName: v })}
/>
<div>
<h4 className="mt-2 text-xs font-semibold text-secondary">Supervisor Access</h4>
<p className="mt-0.5 text-xs text-tertiary">
Ozonetel portal admin credentials — required for supervisor barge/whisper/listen.
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="Admin username"
placeholder="Ozonetel portal admin login"
value={value.ozonetel.adminUsername}
onChange={(v) => patchOzonetel({ adminUsername: v })}
/>
<Input
label="Admin password"
type="password"
placeholder="Leave '***masked***' to keep current"
value={value.ozonetel.adminPassword}
onChange={(v) => patchOzonetel({ adminPassword: v })}
/>
</div>
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">SIP Gateway (WebRTC)</h3>
<p className="mt-1 text-xs text-tertiary">
Used by the staff portal softphone. Defaults work for most Indian Ozonetel tenants — only
change if Ozonetel support instructs you to.
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="SIP domain"
placeholder="blr-pub-rtc4.ozonetel.com"
value={value.sip.domain}
onChange={(v) => patchSip({ domain: v })}
/>
<Input
label="WebSocket port"
placeholder="444"
value={value.sip.wsPort}
onChange={(v) => patchSip({ wsPort: v })}
/>
</div>
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Exotel (SMS + inbound numbers)</h3>
<p className="mt-1 text-xs text-tertiary">
Optional — only required if you use Exotel for SMS or want inbound number management from
this portal.
</p>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="API key"
placeholder="Exotel API key"
value={value.exotel.apiKey}
onChange={(v) => patchExotel({ apiKey: v })}
/>
<Input
label="API token"
type="password"
placeholder="Leave '***masked***' to keep current"
value={value.exotel.apiToken}
onChange={(v) => patchExotel({ apiToken: v })}
/>
</div>
<div className="grid grid-cols-2 gap-3">
<Input
label="Account SID"
placeholder="Exotel account SID"
value={value.exotel.accountSid}
onChange={(v) => patchExotel({ accountSid: v })}
/>
<Input
label="Subdomain"
placeholder="api.exotel.com"
value={value.exotel.subdomain}
onChange={(v) => patchExotel({ subdomain: v })}
/>
</div>
</section>
</div>
);
};

167
src/components/forms/widget-form.tsx
View File

@@ -1,167 +0,0 @@
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input';
import { Toggle } from '@/components/base/toggle/toggle';
import { Button } from '@/components/base/buttons/button';
// Widget form — mirrors WidgetConfig from
// helix-engage-server/src/config/widget.defaults.ts. The site key and site ID
// are read-only (generated / rotated by the backend), the rest are editable.
//
// allowedOrigins is an origin allowlist — an empty list means "any origin"
// which is useful for testing but should be tightened in production.
export type WidgetFormValues = {
enabled: boolean;
url: string;
allowedOrigins: string[];
embed: {
loginPage: boolean;
};
};
export const emptyWidgetFormValues = (): WidgetFormValues => ({
enabled: true,
url: '',
allowedOrigins: [],
embed: {
loginPage: false,
},
});
type WidgetFormProps = {
value: WidgetFormValues;
onChange: (value: WidgetFormValues) => void;
};
export const WidgetForm = ({ value, onChange }: WidgetFormProps) => {
const [originDraft, setOriginDraft] = useState('');
const addOrigin = () => {
const trimmed = originDraft.trim();
if (!trimmed) return;
if (value.allowedOrigins.includes(trimmed)) {
setOriginDraft('');
return;
}
onChange({ ...value, allowedOrigins: [...value.allowedOrigins, trimmed] });
setOriginDraft('');
};
const removeOrigin = (origin: string) => {
onChange({ ...value, allowedOrigins: value.allowedOrigins.filter((o) => o !== origin) });
};
return (
<div className="flex flex-col gap-8">
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Activation</h3>
<p className="mt-1 text-xs text-tertiary">
When disabled, widget.js returns an empty response and the script no-ops on the
embedding page. Use this as a kill switch if something goes wrong in production.
</p>
</div>
<div className="rounded-lg border border-secondary bg-secondary p-4">
<Toggle
label="Website widget enabled"
isSelected={value.enabled}
onChange={(checked) => onChange({ ...value, enabled: checked })}
/>
</div>
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Hosting</h3>
<p className="mt-1 text-xs text-tertiary">
Public base URL where widget.js is served from. Leave blank to use the same origin as
this sidecar (the common case).
</p>
</div>
<Input
label="Public URL"
placeholder="https://widget.hospital.com"
value={value.url}
onChange={(v) => onChange({ ...value, url: v })}
/>
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Allowed origins</h3>
<p className="mt-1 text-xs text-tertiary">
Origins where the widget may be embedded. An empty list means any origin is accepted
(test mode). In production, list every hospital website + staging environment
explicitly.
</p>
</div>
<div className="flex items-center gap-2">
<div className="flex-1">
<Input
placeholder="https://hospital.com"
value={originDraft}
onChange={setOriginDraft}
/>
</div>
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faPlus} className={className} />
)}
onClick={addOrigin}
isDisabled={!originDraft.trim()}
>
Add
</Button>
</div>
{value.allowedOrigins.length === 0 ? (
<p className="rounded-lg border border-dashed border-secondary bg-secondary p-4 text-center text-xs text-tertiary">
Any origin allowed — widget runs in test mode.
</p>
) : (
<ul className="flex flex-col gap-2 rounded-lg border border-secondary bg-secondary p-3">
{value.allowedOrigins.map((origin) => (
<li
key={origin}
className="flex items-center justify-between rounded-md bg-primary px-3 py-2 text-sm"
>
<span className="font-mono text-primary">{origin}</span>
<button
type="button"
onClick={() => removeOrigin(origin)}
className="flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-error-primary"
title="Remove origin"
>
<FontAwesomeIcon icon={faTrash} className="size-3" />
</button>
</li>
))}
</ul>
)}
</section>
<section className="flex flex-col gap-4">
<div>
<h3 className="text-sm font-semibold text-primary">Embed surfaces</h3>
<p className="mt-1 text-xs text-tertiary">
Where inside this application the widget should auto-render. Keep these off if you
only plan to embed it on your public hospital website.
</p>
</div>
<div className="rounded-lg border border-secondary bg-secondary p-4">
<Toggle
label="Show on staff login page"
hint="Useful for smoke-testing without a public landing page."
isSelected={value.embed.loginPage}
onChange={(checked) =>
onChange({ ...value, embed: { ...value.embed, loginPage: checked } })
}
/>
</div>
</section>
</div>
);
};

66
src/components/layout/app-shell.tsx
View File

@@ -8,13 +8,12 @@ import { useSip } from '@/providers/sip-provider';
import { CallWidget } from '@/components/call-desk/call-widget'; import { CallWidget } from '@/components/call-desk/call-widget';
import { MaintOtpModal } from '@/components/modals/maint-otp-modal'; import { MaintOtpModal } from '@/components/modals/maint-otp-modal';
import { AgentStatusToggle } from '@/components/call-desk/agent-status-toggle'; import { AgentStatusToggle } from '@/components/call-desk/agent-status-toggle';
import { ResumeSetupBanner } from '@/components/setup/resume-setup-banner'; import { NotificationBell } from './notification-bell';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { useAuth } from '@/providers/auth-provider'; import { useAuth } from '@/providers/auth-provider';
import { useData } from '@/providers/data-provider'; import { useData } from '@/providers/data-provider';
import { useMaintShortcuts } from '@/hooks/use-maint-shortcuts'; import { useMaintShortcuts } from '@/hooks/use-maint-shortcuts';
import { useNetworkStatus } from '@/hooks/use-network-status'; import { useNetworkStatus } from '@/hooks/use-network-status';
// import { GlobalSearch } from '@/components/shared/global-search';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
@@ -24,7 +23,7 @@ interface AppShellProps {
export const AppShell = ({ children }: AppShellProps) => { export const AppShell = ({ children }: AppShellProps) => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const { isCCAgent } = useAuth(); const { isCCAgent, isAdmin } = useAuth();
const { isOpen, activeAction, close } = useMaintShortcuts(); const { isOpen, activeAction, close } = useMaintShortcuts();
const { connectionStatus, isRegistered } = useSip(); const { connectionStatus, isRegistered } = useSip();
const networkQuality = useNetworkStatus(); const networkQuality = useNetworkStatus();
@@ -93,6 +92,23 @@ export const AppShell = ({ children }: AppShellProps) => {
</div> </div>
) : undefined; ) : undefined;
// Load external script for all authenticated users
useEffect(() => {
// Expose API URL to external script
const apiUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
(window as any).HELIX_API_URL = apiUrl;
const script = document.createElement('script');
script.src = `https://cdn.jsdelivr.net/gh/moulichand16/Test@d0a79d0/script.js`;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
delete (window as any).HELIX_API_URL;
};
}, []);
// Heartbeat: keep agent session alive in Redis (CC agents only) // Heartbeat: keep agent session alive in Redis (CC agents only)
useEffect(() => { useEffect(() => {
if (!isCCAgent) return; if (!isCCAgent) return;
@@ -117,29 +133,31 @@ export const AppShell = ({ children }: AppShellProps) => {
<div className="flex h-screen bg-primary"> <div className="flex h-screen bg-primary">
<Sidebar activeUrl={pathname} /> <Sidebar activeUrl={pathname} />
<div className="flex flex-1 flex-col overflow-hidden"> <div className="flex flex-1 flex-col overflow-hidden">
{/* Agent top bar — network indicator + status toggle (agents only) */} {/* Persistent top bar — visible on all pages */}
{hasAgentConfig && ( {(hasAgentConfig || isAdmin) && (
<div className="flex shrink-0 items-center gap-2 border-b border-secondary px-4 py-2"> <div className="flex shrink-0 items-center justify-end gap-2 border-b border-secondary px-4 py-2">
<div className="ml-auto flex items-center gap-2"> {isAdmin && <NotificationBell />}
<div className={cx( {hasAgentConfig && (
'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium', <>
networkQuality === 'good' <div className={cx(
? 'bg-success-primary text-success-primary' 'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium',
: networkQuality === 'offline' networkQuality === 'good'
? 'bg-error-secondary text-error-primary' ? 'bg-success-primary text-success-primary'
: 'bg-warning-secondary text-warning-primary', : networkQuality === 'offline'
)}> ? 'bg-error-secondary text-error-primary'
<FontAwesomeIcon : 'bg-warning-secondary text-warning-primary',
icon={networkQuality === 'offline' ? faWifiSlash : faWifi} )}>
className="size-3" <FontAwesomeIcon
/> icon={networkQuality === 'offline' ? faWifiSlash : faWifi}
{networkQuality === 'good' ? 'Connected' : networkQuality === 'offline' ? 'No connection' : 'Unstable'} className="size-3"
</div> />
<AgentStatusToggle isRegistered={isRegistered} connectionStatus={connectionStatus} /> {networkQuality === 'good' ? 'Connected' : networkQuality === 'offline' ? 'No connection' : 'Unstable'}
</div> </div>
<AgentStatusToggle isRegistered={isRegistered} connectionStatus={connectionStatus} />
</>
)}
</div> </div>
)} )}
<ResumeSetupBanner />
<main className="flex flex-1 flex-col overflow-hidden">{children}</main> <main className="flex flex-1 flex-col overflow-hidden">{children}</main>
</div> </div>
{isCCAgent && pathname !== '/' && pathname !== '/call-desk' && <CallWidget />} {isCCAgent && pathname !== '/' && pathname !== '/call-desk' && <CallWidget />}

40
src/components/layout/notification-bell.tsx
View File

@@ -2,14 +2,46 @@ import { useState, useRef, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faTriangleExclamation, faXmark, faCheck } from '@fortawesome/pro-duotone-svg-icons'; import { faBell, faTriangleExclamation, faXmark, faCheck } from '@fortawesome/pro-duotone-svg-icons';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { usePerformanceAlerts } from '@/hooks/use-performance-alerts'; import { usePerformanceAlerts, type PerformanceAlert } from '@/hooks/use-performance-alerts';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
const DEMO_ALERTS: PerformanceAlert[] = [
{ id: 'demo-1', agent: 'Riya Mehta', type: 'Excessive Idle Time', value: '120m', severity: 'error', dismissed: false },
{ id: 'demo-2', agent: 'Arjun Kapoor', type: 'Excessive Idle Time', value: '180m', severity: 'error', dismissed: false },
{ id: 'demo-3', agent: 'Sneha Iyer', type: 'Excessive Idle Time', value: '250m', severity: 'error', dismissed: false },
{ id: 'demo-4', agent: 'Vikrant Desai', type: 'Excessive Idle Time', value: '300m', severity: 'error', dismissed: false },
{ id: 'demo-5', agent: 'Vikrant Desai', type: 'Low NPS', value: '35', severity: 'warning', dismissed: false },
{ id: 'demo-6', agent: 'Vikrant Desai', type: 'Low Conversion', value: '40%', severity: 'warning', dismissed: false },
{ id: 'demo-7', agent: 'Pooja Rao', type: 'Excessive Idle Time', value: '200m', severity: 'error', dismissed: false },
{ id: 'demo-8', agent: 'Mohammed Rizwan', type: 'Excessive Idle Time', value: '80m', severity: 'error', dismissed: false },
];
export const NotificationBell = () => { export const NotificationBell = () => {
const { alerts, dismiss, dismissAll } = usePerformanceAlerts(); const { alerts: liveAlerts, dismiss: liveDismiss, dismissAll: liveDismissAll } = usePerformanceAlerts();
const [open, setOpen] = useState(false); const [demoAlerts, setDemoAlerts] = useState<PerformanceAlert[]>(DEMO_ALERTS);
const [open, setOpen] = useState(true);
const panelRef = useRef<HTMLDivElement>(null); const panelRef = useRef<HTMLDivElement>(null);
// Use live alerts if available, otherwise demo
const alerts = liveAlerts.length > 0 ? liveAlerts : demoAlerts.filter(a => !a.dismissed);
const isDemo = liveAlerts.length === 0;
const dismiss = (id: string) => {
if (isDemo) {
setDemoAlerts(prev => prev.map(a => a.id === id ? { ...a, dismissed: true } : a));
} else {
liveDismiss(id);
}
};
const dismissAll = () => {
if (isDemo) {
setDemoAlerts(prev => prev.map(a => ({ ...a, dismissed: true })));
} else {
liveDismissAll();
}
};
// Close on outside click // Close on outside click
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
@@ -91,7 +123,7 @@ export const NotificationBell = () => {
<p className="text-sm font-medium text-primary">{alert.agent}</p> <p className="text-sm font-medium text-primary">{alert.agent}</p>
<p className="text-xs text-tertiary">{alert.type}</p> <p className="text-xs text-tertiary">{alert.type}</p>
</div> </div>
<Badge size="sm" color={alert.severity === 'error' ? 'error' : alert.severity === 'warning' ? 'warning' : 'gray'} type="pill-color">{alert.value}</Badge> <Badge size="sm" color={alert.severity} type="pill-color">{alert.value}</Badge>
<button <button
onClick={() => dismiss(alert.id)} onClick={() => dismiss(alert.id)}
className="text-fg-quaternary hover:text-fg-secondary shrink-0 transition duration-100 ease-linear" className="text-fg-quaternary hover:text-fg-secondary shrink-0 transition duration-100 ease-linear"

102
src/components/layout/page-header.tsx
View File

@@ -1,102 +0,0 @@
// PageHeader — consistent header layout for all list pages.
//
// Row 1: Title (+ optional badge + info icon) on the left,
// controls (search, columns, export, etc.) on the right.
// Row 2: Optional tabs (underline style) — no extra borders.
//
// The `infoText` prop renders as a hoverable info icon (ⓘ) next to
// the title. Long descriptive text goes here instead of inline
// subtitle — keeps the header compact.
//
// Usage:
// <PageHeader
// title="Contacts"
// badge={16}
// infoText="People who reached out directly — phone, walk-in, referral."
// controls={<><Input .../> <Button .../></>}
// tabs={<Tabs ...><TabList ...>{...}</TabList></Tabs>}
// />
import { useState, useRef, useEffect, type ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleInfo } from '@fortawesome/pro-duotone-svg-icons';
import { NotificationBell } from './notification-bell';
import { useAuth } from '@/providers/auth-provider';
interface PageHeaderProps {
title: string;
badge?: number | string;
/** Short inline text next to badge — use sparingly (e.g. "17 total") */
subtitle?: string;
/** Longer descriptive text shown on info icon hover/click */
infoText?: string;
controls?: ReactNode;
tabs?: ReactNode;
}
const InfoTooltip = ({ text }: { text: string }) => {
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [open]);
return (
<div className="relative" ref={ref}>
<button
onClick={() => setOpen(!open)}
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
className="flex size-5 items-center justify-center rounded-full text-fg-quaternary hover:text-fg-secondary transition duration-100 ease-linear"
title={text}
>
<FontAwesomeIcon icon={faCircleInfo} className="size-4" />
</button>
{open && (
<div className="absolute left-0 top-full mt-1 z-50 w-72 rounded-lg bg-primary px-3 py-2 text-xs text-tertiary shadow-lg ring-1 ring-secondary">
{text}
</div>
)}
</div>
);
};
export const PageHeader = ({ title, badge, subtitle, infoText, controls, tabs }: PageHeaderProps) => {
const { isAdmin } = useAuth();
return (
<div className="shrink-0">
{/* Row 1: title + controls */}
<div className="flex items-center justify-between px-6 py-3">
<div className="flex items-center gap-2">
<h1 className="text-lg font-bold text-primary">{title}</h1>
{badge != null && (
<span className="inline-flex items-center justify-center rounded-full bg-brand-secondary px-2 py-0.5 text-xs font-semibold text-white">
{badge}
</span>
)}
{subtitle && (
<span className="text-sm text-tertiary ml-1">{subtitle}</span>
)}
{infoText && <InfoTooltip text={infoText} />}
</div>
<div className="flex items-center gap-2">
{controls}
{isAdmin && <NotificationBell />}
</div>
</div>
{/* Row 2: optional tabs — no container border, tab underline is the separator */}
{tabs && (
<div className="px-6">
{tabs}
</div>
)}
</div>
);
};

38
src/components/layout/sidebar.tsx
View File

@@ -12,12 +12,13 @@ import {
faHospitalUser, faHospitalUser,
faCalendarCheck, faCalendarCheck,
faPhone, faPhone,
faAddressBook,
faUsers, faUsers,
faArrowRightFromBracket, faArrowRightFromBracket,
faTowerBroadcast, faTowerBroadcast,
faChartLine,
faFileAudio, faFileAudio,
faPhoneMissed, faPhoneMissed,
faSlidersUp,
} from "@fortawesome/pro-duotone-svg-icons"; } from "@fortawesome/pro-duotone-svg-icons";
import { faIcon } from "@/lib/icon-wrapper"; import { faIcon } from "@/lib/icon-wrapper";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
@@ -30,7 +31,6 @@ import { NavItemBase } from "@/components/application/app-navigation/base-compon
import type { NavItemType } from "@/components/application/app-navigation/config"; import type { NavItemType } from "@/components/application/app-navigation/config";
import { Avatar } from "@/components/base/avatar/avatar"; import { Avatar } from "@/components/base/avatar/avatar";
import { useAuth } from "@/providers/auth-provider"; import { useAuth } from "@/providers/auth-provider";
import { useUiFlags } from "@/hooks/use-ui-flags";
import { useAgentState } from "@/hooks/use-agent-state"; import { useAgentState } from "@/hooks/use-agent-state";
import { useThemeTokens } from "@/providers/theme-token-provider"; import { useThemeTokens } from "@/providers/theme-token-provider";
import { sidebarCollapsedAtom } from "@/state/sidebar-state"; import { sidebarCollapsedAtom } from "@/state/sidebar-state";
@@ -45,14 +45,15 @@ const IconCommentDots = faIcon(faCommentDots);
const IconChartMixed = faIcon(faChartMixed); const IconChartMixed = faIcon(faChartMixed);
const IconGear = faIcon(faGear); const IconGear = faIcon(faGear);
const IconPhone = faIcon(faPhone); const IconPhone = faIcon(faPhone);
const IconAddressBook = faIcon(faAddressBook);
const IconClockRewind = faIcon(faClockRotateLeft); const IconClockRewind = faIcon(faClockRotateLeft);
const IconUsers = faIcon(faUsers); const IconUsers = faIcon(faUsers);
const IconHospitalUser = faIcon(faHospitalUser); const IconHospitalUser = faIcon(faHospitalUser);
const IconCalendarCheck = faIcon(faCalendarCheck); const IconCalendarCheck = faIcon(faCalendarCheck);
const IconTowerBroadcast = faIcon(faTowerBroadcast); const IconTowerBroadcast = faIcon(faTowerBroadcast);
const IconChartLine = faIcon(faChartLine);
const IconFileAudio = faIcon(faFileAudio); const IconFileAudio = faIcon(faFileAudio);
const IconPhoneMissed = faIcon(faPhoneMissed); const IconPhoneMissed = faIcon(faPhoneMissed);
const IconSlidersUp = faIcon(faSlidersUp);
type NavSection = { type NavSection = {
label: string; label: string;
@@ -63,16 +64,12 @@ const getNavSections = (role: string): NavSection[] => {
if (role === 'admin') { if (role === 'admin') {
return [ return [
{ label: 'Supervisor', items: [ { label: 'Supervisor', items: [
// Team Performance retired as a nav entry — its surfaces
// (time breakdown, NPS/conversion, alerts, richer agent
// table) are now rolled into the Dashboard. The route is
// kept alive for reference but not linked in the sidebar.
{ label: 'Dashboard', href: '/', icon: IconGrid2 }, { label: 'Dashboard', href: '/', icon: IconGrid2 },
{ label: 'Team Performance', href: '/team-performance', icon: IconChartLine },
{ label: 'Live Call Monitor', href: '/live-monitor', icon: IconTowerBroadcast }, { label: 'Live Call Monitor', href: '/live-monitor', icon: IconTowerBroadcast },
]}, ]},
{ label: 'Data & Reports', items: [ { label: 'Data & Reports', items: [
{ label: 'Leads', href: '/leads', icon: IconUsers }, { label: 'Leads', href: '/leads', icon: IconUsers },
{ label: 'Contacts', href: '/contacts', icon: IconAddressBook },
{ label: 'Patients', href: '/patients', icon: IconHospitalUser }, { label: 'Patients', href: '/patients', icon: IconHospitalUser },
{ label: 'Appointments', href: '/appointments', icon: IconCalendarCheck }, { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
{ label: 'Call Log', href: '/call-history', icon: IconClockRewind }, { label: 'Call Log', href: '/call-history', icon: IconClockRewind },
@@ -82,9 +79,10 @@ const getNavSections = (role: string): NavSection[] => {
{ label: 'Marketing', items: [ { label: 'Marketing', items: [
{ label: 'Campaigns', href: '/campaigns', icon: IconBullhorn }, { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
]}, ]},
// Settings hub absorbs branding, rules, team, clinics, doctors, { label: 'Configuration', items: [
// telephony, ai, widget — one entry, navigates to the hub which { label: 'Rules Engine', href: '/rules', icon: IconSlidersUp },
// links to each section page. { label: 'Branding', href: '/branding', icon: IconGear },
]},
{ label: 'Admin', items: [ { label: 'Admin', items: [
{ label: 'Settings', href: '/settings', icon: IconGear }, { label: 'Settings', href: '/settings', icon: IconGear },
]}, ]},
@@ -96,8 +94,6 @@ const getNavSections = (role: string): NavSection[] => {
{ label: 'Call Center', items: [ { label: 'Call Center', items: [
{ label: 'Call Desk', href: '/', icon: IconPhone }, { label: 'Call Desk', href: '/', icon: IconPhone },
{ label: 'Call History', href: '/call-history', icon: IconClockRewind }, { label: 'Call History', href: '/call-history', icon: IconClockRewind },
{ label: 'Leads', href: '/leads', icon: IconUsers },
{ label: 'Contacts', href: '/contacts', icon: IconAddressBook },
{ label: 'Patients', href: '/patients', icon: IconHospitalUser }, { label: 'Patients', href: '/patients', icon: IconHospitalUser },
{ label: 'Appointments', href: '/appointments', icon: IconCalendarCheck }, { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
{ label: 'My Performance', href: '/my-performance', icon: IconChartMixed }, { label: 'My Performance', href: '/my-performance', icon: IconChartMixed },
@@ -109,7 +105,6 @@ const getNavSections = (role: string): NavSection[] => {
{ label: 'Main', items: [ { label: 'Main', items: [
{ label: 'Lead Workspace', href: '/', icon: IconGrid2 }, { label: 'Lead Workspace', href: '/', icon: IconGrid2 },
{ label: 'All Leads', href: '/leads', icon: IconUsers }, { label: 'All Leads', href: '/leads', icon: IconUsers },
{ label: 'Contacts', href: '/contacts', icon: IconAddressBook },
{ label: 'Patients', href: '/patients', icon: IconHospitalUser }, { label: 'Patients', href: '/patients', icon: IconHospitalUser },
{ label: 'Appointments', href: '/appointments', icon: IconCalendarCheck }, { label: 'Appointments', href: '/appointments', icon: IconCalendarCheck },
{ label: 'Campaigns', href: '/campaigns', icon: IconBullhorn }, { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
@@ -140,7 +135,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
const [collapsed, setCollapsed] = useAtom(sidebarCollapsedAtom); const [collapsed, setCollapsed] = useAtom(sidebarCollapsedAtom);
const agentConfig = typeof window !== 'undefined' ? localStorage.getItem('helix_agent_config') : null; const agentConfig = typeof window !== 'undefined' ? localStorage.getItem('helix_agent_config') : null;
const agentId = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null; const agentId = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
const { state: ozonetelState } = useAgentState(agentId); const ozonetelState = useAgentState(agentId);
const avatarStatus: 'online' | 'offline' = ozonetelState === 'ready' ? 'online' : 'offline'; const avatarStatus: 'online' | 'offline' = ozonetelState === 'ready' ? 'online' : 'offline';
const width = collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH; const width = collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
@@ -157,16 +152,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
navigate('/login'); navigate('/login');
}; };
const uiFlags = useUiFlags(); const navSections = getNavSections(user.role);
const navSections = getNavSections(user.role).map((section) => ({
...section,
items: uiFlags.setupManaged
// When setup is managed by the product team (per-tenant flag),
// hide the Settings entry from the nav. The route is also
// blocked in router-provider so a stray bookmark doesn't work.
? section.items.filter((item) => item.href !== '/settings')
: section.items,
})).filter((section) => section.items.length > 0);
const content = ( const content = (
<aside <aside
@@ -297,7 +283,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<div> <div>
<h3 className="text-lg font-semibold text-primary">Sign out?</h3> <h3 className="text-lg font-semibold text-primary">Sign out?</h3>
<p className="mt-1 text-sm text-tertiary"> <p className="mt-1 text-sm text-tertiary">
You will be logged out of Helix Engage and your telephony account. Any active calls will be disconnected. You will be logged out of Helix Engage and your Ozonetel agent session will end. Any active calls will be disconnected.
</p> </p>
</div> </div>
<div className="flex w-full gap-3"> <div className="flex w-full gap-3">

53
src/components/leads/lead-table.tsx
View File

@@ -1,14 +1,17 @@
import type { FC } from 'react';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { TableBody as AriaTableBody } from 'react-aria-components'; import { TableBody as AriaTableBody } from 'react-aria-components';
import type { SortDescriptor, Selection } from 'react-aria-components'; import type { SortDescriptor, Selection } from 'react-aria-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye } from '@fortawesome/pro-duotone-svg-icons'; import { faEllipsisVertical } from '@fortawesome/pro-duotone-svg-icons';
const DotsVertical: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faEllipsisVertical} className={className} />;
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';
import { Table } from '@/components/application/table/table'; import { Table } from '@/components/application/table/table';
import { LeadStatusBadge } from '@/components/shared/status-badge'; import { LeadStatusBadge } from '@/components/shared/status-badge';
import { SourceTag } from '@/components/shared/source-tag'; import { SourceTag } from '@/components/shared/source-tag';
import { AgeIndicator } from '@/components/shared/age-indicator'; import { AgeIndicator } from '@/components/shared/age-indicator';
import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
import { formatPhone, formatShortDate } from '@/lib/format'; import { formatPhone, formatShortDate } from '@/lib/format';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
import type { Lead } from '@/types/entities'; import type { Lead } from '@/types/entities';
@@ -22,7 +25,6 @@ type LeadTableProps = {
onSort: (field: string) => void; onSort: (field: string) => void;
onViewActivity?: (lead: Lead) => void; onViewActivity?: (lead: Lead) => void;
visibleColumns?: Set<string>; visibleColumns?: Set<string>;
selectionMode?: 'multiple' | 'none';
}; };
type TableRow = { type TableRow = {
@@ -53,7 +55,6 @@ export const LeadTable = ({
onSort, onSort,
onViewActivity, onViewActivity,
visibleColumns, visibleColumns,
selectionMode,
}: LeadTableProps) => { }: LeadTableProps) => {
const [expandedDupId, setExpandedDupId] = useState<string | null>(null); const [expandedDupId, setExpandedDupId] = useState<string | null>(null);
@@ -94,7 +95,6 @@ export const LeadTable = ({
}, [leads, expandedDupId]); }, [leads, expandedDupId]);
const allColumns = [ const allColumns = [
{ id: 'view', label: '', allowsSorting: false, defaultWidth: 40 },
{ id: 'phone', label: 'Phone', allowsSorting: true, defaultWidth: 150 }, { id: 'phone', label: 'Phone', allowsSorting: true, defaultWidth: 150 },
{ id: 'name', label: 'Name', allowsSorting: true, defaultWidth: 160 }, { id: 'name', label: 'Name', allowsSorting: true, defaultWidth: 160 },
{ id: 'email', label: 'Email', allowsSorting: false, defaultWidth: 180 }, { id: 'email', label: 'Email', allowsSorting: false, defaultWidth: 180 },
@@ -107,17 +107,18 @@ export const LeadTable = ({
{ id: 'createdAt', label: 'Age', allowsSorting: true, defaultWidth: 80 }, { id: 'createdAt', label: 'Age', allowsSorting: true, defaultWidth: 80 },
{ id: 'spamScore', label: 'Spam', allowsSorting: true, defaultWidth: 70 }, { id: 'spamScore', label: 'Spam', allowsSorting: true, defaultWidth: 70 },
{ id: 'dups', label: 'Dups', allowsSorting: false, defaultWidth: 60 }, { id: 'dups', label: 'Dups', allowsSorting: false, defaultWidth: 60 },
{ id: 'actions', label: '', allowsSorting: false, defaultWidth: 50 },
]; ];
const columns = visibleColumns const columns = visibleColumns
? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'view') ? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'actions')
: allColumns; : allColumns;
return ( return (
<div className="flex flex-1 flex-col min-h-0 overflow-hidden rounded-xl ring-1 ring-secondary"> <div className="flex flex-1 flex-col min-h-0 overflow-hidden rounded-xl ring-1 ring-secondary">
<Table <Table
aria-label="Leads table" aria-label="Leads table"
selectionMode={selectionMode ?? 'multiple'} selectionMode="multiple"
selectionBehavior="toggle" selectionBehavior="toggle"
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
onSelectionChange={handleSelectionChange} onSelectionChange={handleSelectionChange}
@@ -142,7 +143,6 @@ export const LeadTable = ({
const firstName = lead.contactName?.firstName ?? ''; const firstName = lead.contactName?.firstName ?? '';
const lastName = lead.contactName?.lastName ?? ''; const lastName = lead.contactName?.lastName ?? '';
const name = `${firstName} ${lastName}`.trim() || '\u2014'; const name = `${firstName} ${lastName}`.trim() || '\u2014';
const phoneRaw = lead.contactPhone?.[0]?.number ?? '';
const phone = lead.contactPhone?.[0] const phone = lead.contactPhone?.[0]
? formatPhone(lead.contactPhone[0]) ? formatPhone(lead.contactPhone[0])
: '\u2014'; : '\u2014';
@@ -156,7 +156,6 @@ export const LeadTable = ({
id={row.id} id={row.id}
className="bg-warning-primary" className="bg-warning-primary"
> >
<Table.Cell />
<Table.Cell className="pl-10"> <Table.Cell className="pl-10">
<span className="text-xs text-tertiary">{phone}</span> <span className="text-xs text-tertiary">{phone}</span>
</Table.Cell> </Table.Cell>
@@ -190,6 +189,17 @@ export const LeadTable = ({
<Table.Cell /> <Table.Cell />
<Table.Cell /> <Table.Cell />
<Table.Cell /> <Table.Cell />
<Table.Cell />
<Table.Cell>
<div className="flex gap-2">
<Button size="sm" color="primary">
Merge
</Button>
<Button size="sm" color="secondary">
Keep Separate
</Button>
</div>
</Table.Cell>
</Table.Row> </Table.Row>
); );
} }
@@ -207,26 +217,12 @@ export const LeadTable = ({
key={row.id} key={row.id}
id={row.id} id={row.id}
className={cx( className={cx(
'group/row',
isSpamRow && !isSelected && 'bg-warning-primary', isSpamRow && !isSelected && 'bg-warning-primary',
isSelected && 'bg-brand-primary', isSelected && 'bg-brand-primary',
)} )}
> >
<Table.Cell>
<button
onClick={(e) => { e.stopPropagation(); onViewActivity?.(lead); }}
className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
title="View details"
>
<FontAwesomeIcon icon={faEye} className="size-3.5" />
</button>
</Table.Cell>
{isCol('phone') && <Table.Cell> {isCol('phone') && <Table.Cell>
{phoneRaw ? ( <span className="font-semibold text-primary">{phone}</span>
<PhoneActionCell phoneNumber={phoneRaw} displayNumber={phone} />
) : (
<span className="text-sm text-quaternary">{'\u2014'}</span>
)}
</Table.Cell>} </Table.Cell>}
{isCol('name') && <Table.Cell> {isCol('name') && <Table.Cell>
<span className="text-secondary">{name}</span> <span className="text-secondary">{name}</span>
@@ -310,6 +306,15 @@ export const LeadTable = ({
<span className="text-tertiary">0</span> <span className="text-tertiary">0</span>
)} )}
</Table.Cell>} </Table.Cell>}
<Table.Cell>
<Button
size="sm"
color="tertiary"
iconLeading={DotsVertical}
aria-label="Row actions"
onClick={() => onViewActivity?.(lead)}
/>
</Table.Cell>
</Table.Row> </Table.Row>
); );
}} }}

84
src/components/modals/edit-patient-confirm-modal.tsx
View File

@@ -1,84 +0,0 @@
import type { ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPen } from '@fortawesome/pro-duotone-svg-icons';
import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
import { Button } from '@/components/base/buttons/button';
// Generic confirmation modal shown before any destructive edit to a
// patient's record. Used by the call-desk forms (appointment, enquiry)
// to gate the patient-name rename flow, but intentionally non-specific:
// any page that needs a "are you sure you want to change this patient
// field?" confirm should reuse this modal instead of building its own.
//
// The lock-by-default + explicit-confirm gate is deliberately heavy
// because patient edits cascade workspace-wide — they hit past
// appointments, lead history, AI summaries, and the Redis
// caller-resolution cache. The default path should always be "don't
// touch the record"; the only way to actually commit a change is
// clicking an Edit button, reading this prompt, and confirming.
//
// Styling matches the sign-out confirmation in sidebar.tsx — same
// warning circle, same button layout — so the weight of the action
// reads immediately.
type EditPatientConfirmModalProps = {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: () => void;
/** Modal heading. Defaults to "Edit patient details?". */
title?: string;
/** Body copy explaining the consequences of the edit. Accepts any
* ReactNode so callers can inline markup / inline the specific
* field being edited. A sensible generic default is provided. */
description?: ReactNode;
/** Confirm-button label. Defaults to "Yes, edit details". */
confirmLabel?: string;
};
const DEFAULT_TITLE = 'Edit patient details?';
const DEFAULT_DESCRIPTION = (
<>
You&apos;re about to change a detail on this patient&apos;s record. The update will cascade
across Helix Engage — past appointments, lead history, and the AI summary all reflect
the new value. Only proceed if the current data is actually wrong; for all other
cases, cancel and continue with the current record.
</>
);
const DEFAULT_CONFIRM_LABEL = 'Yes, edit details';
export const EditPatientConfirmModal = ({
isOpen,
onOpenChange,
onConfirm,
title = DEFAULT_TITLE,
description = DEFAULT_DESCRIPTION,
confirmLabel = DEFAULT_CONFIRM_LABEL,
}: EditPatientConfirmModalProps) => (
<ModalOverlay isOpen={isOpen} onOpenChange={onOpenChange} isDismissable>
<Modal className="max-w-md">
<Dialog>
<div className="rounded-xl bg-primary p-6 shadow-xl">
<div className="flex flex-col items-center text-center gap-4">
<div className="flex size-12 items-center justify-center rounded-full bg-warning-secondary">
<FontAwesomeIcon icon={faUserPen} className="size-5 text-fg-warning-primary" />
</div>
<div>
<h3 className="text-lg font-semibold text-primary">{title}</h3>
<p className="mt-1 text-sm text-tertiary">{description}</p>
</div>
<div className="flex w-full gap-3">
<Button size="md" color="secondary" className="flex-1" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button size="md" color="primary-destructive" className="flex-1" onClick={onConfirm}>
{confirmLabel}
</Button>
</div>
</div>
</div>
</Dialog>
</Modal>
</ModalOverlay>
);

228
src/components/modals/maint-otp-modal.tsx
View File

@@ -5,10 +5,9 @@ import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/mod
import { PinInput } from '@/components/base/pin-input/pin-input'; import { PinInput } from '@/components/base/pin-input/pin-input';
import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon'; import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faShieldKeyhole, faLock, faLockOpen } from '@fortawesome/pro-duotone-svg-icons'; import { faShieldKeyhole } from '@fortawesome/pro-duotone-svg-icons';
import type { FC } from 'react'; import type { FC } from 'react';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx';
const ShieldIcon: FC<{ className?: string }> = ({ className }) => ( const ShieldIcon: FC<{ className?: string }> = ({ className }) => (
<FontAwesomeIcon icon={faShieldKeyhole} className={className} /> <FontAwesomeIcon icon={faShieldKeyhole} className={className} />
@@ -21,14 +20,9 @@ type MaintAction = {
label: string; label: string;
description: string; description: string;
needsPreStep?: boolean; needsPreStep?: boolean;
agentPickerEndpoint?: string;
clientSideHandler?: (payload: any) => Promise<{ status: string; message: string }>; clientSideHandler?: (payload: any) => Promise<{ status: string; message: string }>;
}; };
type LockedRow = { agentId: string; displayName: string; heldByIp: string; lockedAt: string };
type FreeRow = { agentId: string; displayName: string };
type SessionStatus = { locked: LockedRow[]; free: FreeRow[] };
type MaintOtpModalProps = { type MaintOtpModalProps = {
isOpen: boolean; isOpen: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
@@ -42,55 +36,6 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
const [otp, setOtp] = useState(''); const [otp, setOtp] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Phase-2 state: once the OTP passes and the action uses an agent
// picker, we swap the PIN input for a two-bucket list (Locked / Free)
// fetched from `agentPickerEndpoint`. The operator picks a locked
// agent, then Confirm posts to the real `endpoint`.
const [sessionStatus, setSessionStatus] = useState<SessionStatus | null>(null);
const [pickedAgentId, setPickedAgentId] = useState<string | null>(null);
// OTP is held across the two-phase flow so we don't force the user
// to re-enter it after the picker loads.
const [verifiedOtp, setVerifiedOtp] = useState<string | null>(null);
const reset = () => {
setOtp('');
setError(null);
setSessionStatus(null);
setPickedAgentId(null);
setVerifiedOtp(null);
setLoading(false);
};
const handleClose = () => {
onOpenChange(false);
reset();
};
const postMaint = async (endpoint: string, body: Record<string, any>, otpHeader: string) => {
const res = await fetch(`${API_URL}/api/maint/${endpoint}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'x-maint-otp': otpHeader },
body: JSON.stringify(body),
});
const data = await res.json().catch(() => ({}));
return { ok: res.ok, data };
};
const runPickerAction = async (pickedId: string, otpHeader: string) => {
if (!action) return;
setLoading(true);
setError(null);
const payload = { ...preStepPayload, agentId: pickedId };
const { ok, data } = await postMaint(action.endpoint, payload, otpHeader);
setLoading(false);
if (ok) {
notify.success(action.label, data.message ?? 'Completed successfully');
onOpenChange(false);
reset();
} else {
setError(data.message ?? 'Failed');
}
};
const handleSubmit = async () => { const handleSubmit = async () => {
if (!action || otp.length < 6) return; if (!action || otp.length < 6) return;
@@ -98,49 +43,40 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
setError(null); setError(null);
try { try {
// Two-phase agent-picker flow — OTP first, then fetch list,
// then the operator picks which agent to act on.
if (action.agentPickerEndpoint) {
const { ok, data } = await postMaint(action.agentPickerEndpoint, {}, otp);
if (!ok) {
setError(data.message ?? 'Invalid maintenance code');
setLoading(false);
return;
}
setSessionStatus(data as SessionStatus);
setVerifiedOtp(otp);
setLoading(false);
return;
}
if (action.clientSideHandler) { if (action.clientSideHandler) {
const { ok, data } = await postMaint('force-ready', {}, otp); // Client-side action — OTP verified by calling a dummy maint endpoint first
if (!ok) { const otpRes = await fetch(`${API_URL}/api/maint/force-ready`, {
setError(data.message ?? 'Invalid maintenance code'); method: 'POST',
headers: { 'Content-Type': 'application/json', 'x-maint-otp': otp },
});
if (!otpRes.ok) {
setError('Invalid maintenance code');
setLoading(false); setLoading(false);
return; return;
} }
const result = await action.clientSideHandler(preStepPayload); const result = await action.clientSideHandler(preStepPayload);
notify.success(action.label, result.message ?? 'Completed'); notify.success(action.label, result.message ?? 'Completed');
onOpenChange(false); onOpenChange(false);
reset(); setOtp('');
return;
}
// Default: single-shot endpoint with agentId from the CC agent's
// own local config (cc-agent context). Supervisors hitting this
// path without agent config used to get 400 — the agent-picker
// branch above is the fix.
const agentCfg = localStorage.getItem('helix_agent_config');
const agentId = agentCfg ? JSON.parse(agentCfg).ozonetelAgentId : undefined;
const payload = { ...preStepPayload, ...(agentId ? { agentId } : {}) };
const { ok, data } = await postMaint(action.endpoint, payload, otp);
if (ok) {
notify.success(action.label, data.message ?? 'Completed successfully');
onOpenChange(false);
reset();
} else { } else {
setError(data.message ?? 'Failed'); // Standard sidecar endpoint
const res = await fetch(`${API_URL}/api/maint/${action.endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-maint-otp': otp,
},
...(preStepPayload ? { body: JSON.stringify(preStepPayload) } : {}),
});
const data = await res.json();
if (res.ok) {
console.log(`[MAINT] ${action.label}:`, data);
notify.success(action.label, data.message ?? 'Completed successfully');
onOpenChange(false);
setOtp('');
} else {
setError(data.message ?? 'Failed');
}
} }
} catch { } catch {
setError('Request failed'); setError('Request failed');
@@ -154,25 +90,19 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
setError(null); setError(null);
}; };
const handleClose = () => {
onOpenChange(false);
setOtp('');
setError(null);
};
if (!action) return null; if (!action) return null;
const showPicker = Boolean(action.agentPickerEndpoint && sessionStatus && verifiedOtp); const showOtp = !action.needsPreStep || preStepReady;
const showOtp = (!action.needsPreStep || preStepReady) && !showPicker;
const confirmDisabled = showPicker
? !pickedAgentId || loading
: otp.length < 6 || loading || (action.needsPreStep && !preStepReady);
const handleConfirm = async () => {
if (showPicker && pickedAgentId && verifiedOtp) {
await runPickerAction(pickedAgentId, verifiedOtp);
} else {
await handleSubmit();
}
};
return ( return (
<ModalOverlay isOpen={isOpen} onOpenChange={handleClose} isDismissable> <ModalOverlay isOpen={isOpen} onOpenChange={handleClose} isDismissable>
<Modal className="sm:max-w-[440px]"> <Modal className="sm:max-w-[400px]">
<Dialog> <Dialog>
{() => ( {() => (
<div className="flex w-full flex-col rounded-xl bg-primary shadow-xl ring-1 ring-secondary overflow-hidden"> <div className="flex w-full flex-col rounded-xl bg-primary shadow-xl ring-1 ring-secondary overflow-hidden">
@@ -186,12 +116,13 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
</div> </div>
{/* Pre-step content (e.g., campaign selection) */} {/* Pre-step content (e.g., campaign selection) */}
{action.needsPreStep && preStepContent && !showPicker && ( {action.needsPreStep && preStepContent && (
<div className="px-6 pb-4"> <div className="px-6 pb-4">
{preStepContent} {preStepContent}
</div> </div>
)} )}
{/* Pin Input — shown when pre-step is ready (or no pre-step needed) */}
{showOtp && ( {showOtp && (
<div className="flex flex-col items-center gap-2 px-6 pb-5"> <div className="flex flex-col items-center gap-2 px-6 pb-5">
<PinInput size="sm"> <PinInput size="sm">
@@ -219,87 +150,6 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
</div> </div>
)} )}
{showPicker && sessionStatus && (
<div className="px-6 pb-5 space-y-4">
<div>
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faLock} className="size-3.5 text-fg-error-primary" />
<p className="text-xs font-semibold uppercase text-secondary">
Locked ({sessionStatus.locked.length})
</p>
</div>
{sessionStatus.locked.length === 0 ? (
<p className="text-sm text-tertiary pl-5">No active session locks.</p>
) : (
<div className="space-y-1.5">
{sessionStatus.locked.map((row) => {
const selected = pickedAgentId === row.agentId;
return (
<button
key={row.agentId}
type="button"
onClick={() => setPickedAgentId(row.agentId)}
className={cx(
'w-full flex items-start justify-between gap-3 rounded-lg border p-3 text-left transition duration-100 ease-linear',
selected
? 'border-brand bg-brand-primary_alt'
: 'border-secondary hover:border-brand hover:bg-secondary',
)}
>
<div className="min-w-0">
<p className="text-sm font-medium text-primary truncate">{row.displayName}</p>
<p className="text-xs text-tertiary truncate">
<code className="font-mono">{row.agentId}</code> — held by {row.heldByIp}
</p>
<p className="text-xs text-quaternary">
since {new Date(row.lockedAt).toLocaleString()}
</p>
</div>
{selected && (
<span className="shrink-0 text-xs font-semibold text-brand-secondary">Selected</span>
)}
</button>
);
})}
</div>
)}
</div>
<div>
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faLockOpen} className="size-3.5 text-fg-success-primary" />
<p className="text-xs font-semibold uppercase text-secondary">
Free ({sessionStatus.free.length})
</p>
</div>
{sessionStatus.free.length === 0 ? (
<p className="text-sm text-tertiary pl-5">No free agents.</p>
) : (
<div className="space-y-1.5">
{sessionStatus.free.map((row) => (
<div
key={row.agentId}
className="flex items-center justify-between gap-3 rounded-lg border border-secondary bg-disabled_subtle p-3 opacity-70"
>
<div className="min-w-0">
<p className="text-sm font-medium text-secondary truncate">{row.displayName}</p>
<p className="text-xs text-quaternary truncate">
<code className="font-mono">{row.agentId}</code>
</p>
</div>
<span className="shrink-0 text-xs font-medium text-success-primary">Already free</span>
</div>
))}
</div>
)}
</div>
{error && (
<p className="text-sm text-error-primary">{error}</p>
)}
</div>
)}
{/* Footer */} {/* Footer */}
<div className="flex items-center gap-3 border-t border-secondary px-6 py-4"> <div className="flex items-center gap-3 border-t border-secondary px-6 py-4">
<Button size="md" color="secondary" onClick={handleClose} className="flex-1"> <Button size="md" color="secondary" onClick={handleClose} className="flex-1">
@@ -308,9 +158,9 @@ export const MaintOtpModal = ({ isOpen, onOpenChange, action, preStepContent, pr
<Button <Button
size="md" size="md"
color="primary" color="primary"
isDisabled={confirmDisabled} isDisabled={otp.length < 6 || loading || (action.needsPreStep && !preStepReady)}
isLoading={loading} isLoading={loading}
onClick={handleConfirm} onClick={handleSubmit}
className="flex-1" className="flex-1"
> >
Confirm Confirm

85
src/components/setup/resume-setup-banner.tsx
View File

@@ -1,85 +0,0 @@
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleInfo, faXmark, faArrowRight } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { getSetupState, SETUP_STEP_NAMES, type SetupState } from '@/lib/setup-state';
import { useAuth } from '@/providers/auth-provider';
import { useUiFlags } from '@/hooks/use-ui-flags';
// Dismissible banner shown across the top of authenticated pages when
// the hospital workspace has incomplete setup steps AND the admin has
// already dismissed the auto-wizard. This is the "nudge" layer —
// a persistent reminder that setup is still outstanding, without the
// intrusion of the full-page wizard.
//
// Visibility rules:
// - Admin users only (other roles can't complete setup)
// - At least one setup step is still `completed: false`
// - `setup-state.wizardDismissed === true` (otherwise the wizard
// auto-shows on next login and this banner would be redundant)
// - Not dismissed in the current browser session (resets on reload)
export const ResumeSetupBanner = () => {
const { isAdmin } = useAuth();
const { setupManaged } = useUiFlags();
const [state, setState] = useState<SetupState | null>(null);
const [dismissed, setDismissed] = useState(
() => sessionStorage.getItem('helix_resume_setup_dismissed') === '1',
);
useEffect(() => {
if (!isAdmin || dismissed || setupManaged) return;
getSetupState()
.then(setState)
.catch(() => {
// Non-fatal — if setup-state isn't reachable, just
// skip the banner. The wizard still works.
});
}, [isAdmin, dismissed, setupManaged]);
if (!isAdmin || !state || dismissed || setupManaged) return null;
const incompleteCount = SETUP_STEP_NAMES.filter((s) => !state.steps[s].completed).length;
if (incompleteCount === 0) return null;
// If the wizard hasn't been dismissed yet, the first-run redirect
// in login.tsx handles pushing the admin into /setup — no need
// for this nudge.
if (!state.wizardDismissed) return null;
const handleDismiss = () => {
sessionStorage.setItem('helix_resume_setup_dismissed', '1');
setDismissed(true);
};
return (
<div className="flex shrink-0 items-center justify-between gap-4 border-b border-brand bg-brand-primary px-4 py-2">
<div className="flex items-center gap-3">
<FontAwesomeIcon icon={faCircleInfo} className="size-4 text-brand-primary" />
<span className="text-sm text-primary">
<b>Finish setting up your hospital</b> — {incompleteCount} step
{incompleteCount === 1 ? '' : 's'} still need your attention.
</span>
</div>
<div className="flex items-center gap-2">
<Button
size="sm"
color="primary"
href="/setup"
iconTrailing={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowRight} className={className} />
)}
>
Resume setup
</Button>
<button
type="button"
onClick={handleDismiss}
className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary transition duration-100 ease-linear"
title="Dismiss for this session"
>
<FontAwesomeIcon icon={faXmark} className="size-3" />
</button>
</div>
</div>
);
};

99
src/components/setup/section-card.tsx
View File

@@ -1,99 +0,0 @@
import { Link } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight, faCircleCheck, faCircleExclamation } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';
type SectionStatus = 'complete' | 'incomplete' | 'unknown';
type SectionCardProps = {
title: string;
description: string;
icon: any;
iconColor?: string;
// Either navigate (href) OR intercept the click (onClick). When onClick
// is provided, href is ignored and the card renders as a button. Used
// while self-serve setup is disabled — all clicks go through a
// "contact product team" modal in settings.tsx.
href?: string;
onClick?: () => void;
status?: SectionStatus;
disabled?: boolean;
};
// Settings hub card. Each card represents one setup-able section (Branding,
// Clinics, Doctors, Team, Telephony, AI, Widget, Rules) and either links to
// its dedicated page or triggers a parent-owned callback.
export const SectionCard = ({
title,
description,
icon,
iconColor = 'text-brand-primary',
href,
onClick,
status = 'unknown',
disabled = false,
}: SectionCardProps) => {
const className = cx(
'group block w-full text-left rounded-xl border border-secondary p-5 shadow-xs transition',
disabled
? 'cursor-not-allowed opacity-50 bg-disabled_subtle'
: 'bg-primary hover:border-brand hover:shadow-md',
);
const body = (
<>
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-4">
<div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary">
<FontAwesomeIcon icon={icon} className={cx('size-5', disabled ? 'text-fg-disabled' : iconColor)} />
</div>
<div className="min-w-0">
<h3 className={cx('text-sm font-semibold', disabled ? 'text-disabled' : 'text-primary')}>{title}</h3>
<p className="mt-1 text-xs text-tertiary">{description}</p>
</div>
</div>
{!disabled && (
<FontAwesomeIcon
icon={faArrowRight}
className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
/>
)}
</div>
{status !== 'unknown' && (
<div className="mt-4 flex items-center gap-2 border-t border-secondary pt-3">
{status === 'complete' ? (
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-success-primary">
<FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
Configured
</span>
) : (
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-warning-primary">
<FontAwesomeIcon icon={faCircleExclamation} className="size-3.5" />
Setup needed
</span>
)}
</div>
)}
</>
);
if (disabled) {
return (
<div className={className}>
{body}
</div>
);
}
if (onClick) {
return (
<button type="button" onClick={onClick} className={className}>
{body}
</button>
);
}
return (
<Link to={href ?? '#'} className={className}>
{body}
</Link>
);
};

27
src/components/setup/wizard-layout-context.tsx
View File

@@ -1,27 +0,0 @@
import { createContext } from 'react';
// Context that lets each WizardStep render content into the wizard
// shell's right pane via a portal — without lifting per-step data
// fetching up to the page. The shell sets `rightPaneEl` to the
// `<aside>` DOM node once it mounts; child WizardStep components read
// it and createPortal their `rightPane` prop into it.
//
// Why a portal and not a state-lifted prop on WizardShell:
// - The right pane is tightly coupled to the active step's data
// (e.g. "list of clinics created so far") which lives in the step
// component's state. Lifting that state to the page would mean
// duplicating the data-fetching layer, OR re-querying everything
// from the page.
// - Trying to pass `rightPane: ReactNode` upward via callbacks
// either causes a one-frame flash (useEffect) or violates the
// "no setState during render" rule.
// - Portals are React-native, no extra render cycles, and the
// DOM target is already part of the layout.
export type WizardLayoutContextValue = {
rightPaneEl: HTMLElement | null;
};
export const WizardLayoutContext = createContext<WizardLayoutContextValue>({
rightPaneEl: null,
});

426
src/components/setup/wizard-right-panes.tsx
View File

@@ -1,426 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBuilding,
faCircle,
faCircleCheck,
faCopy,
faHeadset,
faPenToSquare,
faPhone,
faRobot,
faStethoscope,
faUser,
faUsers,
} from '@fortawesome/pro-duotone-svg-icons';
// Reusable right-pane preview components for the onboarding wizard.
// Each one is a pure presentation component that takes already-fetched
// data as props — the parent step component owns the state + fetches
// + refetches after a successful save. Keeping the panes data-only
// means the active step can pass the same source of truth to both
// the middle (form) pane and this preview without two GraphQL queries
// running side by side.
// Shared title/empty state primitives so every pane has the same
// visual rhythm.
const PaneCard = ({
title,
count,
children,
}: {
title: string;
count?: number;
children: React.ReactNode;
}) => (
<div className="rounded-xl border border-secondary bg-primary shadow-xs">
<div className="flex items-center justify-between border-b border-secondary px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">{title}</p>
{typeof count === 'number' && (
<span className="rounded-full bg-secondary px-2 py-0.5 text-xs font-semibold text-tertiary">
{count}
</span>
)}
</div>
{children}
</div>
);
const EmptyState = ({ message }: { message: string }) => (
<div className="px-4 py-6 text-center text-xs text-tertiary">{message}</div>
);
// ---------------------------------------------------------------------------
// Identity step — short "about this step" card. Explains what the
// admin is configuring and where it shows up in the staff portal so
// the right pane stays useful even when there's nothing to list yet.
// ---------------------------------------------------------------------------
const IDENTITY_BULLETS: { title: string; body: string }[] = [
{
title: 'Hospital name',
body: 'Shown on the staff portal sidebar, the login screen, and every patient-facing widget greeting.',
},
{
title: 'Logo',
body: 'Used as the avatar at the top of the staff portal and on the website widget header. Square images work best.',
},
{
title: 'Brand identity',
body: 'Colors, fonts and login copy live on the full Branding page — open it from Settings any time after setup.',
},
];
export const IdentityRightPane = () => (
<PaneCard title="About this step">
<div className="px-4 py-4">
<p className="text-sm text-tertiary">
This is how patients and staff first see your hospital across Helix Engage.
Get the basics in now — you can polish branding later.
</p>
<ul className="mt-4 flex flex-col gap-3">
{IDENTITY_BULLETS.map((b) => (
<li key={b.title} className="flex items-start gap-2.5">
<FontAwesomeIcon
icon={faCircleCheck}
className="mt-0.5 size-4 shrink-0 text-fg-brand-primary"
/>
<div>
<p className="text-sm font-semibold text-primary">{b.title}</p>
<p className="text-xs text-tertiary">{b.body}</p>
</div>
</li>
))}
</ul>
</div>
</PaneCard>
);
// ---------------------------------------------------------------------------
// Clinics step — list of clinics created so far.
// ---------------------------------------------------------------------------
export type ClinicSummary = {
id: string;
clinicName: string | null;
addressCity?: string | null;
clinicStatus?: string | null;
};
export const ClinicsRightPane = ({ clinics }: { clinics: ClinicSummary[] }) => (
<PaneCard title="Clinics added" count={clinics.length}>
{clinics.length === 0 ? (
<EmptyState message="No clinics yet — add your first one in the form on the left." />
) : (
<ul className="divide-y divide-secondary">
{clinics.map((c) => (
<li key={c.id} className="flex items-start gap-3 px-4 py-3">
<div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-secondary text-brand-secondary">
<FontAwesomeIcon icon={faBuilding} className="size-4" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-primary">
{c.clinicName ?? 'Unnamed clinic'}
</p>
<p className="truncate text-xs text-tertiary">
{c.addressCity ?? 'No city'}
{c.clinicStatus && ` · ${c.clinicStatus.toLowerCase()}`}
</p>
</div>
</li>
))}
</ul>
)}
</PaneCard>
);
// ---------------------------------------------------------------------------
// Doctors step — grouped by department, since the user explicitly asked
// for "doctors grouped by department" earlier in the design discussion.
// ---------------------------------------------------------------------------
export type DoctorSummary = {
id: string;
fullName: { firstName: string | null; lastName: string | null } | null;
department?: string | null;
specialty?: string | null;
};
const doctorDisplayName = (d: DoctorSummary): string => {
const first = d.fullName?.firstName?.trim() ?? '';
const last = d.fullName?.lastName?.trim() ?? '';
const full = `${first} ${last}`.trim();
return full.length > 0 ? full : 'Unnamed';
};
export const DoctorsRightPane = ({ doctors }: { doctors: DoctorSummary[] }) => {
// Group by department. Doctors with no department land in
// "Unassigned" so they're not silently dropped.
const grouped: Record<string, DoctorSummary[]> = {};
for (const d of doctors) {
const key = d.department?.trim() || 'Unassigned';
(grouped[key] ??= []).push(d);
}
const sortedKeys = Object.keys(grouped).sort();
return (
<PaneCard title="Doctors added" count={doctors.length}>
{doctors.length === 0 ? (
<EmptyState message="No doctors yet — add your first one in the form on the left." />
) : (
<div className="divide-y divide-secondary">
{sortedKeys.map((dept) => (
<div key={dept} className="px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
{dept}{' '}
<span className="text-tertiary">({grouped[dept].length})</span>
</p>
<ul className="mt-2 flex flex-col gap-2">
{grouped[dept].map((d) => (
<li
key={d.id}
className="flex items-start gap-2.5 text-sm text-primary"
>
<FontAwesomeIcon
icon={faStethoscope}
className="mt-0.5 size-3.5 text-fg-quaternary"
/>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">
{doctorDisplayName(d)}
</p>
{d.specialty && (
<p className="truncate text-xs text-tertiary">
{d.specialty}
</p>
)}
</div>
</li>
))}
</ul>
</div>
))}
</div>
)}
</PaneCard>
);
};
// ---------------------------------------------------------------------------
// Team step — list of employees with role + SIP badge.
// ---------------------------------------------------------------------------
export type TeamMemberSummary = {
id: string;
userEmail: string;
name: { firstName: string | null; lastName: string | null } | null;
roleLabel: string | null;
sipExtension: string | null;
// True if this row represents the currently logged-in admin —
// suppresses the edit/copy icons since admins shouldn't edit
// themselves from the wizard.
isCurrentUser: boolean;
// True if the parent has the plaintext temp password in memory
// (i.e. this employee was created in the current session).
// Drives whether the copy icon shows.
canCopyCredentials: boolean;
};
const memberDisplayName = (m: TeamMemberSummary): string => {
const first = m.name?.firstName?.trim() ?? '';
const last = m.name?.lastName?.trim() ?? '';
const full = `${first} ${last}`.trim();
return full.length > 0 ? full : m.userEmail;
};
// Tiny icon button shared between the edit and copy actions on the
// employee row. Kept inline since it's only used here and the styling
// matches the existing right-pane density.
const RowIconButton = ({
icon,
title,
onClick,
}: {
icon: typeof faPenToSquare;
title: string;
onClick: () => void;
}) => (
<button
type="button"
onClick={onClick}
title={title}
aria-label={title}
className="flex size-7 shrink-0 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-tertiary_hover"
>
<FontAwesomeIcon icon={icon} className="size-3.5" />
</button>
);
export const TeamRightPane = ({
members,
onEdit,
onCopy,
}: {
members: TeamMemberSummary[];
onEdit?: (memberId: string) => void;
onCopy?: (memberId: string) => void;
}) => (
<PaneCard title="Employees" count={members.length}>
{members.length === 0 ? (
<EmptyState message="No employees yet — create your first one in the form on the left." />
) : (
<ul className="divide-y divide-secondary">
{members.map((m) => (
<li key={m.id} className="flex items-start gap-3 px-4 py-3">
<div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-secondary text-brand-secondary">
<FontAwesomeIcon icon={faUser} className="size-4" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-primary">
{memberDisplayName(m)}
</p>
<p className="truncate text-xs text-tertiary">
{m.userEmail}
{m.roleLabel && ` · ${m.roleLabel}`}
</p>
{m.sipExtension && (
<span className="mt-1 inline-flex items-center gap-1 rounded-full bg-success-secondary px-2 py-0.5 text-xs font-medium text-success-primary">
<FontAwesomeIcon icon={faHeadset} className="size-3" />
{m.sipExtension}
</span>
)}
</div>
{/* Admin row gets neither button — admins
shouldn't edit themselves from here, and
their password isn't in our session
memory anyway. */}
{!m.isCurrentUser && (
<div className="flex shrink-0 items-center gap-1">
{m.canCopyCredentials && onCopy && (
<RowIconButton
icon={faCopy}
title="Copy login credentials"
onClick={() => onCopy(m.id)}
/>
)}
{onEdit && (
<RowIconButton
icon={faPenToSquare}
title="Edit employee"
onClick={() => onEdit(m.id)}
/>
)}
</div>
)}
</li>
))}
</ul>
)}
</PaneCard>
);
// ---------------------------------------------------------------------------
// Telephony step — live SIP → member mapping.
// ---------------------------------------------------------------------------
export type SipSeatSummary = {
id: string;
sipExtension: string | null;
ozonetelAgentId: string | null;
workspaceMember: {
name: { firstName: string | null; lastName: string | null } | null;
userEmail: string;
} | null;
};
const seatMemberLabel = (m: SipSeatSummary['workspaceMember']): string => {
if (!m) return 'Unassigned';
const first = m.name?.firstName?.trim() ?? '';
const last = m.name?.lastName?.trim() ?? '';
const full = `${first} ${last}`.trim();
return full.length > 0 ? full : m.userEmail;
};
export const TelephonyRightPane = ({ seats }: { seats: SipSeatSummary[] }) => (
<PaneCard title="SIP seats" count={seats.length}>
{seats.length === 0 ? (
<EmptyState message="No SIP seats configured — contact support to provision seats." />
) : (
<ul className="divide-y divide-secondary">
{seats.map((seat) => {
const isAssigned = seat.workspaceMember !== null;
return (
<li key={seat.id} className="flex items-start gap-3 px-4 py-3">
<div
className={`flex size-9 shrink-0 items-center justify-center rounded-full ${
isAssigned
? 'bg-brand-secondary text-brand-secondary'
: 'bg-secondary text-quaternary'
}`}
>
<FontAwesomeIcon icon={faPhone} className="size-4" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-primary">
Ext {seat.sipExtension ?? '—'}
</p>
<p className="truncate text-xs text-tertiary">
{seatMemberLabel(seat.workspaceMember)}
</p>
</div>
{!isAssigned && (
<span className="inline-flex shrink-0 items-center rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-tertiary">
Available
</span>
)}
</li>
);
})}
</ul>
)}
</PaneCard>
);
// ---------------------------------------------------------------------------
// AI step — static cards for each configured actor with last-edited info.
// Filled in once the backend prompt config refactor lands.
// ---------------------------------------------------------------------------
export type AiActorSummary = {
key: string;
label: string;
description: string;
lastEditedAt: string | null;
isCustom: boolean;
};
export const AiRightPane = ({ actors }: { actors: AiActorSummary[] }) => (
<PaneCard title="AI personas" count={actors.length}>
{actors.length === 0 ? (
<EmptyState message="Loading personas…" />
) : (
<ul className="divide-y divide-secondary">
{actors.map((a) => (
<li key={a.key} className="flex items-start gap-3 px-4 py-3">
<div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-secondary text-brand-secondary">
<FontAwesomeIcon icon={faRobot} className="size-4" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-primary">
{a.label}
</p>
<p className="truncate text-xs text-tertiary">
{a.isCustom
? `Edited ${a.lastEditedAt ? new Date(a.lastEditedAt).toLocaleDateString() : 'recently'}`
: 'Default'}
</p>
</div>
</li>
))}
</ul>
)}
</PaneCard>
);
// Suppress unused-import warnings for icons reserved for future use.
void faCircle;
void faUsers;

159
src/components/setup/wizard-shell.tsx
View File

@@ -1,159 +0,0 @@
import { useState, type ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleCheck, faCircle } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { cx } from '@/utils/cx';
import { SETUP_STEP_NAMES, SETUP_STEP_LABELS, type SetupStepName, type SetupState } from '@/lib/setup-state';
import { WizardLayoutContext } from './wizard-layout-context';
type WizardShellProps = {
state: SetupState;
activeStep: SetupStepName;
onSelectStep: (step: SetupStepName) => void;
onDismiss: () => void;
// Form column (middle pane). The active step component renders
// its form into this slot. The right pane is filled via the
// WizardLayoutContext + a portal — see wizard-step.tsx.
children: ReactNode;
};
// Layout shell for the onboarding wizard. Three-pane layout:
// left — step navigator (fixed width)
// middle — form (flexible, the focus column)
// right — preview pane fed by the active step component (sticky,
// hides below xl breakpoint)
//
// The whole shell is `fixed inset-0` so the document body cannot
// scroll while the wizard is mounted — fixes the double-scrollbar
// bug where the body was rendered taller than the viewport and
// scrolled alongside the form column. The form and preview columns
// each scroll independently inside the shell.
//
// The header has a "Skip for now" affordance that dismisses the
// wizard for this workspace; once dismissed it never auto-shows
// again on login.
export const WizardShell = ({
state,
activeStep,
onSelectStep,
onDismiss,
children,
}: WizardShellProps) => {
const completedCount = SETUP_STEP_NAMES.filter((s) => state.steps[s].completed).length;
const totalSteps = SETUP_STEP_NAMES.length;
const progressPct = Math.round((completedCount / totalSteps) * 100);
// Callback ref → state — guarantees that consumers re-render once
// the aside is mounted (a plain useRef would not propagate the
// attached node back through the context). The element is also
// updated to null on unmount so the context is always honest about
// whether the slot is currently available for portals.
const [rightPaneEl, setRightPaneEl] = useState<HTMLElement | null>(null);
return (
<WizardLayoutContext.Provider value={{ rightPaneEl }}>
<div className="fixed inset-0 z-50 flex flex-col bg-primary">
{/* Header — pinned. Progress bar always visible (grey
track when 0%), sits flush under the title row. */}
<header className="shrink-0 border-b border-secondary bg-primary">
<div className="mx-auto flex w-full max-w-screen-2xl items-center justify-between gap-6 px-8 pt-4 pb-3">
<div className="flex items-center gap-4">
<div>
<h1 className="text-lg font-bold text-primary">Set up your hospital</h1>
<p className="text-xs text-tertiary">
{completedCount} of {totalSteps} steps complete · finish setup to start
using your workspace
</p>
</div>
</div>
<Button color="link-gray" size="sm" onClick={onDismiss}>
Skip for now
</Button>
</div>
<div className="mx-auto w-full max-w-screen-2xl px-8 pb-3">
<div className="h-1.5 w-full overflow-hidden rounded-full bg-secondary">
<div
className="h-full rounded-full bg-brand-solid transition-all duration-300"
style={{ width: `${progressPct}%` }}
/>
</div>
</div>
</header>
{/* Body — three columns inside a fixed-height flex row.
min-h-0 on the row + each column lets the inner
overflow-y-auto actually take effect. */}
<div className="mx-auto flex min-h-0 w-full max-w-screen-2xl flex-1 gap-6 px-8 py-6">
{/* Left — step navigator. Scrolls if it overflows on
very short viewports, but in practice it fits. */}
<nav className="w-60 shrink-0 overflow-y-auto">
<ol className="flex flex-col gap-1">
{SETUP_STEP_NAMES.map((step, idx) => {
const meta = SETUP_STEP_LABELS[step];
const status = state.steps[step];
const isActive = step === activeStep;
const isComplete = status.completed;
return (
<li key={step}>
<button
type="button"
onClick={() => onSelectStep(step)}
className={cx(
'group flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition',
isActive
? 'border-brand bg-brand-primary'
: 'border-transparent hover:bg-secondary',
)}
>
<span className="mt-0.5 shrink-0">
<FontAwesomeIcon
icon={isComplete ? faCircleCheck : faCircle}
className={cx(
'size-5',
isComplete
? 'text-success-primary'
: 'text-quaternary',
)}
/>
</span>
<span className="flex-1">
<span className="block text-xs font-medium text-tertiary">
Step {idx + 1}
</span>
<span
className={cx(
'block text-sm font-semibold',
isActive ? 'text-brand-primary' : 'text-primary',
)}
>
{meta.title}
</span>
</span>
</button>
</li>
);
})}
</ol>
</nav>
{/* Middle — form column. min-w-0 prevents children from
forcing the column wider than its flex basis (long
inputs, etc.). overflow-y-auto so it scrolls
independently of the right pane. */}
<main className="flex min-w-0 flex-1 flex-col overflow-y-auto">{children}</main>
{/* Right — preview pane. Always rendered as a stable
portal target (so the active step's WizardStep can
createPortal into it via WizardLayoutContext).
Hidden below xl breakpoint (1280px) so the wizard
collapses cleanly to two columns on smaller screens.
Independent scroll. */}
<aside
ref={setRightPaneEl}
className="hidden w-80 shrink-0 overflow-y-auto xl:block"
/>
</div>
</div>
</WizardLayoutContext.Provider>
);
};

434
src/components/setup/wizard-step-ai.tsx
View File

@@ -1,434 +0,0 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPenToSquare, faRotateLeft, faRobot } from '@fortawesome/pro-duotone-svg-icons';
import { WizardStep } from './wizard-step';
import { AiRightPane, type AiActorSummary } from './wizard-right-panes';
import { AiForm, emptyAiFormValues, type AiFormValues, type AiProvider } from '@/components/forms/ai-form';
import { Button } from '@/components/base/buttons/button';
import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
import { EditPatientConfirmModal } from '@/components/modals/edit-patient-confirm-modal';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { useAuth } from '@/providers/auth-provider';
import type { WizardStepComponentProps } from './wizard-step-types';
// AI step (post-prompt-config rework). The middle pane has two sections:
//
// 1. Provider / model / temperature picker — same as before, drives the
// provider that all actors use under the hood.
// 2. AI personas — list of 7 actor cards, each with name, description,
// truncated current template, and an Edit button. Edit triggers a
// confirmation modal warning about unintended consequences, then
// opens a slideout with the full template + a "variables you can
// use" reference + Save / Reset.
//
// The right pane shows the same 7 personas as compact "last edited" cards
// so the admin can scan recent activity at a glance.
//
// Backend wiring lives in helix-engage-server/src/config/ai.defaults.ts
// (DEFAULT_AI_PROMPTS) + ai-config.service.ts (renderPrompt / updatePrompt
// / resetPrompt). The 7 service files (widget chat, CC agent helper,
// supervisor, lead enrichment, call insight, call assist, recording
// analysis) all call AiConfigService.renderPrompt(actor, vars) so any
// edit here lands instantly.
type ServerPromptConfig = {
label: string;
description: string;
variables: { key: string; description: string }[];
template: string;
defaultTemplate: string;
lastEditedAt: string | null;
lastEditedBy: string | null;
};
type ServerAiConfig = {
provider?: AiProvider;
model?: string;
temperature?: number;
prompts?: Record<string, ServerPromptConfig>;
};
// Display order for the actor cards. Mirrors AI_ACTOR_KEYS in
// ai.defaults.ts so the wizard renders personas in the same order
// admins see them documented elsewhere.
const ACTOR_ORDER = [
'widgetChat',
'ccAgentHelper',
'supervisorChat',
'leadEnrichment',
'callInsight',
'callAssist',
'recordingAnalysis',
] as const;
const truncate = (s: string, max: number): string =>
s.length > max ? s.slice(0, max).trimEnd() + '…' : s;
export const WizardStepAi = (props: WizardStepComponentProps) => {
const { user } = useAuth();
const [values, setValues] = useState<AiFormValues>(emptyAiFormValues);
const [prompts, setPrompts] = useState<Record<string, ServerPromptConfig>>({});
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
// Edit flow state — three phases:
// 1. confirmingActor: which actor's Edit button was just clicked
// (drives the confirmation modal)
// 2. editingActor: which actor's slideout is open (only set after
// the user confirms past the warning prompt)
// 3. draftTemplate: the current textarea contents in the slideout
const [confirmingActor, setConfirmingActor] = useState<string | null>(null);
const [editingActor, setEditingActor] = useState<string | null>(null);
const [draftTemplate, setDraftTemplate] = useState('');
const [savingPrompt, setSavingPrompt] = useState(false);
const fetchConfig = useCallback(async () => {
try {
const data = await apiClient.get<ServerAiConfig>('/api/config/ai', { silent: true });
setValues({
provider: data.provider ?? 'openai',
model: data.model ?? 'gpt-4o-mini',
temperature: data.temperature != null ? String(data.temperature) : '0.7',
systemPromptAddendum: '',
});
setPrompts(data.prompts ?? {});
} catch (err) {
console.error('[wizard/ai] fetch failed', err);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchConfig();
}, [fetchConfig]);
const handleSaveProviderConfig = async () => {
if (!values.model.trim()) {
notify.error('Model is required');
return;
}
const temperature = Number(values.temperature);
setSaving(true);
try {
await apiClient.put('/api/config/ai', {
provider: values.provider,
model: values.model.trim(),
temperature: Number.isNaN(temperature) ? 0.7 : Math.min(2, Math.max(0, temperature)),
});
notify.success('AI settings saved', 'Provider and model updated.');
await fetchConfig();
if (!props.isCompleted) {
await props.onComplete('ai');
}
} catch (err) {
console.error('[wizard/ai] save provider failed', err);
} finally {
setSaving(false);
}
};
// Confirmation modal → slideout flow.
const handleEditClick = (actor: string) => {
setConfirmingActor(actor);
};
const handleConfirmEdit = () => {
if (!confirmingActor) return;
const prompt = prompts[confirmingActor];
if (!prompt) return;
setEditingActor(confirmingActor);
setDraftTemplate(prompt.template);
setConfirmingActor(null);
};
const handleSavePrompt = async (close: () => void) => {
if (!editingActor) return;
if (!draftTemplate.trim()) {
notify.error('Prompt cannot be empty');
return;
}
setSavingPrompt(true);
try {
await apiClient.put(`/api/config/ai/prompts/${editingActor}`, {
template: draftTemplate,
editedBy: user?.email ?? null,
});
notify.success('Prompt updated', `${prompts[editingActor]?.label ?? editingActor} saved`);
await fetchConfig();
close();
setEditingActor(null);
} catch (err) {
console.error('[wizard/ai] save prompt failed', err);
} finally {
setSavingPrompt(false);
}
};
const handleResetPrompt = async (close: () => void) => {
if (!editingActor) return;
setSavingPrompt(true);
try {
await apiClient.post(`/api/config/ai/prompts/${editingActor}/reset`);
notify.success('Prompt reset', `${prompts[editingActor]?.label ?? editingActor} restored to default`);
await fetchConfig();
close();
setEditingActor(null);
} catch (err) {
console.error('[wizard/ai] reset prompt failed', err);
} finally {
setSavingPrompt(false);
}
};
// Build the right-pane summary entries from the loaded prompts.
// `isCustom` is true when the template differs from the shipped
// default OR when the audit fields are populated — either way the
// admin has touched it.
const actorSummaries = useMemo<AiActorSummary[]>(() => {
return ACTOR_ORDER.filter((key) => prompts[key]).map((key) => {
const p = prompts[key];
return {
key,
label: p.label,
description: p.description,
lastEditedAt: p.lastEditedAt,
isCustom: p.template !== p.defaultTemplate || p.lastEditedAt !== null,
};
});
}, [prompts]);
const editingPrompt = editingActor ? prompts[editingActor] : null;
const confirmingLabel = confirmingActor ? prompts[confirmingActor]?.label : '';
return (
<WizardStep
step="ai"
isCompleted={props.isCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={handleSaveProviderConfig}
onFinish={props.onFinish}
saving={saving}
rightPane={<AiRightPane actors={actorSummaries} />}
>
{loading ? (
<p className="text-sm text-tertiary">Loading AI settings…</p>
) : (
<div className="flex flex-col gap-8">
<section>
<h3 className="mb-3 text-sm font-semibold text-primary">Provider & model</h3>
<AiForm value={values} onChange={setValues} />
</section>
<section>
<div className="mb-3 flex items-center justify-between">
<h3 className="text-sm font-semibold text-primary">AI personas</h3>
<span className="text-xs text-tertiary">
{actorSummaries.length} configurable prompts
</span>
</div>
<p className="mb-4 text-xs text-tertiary">
Each persona below is a different AI surface in Helix Engage. Editing a
prompt changes how that persona sounds and what rules it follows. Defaults
are tuned for hospital call centers — only edit if you have a specific
reason and can test the result.
</p>
<ul className="flex flex-col gap-3">
{ACTOR_ORDER.map((key) => {
const prompt = prompts[key];
if (!prompt) return null;
const isCustom =
prompt.template !== prompt.defaultTemplate ||
prompt.lastEditedAt !== null;
return (
<li
key={key}
className="rounded-xl border border-secondary bg-primary p-4 shadow-xs"
>
<div className="flex items-start gap-3">
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-secondary text-brand-secondary">
<FontAwesomeIcon icon={faRobot} className="size-5" />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<h4 className="truncate text-sm font-semibold text-primary">
{prompt.label}
</h4>
<p className="mt-0.5 text-xs text-tertiary">
{prompt.description}
</p>
</div>
{isCustom && (
<span className="shrink-0 rounded-full bg-warning-secondary px-2 py-0.5 text-xs font-medium text-warning-primary">
Edited
</span>
)}
</div>
<p className="mt-3 line-clamp-3 rounded-lg border border-secondary bg-secondary p-3 font-mono text-xs leading-relaxed text-tertiary">
{truncate(prompt.template, 220)}
</p>
<div className="mt-3 flex justify-end">
<Button
size="sm"
color="secondary"
onClick={() => handleEditClick(key)}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon
icon={faPenToSquare}
className={className}
/>
)}
>
Edit
</Button>
</div>
</div>
</div>
</li>
);
})}
</ul>
</section>
</div>
)}
{/* Confirmation modal — reused from the patient-edit gate. */}
<EditPatientConfirmModal
isOpen={confirmingActor !== null}
onOpenChange={(open) => {
if (!open) setConfirmingActor(null);
}}
onConfirm={handleConfirmEdit}
title={`Edit ${confirmingLabel} prompt?`}
description={
<>
Modifying this prompt can affect call quality, lead summaries, and supervisor
insights in ways that are hard to predict. The defaults are tuned for hospital
call centers — only edit if you have a specific reason and can test the
result. You can always reset back to default from the editor.
</>
}
confirmLabel="Yes, edit prompt"
/>
{/* Slideout editor — only opens after the warning is confirmed. */}
<SlideoutMenu
isOpen={editingActor !== null}
onOpenChange={(open) => {
if (!open) setEditingActor(null);
}}
isDismissable
>
{({ close }) => (
<>
<SlideoutMenu.Header onClose={close}>
<div className="flex items-center gap-3 pr-8">
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
<FontAwesomeIcon
icon={faRobot}
className="size-5 text-fg-brand-primary"
/>
</div>
<div>
<h2 className="text-lg font-semibold text-primary">
Edit {editingPrompt?.label}
</h2>
<p className="text-sm text-tertiary">
{editingPrompt?.description}
</p>
</div>
</div>
</SlideoutMenu.Header>
<SlideoutMenu.Content>
<div className="flex flex-col gap-4">
<div>
<label className="block text-sm font-medium text-secondary">
Prompt template
</label>
<textarea
value={draftTemplate}
onChange={(e) => setDraftTemplate(e.target.value)}
rows={18}
className="mt-1.5 w-full resize-y rounded-lg border border-secondary bg-primary p-3 font-mono text-xs text-primary outline-none focus:border-brand focus:ring-2 focus:ring-brand-100"
/>
<p className="mt-1 text-xs text-tertiary">
Variables wrapped in <code>{'{{double-braces}}'}</code> get
substituted at runtime with live data.
</p>
</div>
{editingPrompt?.variables && editingPrompt.variables.length > 0 && (
<div className="rounded-lg border border-secondary bg-secondary p-3">
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
Variables you can use
</p>
<ul className="mt-2 flex flex-col gap-1.5">
{editingPrompt.variables.map((v) => (
<li key={v.key} className="flex items-start gap-2 text-xs">
<code className="shrink-0 rounded bg-primary px-1.5 py-0.5 font-mono text-brand-primary">
{`{{${v.key}}}`}
</code>
<span className="text-tertiary">
{v.description}
</span>
</li>
))}
</ul>
</div>
)}
{editingPrompt?.lastEditedAt && (
<p className="text-xs text-tertiary">
Last edited{' '}
{new Date(editingPrompt.lastEditedAt).toLocaleString()}
{editingPrompt.lastEditedBy && ` by ${editingPrompt.lastEditedBy}`}
</p>
)}
</div>
</SlideoutMenu.Content>
<SlideoutMenu.Footer>
<div className="flex items-center justify-between gap-3">
<Button
size="md"
color="link-gray"
isDisabled={savingPrompt}
onClick={() => handleResetPrompt(close)}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faRotateLeft} className={className} />
)}
>
Reset to default
</Button>
<div className="flex items-center gap-3">
<Button
size="md"
color="secondary"
isDisabled={savingPrompt}
onClick={close}
>
Cancel
</Button>
<Button
size="md"
color="primary"
isLoading={savingPrompt}
showTextWhileLoading
onClick={() => handleSavePrompt(close)}
>
{savingPrompt ? 'Saving…' : 'Save prompt'}
</Button>
</div>
</div>
</SlideoutMenu.Footer>
</>
)}
</SlideoutMenu>
</WizardStep>
);
};

171
src/components/setup/wizard-step-clinics.tsx
View File

@@ -1,171 +0,0 @@
import { useCallback, useEffect, useState } from 'react';
import { WizardStep } from './wizard-step';
import { ClinicsRightPane, type ClinicSummary } from './wizard-right-panes';
import {
ClinicForm,
clinicCoreToGraphQLInput,
holidayInputsFromForm,
requiredDocInputsFromForm,
emptyClinicFormValues,
type ClinicFormValues,
} from '@/components/forms/clinic-form';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import type { WizardStepComponentProps } from './wizard-step-types';
// Clinic step — presents a single-clinic form. On save the wizard runs
// a three-stage create chain:
// 1. createClinic (main record → get id)
// 2. createHoliday × N (one per holiday entry)
// 3. createClinicRequiredDocument × N (one per required doc type)
//
// This mirrors what the /settings/clinics list page does, minus the
// delete-old-first step (wizard is always creating, never updating).
// Failures inside the chain throw up through onComplete so the user
// sees the error loud, and the wizard stays on the current step.
export const WizardStepClinics = (props: WizardStepComponentProps) => {
const [values, setValues] = useState<ClinicFormValues>(emptyClinicFormValues);
const [saving, setSaving] = useState(false);
const [clinics, setClinics] = useState<ClinicSummary[]>([]);
const fetchClinics = useCallback(async () => {
try {
// Field names match what the platform actually exposes:
// - the SDK ADDRESS field is named "address" but the
// platform mounts it as `addressCustom` (composite type
// with addressCity / addressStreet / etc.)
// - the SDK SELECT field labelled "Status" lands as plain
// `status: ClinicStatusEnum`, NOT `clinicStatus`
// Verified via __type introspection — keep this query
// pinned to the actual schema to avoid silent empty fetches.
type ClinicNode = {
id: string;
clinicName: string | null;
addressCustom: { addressCity: string | null } | null;
status: string | null;
};
const data = await apiClient.graphql<{
clinics: { edges: { node: ClinicNode }[] };
}>(
`{ clinics(first: 100, orderBy: { createdAt: DescNullsLast }) {
edges { node {
id clinicName
addressCustom { addressCity }
status
} }
} }`,
undefined,
{ silent: true },
);
// Flatten into the shape ClinicsRightPane expects.
setClinics(
data.clinics.edges.map((e) => ({
id: e.node.id,
clinicName: e.node.clinicName,
addressCity: e.node.addressCustom?.addressCity ?? null,
clinicStatus: e.node.status,
})),
);
} catch (err) {
console.error('[wizard/clinics] fetch failed', err);
}
}, []);
useEffect(() => {
fetchClinics();
}, [fetchClinics]);
const handleSave = async () => {
if (!values.clinicName.trim()) {
notify.error('Clinic name is required');
return;
}
setSaving(true);
try {
// 1. Core clinic record
const res = await apiClient.graphql<{ createClinic: { id: string } }>(
`mutation CreateClinic($data: ClinicCreateInput!) {
createClinic(data: $data) { id }
}`,
{ data: clinicCoreToGraphQLInput(values) },
);
const clinicId = res.createClinic.id;
// 2. Holidays
if (values.holidays.length > 0) {
const holidayInputs = holidayInputsFromForm(values, clinicId);
await Promise.all(
holidayInputs.map((data) =>
apiClient.graphql(
`mutation CreateHoliday($data: HolidayCreateInput!) {
createHoliday(data: $data) { id }
}`,
{ data },
),
),
);
}
// 3. Required documents
if (values.requiredDocumentTypes.length > 0) {
const docInputs = requiredDocInputsFromForm(values, clinicId);
await Promise.all(
docInputs.map((data) =>
apiClient.graphql(
`mutation CreateClinicRequiredDocument($data: ClinicRequiredDocumentCreateInput!) {
createClinicRequiredDocument(data: $data) { id }
}`,
{ data },
),
),
);
}
notify.success('Clinic added', values.clinicName);
await fetchClinics();
// Mark complete on first successful create. Don't auto-advance —
// admins typically add multiple clinics in one sitting; the
// Continue button on the wizard nav handles forward motion.
if (!props.isCompleted) {
await props.onComplete('clinics');
}
setValues(emptyClinicFormValues());
} catch (err) {
console.error('[wizard/clinics] save failed', err);
} finally {
setSaving(false);
}
};
// Same trick as the Team step: once at least one clinic exists,
// flip isCompleted=true so the WizardStep renders the "Continue"
// button as the primary action — the form stays open below for
// adding more clinics.
const pretendCompleted = props.isCompleted || clinics.length > 0;
return (
<WizardStep
step="clinics"
isCompleted={pretendCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={handleSave}
onFinish={props.onFinish}
saving={saving}
rightPane={<ClinicsRightPane clinics={clinics} />}
>
<ClinicForm value={values} onChange={setValues} />
<div className="mt-6 flex justify-end">
<button
type="button"
disabled={saving}
onClick={handleSave}
className="inline-flex items-center gap-2 rounded-lg bg-brand-solid px-4 py-2 text-sm font-semibold text-primary_on-brand shadow-xs transition hover:bg-brand-solid_hover disabled:opacity-60"
>
{saving ? 'Adding…' : 'Add clinic'}
</button>
</div>
</WizardStep>
);
};

150
src/components/setup/wizard-step-doctors.tsx
View File

@@ -1,150 +0,0 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { WizardStep } from './wizard-step';
import { DoctorsRightPane, type DoctorSummary } from './wizard-right-panes';
import {
DoctorForm,
doctorCoreToGraphQLInput,
visitSlotInputsFromForm,
emptyDoctorFormValues,
type DoctorFormValues,
} from '@/components/forms/doctor-form';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import type { WizardStepComponentProps } from './wizard-step-types';
// Doctor step — mirrors the clinics step but also fetches the clinic list
// for the DoctorForm's clinic dropdown. If there are no clinics yet we let
// the admin know they need to complete step 2 first (the wizard doesn't
// force ordering, but a doctor without a clinic is useless).
type ClinicLite = { id: string; clinicName: string | null };
export const WizardStepDoctors = (props: WizardStepComponentProps) => {
const [values, setValues] = useState<DoctorFormValues>(emptyDoctorFormValues);
const [clinics, setClinics] = useState<ClinicLite[]>([]);
const [doctors, setDoctors] = useState<DoctorSummary[]>([]);
const [loadingClinics, setLoadingClinics] = useState(true);
const [saving, setSaving] = useState(false);
const fetchData = useCallback(async () => {
try {
const data = await apiClient.graphql<{
clinics: { edges: { node: ClinicLite }[] };
doctors: { edges: { node: DoctorSummary }[] };
}>(
`{
clinics(first: 100) { edges { node { id clinicName } } }
doctors(first: 100, orderBy: { createdAt: DescNullsLast }) {
edges { node { id fullName { firstName lastName } department specialty } }
}
}`,
undefined,
{ silent: true },
);
setClinics(data.clinics.edges.map((e) => e.node));
setDoctors(data.doctors.edges.map((e) => e.node));
} catch (err) {
console.error('[wizard/doctors] fetch failed', err);
setClinics([]);
setDoctors([]);
} finally {
setLoadingClinics(false);
}
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
const clinicOptions = useMemo(
() => clinics.map((c) => ({ id: c.id, label: c.clinicName ?? 'Unnamed clinic' })),
[clinics],
);
const handleSave = async () => {
if (!values.firstName.trim() || !values.lastName.trim()) {
notify.error('First and last name are required');
return;
}
setSaving(true);
try {
// 1. Core doctor record
const res = await apiClient.graphql<{ createDoctor: { id: string } }>(
`mutation CreateDoctor($data: DoctorCreateInput!) {
createDoctor(data: $data) { id }
}`,
{ data: doctorCoreToGraphQLInput(values) },
);
const doctorId = res.createDoctor.id;
// 2. Visit slots (doctor can be at multiple clinics on
// multiple days with different times each).
const slotInputs = visitSlotInputsFromForm(values, doctorId);
if (slotInputs.length > 0) {
await Promise.all(
slotInputs.map((data) =>
apiClient.graphql(
`mutation CreateDoctorVisitSlot($data: DoctorVisitSlotCreateInput!) {
createDoctorVisitSlot(data: $data) { id }
}`,
{ data },
),
),
);
}
notify.success('Doctor added', `Dr. ${values.firstName} ${values.lastName}`);
await fetchData();
if (!props.isCompleted) {
await props.onComplete('doctors');
}
setValues(emptyDoctorFormValues());
} catch (err) {
console.error('[wizard/doctors] save failed', err);
} finally {
setSaving(false);
}
};
const pretendCompleted = props.isCompleted || doctors.length > 0;
return (
<WizardStep
step="doctors"
isCompleted={pretendCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={handleSave}
onFinish={props.onFinish}
saving={saving}
rightPane={<DoctorsRightPane doctors={doctors} />}
>
{loadingClinics ? (
<p className="text-sm text-tertiary">Loading clinics…</p>
) : clinics.length === 0 ? (
<div className="rounded-lg border border-dashed border-warning bg-warning-primary p-4">
<p className="text-sm font-semibold text-warning-primary">Add a clinic first</p>
<p className="mt-1 text-xs text-tertiary">
You need at least one clinic before you can assign doctors. Go back to the{' '}
<b>Clinics</b> step and add a branch first.
</p>
</div>
) : (
<>
<DoctorForm value={values} onChange={setValues} clinics={clinicOptions} />
<div className="mt-6 flex justify-end">
<button
type="button"
disabled={saving}
onClick={handleSave}
className="inline-flex items-center gap-2 rounded-lg bg-brand-solid px-4 py-2 text-sm font-semibold text-primary_on-brand shadow-xs transition hover:bg-brand-solid_hover disabled:opacity-60"
>
{saving ? 'Adding…' : 'Add doctor'}
</button>
</div>
</>
)}
</WizardStep>
);
};

122
src/components/setup/wizard-step-identity.tsx
View File

@@ -1,122 +0,0 @@
import { useEffect, useState } from 'react';
import { Link } from 'react-router';
import { Input } from '@/components/base/input/input';
import { WizardStep } from './wizard-step';
import { IdentityRightPane } from './wizard-right-panes';
import { notify } from '@/lib/toast';
import type { WizardStepComponentProps } from './wizard-step-types';
// Minimal identity step — just the two most important fields (hospital name
// and logo URL). Full branding (colors, fonts, login copy) is handled on the
// /branding page and linked from here. Keeping the wizard lean means admins
// can clear setup in under ten minutes; the branding page is there whenever
// they want to polish further.
const THEME_API_URL =
import.meta.env.VITE_THEME_API_URL ?? import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
export const WizardStepIdentity = (props: WizardStepComponentProps) => {
const [hospitalName, setHospitalName] = useState('');
const [logoUrl, setLogoUrl] = useState('');
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
useEffect(() => {
fetch(`${THEME_API_URL}/api/config/theme`)
.then((r) => (r.ok ? r.json() : null))
.then((data) => {
if (data?.brand) {
setHospitalName(data.brand.hospitalName ?? '');
setLogoUrl(data.brand.logo ?? '');
}
})
.catch(() => {
// non-fatal — admin can fill in fresh values
})
.finally(() => setLoading(false));
}, []);
const handleSave = async () => {
if (!hospitalName.trim()) {
notify.error('Hospital name is required');
return;
}
setSaving(true);
try {
const response = await fetch(`${THEME_API_URL}/api/config/theme`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
brand: {
hospitalName: hospitalName.trim(),
logo: logoUrl.trim() || undefined,
},
}),
});
if (!response.ok) throw new Error(`PUT /api/config/theme failed: ${response.status}`);
notify.success('Identity saved', 'Hospital name and logo updated.');
await props.onComplete('identity');
props.onAdvance();
} catch (err) {
notify.error('Save failed', 'Could not update hospital identity. Please try again.');
console.error('[wizard/identity] save failed', err);
} finally {
setSaving(false);
}
};
return (
<WizardStep
step="identity"
isCompleted={props.isCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={handleSave}
onFinish={props.onFinish}
saving={saving}
rightPane={<IdentityRightPane />}
>
{loading ? (
<p className="text-sm text-tertiary">Loading current branding…</p>
) : (
<div className="flex flex-col gap-5">
<Input
label="Hospital name"
isRequired
placeholder="e.g. Ramaiah Memorial Hospital"
value={hospitalName}
onChange={setHospitalName}
/>
<Input
label="Logo URL"
placeholder="https://yourhospital.com/logo.png"
hint="Paste a URL to your hospital logo. Square images work best."
value={logoUrl}
onChange={setLogoUrl}
/>
{logoUrl && (
<div className="flex items-center gap-3 rounded-lg border border-secondary bg-secondary p-3">
<span className="text-xs font-semibold text-tertiary">Preview:</span>
<img
src={logoUrl}
alt="Logo preview"
className="size-10 rounded-lg border border-secondary bg-primary object-contain p-1"
onError={(e) => ((e.target as HTMLImageElement).style.display = 'none')}
/>
</div>
)}
<div className="rounded-lg border border-dashed border-secondary bg-secondary p-4">
<p className="text-xs text-tertiary">
Need to pick brand colors, fonts, or customise the login page copy? Open the full{' '}
<Link to="/branding" className="font-semibold text-brand-primary underline">
branding settings
</Link>{' '}
page after completing setup.
</p>
</div>
</div>
)}
</WizardStep>
);
};

441
src/components/setup/wizard-step-team.tsx
View File

@@ -1,441 +0,0 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { WizardStep } from './wizard-step';
import { TeamRightPane, type TeamMemberSummary } from './wizard-right-panes';
import {
EmployeeCreateForm,
emptyEmployeeCreateFormValues,
generateTempPassword,
type EmployeeCreateFormValues,
type RoleOption,
} from '@/components/forms/employee-create-form';
import { Button } from '@/components/base/buttons/button';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { useAuth } from '@/providers/auth-provider';
import type { WizardStepComponentProps } from './wizard-step-types';
// Team step (post-rework) — creates workspace members directly from
// the portal via the sidecar's /api/team/members endpoint. The admin
// enters name + email + temp password + role. SIP seat assignment is
// NOT done here — it lives exclusively in the Telephony wizard step
// so admins manage one thing in one place.
//
// Edit mode: clicking the pencil icon on an employee row in the right
// pane loads that member back into the form (name + role only — email,
// password and SIP seat are not editable here). Save in edit mode
// fires PUT /api/team/members/:id instead of POST.
//
// Email invitations are NOT used anywhere in this flow. The admin is
// expected to share the temp password with the employee directly.
// Recently-created employees keep their plaintext password in
// component state so the right pane's copy icon can paste a
// shareable credentials block to the clipboard. Page reload clears
// that state — only employees created in the current session show
// the copy icon. Older members get only the edit icon.
// In-memory record of an employee the admin just created in this
// session. Holds the plaintext temp password so the copy-icon flow
// works without ever sending the password back from the server.
type CreatedMemberRecord = {
id: string;
userEmail: string;
firstName: string;
lastName: string;
roleId: string;
tempPassword: string;
};
type RoleRow = {
id: string;
label: string;
description: string | null;
canBeAssignedToUsers: boolean;
};
type AgentRow = {
id: string;
name: string | null;
sipExtension: string | null;
ozonetelAgentId: string | null;
workspaceMemberId: string | null;
workspaceMember: {
id: string;
name: { firstName: string | null; lastName: string | null } | null;
userEmail: string;
} | null;
};
type WorkspaceMemberRow = {
id: string;
userEmail: string;
name: { firstName: string | null; lastName: string | null } | null;
// Platform returns `null` (not an empty array) for members with no
// role assigned — touching `.roles[0]` directly throws. Always
// optional-chain reads.
roles: { id: string; label: string }[] | null;
};
const AI_EMAIL_SUFFIX = '@ai.fortytwo.local';
// Build the credentials block that gets copied to the clipboard. Two
// lines (login url + email) plus the temp password — formatted so
// the admin can paste it straight into WhatsApp / SMS. Login URL is
// derived from the current browser origin since the wizard is always
// loaded from the workspace's own URL (or Vite dev), so this matches
// what the employee will use.
const buildCredentialsBlock = (email: string, tempPassword: string): string => {
const origin = typeof window !== 'undefined' ? window.location.origin : '';
return `Login: ${origin}/login\nEmail: ${email}\nTemporary password: ${tempPassword}`;
};
export const WizardStepTeam = (props: WizardStepComponentProps) => {
const { user } = useAuth();
const currentUserEmail = user?.email ?? null;
// Initialise the form with a fresh temp password so the admin
// doesn't have to click "regenerate" before saving the very first
// employee.
const [values, setValues] = useState<EmployeeCreateFormValues>(() => ({
...emptyEmployeeCreateFormValues,
password: generateTempPassword(),
}));
const [editingMemberId, setEditingMemberId] = useState<string | null>(null);
const [roles, setRoles] = useState<RoleOption[]>([]);
// Agents are still fetched (even though we don't show a SIP seat
// picker here) because the right-pane summary needs each member's
// current SIP extension to show the green badge.
const [agents, setAgents] = useState<AgentRow[]>([]);
const [members, setMembers] = useState<WorkspaceMemberRow[]>([]);
const [createdMembers, setCreatedMembers] = useState<CreatedMemberRecord[]>([]);
const [saving, setSaving] = useState(false);
const [loading, setLoading] = useState(true);
const isEditing = editingMemberId !== null;
const fetchRolesAndAgents = useCallback(async () => {
try {
const data = await apiClient.graphql<{
getRoles: RoleRow[];
agents: { edges: { node: AgentRow }[] };
workspaceMembers: { edges: { node: WorkspaceMemberRow }[] };
}>(
`{
getRoles { id label description canBeAssignedToUsers }
agents(first: 100) {
edges { node {
id name sipExtension ozonetelAgentId workspaceMemberId
workspaceMember { id name { firstName lastName } userEmail }
} }
}
workspaceMembers(first: 200) {
edges { node {
id userEmail name { firstName lastName }
roles { id label }
} }
}
}`,
undefined,
{ silent: true },
);
const assignable = data.getRoles.filter((r) => r.canBeAssignedToUsers);
setRoles(
assignable.map((r) => ({
id: r.id,
label: r.label,
supportingText: r.description ?? undefined,
})),
);
setAgents(data.agents.edges.map((e) => e.node));
setMembers(
data.workspaceMembers.edges
.map((e) => e.node)
.filter((m) => !m.userEmail.endsWith(AI_EMAIL_SUFFIX)),
);
} catch (err) {
console.error('[wizard/team] fetch roles/agents failed', err);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchRolesAndAgents();
}, [fetchRolesAndAgents]);
// Reset form back to a fresh "create" state with a new auto-gen
// password. Used after both create-success and edit-cancel.
const resetForm = () => {
setEditingMemberId(null);
setValues({
...emptyEmployeeCreateFormValues,
password: generateTempPassword(),
});
};
const handleSaveCreate = async () => {
const firstName = values.firstName.trim();
const email = values.email.trim();
if (!firstName) {
notify.error('First name is required');
return;
}
if (!email) {
notify.error('Email is required');
return;
}
if (!values.password) {
notify.error('Temporary password is required');
return;
}
if (!values.roleId) {
notify.error('Pick a role');
return;
}
setSaving(true);
try {
const created = await apiClient.post<{
id: string;
userEmail: string;
firstName: string;
lastName: string;
roleId: string;
}>('/api/team/members', {
firstName,
lastName: values.lastName.trim(),
email,
password: values.password,
roleId: values.roleId,
});
// Stash the plaintext temp password alongside the created
// member so the copy-icon can build a credentials block
// later. The password is NOT sent back from the server —
// we hold the only copy in this component's memory.
setCreatedMembers((prev) => [
...prev,
{ ...created, tempPassword: values.password },
]);
notify.success(
'Employee created',
`${firstName} ${values.lastName.trim()}`.trim() || email,
);
await fetchRolesAndAgents();
resetForm();
if (!props.isCompleted) {
await props.onComplete('team');
}
} catch (err) {
console.error('[wizard/team] create failed', err);
} finally {
setSaving(false);
}
};
const handleSaveUpdate = async () => {
if (!editingMemberId) return;
const firstName = values.firstName.trim();
if (!firstName) {
notify.error('First name is required');
return;
}
if (!values.roleId) {
notify.error('Pick a role');
return;
}
setSaving(true);
try {
await apiClient.put(`/api/team/members/${editingMemberId}`, {
firstName,
lastName: values.lastName.trim(),
roleId: values.roleId,
});
notify.success(
'Employee updated',
`${firstName} ${values.lastName.trim()}`.trim() || values.email,
);
await fetchRolesAndAgents();
resetForm();
} catch (err) {
console.error('[wizard/team] update failed', err);
} finally {
setSaving(false);
}
};
const handleSave = isEditing ? handleSaveUpdate : handleSaveCreate;
// Right-pane edit handler — populate the form with the picked
// member's data and switch into edit mode. Email is preserved as
// the row's email (read-only in edit mode); password is cleared
// since the form hides the field anyway.
const handleEditMember = (memberId: string) => {
const member = members.find((m) => m.id === memberId);
if (!member) return;
const firstRole = member.roles?.[0] ?? null;
setEditingMemberId(memberId);
setValues({
firstName: member.name?.firstName ?? '',
lastName: member.name?.lastName ?? '',
email: member.userEmail,
password: '',
roleId: firstRole?.id ?? '',
});
};
// Right-pane copy handler — build the shareable credentials block
// and put it on the clipboard. Only fires for members in the
// createdMembers in-memory map; rows without a known temp password
// don't show the icon at all.
const handleCopyCredentials = async (memberId: string) => {
const member = members.find((m) => m.id === memberId);
if (!member) return;
// Three-tier fallback:
// 1. In-browser memory (createdMembers state) — populated when
// the admin created this employee in the current session,
// survives until refresh. Fastest path, no network call.
// 2. Sidecar Redis cache via GET /api/team/members/:id/temp-password
// — populated for any member created via this endpoint
// within the last 24h, survives reloads.
// 3. Cache miss → tell the admin the password is no longer
// recoverable and direct them to the platform reset flow.
const fromMemory =
createdMembers.find(
(c) => c.userEmail.toLowerCase() === member.userEmail.toLowerCase(),
) ?? createdMembers.find((c) => c.id === memberId);
let tempPassword = fromMemory?.tempPassword ?? null;
if (!tempPassword) {
try {
const res = await apiClient.get<{ password: string | null }>(
`/api/team/members/${memberId}/temp-password`,
{ silent: true },
);
tempPassword = res.password;
} catch (err) {
console.error('[wizard/team] temp-password fetch failed', err);
}
}
if (!tempPassword) {
notify.error(
'Password unavailable',
'The temp password expired (>24h). Reset the password from settings to mint a new one.',
);
return;
}
const block = buildCredentialsBlock(member.userEmail, tempPassword);
try {
await navigator.clipboard.writeText(block);
notify.success('Copied', 'Credentials copied to clipboard');
} catch (err) {
console.error('[wizard/team] clipboard write failed', err);
notify.error('Copy failed', 'Could not write to clipboard');
}
};
// Trick: we lie to WizardStep about isCompleted so that once at
// least one employee exists, the primary wizard button flips to
// "Continue" and the create form stays available below for more
// adds.
const pretendCompleted = props.isCompleted || members.length > 0 || createdMembers.length > 0;
// Build the right pane summary. Every non-admin row gets the
// copy icon — `canCopyCredentials: true` unconditionally — and
// the click handler figures out at action time whether to read
// from in-browser memory or the sidecar's Redis cache. If both
// are empty (>24h old), the click toasts a "password expired"
// message instead of silently failing.
const teamSummaries = useMemo<TeamMemberSummary[]>(
() =>
members.map((m) => {
const seat = agents.find((a) => a.workspaceMemberId === m.id);
const firstRole = m.roles?.[0] ?? null;
return {
id: m.id,
userEmail: m.userEmail,
name: m.name,
roleLabel: firstRole?.label ?? null,
sipExtension: seat?.sipExtension ?? null,
isCurrentUser: currentUserEmail !== null && m.userEmail === currentUserEmail,
canCopyCredentials: true,
};
}),
[members, agents, currentUserEmail],
);
return (
<WizardStep
step="team"
isCompleted={pretendCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={handleSave}
onFinish={props.onFinish}
saving={saving}
rightPane={
<TeamRightPane
members={teamSummaries}
onEdit={handleEditMember}
onCopy={handleCopyCredentials}
/>
}
>
{loading ? (
<p className="text-sm text-tertiary">Loading team settings…</p>
) : (
<div className="flex flex-col gap-6">
<div className="rounded-lg border border-secondary bg-secondary p-4 text-xs text-tertiary">
{isEditing ? (
<p>
Editing an existing employee. You can change their name and role.
To change their SIP seat, go to the <b>Telephony</b> step.
</p>
) : (
<p>
Create employees in-place. Each person gets an auto-generated
temporary password that you share directly — no email
invitations are sent. Click the eye icon to reveal it before
you save. After creating CC agents, head to the <b>Telephony</b>{' '}
step to assign them SIP seats.
</p>
)}
</div>
<EmployeeCreateForm
value={values}
onChange={setValues}
roles={roles}
mode={isEditing ? 'edit' : 'create'}
/>
<div className="flex items-center justify-end gap-3">
{isEditing && (
<Button size="md" color="secondary" isDisabled={saving} onClick={resetForm}>
Cancel
</Button>
)}
<button
type="button"
disabled={saving}
onClick={handleSave}
className="inline-flex items-center gap-2 rounded-lg bg-brand-solid px-4 py-2 text-sm font-semibold text-primary_on-brand shadow-xs transition hover:bg-brand-solid_hover disabled:opacity-60"
>
{saving
? isEditing
? 'Updating…'
: 'Creating…'
: isEditing
? 'Update employee'
: 'Create employee'}
</button>
</div>
</div>
)}
</WizardStep>
);
};

322
src/components/setup/wizard-step-telephony.tsx
View File

@@ -1,322 +0,0 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeadset, faTrash } from '@fortawesome/pro-duotone-svg-icons';
import { WizardStep } from './wizard-step';
import { TelephonyRightPane, type SipSeatSummary } from './wizard-right-panes';
import { Select } from '@/components/base/select/select';
import { Button } from '@/components/base/buttons/button';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import type { WizardStepComponentProps } from './wizard-step-types';
// Telephony step (post-3-pane rework). The middle pane is now an
// assign/unassign editor: pick a SIP seat, pick a workspace member,
// click Assign — or pick an already-mapped seat and click Unassign.
// The right pane shows the live current state (read-only mapping
// summary). Editing here calls updateAgent to set/clear
// workspaceMemberId, then refetches.
//
// SIP seats themselves are pre-provisioned by onboard-hospital.sh
// (see step 5b) — admins can't add or delete seats from this UI,
// only link them to people. To add a new seat, contact support.
type AgentRow = {
id: string;
name: string | null;
sipExtension: string | null;
ozonetelAgentId: string | null;
workspaceMemberId: string | null;
workspaceMember: {
id: string;
name: { firstName: string | null; lastName: string | null } | null;
userEmail: string;
} | null;
};
type WorkspaceMemberRow = {
id: string;
userEmail: string;
name: { firstName: string | null; lastName: string | null } | null;
};
const AI_EMAIL_SUFFIX = '@ai.fortytwo.local';
const memberDisplayName = (m: {
name: { firstName: string | null; lastName: string | null } | null;
userEmail: string;
}): string => {
const first = m.name?.firstName?.trim() ?? '';
const last = m.name?.lastName?.trim() ?? '';
const full = `${first} ${last}`.trim();
return full.length > 0 ? full : m.userEmail;
};
export const WizardStepTelephony = (props: WizardStepComponentProps) => {
const [agents, setAgents] = useState<AgentRow[]>([]);
const [members, setMembers] = useState<WorkspaceMemberRow[]>([]);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
// Editor state — which seat is selected, which member to assign.
const [selectedSeatId, setSelectedSeatId] = useState<string>('');
const [selectedMemberId, setSelectedMemberId] = useState<string>('');
const fetchData = useCallback(async () => {
try {
const data = await apiClient.graphql<{
agents: { edges: { node: AgentRow }[] };
workspaceMembers: { edges: { node: WorkspaceMemberRow }[] };
}>(
`{
agents(first: 100) {
edges { node {
id name sipExtension ozonetelAgentId workspaceMemberId
workspaceMember { id name { firstName lastName } userEmail }
} }
}
workspaceMembers(first: 200) {
edges { node {
id userEmail name { firstName lastName }
} }
}
}`,
undefined,
{ silent: true },
);
setAgents(data.agents.edges.map((e) => e.node));
setMembers(
data.workspaceMembers.edges
.map((e) => e.node)
.filter((m) => !m.userEmail.endsWith(AI_EMAIL_SUFFIX)),
);
} catch (err) {
console.error('[wizard/telephony] fetch failed', err);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
// Map every agent to a SipSeatSummary for the right pane. Single
// source of truth — both panes read from `agents`.
const seatSummaries = useMemo<SipSeatSummary[]>(
() =>
agents.map((a) => ({
id: a.id,
sipExtension: a.sipExtension,
ozonetelAgentId: a.ozonetelAgentId,
workspaceMember: a.workspaceMember,
})),
[agents],
);
// Pre-compute lookups for the editor — which member already owns
// each seat, and which members are already taken (so the dropdown
// can hide them).
const takenMemberIds = useMemo(
() =>
new Set(
agents
.filter((a) => a.workspaceMemberId !== null)
.map((a) => a.workspaceMemberId!),
),
[agents],
);
const seatItems = useMemo(
() =>
agents.map((a) => ({
id: a.id,
label: `Ext ${a.sipExtension ?? '—'}`,
supportingText: a.workspaceMember
? `Currently: ${memberDisplayName(a.workspaceMember)}`
: 'Unassigned',
})),
[agents],
);
// Members dropdown — when a seat is selected and the seat is
// currently mapped, force the member field to show the current
// owner so the admin can see who they're displacing. When seat
// is unassigned, only show free members (the takenMemberIds
// filter).
const memberItems = useMemo(() => {
const selectedSeat = agents.find((a) => a.id === selectedSeatId);
const currentOwnerId = selectedSeat?.workspaceMemberId ?? null;
return members
.filter((m) => m.id === currentOwnerId || !takenMemberIds.has(m.id))
.map((m) => ({
id: m.id,
label: memberDisplayName(m),
supportingText: m.userEmail,
}));
}, [members, agents, selectedSeatId, takenMemberIds]);
// When the admin picks a seat, default the member dropdown to
// whoever currently owns it (if anyone) so Unassign just works.
useEffect(() => {
if (!selectedSeatId) {
setSelectedMemberId('');
return;
}
const seat = agents.find((a) => a.id === selectedSeatId);
setSelectedMemberId(seat?.workspaceMemberId ?? '');
}, [selectedSeatId, agents]);
const selectedSeat = agents.find((a) => a.id === selectedSeatId);
const isCurrentlyMapped = selectedSeat?.workspaceMemberId !== null && selectedSeat?.workspaceMemberId !== undefined;
const updateSeat = async (seatId: string, workspaceMemberId: string | null) => {
setSaving(true);
try {
await apiClient.graphql(
`mutation UpdateAgent($id: UUID!, $data: AgentUpdateInput!) {
updateAgent(id: $id, data: $data) { id workspaceMemberId }
}`,
{ id: seatId, data: { workspaceMemberId } },
);
await fetchData();
// Mark the step complete on first successful action so
// the wizard can advance. Subsequent edits don't re-mark.
if (!props.isCompleted) {
await props.onComplete('telephony');
}
// Clear editor selection so the admin starts the next
// assign from scratch.
setSelectedSeatId('');
setSelectedMemberId('');
} catch (err) {
console.error('[wizard/telephony] updateAgent failed', err);
} finally {
setSaving(false);
}
};
const handleAssign = () => {
if (!selectedSeatId || !selectedMemberId) {
notify.error('Pick a seat and a member to assign');
return;
}
updateSeat(selectedSeatId, selectedMemberId);
};
const handleUnassign = () => {
if (!selectedSeatId) return;
updateSeat(selectedSeatId, null);
};
const pretendCompleted = props.isCompleted || agents.some((a) => a.workspaceMemberId !== null);
return (
<WizardStep
step="telephony"
isCompleted={pretendCompleted}
isLast={props.isLast}
onPrev={props.onPrev}
onNext={props.onNext}
onMarkComplete={async () => {
if (!props.isCompleted) {
await props.onComplete('telephony');
}
props.onAdvance();
}}
onFinish={props.onFinish}
saving={saving}
rightPane={<TelephonyRightPane seats={seatSummaries} />}
>
{loading ? (
<p className="text-sm text-tertiary">Loading SIP seats…</p>
) : agents.length === 0 ? (
<div className="rounded-lg border border-secondary bg-secondary p-6 text-sm text-tertiary">
<p className="font-medium text-primary">No SIP seats configured</p>
<p className="mt-1">
This hospital has no pre-provisioned agent profiles. Contact support to
add SIP seats, then come back to finish setup.
</p>
</div>
) : (
<div className="flex flex-col gap-5">
<div className="rounded-lg border border-secondary bg-secondary p-4 text-xs text-tertiary">
<p>
Pick a SIP seat and assign it to a workspace member. To free up a seat,
select it and click <b>Unassign</b>. The right pane shows the live
mapping — what you change here updates there immediately.
</p>
</div>
<Select
label="SIP seat"
placeholder="Select a seat"
items={seatItems}
selectedKey={selectedSeatId || null}
onSelectionChange={(key) => setSelectedSeatId((key as string) || '')}
>
{(item) => (
<Select.Item
id={item.id}
label={item.label}
supportingText={item.supportingText}
/>
)}
</Select>
<Select
label="Workspace member"
placeholder={
!selectedSeatId
? 'Pick a seat first'
: memberItems.length === 0
? 'No available members'
: 'Select a member'
}
isDisabled={!selectedSeatId || memberItems.length === 0}
items={memberItems}
selectedKey={selectedMemberId || null}
onSelectionChange={(key) => setSelectedMemberId((key as string) || '')}
>
{(item) => (
<Select.Item
id={item.id}
label={item.label}
supportingText={item.supportingText}
/>
)}
</Select>
<div className="flex items-center justify-end gap-3">
{isCurrentlyMapped && (
<Button
color="secondary-destructive"
size="md"
isDisabled={saving}
onClick={handleUnassign}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faTrash} className={className} />
)}
>
Unassign
</Button>
)}
<Button
color="primary"
size="md"
isDisabled={saving || !selectedSeatId || !selectedMemberId}
onClick={handleAssign}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faHeadset} className={className} />
)}
>
{selectedSeat?.workspaceMemberId === selectedMemberId
? 'Already assigned'
: isCurrentlyMapped
? 'Reassign'
: 'Assign'}
</Button>
</div>
</div>
)}
</WizardStep>
);
};

20
src/components/setup/wizard-step-types.ts
View File

@@ -1,20 +0,0 @@
import type { SetupStepName } from '@/lib/setup-state';
// Shared prop shape for every wizard step. The parent (setup-wizard.tsx)
// dispatches to the right component based on activeStep; each component
// handles its own data loading, form state, and save action, then calls
// onComplete + onAdvance when the user clicks "Mark complete".
export type WizardStepComponentProps = {
isCompleted: boolean;
isLast: boolean;
onPrev: (() => void) | null;
onNext: (() => void) | null;
// Called by each step after a successful save. Parent handles both the
// markSetupStepComplete API call AND the local state update so the left
// nav reflects the new completion immediately.
onComplete: (step: SetupStepName) => Promise<void>;
// Move to the next step (used after a successful save, or directly via
// the Next button when the step is already complete).
onAdvance: () => void;
onFinish: () => void;
};

142
src/components/setup/wizard-step.tsx
View File

@@ -1,142 +0,0 @@
import { useContext, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowRight, faCircleCheck } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { SETUP_STEP_LABELS, type SetupStepName } from '@/lib/setup-state';
import { WizardLayoutContext } from './wizard-layout-context';
type WizardStepProps = {
step: SetupStepName;
isCompleted: boolean;
isLast: boolean;
onPrev: (() => void) | null;
onNext: (() => void) | null;
onMarkComplete: () => void;
onFinish: () => void;
saving?: boolean;
children: ReactNode;
// Optional content for the wizard shell's right preview pane.
// Portaled into the shell's <aside> via WizardLayoutContext when
// both are mounted. Each step component declares this inline so
// the per-step data fetching stays in one place.
rightPane?: ReactNode;
};
// Single-step wrapper. The parent picks which step is active and supplies
// the form content as children. The step provides title, description,
// "mark complete" CTA, and prev/next/finish navigation. In Phase 5 the
// children will be real form components from the corresponding settings
// pages — for now they're placeholders.
export const WizardStep = ({
step,
isCompleted,
isLast,
onPrev,
onNext,
onMarkComplete,
onFinish,
saving = false,
children,
rightPane,
}: WizardStepProps) => {
const meta = SETUP_STEP_LABELS[step];
const { rightPaneEl } = useContext(WizardLayoutContext);
return (
<>
{rightPane && rightPaneEl && createPortal(rightPane, rightPaneEl)}
<div className="rounded-xl border border-secondary bg-primary p-8 shadow-xs">
<div className="mb-6 flex items-start justify-between gap-4">
<div>
<h2 className="text-2xl font-bold text-primary">{meta.title}</h2>
<p className="mt-1 text-sm text-tertiary">{meta.description}</p>
</div>
{isCompleted && (
<span className="inline-flex items-center gap-2 rounded-full bg-success-primary px-3 py-1 text-xs font-medium text-success-primary">
<FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
Complete
</span>
)}
</div>
<div className="mb-8">{children}</div>
<div className="flex items-center justify-between gap-4 border-t border-secondary pt-6">
<Button
color="secondary"
size="md"
isDisabled={!onPrev}
onClick={onPrev ?? undefined}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowLeft} className={className} />
)}
>
Previous
</Button>
{/* One primary action at the bottom — never two
competing buttons. Previously the wizard showed
Mark complete + Next side-by-side, and users
naturally clicked Next (rightmost = "continue"),
skipping the save+complete chain entirely. Result
was every step staying at 0/6.
New behaviour: a single button whose label and
handler depend on completion state.
- !isCompleted, not last → "Save and continue"
calls onMarkComplete (which does save +
complete + advance via the step component's
handleSave). Forces the agent through the
completion path.
- !isCompleted, last → "Save and finish"
same chain, plus onFinish at the end.
- isCompleted, not last → "Continue"
calls onNext (pure navigation).
- isCompleted, last → "Finish setup"
calls onFinish.
Free-form navigation is still available via the
left-side step nav, so users can revisit completed
steps without re-saving. */}
<div className="flex items-center gap-3">
{!isCompleted ? (
<Button
color="primary"
size="md"
isLoading={saving}
showTextWhileLoading
onClick={onMarkComplete}
iconTrailing={
isLast
? undefined
: ({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowRight} className={className} />
)
}
>
{isLast ? 'Save and finish' : 'Save and continue'}
</Button>
) : isLast ? (
<Button color="primary" size="md" onClick={onFinish}>
Finish setup
</Button>
) : (
<Button
color="primary"
size="md"
isDisabled={!onNext}
onClick={onNext ?? undefined}
iconTrailing={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowRight} className={className} />
)}
>
Continue
</Button>
)}
</div>
</div>
</div>
</>
);
};

22
src/hooks/use-agent-state.ts
View File

@@ -2,13 +2,11 @@ import { useState, useEffect, useRef } from 'react';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
export type OzonetelState = 'ready' | 'break' | 'training' | 'calling' | 'in-call' | 'acw' | 'offline'; export type OzonetelState = 'ready' | 'break' | 'training' | 'calling' | 'in-call' | 'acw' | 'offline';
export type SupervisorPresence = 'none' | 'whisper' | 'barge';
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100'; const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
export const useAgentState = (agentId: string | null): { state: OzonetelState; supervisorPresence: SupervisorPresence } => { export const useAgentState = (agentId: string | null): OzonetelState => {
const [state, setState] = useState<OzonetelState>('offline'); const [state, setState] = useState<OzonetelState>('offline');
const [supervisorPresence, setSupervisorPresence] = useState<SupervisorPresence>('none');
const prevStateRef = useRef<OzonetelState>('offline'); const prevStateRef = useRef<OzonetelState>('offline');
const esRef = useRef<EventSource | null>(null); const esRef = useRef<EventSource | null>(null);
@@ -52,26 +50,12 @@ export const useAgentState = (agentId: string | null): { state: OzonetelState; s
localStorage.removeItem('helix_agent_config'); localStorage.removeItem('helix_agent_config');
localStorage.removeItem('helix_user'); localStorage.removeItem('helix_user');
import('@/state/sip-manager').then(({ disconnectSip }) => disconnectSip(false, 'agent-state-offline')).catch(() => {}); import('@/state/sip-manager').then(({ disconnectSip }) => disconnectSip()).catch(() => {});
setTimeout(() => { window.location.href = '/login'; }, 1500); setTimeout(() => { window.location.href = '/login'; }, 1500);
return; return;
} }
// Supervisor presence events — don't replace agent state
if (data.state === 'supervisor-whisper') {
setSupervisorPresence('whisper');
return;
}
if (data.state === 'supervisor-barge') {
setSupervisorPresence('barge');
return;
}
if (data.state === 'supervisor-left') {
setSupervisorPresence('none');
return;
}
prevStateRef.current = data.state; prevStateRef.current = data.state;
setState(data.state); setState(data.state);
} catch { } catch {
@@ -90,5 +74,5 @@ export const useAgentState = (agentId: string | null): { state: OzonetelState; s
}; };
}, [agentId]); }, [agentId]);
return { state, supervisorPresence }; return state;
}; };

9
src/hooks/use-leads.ts
View File

@@ -5,7 +5,6 @@ import { useData } from '@/providers/data-provider';
type UseLeadsFilters = { type UseLeadsFilters = {
source?: LeadSource; source?: LeadSource;
excludeSources?: Set<LeadSource>;
status?: LeadStatus; status?: LeadStatus;
search?: string; search?: string;
}; };
@@ -18,7 +17,7 @@ type UseLeadsResult = {
export const useLeads = (filters: UseLeadsFilters = {}): UseLeadsResult => { export const useLeads = (filters: UseLeadsFilters = {}): UseLeadsResult => {
const { leads, updateLead } = useData(); const { leads, updateLead } = useData();
const { source, excludeSources, status, search } = filters; const { source, status, search } = filters;
const filteredLeads = useMemo(() => { const filteredLeads = useMemo(() => {
return leads.filter((lead) => { return leads.filter((lead) => {
@@ -26,10 +25,6 @@ export const useLeads = (filters: UseLeadsFilters = {}): UseLeadsResult => {
return false; return false;
} }
if (excludeSources && lead.leadSource && excludeSources.has(lead.leadSource)) {
return false;
}
if (status !== undefined && lead.leadStatus !== status) { if (status !== undefined && lead.leadStatus !== status) {
return false; return false;
} }
@@ -51,7 +46,7 @@ export const useLeads = (filters: UseLeadsFilters = {}): UseLeadsResult => {
return true; return true;
}); });
}, [leads, source, excludeSources, status, search]); }, [leads, source, status, search]);
return { return {
leads: filteredLeads, leads: filteredLeads,

6
src/hooks/use-maint-shortcuts.ts
View File

@@ -5,10 +5,6 @@ export type MaintAction = {
label: string; label: string;
description: string; description: string;
needsPreStep?: boolean; needsPreStep?: boolean;
// When set, after OTP passes the modal calls this endpoint to fetch
// `{ locked, free }` agent buckets and shows a picker. Confirm then
// POSTs to `endpoint` with { agentId } from the selection.
agentPickerEndpoint?: string;
clientSideHandler?: (payload: any) => Promise<{ status: string; message: string }>; clientSideHandler?: (payload: any) => Promise<{ status: string; message: string }>;
}; };
@@ -17,13 +13,11 @@ const MAINT_ACTIONS: Record<string, MaintAction> = {
endpoint: 'force-ready', endpoint: 'force-ready',
label: 'Force Ready', label: 'Force Ready',
description: 'Logout and re-login the agent to force Ready state on Ozonetel.', description: 'Logout and re-login the agent to force Ready state on Ozonetel.',
agentPickerEndpoint: 'session-status',
}, },
unlockAgent: { unlockAgent: {
endpoint: 'unlock-agent', endpoint: 'unlock-agent',
label: 'Unlock Agent', label: 'Unlock Agent',
description: 'Release the Redis session lock so the agent can log in again.', description: 'Release the Redis session lock so the agent can log in again.',
agentPickerEndpoint: 'session-status',
}, },
backfill: { backfill: {
endpoint: 'backfill-missed-calls', endpoint: 'backfill-missed-calls',

159
src/hooks/use-performance-alerts.ts
View File

@@ -1,101 +1,102 @@
import { useEffect, useRef, useState, useCallback } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import { useData } from '@/providers/data-provider';
import { useAuth } from '@/providers/auth-provider'; import { useAuth } from '@/providers/auth-provider';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
export type PerformanceAlert = { export type PerformanceAlert = {
id: string; id: string;
agent: string; agent: string;
agentId: string | null; type: 'Excessive Idle Time' | 'Low NPS' | 'Low Conversion';
type: string;
value: string; value: string;
severity: 'error' | 'warning' | 'info'; severity: 'error' | 'warning';
message?: string | null;
firedAt?: string;
dismissed: boolean; dismissed: boolean;
}; };
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100'; const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
const POLL_INTERVAL_MS = 60_000;
const sevToFront = (s: string): 'error' | 'warning' | 'info' => {
const v = (s ?? '').toLowerCase();
if (v === 'critical') return 'error';
if (v === 'warning') return 'warning';
return 'info';
};
export const usePerformanceAlerts = () => { export const usePerformanceAlerts = () => {
const { isAdmin } = useAuth(); const { isAdmin } = useAuth();
const { calls, leads } = useData();
const [alerts, setAlerts] = useState<PerformanceAlert[]>([]); const [alerts, setAlerts] = useState<PerformanceAlert[]>([]);
const lastSeenIdsRef = useRef<Set<string>>(new Set()); const [teamPerf, setTeamPerf] = useState<any>(null);
const toastsFiredRef = useRef(false);
const load = useCallback(async () => {
if (!isAdmin) return;
const token = localStorage.getItem('helix_access_token') ?? '';
try {
const res = await fetch(`${API_URL}/api/supervisor/performance-alerts`, {
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) return;
const json = await res.json();
const list: PerformanceAlert[] = (json?.alerts ?? []).map((a: any) => ({
id: a.id,
agent: a.agent,
agentId: a.agentId ?? null,
type: a.type,
value: a.value ?? '',
severity: sevToFront(a.severity),
message: a.message,
firedAt: a.firedAt,
dismissed: false,
}));
setAlerts(list);
// Toast for newly arrived alerts
const fresh = list.filter((a) => !lastSeenIdsRef.current.has(a.id));
if (fresh.length > 0 && lastSeenIdsRef.current.size > 0) {
notify.error('Performance Alerts', `${fresh.length} new alert(s)`);
}
lastSeenIdsRef.current = new Set(list.map((a) => a.id));
} catch {
// Silent — sidecar may be temporarily down
}
}, [isAdmin]);
// Fetch team performance data from sidecar (same as team-performance page)
useEffect(() => { useEffect(() => {
if (!isAdmin) return; if (!isAdmin) return;
load(); const today = new Date().toISOString().split('T')[0];
const id = setInterval(load, POLL_INTERVAL_MS);
return () => clearInterval(id);
}, [isAdmin, load]);
const dismiss = useCallback(async (id: string) => {
// Optimistic
setAlerts((prev) => prev.filter((a) => a.id !== id));
const token = localStorage.getItem('helix_access_token') ?? ''; const token = localStorage.getItem('helix_access_token') ?? '';
try { fetch(`${API_URL}/api/supervisor/team-performance?date=${today}`, {
await fetch(`${API_URL}/api/supervisor/performance-alerts/${id}/dismiss`, { headers: { Authorization: `Bearer ${token}` },
method: 'POST', })
headers: { Authorization: `Bearer ${token}` }, .then(r => r.ok ? r.json() : null)
}); .then(data => setTeamPerf(data))
} catch { .catch(() => {});
// Reload on failure to restore truth }, [isAdmin]);
load();
}
}, [load]);
const dismissAll = useCallback(async () => { // Compute alerts from team performance + entity data
setAlerts([]); useMemo(() => {
const token = localStorage.getItem('helix_access_token') ?? ''; if (!isAdmin || !teamPerf?.agents) return;
try {
await fetch(`${API_URL}/api/supervisor/performance-alerts/dismiss-all`, {
method: 'POST',
headers: { Authorization: `Bearer ${token}` },
});
} catch {
load();
}
}, [load]);
return { alerts, allAlerts: alerts, dismiss, dismissAll }; const parseTime = (t: string): number => {
const parts = t.split(':').map(Number);
return (parts[0] ?? 0) * 3600 + (parts[1] ?? 0) * 60 + (parts[2] ?? 0);
};
const list: PerformanceAlert[] = [];
let idx = 0;
for (const agent of teamPerf.agents) {
const agentCalls = calls.filter(c => c.agentName === agent.name || c.agentName === agent.ozonetelagentid);
const totalCalls = agentCalls.length;
const agentAppts = agentCalls.filter((c: any) => c.disposition === 'APPOINTMENT_BOOKED').length;
const convPercent = totalCalls > 0 ? Math.round((agentAppts / totalCalls) * 100) : 0;
const tb = agent.timeBreakdown;
const idleMinutes = tb ? Math.round(parseTime(tb.totalIdleTime ?? '0:0:0') / 60) : 0;
if (agent.maxidleminutes && idleMinutes > agent.maxidleminutes) {
list.push({ id: `idle-${idx++}`, agent: agent.name ?? agent.ozonetelagentid, type: 'Excessive Idle Time', value: `${idleMinutes}m`, severity: 'error', dismissed: false });
}
if (agent.minnpsthreshold && (agent.npsscore ?? 100) < agent.minnpsthreshold) {
list.push({ id: `nps-${idx++}`, agent: agent.name ?? agent.ozonetelagentid, type: 'Low NPS', value: String(agent.npsscore ?? 0), severity: 'warning', dismissed: false });
}
if (agent.minconversionpercent && convPercent < agent.minconversionpercent) {
list.push({ id: `conv-${idx++}`, agent: agent.name ?? agent.ozonetelagentid, type: 'Low Conversion', value: `${convPercent}%`, severity: 'warning', dismissed: false });
}
}
setAlerts(list);
}, [isAdmin, teamPerf, calls, leads]);
// Fire toasts once when alerts first load
useEffect(() => {
if (toastsFiredRef.current || alerts.length === 0) return;
toastsFiredRef.current = true;
const idleCount = alerts.filter(a => a.type === 'Excessive Idle Time').length;
const npsCount = alerts.filter(a => a.type === 'Low NPS').length;
const convCount = alerts.filter(a => a.type === 'Low Conversion').length;
const parts: string[] = [];
if (idleCount > 0) parts.push(`${idleCount} excessive idle`);
if (npsCount > 0) parts.push(`${npsCount} low NPS`);
if (convCount > 0) parts.push(`${convCount} low conversion`);
if (parts.length > 0) {
notify.error('Performance Alerts', `${alerts.length} alert(s): ${parts.join(', ')}`);
}
}, [alerts]);
const dismiss = (id: string) => {
setAlerts(prev => prev.map(a => a.id === id ? { ...a, dismissed: true } : a));
};
const dismissAll = () => {
setAlerts(prev => prev.map(a => ({ ...a, dismissed: true })));
};
const activeAlerts = alerts.filter(a => !a.dismissed);
return { alerts: activeAlerts, allAlerts: alerts, dismiss, dismissAll };
}; };

50
src/hooks/use-ui-flags.ts
View File

@@ -1,50 +0,0 @@
import { useEffect, useState } from 'react';
import { apiClient } from '@/lib/api-client';
// Per-tenant UI flags the sidecar controls via env vars. Read once at
// app mount; cached in module scope so every consumer gets the same
// snapshot without re-fetching. Safe defaults when the sidecar doesn't
// respond (all flags off) so the UI stays functional.
export type UiFlags = {
setupManaged: boolean;
};
const DEFAULT_FLAGS: UiFlags = {
setupManaged: false,
};
let cachedFlags: UiFlags | null = null;
let inflight: Promise<UiFlags> | null = null;
export const getUiFlags = (): Promise<UiFlags> => fetchFlags();
const fetchFlags = (): Promise<UiFlags> => {
if (cachedFlags) return Promise.resolve(cachedFlags);
if (inflight) return inflight;
inflight = apiClient
.get<UiFlags>('/api/config/ui-flags', { silent: true })
.then((res) => {
cachedFlags = { ...DEFAULT_FLAGS, ...res };
return cachedFlags;
})
.catch(() => {
cachedFlags = { ...DEFAULT_FLAGS };
return cachedFlags;
})
.finally(() => {
inflight = null;
});
return inflight;
};
export const useUiFlags = (): UiFlags => {
const [flags, setFlags] = useState<UiFlags>(cachedFlags ?? DEFAULT_FLAGS);
useEffect(() => {
if (cachedFlags) {
setFlags(cachedFlags);
return;
}
fetchFlags().then(setFlags);
}, []);
return flags;
};

39
src/hooks/use-worklist.ts
View File

@@ -1,7 +1,6 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
type MissedCall = { type MissedCall = {
id: string; id: string;
@@ -16,11 +15,10 @@ type MissedCall = {
disposition: string | null; disposition: string | null;
callNotes: string | null; callNotes: string | null;
leadId: string | null; leadId: string | null;
leadName: string | null; callbackstatus: string | null;
callbackStatus: string | null; callsourcenumber: string | null;
callSourceNumber: string | null; missedcallcount: number | null;
missedCallCount: number | null; callbackattemptedat: string | null;
callbackAttemptedAt: string | null;
}; };
type WorklistFollowUp = { type WorklistFollowUp = {
@@ -34,8 +32,6 @@ type WorklistFollowUp = {
assignedAgent: string | null; assignedAgent: string | null;
patientId: string | null; patientId: string | null;
callId: string | null; callId: string | null;
patientName?: string;
patientPhone?: string;
}; };
type WorklistLead = { type WorklistLead = {
@@ -134,30 +130,9 @@ export const useWorklist = (): UseWorklistResult => {
useEffect(() => { useEffect(() => {
fetchWorklist(); fetchWorklist();
// SSE stream for instant worklist updates. No polling fallback — // Refresh every 30 seconds
// if SSE breaks, the worklist stops updating and we fix the SSE, const interval = setInterval(fetchWorklist, 30000);
// not paper over it with a poll. return () => clearInterval(interval);
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
let es: EventSource | null = null;
try {
es = new EventSource(`${API_URL}/api/supervisor/worklist/stream`);
es.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
console.log('[WORKLIST-SSE]', data);
fetchWorklist();
if (data.type === 'missed-call') {
const name = data.callerName ?? data.callerPhone ?? 'Unknown';
notify.warning('Missed Call', `${name} — needs callback`);
}
} catch {}
};
es.onerror = () => {
console.warn('[WORKLIST-SSE] Connection error — EventSource will auto-reconnect');
};
} catch {}
return () => { es?.close(); };
}, [fetchWorklist]); }, [fetchWorklist]);
return { ...data, loading, error, refresh: fetchWorklist }; return { ...data, loading, error, refresh: fetchWorklist };

10
src/lib/api-client.ts
View File

@@ -212,16 +212,6 @@ export const apiClient = {
return handleResponse<T>(response, options?.silent, doFetch); return handleResponse<T>(response, options?.silent, doFetch);
}, },
async put<T>(path: string, body?: Record<string, unknown>, options?: { silent?: boolean }): Promise<T> {
const doFetch = () => fetch(`${API_URL}${path}`, {
method: 'PUT',
headers: authHeaders(),
body: body ? JSON.stringify(body) : undefined,
});
const response = await doFetch();
return handleResponse<T>(response, options?.silent, doFetch);
},
// Health check — silent, no toasts // Health check — silent, no toasts
async healthCheck(): Promise<{ status: string; platform: { reachable: boolean } }> { async healthCheck(): Promise<{ status: string; platform: { reachable: boolean } }> {
try { try {

31
src/lib/csv-utils.ts
View File

@@ -1,36 +1,5 @@
export type CSVRow = Record<string, string>; export type CSVRow = Record<string, string>;
// CSV write-side. Quote every value and escape embedded quotes. Prefix
// ="+-@ with a single quote so Excel doesn't interpret them as formulas
// (classic CSV-injection vector on exports opened in spreadsheet apps).
const escapeCsvCell = (raw: unknown): string => {
const value = raw == null ? '' : String(raw);
const sanitized = /^[=+\-@]/.test(value) ? `'${value}` : value;
return `"${sanitized.replace(/"/g, '""')}"`;
};
export const rowsToCsv = (headers: string[], rows: Array<Record<string, unknown>>): string => {
const lines = [headers.map(escapeCsvCell).join(',')];
for (const row of rows) {
lines.push(headers.map((h) => escapeCsvCell(row[h])).join(','));
}
return lines.join('\r\n');
};
export const downloadCsv = (filename: string, csv: string): void => {
// BOM prefix so Excel recognises UTF-8 for non-ASCII names/addresses.
const blob = new Blob(['\ufeff', csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
export type CSVParseResult = { export type CSVParseResult = {
headers: string[]; headers: string[];
rows: CSVRow[]; rows: CSVRow[];

99
src/lib/queries.ts
View File

@@ -1,21 +1,7 @@
// GraphQL queries for platform entities // GraphQL queries for platform entities
// Platform remaps SDK field names — all LINKS/PHONES fields need subfield selection. // Platform remaps SDK field names — all LINKS/PHONES fields need subfield selection
//
// Each entity exports a query *builder* that accepts an optional `after`
// cursor. The data-provider paginates until `hasNextPage=false` so the
// dashboard KPIs reflect real totals instead of the first 100 rows. The
// previous hardcoded `first: 100` caps caused supervisor KPI cards to
// quietly plateau at 100 on busy tenants.
//
// `pageSize` is intentionally large (200) to keep round-trips low. The
// platform Relay pagination accepts up to 1000 but 200 is a good balance
// between latency per page and number of pages on active workspaces.
const PAGE_SIZE = 200; export const LEADS_QUERY = `{ leads(first: 100, orderBy: [{ createdAt: DescNullsLast }]) { edges { node {
const cursorArg = (after?: string): string => (after ? `, after: "${after}"` : '');
export const leadsQuery = (after?: string) => `{ leads(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ createdAt: DescNullsLast }]) { edges { node {
id name createdAt updatedAt id name createdAt updatedAt
contactName { firstName lastName } contactName { firstName lastName }
contactPhone { primaryPhoneNumber primaryPhoneCallingCode } contactPhone { primaryPhoneNumber primaryPhoneCallingCode }
@@ -26,71 +12,63 @@ export const leadsQuery = (after?: string) => `{ leads(first: ${PAGE_SIZE}${curs
firstContacted lastContacted contactAttempts convertedAt firstContacted lastContacted contactAttempts convertedAt
patientId campaignId patientId campaignId
aiSummary aiSuggestedAction aiSummary aiSuggestedAction
} } pageInfo { hasNextPage endCursor } } }`; } } } }`;
export const campaignsQuery = (after?: string) => `{ campaigns(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ createdAt: DescNullsLast }]) { edges { node { export const CAMPAIGNS_QUERY = `{ campaigns(first: 50) { edges { node {
id name createdAt updatedAt id
campaignName typeCustom status platform name
startDate endDate createdAt
updatedAt
status
typeCustom
platform
startDate
endDate
budget { amountMicros currencyCode } budget { amountMicros currencyCode }
amountSpent { amountMicros currencyCode } amountSpent { amountMicros currencyCode }
impressions clicks targetCount contacted converted leadsGenerated impressions
externalCampaignId platformUrl { primaryLinkUrl } clicks
} } pageInfo { hasNextPage endCursor } } }`; targetCount
contacted
converted
leadsGenerated
externalCampaignId
platformUrl { primaryLinkUrl }
} } } }`;
export const adsQuery = (after?: string) => `{ ads(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ createdAt: DescNullsLast }]) { edges { node { export const ADS_QUERY = `{ ads(first: 100, orderBy: [{ createdAt: DescNullsLast }]) { edges { node {
id name createdAt updatedAt id name createdAt updatedAt
adName externalAdId status format adName externalAdId status format
headline adDescription destinationUrl { primaryLinkUrl } previewUrl { primaryLinkUrl } headline adDescription destinationUrl { primaryLinkUrl } previewUrl { primaryLinkUrl }
impressions clicks conversions impressions clicks conversions
spend { amountMicros currencyCode } spend { amountMicros currencyCode }
campaignId campaignId
} } pageInfo { hasNextPage endCursor } } }`; } } } }`;
export const followUpsQuery = (after?: string) => `{ followUps(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node { export const FOLLOW_UPS_QUERY = `{ followUps(first: 50, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
id name createdAt id name createdAt
typeCustom status scheduledAt completedAt typeCustom status scheduledAt completedAt
priority assignedAgent priority assignedAgent
patientId patientId
} } pageInfo { hasNextPage endCursor } } }`; } } } }`;
export const leadActivitiesQuery = (after?: string) => `{ leadActivities(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ occurredAt: DescNullsLast }]) { edges { node { export const LEAD_ACTIVITIES_QUERY = `{ leadActivities(first: 200, orderBy: [{ occurredAt: DescNullsLast }]) { edges { node {
id name createdAt id name createdAt
activityType summary occurredAt performedBy activityType summary occurredAt performedBy
previousValue newValue previousValue newValue
channel durationSec outcome channel durationSec outcome
leadId leadId
} } pageInfo { hasNextPage endCursor } } }`; } } } }`;
export const callsQuery = (after?: string) => `{ calls(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ startedAt: DescNullsLast }]) { edges { node { export const CALLS_QUERY = `{ calls(first: 100, orderBy: [{ startedAt: DescNullsLast }]) { edges { node {
id name createdAt id name createdAt
direction callStatus callerNumber { primaryPhoneNumber } agentName direction callStatus callerNumber { primaryPhoneNumber } agentName
startedAt endedAt durationSec startedAt endedAt durationSec
recording { primaryLinkUrl } disposition sla recording { primaryLinkUrl } disposition sla
patientId appointmentId leadId patientId appointmentId leadId
agentId agent { id name ozonetelAgentId } } } } }`;
transferredTo transferType
} } pageInfo { hasNextPage endCursor } } }`;
export const appointmentsQuery = (after?: string) => `{ appointments(first: ${PAGE_SIZE}${cursorArg(after)}, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node { export const DOCTORS_QUERY = `{ doctors(first: 20) { edges { node {
id name createdAt
scheduledAt durationMin appointmentType status
doctorName department reasonForVisit
patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
doctor { id fullName { firstName lastName } }
clinicId clinic { id clinicName }
} } pageInfo { hasNextPage endCursor } } }`;
export const patientsQuery = (after?: string) => `{ patients(first: ${PAGE_SIZE}${cursorArg(after)}) { edges { node {
id name fullName { firstName lastName }
phones { primaryPhoneNumber }
emails { primaryEmail }
dateOfBirth gender patientType
} } pageInfo { hasNextPage endCursor } } }`;
// Doctors are a small reference set (< 50 per workspace) — no pagination
// needed. Left as a plain string for the single consumer that reads it.
export const DOCTORS_QUERY = `{ doctors(first: 50) { edges { node {
id name fullName { firstName lastName } id name fullName { firstName lastName }
department specialty qualifications yearsOfExperience department specialty qualifications yearsOfExperience
visitingHours visitingHours
@@ -99,3 +77,18 @@ export const DOCTORS_QUERY = `{ doctors(first: 50) { edges { node {
active registrationNumber active registrationNumber
clinic { id name clinicName } clinic { id name clinicName }
} } } }`; } } } }`;
export const APPOINTMENTS_QUERY = `{ appointments(first: 100, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
id name createdAt
scheduledAt durationMin appointmentType status
doctorName department reasonForVisit
patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
doctor { id clinic { clinicName } }
} } } }`;
export const PATIENTS_QUERY = `{ patients(first: 50) { edges { node {
id name fullName { firstName lastName }
phones { primaryPhoneNumber }
emails { primaryEmail }
dateOfBirth gender patientType
} } } }`;

83
src/lib/setup-state.ts
View File

@@ -1,83 +0,0 @@
import { apiClient } from './api-client';
// Mirror of the sidecar SetupState shape — keep in sync with
// helix-engage-server/src/config/setup-state.defaults.ts. Any change to the
// step list there must be reflected here.
export type SetupStepName =
| 'identity'
| 'clinics'
| 'doctors'
| 'team'
| 'telephony'
| 'ai';
export const SETUP_STEP_NAMES: readonly SetupStepName[] = [
'identity',
'clinics',
'doctors',
'team',
'telephony',
'ai',
] as const;
export type SetupStepStatus = {
completed: boolean;
completedAt: string | null;
completedBy: string | null;
};
export type SetupState = {
version?: number;
updatedAt?: string;
wizardDismissed: boolean;
steps: Record<SetupStepName, SetupStepStatus>;
wizardRequired: boolean;
};
// Human-friendly labels for the wizard UI + settings hub badges. Kept here
// next to the type so adding a new step touches one file.
export const SETUP_STEP_LABELS: Record<SetupStepName, { title: string; description: string }> = {
identity: {
title: 'Hospital Identity',
description: 'Confirm your hospital name, upload your logo, and pick brand colors.',
},
clinics: {
title: 'Clinics',
description: 'Add your physical branches with addresses and visiting hours.',
},
doctors: {
title: 'Doctors',
description: 'Add clinicians, assign them to clinics, and set their schedules.',
},
team: {
title: 'Team',
description: 'Invite supervisors and call-center agents to your workspace.',
},
telephony: {
title: 'Telephony',
description: 'Connect Ozonetel and Exotel for inbound and outbound calls.',
},
ai: {
title: 'AI Assistant',
description: 'Choose your AI provider and customise the assistant prompts.',
},
};
export const getSetupState = () =>
apiClient.get<SetupState>('/api/config/setup-state', { silent: true });
export const markSetupStepComplete = (step: SetupStepName, completedBy?: string) =>
apiClient.put<SetupState>(`/api/config/setup-state/steps/${step}`, {
completed: true,
completedBy,
});
export const markSetupStepIncomplete = (step: SetupStepName) =>
apiClient.put<SetupState>(`/api/config/setup-state/steps/${step}`, { completed: false });
export const dismissSetupWizard = () =>
apiClient.post<SetupState>('/api/config/setup-state/dismiss');
export const resetSetupState = () =>
apiClient.post<SetupState>('/api/config/setup-state/reset');

45
src/lib/sip-client.ts
View File

@@ -7,10 +7,6 @@ export class SIPClient {
private ua: JsSIP.UA | null = null; private ua: JsSIP.UA | null = null;
private currentSession: RTCSession | null = null; private currentSession: RTCSession | null = null;
private audioElement: HTMLAudioElement | null = null; private audioElement: HTMLAudioElement | null = null;
// Watchdog that alerts if REGISTER never completes after a connect.
// Cleared on 'registered' / 'registrationFailed' / disconnect.
private registrationWatchdog: number | null = null;
private readonly REGISTRATION_TIMEOUT_MS = 15_000;
constructor( constructor(
private config: SIPConfig, private config: SIPConfig,
@@ -40,43 +36,28 @@ export class SIPClient {
this.ua = new JsSIP.UA(configuration); this.ua = new JsSIP.UA(configuration);
console.log(`[SIP] start() uri=${this.config.uri} ws=${this.config.wsServer} expires=${configuration.register_expires}s`);
this.ua.on('connecting', () => {
console.log('[SIP] WebSocket connecting…');
});
this.ua.on('connected', () => { this.ua.on('connected', () => {
console.log('[SIP] WebSocket connected — waiting for REGISTER'); console.log('[SIP] WebSocket connected');
this.onConnectionChange('connected'); this.onConnectionChange('connected');
}); });
this.ua.on('disconnected', (e: any) => { this.ua.on('disconnected', () => {
const code = e?.code ?? 'n/a'; console.log('[SIP] WebSocket disconnected');
const reason = e?.reason ?? 'unknown';
console.log(`[SIP] WebSocket disconnected — code=${code} reason=${reason}`);
this.clearRegistrationWatchdog();
this.onConnectionChange('disconnected'); this.onConnectionChange('disconnected');
}); });
this.ua.on('registered', () => { this.ua.on('registered', () => {
console.log('[SIP] Registered successfully'); console.log('[SIP] Registered successfully');
this.clearRegistrationWatchdog();
this.onConnectionChange('registered'); this.onConnectionChange('registered');
}); });
this.ua.on('unregistered', () => { this.ua.on('unregistered', () => {
console.log('[SIP] Unregistered'); console.log('[SIP] Unregistered');
this.clearRegistrationWatchdog();
this.onConnectionChange('disconnected'); this.onConnectionChange('disconnected');
}); });
this.ua.on('registrationFailed', (e: any) => { this.ua.on('registrationFailed', () => {
const cause = e?.cause ?? 'unknown'; console.error('[SIP] Registration failed');
const statusCode = e?.response?.status_code ?? 'n/a';
const reasonPhrase = e?.response?.reason_phrase ?? '';
console.error(`[SIP] Registration failed — cause=${cause} status=${statusCode} ${reasonPhrase}`);
this.clearRegistrationWatchdog();
this.onConnectionChange('error'); this.onConnectionChange('error');
}); });
@@ -144,25 +125,9 @@ export class SIPClient {
}); });
this.ua.start(); this.ua.start();
// Arm the registration watchdog. If we don't hear 'registered' or
// 'registrationFailed' within the timeout, surface a visible error so
// the user isn't left staring at "Connecting to telephony…" forever.
this.registrationWatchdog = window.setTimeout(() => {
console.error(`[SIP] Registration timeout — no REGISTER response after ${this.REGISTRATION_TIMEOUT_MS}ms. Check SIP credentials / WebSocket reachability.`);
this.onConnectionChange('error');
}, this.REGISTRATION_TIMEOUT_MS);
}
private clearRegistrationWatchdog(): void {
if (this.registrationWatchdog !== null) {
window.clearTimeout(this.registrationWatchdog);
this.registrationWatchdog = null;
}
} }
disconnect(): void { disconnect(): void {
this.clearRegistrationWatchdog();
this.hangup(); this.hangup();
if (this.ua) { if (this.ua) {
this.ua.stop(); this.ua.stop();

196
src/lib/supervisor-sip-client.ts
View File

@@ -1,196 +0,0 @@
import JsSIP from 'jssip';
type RTCSession = any;
// Lightweight SIP client for supervisor barge sessions.
// Separate from the agent's sip-client.ts — different lifecycle.
// Modeled on Ozonetel's kSip utility (CA-Admin/.../utils/ksip.tsx).
//
// DTMF mode mapping (from Ozonetel CA-Admin BargeinDrawerSip.tsx):
// "4" → Listen (supervisor hears all, nobody hears supervisor)
// "5" → Whisper/Training (agent hears supervisor, patient doesn't)
// "6" → Barge (both hear supervisor)
type EventCallback = (...args: any[]) => void;
type SupervisorSipEvent =
| 'registered'
| 'registrationFailed'
| 'callReceived'
| 'callConnected'
| 'callEnded'
| 'callFailed';
type SupervisorSipConfig = {
domain: string;
port: string;
number: string;
password: string;
};
class SupervisorSipClient {
private ua: JsSIP.UA | null = null;
private session: RTCSession | null = null;
private listeners = new Map<string, Set<EventCallback>>();
private audioElement: HTMLAudioElement | null = null;
init(config: SupervisorSipConfig): void {
this.cleanup();
// Hidden audio element for remote call audio
this.audioElement = document.createElement('audio');
this.audioElement.id = 'supervisor-remote-audio';
this.audioElement.autoplay = true;
this.audioElement.setAttribute('playsinline', '');
document.body.appendChild(this.audioElement);
const socketUrl = `wss://${config.domain}:${config.port}`;
const socket = new JsSIP.WebSocketInterface(socketUrl);
this.ua = new JsSIP.UA({
sockets: [socket],
uri: `sip:${config.number}@${config.domain}`,
password: config.password,
registrar_server: `sip:${config.domain}`,
authorization_user: config.number,
session_timers: false,
register: false,
});
this.ua.on('registered', () => {
console.log('[SupervisorSIP] Registered');
this.emit('registered');
});
this.ua.on('registrationFailed', (e: any) => {
console.error('[SupervisorSIP] Registration failed:', e?.cause);
this.emit('registrationFailed', e?.cause);
});
this.ua.on('newRTCSession', (data: any) => {
const rtcSession = data.session as RTCSession;
if (rtcSession.direction !== 'incoming') return;
console.log('[SupervisorSIP] Incoming call — auto-answering');
this.session = rtcSession;
this.emit('callReceived');
rtcSession.on('accepted', () => {
console.log('[SupervisorSIP] Call accepted');
this.emit('callConnected');
});
rtcSession.on('confirmed', () => {
// Attach remote audio stream
const connection = rtcSession.connection;
if (connection && this.audioElement) {
// Modern browsers: track event
connection.addEventListener('track', (event: RTCTrackEvent) => {
if (event.streams[0] && this.audioElement) {
this.audioElement.srcObject = event.streams[0];
}
});
// Fallback: getRemoteStreams (older browsers/JsSIP versions)
const remoteStreams = (connection as any).getRemoteStreams?.();
if (remoteStreams?.[0] && this.audioElement) {
this.audioElement.srcObject = remoteStreams[0];
}
}
});
rtcSession.on('ended', () => {
console.log('[SupervisorSIP] Call ended');
this.session = null;
this.emit('callEnded');
});
rtcSession.on('failed', (e: any) => {
console.error('[SupervisorSIP] Call failed:', e?.cause);
this.session = null;
this.emit('callFailed', e?.cause);
});
// Auto-answer with audio
rtcSession.answer({
mediaConstraints: { audio: true, video: false },
});
});
this.ua.start();
}
register(): void {
this.ua?.register();
}
isRegistered(): boolean {
return this.ua?.isRegistered() ?? false;
}
isCallActive(): boolean {
return this.session?.isEstablished() ?? false;
}
sendDTMF(digit: string): void {
if (!this.session?.isEstablished()) {
console.warn('[SupervisorSIP] Cannot send DTMF — no active session');
return;
}
console.log(`[SupervisorSIP] Sending DTMF: ${digit}`);
this.session.sendDTMF(digit, {
duration: 160,
interToneGap: 1200,
});
}
hangup(): void {
if (this.session) {
try {
this.session.terminate();
} catch {
// Session may already be ended
}
this.session = null;
}
}
close(): void {
this.hangup();
if (this.ua) {
try {
this.ua.unregister({ all: true });
this.ua.stop();
} catch {
// UA may already be stopped
}
this.ua = null;
}
this.cleanup();
this.listeners.clear();
}
on(event: SupervisorSipEvent, callback: EventCallback): void {
if (!this.listeners.has(event)) {
this.listeners.set(event, new Set());
}
this.listeners.get(event)!.add(callback);
}
off(event: SupervisorSipEvent, callback: EventCallback): void {
this.listeners.get(event)?.delete(callback);
}
private emit(event: string, ...args: any[]): void {
this.listeners.get(event)?.forEach(cb => {
try { cb(...args); } catch (e) { console.error(`[SupervisorSIP] Event error [${event}]:`, e); }
});
}
private cleanup(): void {
if (this.audioElement) {
this.audioElement.srcObject = null;
this.audioElement.remove();
this.audioElement = null;
}
}
}
export const supervisorSip = new SupervisorSipClient();

63
src/lib/transforms.ts
View File

@@ -53,14 +53,14 @@ export function transformLeads(data: any): Lead[] {
export function transformCampaigns(data: any): Campaign[] { export function transformCampaigns(data: any): Campaign[] {
return extractEdges(data, 'campaigns').map((n) => ({ return extractEdges(data, 'campaigns').map((n) => ({
id: n.id, id: n.id,
createdAt: n.createdAt, createdAt: n.createdAt ?? null,
updatedAt: n.updatedAt, updatedAt: n.updatedAt ?? null,
campaignName: n.campaignName ?? n.name, campaignName: n.name ?? 'Untitled Campaign',
campaignType: n.typeCustom, campaignType: n.typeCustom ?? null,
campaignStatus: n.status, campaignStatus: n.status ?? 'ACTIVE',
platform: n.platform, platform: n.platform ?? null,
startDate: n.startDate, startDate: n.startDate ?? null,
endDate: n.endDate, endDate: n.endDate ?? null,
budget: n.budget ? { amountMicros: n.budget.amountMicros, currencyCode: n.budget.currencyCode } : null, budget: n.budget ? { amountMicros: n.budget.amountMicros, currencyCode: n.budget.currencyCode } : null,
amountSpent: n.amountSpent ? { amountMicros: n.amountSpent.amountMicros, currencyCode: n.amountSpent.currencyCode } : null, amountSpent: n.amountSpent ? { amountMicros: n.amountSpent.amountMicros, currencyCode: n.amountSpent.currencyCode } : null,
impressionCount: n.impressions ?? 0, impressionCount: n.impressions ?? 0,
@@ -69,7 +69,7 @@ export function transformCampaigns(data: any): Campaign[] {
contactedCount: n.contacted ?? 0, contactedCount: n.contacted ?? 0,
convertedCount: n.converted ?? 0, convertedCount: n.converted ?? 0,
leadCount: n.leadsGenerated ?? 0, leadCount: n.leadsGenerated ?? 0,
externalCampaignId: n.externalCampaignId, externalCampaignId: n.externalCampaignId ?? null,
platformUrl: n.platformUrl?.primaryLinkUrl ?? null, platformUrl: n.platformUrl?.primaryLinkUrl ?? null,
})); }));
} }
@@ -150,39 +150,26 @@ export function transformCalls(data: any): Call[] {
patientId: n.patientId, patientId: n.patientId,
appointmentId: n.appointmentId, appointmentId: n.appointmentId,
leadId: n.leadId, leadId: n.leadId,
agentId: n.agentId ?? null,
agent: n.agent ?? null,
transferredTo: n.transferredTo ?? null,
transferType: n.transferType ?? null,
})); }));
} }
export function transformAppointments(data: any): Appointment[] { export function transformAppointments(data: any): Appointment[] {
return extractEdges(data, 'appointments').map((n) => { return extractEdges(data, 'appointments').map((n) => ({
// Doctor name: prefer the relation's fullName (authoritative — pulled id: n.id,
// from the Doctor entity). Fall back to the denormalized doctorName createdAt: n.createdAt,
// field for legacy rows that predate the doctor relation being fetched. scheduledAt: n.scheduledAt,
const doctorFullName = n.doctor?.fullName durationMinutes: n.durationMin ?? 30,
? `${n.doctor.fullName.firstName ?? ''} ${n.doctor.fullName.lastName ?? ''}`.trim() appointmentType: n.appointmentType,
: ''; appointmentStatus: n.status,
return { doctorName: n.doctorName,
id: n.id, doctorId: n.doctor?.id ?? null,
createdAt: n.createdAt, department: n.department,
scheduledAt: n.scheduledAt, reasonForVisit: n.reasonForVisit,
durationMinutes: n.durationMin ?? 30, patientId: n.patient?.id ?? null,
appointmentType: n.appointmentType, patientName: n.patient?.fullName ? `${n.patient.fullName.firstName} ${n.patient.fullName.lastName}`.trim() : null,
appointmentStatus: n.status, patientPhone: n.patient?.phones?.primaryPhoneNumber ?? null,
doctorName: doctorFullName || n.doctorName || null, clinicName: n.doctor?.clinic?.clinicName ?? null,
doctorId: n.doctor?.id ?? null, }));
department: n.department,
reasonForVisit: n.reasonForVisit,
patientId: n.patient?.id ?? null,
patientName: n.patient?.fullName ? `${n.patient.fullName.firstName} ${n.patient.fullName.lastName}`.trim() : null,
patientPhone: n.patient?.phones?.primaryPhoneNumber ?? null,
clinicId: n.clinicId ?? n.clinic?.id ?? null,
clinicName: n.clinic?.clinicName ?? null,
};
});
} }
export function transformPatients(data: any): Patient[] { export function transformPatients(data: any): Patient[] {

73
src/main.tsx
View File

@@ -1,35 +1,8 @@
import { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { BrowserRouter, Navigate, Outlet, Route, Routes } from "react-router"; import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import { AppShell } from "@/components/layout/app-shell"; import { AppShell } from "@/components/layout/app-shell";
import { AuthGuard } from "@/components/layout/auth-guard"; import { AuthGuard } from "@/components/layout/auth-guard";
import { useAuth } from "@/providers/auth-provider";
import { SetupWizardPage } from "@/pages/setup-wizard";
import { useUiFlags } from "@/hooks/use-ui-flags";
const AdminSetupGuard = () => {
const { isAdmin } = useAuth();
const { setupManaged } = useUiFlags();
if (!isAdmin) return <Navigate to="/" replace />;
// When setup is managed by the product team for this tenant, there's
// nothing for an admin to do in the wizard — bounce them to the
// dashboard instead of rendering a dead-end page.
if (setupManaged) return <Navigate to="/" replace />;
return <SetupWizardPage />;
};
const RequireAdmin = () => {
const { isAdmin } = useAuth();
return isAdmin ? <Outlet /> : <Navigate to="/" replace />;
};
const RequireSelfServeSetup = () => {
const { setupManaged } = useUiFlags();
// Blocks /settings/* when the tenant's setup is product-team managed.
// Sidebar already hides the nav entry, but this catches stray bookmarks
// and deep links.
return setupManaged ? <Navigate to="/" replace /> : <Outlet />;
};
import { RoleRouter } from "@/components/layout/role-router"; import { RoleRouter } from "@/components/layout/role-router";
import { NotFound } from "@/pages/not-found"; import { NotFound } from "@/pages/not-found";
import { AllLeadsPage } from "@/pages/all-leads"; import { AllLeadsPage } from "@/pages/all-leads";
@@ -43,14 +16,12 @@ import { OutreachPage } from "@/pages/outreach";
import { Patient360Page } from "@/pages/patient-360"; import { Patient360Page } from "@/pages/patient-360";
import { ReportsPage } from "@/pages/reports"; import { ReportsPage } from "@/pages/reports";
import { PatientsPage } from "@/pages/patients"; import { PatientsPage } from "@/pages/patients";
import { ContactsPage } from "@/pages/contacts";
import { TeamDashboardPage } from "@/pages/team-dashboard"; import { TeamDashboardPage } from "@/pages/team-dashboard";
import { IntegrationsPage } from "@/pages/integrations"; import { IntegrationsPage } from "@/pages/integrations";
import { AgentDetailPage } from "@/pages/agent-detail"; import { AgentDetailPage } from "@/pages/agent-detail";
import { SettingsPage } from "@/pages/settings"; import { SettingsPage } from "@/pages/settings";
import { MyPerformancePage } from "@/pages/my-performance"; import { MyPerformancePage } from "@/pages/my-performance";
// v2 appointments — testing locally via Tauri before replacing v1 import { AppointmentsPage } from "@/pages/appointments";
import { AppointmentsPageV2 as AppointmentsPage } from "@/pages/appointments-v2";
import { TeamPerformancePage } from "@/pages/team-performance"; import { TeamPerformancePage } from "@/pages/team-performance";
import { LiveMonitorPage } from "@/pages/live-monitor"; import { LiveMonitorPage } from "@/pages/live-monitor";
import { CallRecordingsPage } from "@/pages/call-recordings"; import { CallRecordingsPage } from "@/pages/call-recordings";
@@ -59,12 +30,6 @@ import { ProfilePage } from "@/pages/profile";
import { AccountSettingsPage } from "@/pages/account-settings"; import { AccountSettingsPage } from "@/pages/account-settings";
import { RulesSettingsPage } from "@/pages/rules-settings"; import { RulesSettingsPage } from "@/pages/rules-settings";
import { BrandingSettingsPage } from "@/pages/branding-settings"; import { BrandingSettingsPage } from "@/pages/branding-settings";
import { TeamSettingsPage } from "@/pages/team-settings";
import { ClinicsPage } from "@/pages/clinics";
import { DoctorsPage } from "@/pages/doctors";
import { TelephonySettingsPage } from "@/pages/telephony-settings";
import { AiSettingsPage } from "@/pages/ai-settings";
import { WidgetSettingsPage } from "@/pages/widget-settings";
import { AuthProvider } from "@/providers/auth-provider"; import { AuthProvider } from "@/providers/auth-provider";
import { DataProvider } from "@/providers/data-provider"; import { DataProvider } from "@/providers/data-provider";
import { RouteProvider } from "@/providers/router-provider"; import { RouteProvider } from "@/providers/router-provider";
@@ -84,11 +49,6 @@ createRoot(document.getElementById("root")!).render(
<Routes> <Routes>
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route element={<AuthGuard />}> <Route element={<AuthGuard />}>
{/* Setup wizard — admin only, fullscreen, no AppShell.
CC agents and other non-admin roles are redirected to
the call desk — they can't complete setup anyway. */}
<Route path="/setup" element={<AdminSetupGuard />} />
<Route <Route
element={ element={
<AppShell> <AppShell>
@@ -105,29 +65,16 @@ createRoot(document.getElementById("root")!).render(
<Route path="/call-history" element={<CallHistoryPage />} /> <Route path="/call-history" element={<CallHistoryPage />} />
<Route path="/my-performance" element={<MyPerformancePage />} /> <Route path="/my-performance" element={<MyPerformancePage />} />
<Route path="/call-desk" element={<CallDeskPage />} /> <Route path="/call-desk" element={<CallDeskPage />} />
<Route path="/contacts" element={<ContactsPage />} />
<Route path="/patients" element={<PatientsPage />} /> <Route path="/patients" element={<PatientsPage />} />
<Route path="/appointments" element={<AppointmentsPage />} /> <Route path="/appointments" element={<AppointmentsPage />} />
{/* Admin-only routes */} <Route path="/team-performance" element={<TeamPerformancePage />} />
<Route element={<RequireAdmin />}> <Route path="/live-monitor" element={<LiveMonitorPage />} />
<Route path="/team-performance" element={<TeamPerformancePage />} /> <Route path="/call-recordings" element={<CallRecordingsPage />} />
<Route path="/live-monitor" element={<LiveMonitorPage />} /> <Route path="/missed-calls" element={<MissedCallsPage />} />
<Route path="/call-recordings" element={<CallRecordingsPage />} /> <Route path="/team-dashboard" element={<TeamDashboardPage />} />
<Route path="/missed-calls" element={<MissedCallsPage />} /> <Route path="/reports" element={<ReportsPage />} />
<Route path="/team-dashboard" element={<TeamDashboardPage />} /> <Route path="/integrations" element={<IntegrationsPage />} />
<Route path="/reports" element={<ReportsPage />} /> <Route path="/settings" element={<SettingsPage />} />
<Route path="/integrations" element={<IntegrationsPage />} />
<Route element={<RequireSelfServeSetup />}>
<Route path="/settings" element={<SettingsPage />} />
<Route path="/settings/team" element={<TeamSettingsPage />} />
<Route path="/settings/clinics" element={<ClinicsPage />} />
<Route path="/settings/doctors" element={<DoctorsPage />} />
<Route path="/settings/telephony" element={<TelephonySettingsPage />} />
<Route path="/settings/ai" element={<AiSettingsPage />} />
<Route path="/settings/widget" element={<WidgetSettingsPage />} />
</Route>
</Route>
<Route path="/agent/:id" element={<AgentDetailPage />} /> <Route path="/agent/:id" element={<AgentDetailPage />} />
<Route path="/patient/:id" element={<Patient360Page />} /> <Route path="/patient/:id" element={<Patient360Page />} />
<Route path="/profile" element={<ProfilePage />} /> <Route path="/profile" element={<ProfilePage />} />

31
src/pages/agent-detail.tsx
View File

@@ -65,15 +65,11 @@ const formatPhoneDisplay = (call: Call): string => {
const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = { const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = {
APPOINTMENT_BOOKED: { label: 'Appt Booked', color: 'success' }, APPOINTMENT_BOOKED: { label: 'Appt Booked', color: 'success' },
APPOINTMENT_RESCHEDULED: { label: 'Appt Rescheduled', color: 'warning' },
APPOINTMENT_CANCELLED: { label: 'Appt Cancelled', color: 'error' },
FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' }, FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' },
INFO_PROVIDED: { label: 'Info Provided', color: 'blue-light' }, INFO_PROVIDED: { label: 'Info Provided', color: 'blue-light' },
NO_ANSWER: { label: 'No Answer', color: 'warning' }, NO_ANSWER: { label: 'No Answer', color: 'warning' },
WRONG_NUMBER: { label: 'Wrong Number', color: 'gray' }, WRONG_NUMBER: { label: 'Wrong Number', color: 'gray' },
NOT_INTERESTED: { label: 'Not Interested', color: 'error' },
CALLBACK_REQUESTED: { label: 'Callback', color: 'brand' }, CALLBACK_REQUESTED: { label: 'Callback', color: 'brand' },
CALL_DROPPED: { label: 'Call Dropped', color: 'gray' },
}; };
const DirectionIcon = ({ direction, status }: { direction: CallDirection | null; status: Call['callStatus'] }) => { const DirectionIcon = ({ direction, status }: { direction: CallDirection | null; status: Call['callStatus'] }) => {
@@ -88,39 +84,20 @@ const DirectionIcon = ({ direction, status }: { direction: CallDirection | null;
export const AgentDetailPage = () => { export const AgentDetailPage = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const { calls, leads, agents, loading } = useData(); const { calls, leads, loading } = useData();
// Route param is either a platform Agent UUID (new bucketing) or const agentName = id ? decodeURIComponent(id) : '';
// "legacy:<rawAgentName>" for calls that haven't been enriched yet.
// Older bookmarks may still pass the raw display name — handle that too.
const rawId = id ? decodeURIComponent(id) : '';
const isLegacy = rawId.startsWith('legacy:');
const agentUuid = !isLegacy ? rawId : null;
const legacyName = isLegacy ? rawId.slice('legacy:'.length) : null;
// Resolve display name: prefer Agent entity name, else the legacy string.
const agentName = useMemo(() => {
if (agentUuid) {
const a = agents.find((x: any) => x.id === agentUuid);
return a?.name ?? rawId;
}
return legacyName ?? '';
}, [agentUuid, legacyName, agents, rawId]);
const agentCalls = useMemo( const agentCalls = useMemo(
() => () =>
calls calls
.filter((c) => { .filter((c) => c.agentName === agentName)
if (agentUuid) return c.agentId === agentUuid;
if (legacyName) return !c.agentId && c.agentName === legacyName;
return false;
})
.sort((a, b) => { .sort((a, b) => {
const dateA = a.startedAt ? new Date(a.startedAt).getTime() : 0; const dateA = a.startedAt ? new Date(a.startedAt).getTime() : 0;
const dateB = b.startedAt ? new Date(b.startedAt).getTime() : 0; const dateB = b.startedAt ? new Date(b.startedAt).getTime() : 0;
return dateB - dateA; return dateB - dateA;
}), }),
[calls, agentUuid, legacyName], [calls, agentName],
); );
// Build lead name map for enrichment // Build lead name map for enrichment

159
src/pages/ai-settings.tsx
View File

@@ -1,159 +0,0 @@
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faRobot, faRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { TopBar } from '@/components/layout/top-bar';
import {
AiForm,
emptyAiFormValues,
type AiFormValues,
type AiProvider,
} from '@/components/forms/ai-form';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { markSetupStepComplete } from '@/lib/setup-state';
// /settings/ai — Pattern B page for the AI assistant config. Backed by
// /api/config/ai which is file-backed (data/ai.json) and hot-reloaded through
// AiConfigService — no restart needed.
//
// Temperature is a string in the form for input UX (so users can partially
// type '0.', '0.5', etc) then clamped to 0..2 on save.
type ServerAiConfig = {
provider?: AiProvider;
model?: string;
temperature?: number;
systemPromptAddendum?: string;
};
const clampTemperature = (raw: string): number => {
const n = Number(raw);
if (Number.isNaN(n)) return 0.7;
return Math.min(2, Math.max(0, n));
};
export const AiSettingsPage = () => {
const [values, setValues] = useState<AiFormValues>(emptyAiFormValues);
const [loading, setLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [isResetting, setIsResetting] = useState(false);
const loadConfig = async () => {
try {
const data = await apiClient.get<ServerAiConfig>('/api/config/ai');
setValues({
provider: data.provider ?? 'openai',
model: data.model ?? 'gpt-4o-mini',
temperature: data.temperature != null ? String(data.temperature) : '0.7',
systemPromptAddendum: data.systemPromptAddendum ?? '',
});
} catch {
// toast already shown
} finally {
setLoading(false);
}
};
useEffect(() => {
loadConfig();
}, []);
const handleSave = async () => {
if (!values.model.trim()) {
notify.error('Model is required');
return;
}
setIsSaving(true);
try {
await apiClient.put('/api/config/ai', {
provider: values.provider,
model: values.model.trim(),
temperature: clampTemperature(values.temperature),
systemPromptAddendum: values.systemPromptAddendum,
});
notify.success('AI settings updated', 'Changes are live for new conversations.');
markSetupStepComplete('ai').catch(() => {});
await loadConfig();
} catch (err) {
console.error('[ai] save failed', err);
} finally {
setIsSaving(false);
}
};
const handleReset = async () => {
if (!confirm('Reset AI settings to defaults? The system prompt addendum will be cleared.')) {
return;
}
setIsResetting(true);
try {
await apiClient.post('/api/config/ai/reset');
notify.info('AI reset', 'Provider, model, and prompt have been restored to defaults.');
await loadConfig();
} catch (err) {
console.error('[ai] reset failed', err);
} finally {
setIsResetting(false);
}
};
return (
<div className="flex flex-1 flex-col overflow-hidden">
<TopBar title="AI Assistant" subtitle="Choose provider, model, and conversational guidelines" />
<div className="flex-1 overflow-y-auto p-6">
<div className="mx-auto max-w-2xl">
<div className="mb-6 flex items-center gap-3 rounded-lg border border-secondary bg-primary p-4">
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
<FontAwesomeIcon icon={faRobot} className="size-5 text-fg-brand-primary" />
</div>
<div className="flex-1">
<p className="text-sm font-semibold text-primary">API keys live in environment variables</p>
<p className="text-xs text-tertiary">
The actual OPENAI_API_KEY and ANTHROPIC_API_KEY are set at deploy time and
can't be edited here. If you change the provider, make sure the matching key
is configured on the sidecar or the assistant will silently fall back to the
other provider.
</p>
</div>
</div>
{loading ? (
<div className="flex items-center justify-center py-16">
<p className="text-sm text-tertiary">Loading AI settings...</p>
</div>
) : (
<div className="rounded-xl border border-secondary bg-primary p-6 shadow-xs">
<AiForm value={values} onChange={setValues} />
<div className="mt-8 flex items-center justify-between border-t border-secondary pt-4">
<Button
size="md"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faRotateLeft} className={className} />
)}
onClick={handleReset}
isLoading={isResetting}
showTextWhileLoading
>
Reset to defaults
</Button>
<Button
size="md"
color="primary"
onClick={handleSave}
isLoading={isSaving}
showTextWhileLoading
>
{isSaving ? 'Saving...' : 'Save changes'}
</Button>
</div>
</div>
)}
</div>
</div>
</div>
);
};

201
src/pages/all-leads.tsx
View File

@@ -2,32 +2,28 @@ import type { FC } from 'react';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { useSearchParams } from 'react-router'; import { useSearchParams } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowDownToLine, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons'; import { faArrowLeft, faArrowDownToLine, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
const Download01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowDownToLine} className={className} />; const Download01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowDownToLine} className={className} />;
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />; const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { Input } from '@/components/base/input/input'; import { Input } from '@/components/base/input/input';
// Tabs removed — campaign pills handle all filtering now import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
// import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
import { PaginationPageDefault } from '@/components/application/pagination/pagination'; import { PaginationPageDefault } from '@/components/application/pagination/pagination';
import { PageHeader } from '@/components/layout/page-header'; import { TopBar } from '@/components/layout/top-bar';
import { LeadTable } from '@/components/leads/lead-table'; import { LeadTable } from '@/components/leads/lead-table';
import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle'; import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
// Bulk actions removed — checkboxes hidden import { BulkActionBar } from '@/components/leads/bulk-action-bar';
// import { BulkActionBar } from '@/components/leads/bulk-action-bar';
import { FilterPills } from '@/components/leads/filter-pills'; import { FilterPills } from '@/components/leads/filter-pills';
// Bulk action modals removed — checkboxes hidden import { AssignModal } from '@/components/modals/assign-modal';
// import { AssignModal } from '@/components/modals/assign-modal'; import { WhatsAppSendModal } from '@/components/modals/whatsapp-send-modal';
// import { WhatsAppSendModal } from '@/components/modals/whatsapp-send-modal'; import { MarkSpamModal } from '@/components/modals/mark-spam-modal';
// import { MarkSpamModal } from '@/components/modals/mark-spam-modal';
import { LeadActivitySlideout } from '@/components/leads/lead-activity-slideout'; import { LeadActivitySlideout } from '@/components/leads/lead-activity-slideout';
import { useLeads } from '@/hooks/use-leads'; import { useLeads } from '@/hooks/use-leads';
import { useAuth } from '@/providers/auth-provider'; import { useAuth } from '@/providers/auth-provider';
import { useData } from '@/providers/data-provider'; import { useData } from '@/providers/data-provider';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
import { rowsToCsv, downloadCsv } from '@/lib/csv-utils';
import { notify } from '@/lib/toast';
import type { Lead, LeadSource, LeadStatus } from '@/types/entities'; import type { Lead, LeadSource, LeadStatus } from '@/types/entities';
type TabKey = 'new' | 'my-leads' | 'all'; type TabKey = 'new' | 'my-leads' | 'all';
@@ -44,28 +40,24 @@ export const AllLeadsPage = () => {
const { user } = useAuth(); const { user } = useAuth();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const initialSource = searchParams.get('source') as LeadSource | null; const initialSource = searchParams.get('source') as LeadSource | null;
const tab: TabKey = 'all'; // Tabs removed — show all campaign-sourced leads const [tab, setTab] = useState<TabKey>('new');
const [selectedIds, setSelectedIds] = useState<string[]>([]);
const [sortField, setSortField] = useState('createdAt'); const [sortField, setSortField] = useState('createdAt');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc'); const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [sourceFilter, setSourceFilter] = useState<LeadSource | null>(initialSource); const [sourceFilter, setSourceFilter] = useState<LeadSource | null>(initialSource);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const statusFilter: LeadStatus | undefined = undefined; const statusFilter: LeadStatus | undefined = tab === 'new' ? 'NEW' : undefined;
const myLeadsOnly = false; const myLeadsOnly = tab === 'my-leads';
// Exclude organic contact sources — those live on the Contacts page. const { leads: filteredLeads, total, updateLead } = useLeads({
// Leads page shows campaign-sourced / marketing-qualified leads only.
const CONTACT_SOURCES = useMemo(() => new Set(['PHONE', 'WALK_IN', 'REFERRAL'] as const), []);
const { leads: filteredLeads, total } = useLeads({
source: sourceFilter ?? undefined, source: sourceFilter ?? undefined,
excludeSources: CONTACT_SOURCES,
status: statusFilter, status: statusFilter,
search: searchQuery || undefined, search: searchQuery || undefined,
}); });
const { leadActivities, campaigns } = useData(); const { agents, templates, leadActivities, campaigns } = useData();
const [campaignFilter, setCampaignFilter] = useState<string | null>(null); const [campaignFilter, setCampaignFilter] = useState<string | null>(null);
const columnDefs = [ const columnDefs = [
@@ -167,47 +159,15 @@ export const AllLeadsPage = () => {
setCurrentPage(1); setCurrentPage(1);
}; };
const handleTabChange = (key: string | number) => {
const handleExportCsv = () => { setTab(key as TabKey);
// Export exactly what the user currently sees — same filters, same setCurrentPage(1);
// sort, same tab/campaign scope. Ignores pagination so the file setSelectedIds([]);
// contains every matching row, not just the current page.
if (displayLeads.length === 0) {
notify.error('Export CSV', 'No leads to export');
return;
}
const headers = [
'Phone', 'First Name', 'Last Name', 'Email',
'Source', 'Status', 'Campaign', 'Assigned Agent',
'First Contact', 'Last Contact', 'Created', 'Age (days)',
];
const campaignNameById = new Map(campaigns.map((c) => [c.id, c.campaignName]));
const now = Date.now();
const rows = displayLeads.map((l) => {
const createdMs = l.createdAt ? new Date(l.createdAt).getTime() : null;
return {
'Phone': l.contactPhone?.[0]?.number ?? '',
'First Name': l.contactName?.firstName ?? '',
'Last Name': l.contactName?.lastName ?? '',
'Email': l.contactEmail?.[0]?.address ?? '',
'Source': l.leadSource ?? '',
'Status': l.leadStatus ?? '',
'Campaign': l.campaignId ? (campaignNameById.get(l.campaignId) ?? '') : '',
'Assigned Agent': l.assignedAgent ?? '',
'First Contact': l.firstContactedAt ?? '',
'Last Contact': l.lastContactedAt ?? '',
'Created': l.createdAt ?? '',
'Age (days)': createdMs ? String(Math.floor((now - createdMs) / 86400000)) : '',
};
});
const csv = rowsToCsv(headers, rows);
const today = new Date().toISOString().slice(0, 10);
downloadCsv(`leads-${tab}-${today}.csv`, csv);
notify.success('Export CSV', `${rows.length} lead${rows.length === 1 ? '' : 's'} exported`);
}; };
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
setCurrentPage(page); setCurrentPage(page);
setSelectedIds([]);
}; };
// Build active filters for pills display // Build active filters for pills display
@@ -231,6 +191,27 @@ export const AllLeadsPage = () => {
setCurrentPage(1); setCurrentPage(1);
}; };
const myLeadsCount = sortedLeads.filter((l) => l.assignedAgent === user.name).length;
const tabItems = [
{ id: 'new', label: 'New', badge: tab === 'new' ? total : undefined },
{ id: 'my-leads', label: 'My Leads', badge: tab === 'my-leads' ? myLeadsCount : undefined },
{ id: 'all', label: 'All Leads', badge: tab === 'all' ? total : undefined },
];
// Bulk action modal state
const [isAssignOpen, setIsAssignOpen] = useState(false);
const [isWhatsAppOpen, setIsWhatsAppOpen] = useState(false);
const [isSpamOpen, setIsSpamOpen] = useState(false);
const selectedLeadsForAction = useMemo(
() => displayLeads.filter((l) => selectedIds.includes(l.id)),
[displayLeads, selectedIds],
);
const handleBulkAssign = () => setIsAssignOpen(true);
const handleBulkWhatsApp = () => setIsWhatsAppOpen(true);
const handleBulkSpam = () => setIsSpamOpen(true);
// Activity slideout state // Activity slideout state
const [activityLead, setActivityLead] = useState<Lead | null>(null); const [activityLead, setActivityLead] = useState<Lead | null>(null);
@@ -243,12 +224,30 @@ export const AllLeadsPage = () => {
return ( return (
<div className="flex flex-1 flex-col overflow-hidden"> <div className="flex flex-1 flex-col overflow-hidden">
<PageHeader <TopBar title="All Leads" subtitle={`${total} total`} />
title="All Leads"
subtitle={`${total} total`} <div className="flex flex-1 flex-col overflow-hidden">
infoText="Campaign-sourced marketing leads. Organic callers are on the Contacts page." {/* Tabs + Controls row */}
controls={ <div className="flex shrink-0 items-center justify-between px-6 py-3 border-b border-secondary">
<> <div className="flex items-center gap-3">
<Button
href="/"
color="secondary"
size="sm"
iconLeading={ArrowLeft}
aria-label="Back to workspace"
/>
<Tabs selectedKey={tab} onSelectionChange={handleTabChange}>
<TabList items={tabItems} type="button-gray" size="sm">
{(item) => (
<Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />
)}
</TabList>
</Tabs>
</div>
<div className="flex items-center gap-2">
<div className="w-56"> <div className="w-56">
<Input <Input
placeholder="Search leads..." placeholder="Search leads..."
@@ -267,15 +266,11 @@ export const AllLeadsPage = () => {
size="sm" size="sm"
color="secondary" color="secondary"
iconLeading={Download01} iconLeading={Download01}
onClick={handleExportCsv}
> >
Export CSV Export CSV
</Button> </Button>
</> </div>
} </div>
/>
<div className="flex flex-1 flex-col overflow-hidden">
{/* Active filters */} {/* Active filters */}
{activeFilters.length > 0 && ( {activeFilters.length > 0 && (
@@ -334,13 +329,25 @@ export const AllLeadsPage = () => {
</div> </div>
)} )}
{/* Bulk action bar */}
{selectedIds.length > 0 && (
<div className="shrink-0 px-6 pt-2">
<BulkActionBar
selectedCount={selectedIds.length}
onAssign={handleBulkAssign}
onWhatsApp={handleBulkWhatsApp}
onMarkSpam={handleBulkSpam}
onDeselect={() => setSelectedIds([])}
/>
</div>
)}
{/* Table — fills remaining space, scrolls internally */} {/* Table — fills remaining space, scrolls internally */}
<div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-2"> <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-2">
<LeadTable <LeadTable
leads={pagedLeads} leads={pagedLeads}
onSelectionChange={() => {}} onSelectionChange={setSelectedIds}
selectedIds={[]} selectedIds={selectedIds}
selectionMode="none"
sortField={sortField} sortField={sortField}
sortDirection={sortDirection} sortDirection={sortDirection}
onSort={handleSort} onSort={handleSort}
@@ -361,6 +368,52 @@ export const AllLeadsPage = () => {
)} )}
</div> </div>
{/* Bulk action modals */}
{selectedLeadsForAction.length > 0 && (
<>
<AssignModal
isOpen={isAssignOpen}
onOpenChange={setIsAssignOpen}
selectedLeads={selectedLeadsForAction}
agents={agents}
onAssign={(agentId) => {
const agentName = agents.find((a) => a.id === agentId)?.name ?? null;
selectedIds.forEach((id) => {
updateLead(id, { assignedAgent: agentName, leadStatus: 'CONTACTED' });
});
setIsAssignOpen(false);
setSelectedIds([]);
}}
/>
<WhatsAppSendModal
isOpen={isWhatsAppOpen}
onOpenChange={setIsWhatsAppOpen}
selectedLeads={selectedLeadsForAction}
templates={templates.filter((t) => t.approvalStatus === 'APPROVED')}
onSend={() => {
setIsWhatsAppOpen(false);
setSelectedIds([]);
}}
/>
</>
)}
{/* Bulk spam: use first selected lead for the single-lead MarkSpamModal */}
{selectedLeadsForAction.length > 0 && selectedLeadsForAction[0] && (
<MarkSpamModal
isOpen={isSpamOpen}
onOpenChange={setIsSpamOpen}
lead={selectedLeadsForAction[0]}
onConfirm={() => {
selectedIds.forEach((id) => {
updateLead(id, { isSpam: true, leadStatus: 'LOST' });
});
setIsSpamOpen(false);
setSelectedIds([]);
}}
/>
)}
{/* Activity slideout */} {/* Activity slideout */}
{activityLead && ( {activityLead && (
<LeadActivitySlideout <LeadActivitySlideout

725
src/pages/appointments-v2.tsx
View File

@@ -1,725 +0,0 @@
// Appointments v2 — lean table + detail side panel + reschedule + reminder
import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faMagnifyingGlass, faPenToSquare, faEye, faBell, faXmark,
faCalendarCheck, faUserDoctor, faBuilding, faStethoscope, faNotesMedical,
} from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';
const SearchLg = faIcon(faMagnifyingGlass);
import { Badge } from '@/components/base/badges/badges';
import { Input } from '@/components/base/input/input';
import { Table } from '@/components/application/table/table';
import { PaginationCardDefault } from '@/components/application/pagination/pagination';
// TopBar replaced by inline header
import { Button } from '@/components/base/buttons/button';
import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
import { Select } from '@/components/base/select/select';
import { DatePicker } from '@/components/application/date-picker/date-picker';
import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
import { PageHeader } from '@/components/layout/page-header';
import { formatPhone, formatDateOnly, formatTimeOnly } from '@/lib/format';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx';
type AppointmentRecord = {
id: string;
scheduledAt: string | null;
durationMin: number | null;
appointmentType: string | null;
status: string | null;
doctorName: string | null;
department: string | null;
reasonForVisit: string | null;
patient: {
id: string;
fullName: { firstName: string; lastName: string } | null;
phones: { primaryPhoneNumber: string } | null;
} | null;
clinic: {
id?: string;
clinicName: string;
} | null;
doctor: {
id: string;
fullName?: { firstName: string; lastName: string } | null;
} | null;
};
type StatusTab = 'all' | 'SCHEDULED' | 'COMPLETED' | 'CANCELLED' | 'RESCHEDULED';
const STATUS_COLORS: Record<string, 'brand' | 'success' | 'error' | 'warning' | 'gray'> = {
SCHEDULED: 'brand',
CONFIRMED: 'brand',
COMPLETED: 'success',
CANCELLED: 'error',
NO_SHOW: 'warning',
RESCHEDULED: 'warning',
};
const STATUS_LABELS: Record<string, string> = {
SCHEDULED: 'Booked',
CONFIRMED: 'Confirmed',
COMPLETED: 'Completed',
CANCELLED: 'Cancelled',
NO_SHOW: 'No Show',
RESCHEDULED: 'Rescheduled',
};
const QUERY = `{ appointments(first: 200, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
id scheduledAt durationMin appointmentType status
doctorName department reasonForVisit
patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
clinic { id clinicName }
doctor { id fullName { firstName lastName } }
} } } }`;
const formatDateTime = (iso: string): string =>
`${formatDateOnly(iso)}, ${formatTimeOnly(iso)}`;
const getPatientName = (appt: AppointmentRecord): string => {
if (!appt.patient?.fullName) return 'Unknown';
return `${appt.patient.fullName.firstName} ${appt.patient.fullName.lastName}`.trim() || 'Unknown';
};
const getPhone = (appt: AppointmentRecord): string =>
appt.patient?.phones?.primaryPhoneNumber ?? '';
const isUpcoming = (appt: AppointmentRecord): boolean => {
if (appt.status !== 'SCHEDULED' && appt.status !== 'CONFIRMED') return false;
if (!appt.scheduledAt) return false;
return new Date(appt.scheduledAt).getTime() >= Date.now();
};
// Can edit/reschedule: anything that isn't completed or cancelled
const canEdit = (appt: AppointmentRecord): boolean => {
return appt.status !== 'COMPLETED' && appt.status !== 'CANCELLED' && appt.status !== 'NO_SHOW';
};
const buildReminderMessage = (appt: AppointmentRecord): string => {
const name = getPatientName(appt);
const doctor = appt.doctorName ?? 'your doctor';
const date = appt.scheduledAt ? formatDateTime(appt.scheduledAt) : 'your scheduled time';
const branch = appt.clinic?.clinicName ?? 'our clinic';
return `Hi ${name}, this is a reminder for your appointment with ${doctor} on ${date} at ${branch}. Please confirm or call us to reschedule.`;
};
// ── Detail Panel ─────────────────────────────────────────────────
const DetailRow = ({ icon, label, value }: { icon: any; label: string; value: string }) => (
<div className="flex items-start gap-3 py-2.5">
<FontAwesomeIcon icon={icon} className="size-4 text-fg-quaternary mt-0.5 shrink-0" />
<div className="min-w-0">
<p className="text-[11px] font-medium uppercase tracking-wider text-quaternary">{label}</p>
<p className="text-sm text-primary mt-0.5">{value || '—'}</p>
</div>
</div>
);
const AppointmentDetailPanel = ({
appointment,
onClose,
onReschedule,
}: {
appointment: AppointmentRecord;
onClose: () => void;
onReschedule: () => void;
}) => {
const editable = canEdit(appointment);
const phone = getPhone(appointment);
const [reschedulePromptOpen, setReschedulePromptOpen] = useState(false);
return (
<div className="flex flex-col h-full">
<div className="flex items-center justify-between border-b border-secondary px-5 py-3">
<h3 className="text-sm font-bold text-primary">Appointment Details</h3>
<div className="flex items-center gap-1">
{editable && (
<button
onClick={() => setReschedulePromptOpen(true)}
title="Reschedule appointment"
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-brand-secondary hover:bg-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faPenToSquare} className="size-4" />
</button>
)}
<button
onClick={onClose}
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faXmark} className="size-4" />
</button>
</div>
</div>
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-1">
<div className="mb-4">
<Badge size="md" color={STATUS_COLORS[appointment.status ?? ''] ?? 'gray'} type="pill-color">
{STATUS_LABELS[appointment.status ?? ''] ?? appointment.status ?? '—'}
</Badge>
</div>
{/* Date & Time — 2 lines */}
<div className="flex items-start gap-3 py-2.5">
<FontAwesomeIcon icon={faCalendarCheck} className="size-4 text-fg-quaternary mt-0.5 shrink-0" />
<div>
<p className="text-[11px] font-medium uppercase tracking-wider text-quaternary">Date & Time</p>
{appointment.scheduledAt ? (
<>
<p className="text-sm text-primary mt-0.5">{formatDateOnly(appointment.scheduledAt)}</p>
<p className="text-xs text-tertiary">{formatTimeOnly(appointment.scheduledAt)}</p>
</>
) : <p className="text-sm text-quaternary mt-0.5">—</p>}
</div>
</div>
<DetailRow icon={faUserDoctor} label="Doctor" value={appointment.doctorName ?? '—'} />
<DetailRow icon={faStethoscope} label="Department" value={appointment.department ?? '—'} />
<DetailRow icon={faBuilding} label="Branch / Clinic" value={appointment.clinic?.clinicName ?? '—'} />
<DetailRow icon={faNotesMedical} label="Chief Complaint" value={appointment.reasonForVisit ?? '—'} />
<div className="border-t border-secondary pt-3 mt-3">
<p className="text-[11px] font-medium uppercase tracking-wider text-quaternary mb-1">Patient</p>
<p className="text-sm font-medium text-primary">{getPatientName(appointment)}</p>
{phone && (
<div className="mt-1">
<PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />
</div>
)}
</div>
</div>
{/* Reschedule confirm modal — same pattern as call desk */}
<ModalOverlay
isOpen={reschedulePromptOpen}
onOpenChange={(open) => { if (!open) setReschedulePromptOpen(false); }}
isDismissable
>
<Modal className="sm:max-w-md">
<Dialog>
{() => (
<div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
<h2 className="text-lg font-semibold text-primary">Reschedule this appointment?</h2>
<p className="text-sm text-tertiary">
Choose "Yes, reschedule" to change the date, time, or doctor.
Choose "No, just view" to see the details without changing anything.
</p>
<div className="flex items-center gap-2 justify-end">
<Button size="sm" color="secondary" onClick={() => setReschedulePromptOpen(false)}>
No, just view
</Button>
<Button size="sm" color="primary" onClick={() => { setReschedulePromptOpen(false); onReschedule(); }}>
Yes, reschedule
</Button>
</div>
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
</div>
);
};
// ── Reschedule Panel ─────────────────────────────────────────────
// Dedicated form for rescheduling from the Appointments page.
// No patient creation, no lead updates, no modal — just update the
// existing appointment's doctor, date, time, and chief complaint.
type Doctor = { id: string; name: string; department: string };
const DOCTORS_QUERY = `{ doctors(first: 50) { edges { node {
id name fullName { firstName lastName } department
} } } }`;
const ReschedulePanel = ({
appointment,
onClose,
onSaved,
}: {
appointment: AppointmentRecord;
onClose: () => void;
onSaved: () => void;
}) => {
const [doctors, setDoctors] = useState<Doctor[]>([]);
const [department, setDepartment] = useState(appointment.department ?? '');
const [doctor, setDoctor] = useState(appointment.doctor?.id ?? '');
const [date, setDate] = useState(() => appointment.scheduledAt?.split('T')[0] ?? '');
const [timeSlot, setTimeSlot] = useState(() => {
if (!appointment.scheduledAt) return '';
const dt = new Date(appointment.scheduledAt);
return `${String(dt.getHours()).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`;
});
const [slots, setSlots] = useState<Array<{ id: string; label: string }>>([]);
const [reason, setReason] = useState(appointment.reasonForVisit ?? '');
const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null);
const [cancelConfirm, setCancelConfirm] = useState(false);
// Fetch doctors once
useEffect(() => {
apiClient.graphql<any>(DOCTORS_QUERY, undefined, { silent: true })
.then(data => {
const docs = data.doctors.edges.map((e: any) => {
const n = e.node;
const name = n.fullName
? `Dr. ${n.fullName.firstName} ${n.fullName.lastName}`.trim()
: n.name;
return { id: n.id, name, department: n.department ?? '' };
});
setDoctors(docs);
})
.catch(() => {});
}, []);
// Departments derived from doctors
const departments = useMemo(() => [...new Set(doctors.map(d => d.department).filter(Boolean))], [doctors]);
const filteredDoctors = useMemo(() => department ? doctors.filter(d => d.department === department) : doctors, [doctors, department]);
// Fetch slots when doctor + date change
useEffect(() => {
if (!doctor || !date) { setSlots([]); return; }
apiClient.get<Array<{ time: string; label: string }>>(`/api/masterdata/slots?doctorId=${doctor}&date=${date}`, { silent: true })
.then(s => setSlots(s.map(sl => ({ id: sl.time, label: sl.label }))))
.catch(() => setSlots([]));
}, [doctor, date]);
const handleUpdate = async () => {
if (!doctor || !date || !timeSlot) {
setError('Please select doctor, date, and time slot');
return;
}
setSaving(true);
setError(null);
try {
const scheduledAt = new Date(`${date}T${timeSlot}:00`).toISOString();
const selectedDoc = doctors.find(d => d.id === doctor);
await apiClient.graphql(
`mutation($id: UUID!, $data: AppointmentUpdateInput!) { updateAppointment(id: $id, data: $data) { id } }`,
{
id: appointment.id,
data: {
scheduledAt,
doctorName: selectedDoc?.name ?? appointment.doctorName,
department: department || appointment.department,
reasonForVisit: reason || null,
status: 'RESCHEDULED',
doctorId: doctor,
},
},
);
onSaved();
} catch (err: any) {
setError(err.message ?? 'Failed to update appointment');
} finally {
setSaving(false);
}
};
const handleCancel = async () => {
setSaving(true);
try {
await apiClient.graphql(
`mutation($id: UUID!, $data: AppointmentUpdateInput!) { updateAppointment(id: $id, data: $data) { id } }`,
{ id: appointment.id, data: { status: 'CANCELLED' } },
);
notify.success('Appointment Cancelled');
onSaved();
} catch {
setError('Failed to cancel appointment');
} finally {
setSaving(false);
}
};
return (
<div className="flex flex-col h-full">
<div className="flex items-center justify-between border-b border-secondary px-5 py-3">
<h3 className="text-sm font-bold text-primary">Reschedule Appointment</h3>
<button
onClick={onClose}
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faXmark} className="size-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
{/* Department */}
<div>
<span className="text-xs font-medium text-secondary">Department</span>
<Select
size="sm"
placeholder="Select department"
selectedKey={department}
onSelectionChange={(key) => { setDepartment(String(key)); setDoctor(''); }}
items={departments.map(d => ({ id: d, label: d.replace(/_/g, ' ') }))}
>
{(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
</Select>
</div>
{/* Doctor */}
<div>
<span className="text-xs font-medium text-secondary">Doctor <span className="text-error-primary">*</span></span>
<Select
size="sm"
placeholder="Select doctor"
selectedKey={doctor}
onSelectionChange={(key) => setDoctor(String(key))}
items={filteredDoctors.map(d => ({ id: d.id, label: d.name }))}
>
{(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
</Select>
</div>
{/* Date */}
<div>
<span className="text-xs font-medium text-secondary">Date <span className="text-error-primary">*</span></span>
<DatePicker
value={date ? parseDate(date) : null}
onChange={(val) => setDate(val ? val.toString() : '')}
granularity="day"
minValue={today(getLocalTimeZone())}
isDisabled={!doctor}
popoverPlacement="top start"
/>
</div>
{/* Time slots */}
{doctor && date && slots.length > 0 && (
<div>
<span className="text-xs font-medium text-secondary">Time Slot <span className="text-error-primary">*</span></span>
<div className="mt-1 grid grid-cols-3 gap-1.5">
{slots.map(s => (
<button
key={s.id}
onClick={() => setTimeSlot(s.id)}
className={cx(
'rounded-lg border px-2 py-1.5 text-xs font-medium transition duration-100 ease-linear',
timeSlot === s.id
? 'border-brand bg-brand-primary text-brand-secondary'
: 'border-secondary text-secondary hover:border-brand hover:text-brand-secondary',
)}
>
{s.label}
</button>
))}
</div>
</div>
)}
{doctor && date && slots.length === 0 && (
<p className="text-xs text-tertiary">No available slots for this date</p>
)}
{/* Chief Complaint */}
<div>
<span className="text-xs font-medium text-secondary">Chief Complaint</span>
<textarea
value={reason}
onChange={(e) => setReason(e.target.value)}
rows={3}
className="mt-1 w-full rounded-lg border border-primary bg-primary px-3 py-2 text-sm text-primary outline-none focus:border-brand-primary resize-y"
placeholder="Reason for visit..."
/>
</div>
{error && <p className="text-sm text-error-primary">{error}</p>}
</div>
{/* Footer buttons */}
<div className="flex items-center justify-between gap-2 border-t border-secondary px-5 py-3">
<Button size="sm" color="primary-destructive" onClick={() => setCancelConfirm(true)} isDisabled={saving}>
Cancel Appointment
</Button>
<Button size="sm" color="primary" onClick={handleUpdate} isLoading={saving} isDisabled={!doctor || !date || !timeSlot}>
Update Appointment
</Button>
</div>
{/* Cancel confirm modal */}
<ModalOverlay
isOpen={cancelConfirm}
onOpenChange={(open) => { if (!open) setCancelConfirm(false); }}
isDismissable
>
<Modal className="sm:max-w-md">
<Dialog>
{() => (
<div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
<h2 className="text-lg font-semibold text-primary">Cancel this appointment?</h2>
<p className="text-sm text-tertiary">
This will mark the appointment as cancelled. The patient will need to book a new appointment.
</p>
<div className="flex items-center gap-2 justify-end">
<Button size="sm" color="secondary" onClick={() => setCancelConfirm(false)}>
No, keep it
</Button>
<Button size="sm" color="primary-destructive" onClick={() => { setCancelConfirm(false); handleCancel(); }} isLoading={saving}>
Yes, cancel appointment
</Button>
</div>
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
</div>
);
};
// ── Page ─────────────────────────────────────────────────────────
export const AppointmentsPageV2 = () => {
const [appointments, setAppointments] = useState<AppointmentRecord[]>([]);
const [loading, setLoading] = useState(true);
const [tab, setTab] = useState<StatusTab>('all');
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const [selectedAppt, setSelectedAppt] = useState<AppointmentRecord | null>(null);
const [panelOpen, setPanelOpen] = useState(false);
const [rescheduleOpen, setRescheduleOpen] = useState(false);
const PAGE_SIZE = 20;
const fetchAppointments = () => {
apiClient.graphql<{ appointments: { edges: Array<{ node: AppointmentRecord }> } }>(QUERY, undefined, { silent: true })
.then(data => setAppointments(data.appointments.edges.map(e => e.node)))
.catch(() => {})
.finally(() => setLoading(false));
};
useEffect(() => { fetchAppointments(); }, []);
const statusCounts = useMemo(() => {
const counts: Record<string, number> = {};
for (const a of appointments) {
const s = a.status ?? 'UNKNOWN';
counts[s] = (counts[s] ?? 0) + 1;
}
return counts;
}, [appointments]);
const filtered = useMemo(() => {
let rows = appointments;
if (tab !== 'all') rows = rows.filter(a => a.status === tab);
if (search.trim()) {
const q = search.toLowerCase();
rows = rows.filter(a => {
const name = getPatientName(a).toLowerCase();
const phone = getPhone(a);
const doctor = (a.doctorName ?? '').toLowerCase();
return name.includes(q) || phone.includes(q) || doctor.includes(q);
});
}
return rows;
}, [appointments, tab, search]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const pagedRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
useEffect(() => { setPage(1); }, [tab, search]);
const tabItems = [
{ id: 'all' as const, label: 'All', badge: appointments.length > 0 ? String(appointments.length) : undefined },
{ id: 'SCHEDULED' as const, label: 'Booked', badge: statusCounts.SCHEDULED ? String(statusCounts.SCHEDULED) : undefined },
{ id: 'COMPLETED' as const, label: 'Completed', badge: statusCounts.COMPLETED ? String(statusCounts.COMPLETED) : undefined },
{ id: 'CANCELLED' as const, label: 'Cancelled', badge: statusCounts.CANCELLED ? String(statusCounts.CANCELLED) : undefined },
{ id: 'RESCHEDULED' as const, label: 'Rescheduled', badge: statusCounts.RESCHEDULED ? String(statusCounts.RESCHEDULED) : undefined },
];
const handleEditClick = (appt: AppointmentRecord) => {
setSelectedAppt(appt);
setPanelOpen(true);
setRescheduleOpen(false);
};
const handleSendReminder = (appt: AppointmentRecord) => {
const phone = getPhone(appt);
if (!phone) return;
const msg = encodeURIComponent(buildReminderMessage(appt));
window.open(`https://wa.me/91${phone}?text=${msg}`, '_blank');
notify.success('Reminder', `WhatsApp opened for ${getPatientName(appt)}`);
};
const handleRescheduleSaved = () => {
setRescheduleOpen(false);
setPanelOpen(false);
setSelectedAppt(null);
fetchAppointments();
notify.success('Appointment Rescheduled');
};
return (
<>
<PageHeader
title="Appointments"
badge={filtered.length}
infoText="All scheduled, completed, cancelled, and rescheduled appointments. Click the eye icon to view details or reschedule."
controls={
<div className="w-56">
<Input
placeholder="Search patient, doctor..."
icon={SearchLg}
size="sm"
value={search}
onChange={setSearch}
aria-label="Search appointments"
/>
</div>
}
tabs={
<div className="flex items-center gap-1.5">
{tabItems.map((item) => (
<button
key={item.id}
onClick={() => setTab(item.id)}
className={cx(
'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
tab === item.id
? 'bg-brand-solid text-white'
: 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
)}
>
{item.label}{item.badge ? ` ${item.badge}` : ''}
</button>
))}
</div>
}
/>
<div className="flex flex-1 overflow-hidden">
<div className="flex flex-1 flex-col overflow-hidden">
<div className="flex flex-1 flex-col overflow-hidden px-4 pt-3">
{loading ? (
<div className="flex items-center justify-center py-12">
<p className="text-sm text-tertiary">Loading appointments...</p>
</div>
) : filtered.length === 0 ? (
<div className="flex items-center justify-center py-12">
<p className="text-sm text-quaternary">{search ? 'No matching appointments' : 'No appointments found'}</p>
</div>
) : (
<Table size="sm">
<Table.Header>
<Table.Head label="" className="w-8" isRowHeader />
<Table.Head label="PATIENT" className="min-w-[180px]" />
<Table.Head label="DATE & TIME" className="w-28" />
<Table.Head label="DOCTOR" className="min-w-[160px]" />
<Table.Head label="STATUS" className="w-24" />
<Table.Head label="REMIND" className="w-20" />
</Table.Header>
<Table.Body items={pagedRows}>
{(appt) => {
const name = getPatientName(appt);
const phone = getPhone(appt);
const statusLabel = STATUS_LABELS[appt.status ?? ''] ?? appt.status ?? '—';
const statusColor = STATUS_COLORS[appt.status ?? ''] ?? 'gray';
const upcoming = isUpcoming(appt);
const isSelected = selectedAppt?.id === appt.id;
return (
<Table.Row
id={appt.id}
className={cx('group/row', isSelected && 'bg-brand-primary')}
>
{/* Eye icon — first column */}
<Table.Cell>
<button
onClick={(e) => { e.stopPropagation(); handleEditClick(appt); }}
className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
title="View details"
>
<FontAwesomeIcon icon={faEye} className="size-3.5" />
</button>
</Table.Cell>
{/* Patient: name + phone on 2 lines */}
<Table.Cell>
<div className="min-w-0">
<p className="text-sm font-medium text-primary truncate">{name}</p>
{phone && <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />}
</div>
</Table.Cell>
{/* Date & Time: date + time on 2 lines */}
<Table.Cell>
{appt.scheduledAt ? (
<div>
<p className="text-sm text-primary">{formatDateOnly(appt.scheduledAt)}</p>
<p className="text-xs text-tertiary">{formatTimeOnly(appt.scheduledAt)}</p>
</div>
) : <span className="text-sm text-quaternary">—</span>}
</Table.Cell>
{/* Doctor: name + department on 2 lines */}
<Table.Cell>
<div className="min-w-0">
<p className="text-sm text-primary truncate">{appt.doctorName ?? '—'}</p>
{appt.department && <p className="text-xs text-tertiary truncate">{appt.department}</p>}
</div>
</Table.Cell>
{/* Status */}
<Table.Cell>
<Badge size="sm" color={statusColor} type="pill-color">
{statusLabel}
</Badge>
</Table.Cell>
{/* Reminder */}
<Table.Cell>
{upcoming ? (
<button
onClick={(e) => { e.stopPropagation(); handleSendReminder(appt); }}
className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-brand-secondary hover:bg-brand-primary transition duration-100 ease-linear"
title="Send WhatsApp reminder"
>
<FontAwesomeIcon icon={faBell} className="size-3" />
Send
</button>
) : (
<span className="text-xs text-quaternary">—</span>
)}
</Table.Cell>
</Table.Row>
);
}}
</Table.Body>
</Table>
)}
<div className="shrink-0">
<PaginationCardDefault
page={page}
total={totalPages}
onPageChange={setPage}
/>
</div>
</div>
</div>
{/* Detail side panel */}
<div className={cx(
"shrink-0 border-l border-secondary bg-primary flex flex-col overflow-hidden transition-all duration-200 ease-linear",
panelOpen && selectedAppt ? "w-[380px]" : "w-0 border-l-0",
)}>
{panelOpen && selectedAppt && !rescheduleOpen && (
<AppointmentDetailPanel
appointment={selectedAppt}
onClose={() => { setPanelOpen(false); setSelectedAppt(null); }}
onReschedule={() => setRescheduleOpen(true)}
/>
)}
{panelOpen && selectedAppt && rescheduleOpen && (
<ReschedulePanel
appointment={selectedAppt}
onClose={() => setRescheduleOpen(false)}
onSaved={handleRescheduleSaved}
/>
)}
</div>
</div>
</>
);
};

14
src/pages/appointments.tsx
View File

@@ -27,11 +27,8 @@ type AppointmentRecord = {
fullName: { firstName: string; lastName: string } | null; fullName: { firstName: string; lastName: string } | null;
phones: { primaryPhoneNumber: string } | null; phones: { primaryPhoneNumber: string } | null;
} | null; } | null;
clinic: {
clinicName: string;
} | null;
doctor: { doctor: {
id: string; clinic: { clinicName: string } | null;
} | null; } | null;
}; };
@@ -61,8 +58,7 @@ const QUERY = `{ appointments(first: 100, orderBy: [{ scheduledAt: DescNullsLast
id scheduledAt durationMin appointmentType status id scheduledAt durationMin appointmentType status
doctorName department reasonForVisit doctorName department reasonForVisit
patient { id fullName { firstName lastName } phones { primaryPhoneNumber } } patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
clinic { clinicName } doctor { clinic { clinicName } }
doctor { id }
} } } }`; } } } }`;
const formatDate = (iso: string): string => formatDateOnly(iso); const formatDate = (iso: string): string => formatDateOnly(iso);
@@ -107,7 +103,7 @@ export const AppointmentsPage = () => {
const phone = a.patient?.phones?.primaryPhoneNumber ?? ''; const phone = a.patient?.phones?.primaryPhoneNumber ?? '';
const doctor = (a.doctorName ?? '').toLowerCase(); const doctor = (a.doctorName ?? '').toLowerCase();
const dept = (a.department ?? '').toLowerCase(); const dept = (a.department ?? '').toLowerCase();
const branch = (a.clinic?.clinicName ?? '').toLowerCase(); const branch = (a.doctor?.clinic?.clinicName ?? '').toLowerCase();
return patientName.includes(q) || phone.includes(q) || doctor.includes(q) || dept.includes(q) || branch.includes(q); return patientName.includes(q) || phone.includes(q) || doctor.includes(q) || dept.includes(q) || branch.includes(q);
}); });
} }
@@ -181,7 +177,7 @@ export const AppointmentsPage = () => {
? `${appt.patient.fullName?.firstName ?? ''} ${appt.patient.fullName?.lastName ?? ''}`.trim() || 'Unknown' ? `${appt.patient.fullName?.firstName ?? ''} ${appt.patient.fullName?.lastName ?? ''}`.trim() || 'Unknown'
: 'Unknown'; : 'Unknown';
const phone = appt.patient?.phones?.primaryPhoneNumber ?? ''; const phone = appt.patient?.phones?.primaryPhoneNumber ?? '';
const branch = appt.clinic?.clinicName ?? '—'; const branch = appt.doctor?.clinic?.clinicName ?? '—';
const statusLabel = STATUS_LABELS[appt.status ?? ''] ?? appt.status ?? '—'; const statusLabel = STATUS_LABELS[appt.status ?? ''] ?? appt.status ?? '—';
const statusColor = STATUS_COLORS[appt.status ?? ''] ?? 'gray'; const statusColor = STATUS_COLORS[appt.status ?? ''] ?? 'gray';
@@ -217,7 +213,7 @@ export const AppointmentsPage = () => {
<span className="text-xs text-tertiary">{appt.department ?? '—'}</span> <span className="text-xs text-tertiary">{appt.department ?? '—'}</span>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<span className="text-xs text-tertiary truncate block max-w-[180px]" title={branch}>{branch}</span> <span className="text-xs text-tertiary truncate block max-w-[130px]">{branch}</span>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Badge size="sm" color={statusColor} type="pill-color"> <Badge size="sm" color={statusColor} type="pill-color">

99
src/pages/call-desk.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useRef, useCallback } from 'react'; import { useState, useEffect, useRef, useCallback } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSidebarFlip, faSidebar, faPhone, faXmark, faDeleteLeft, faFlask, faMagnifyingGlass, faCircleInfo } from '@fortawesome/pro-duotone-svg-icons'; import { faSidebarFlip, faSidebar, faPhone, faXmark, faDeleteLeft, faFlask } from '@fortawesome/pro-duotone-svg-icons';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom, sipCallDurationAtom } from '@/state/sip-state'; import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom, sipCallDurationAtom } from '@/state/sip-state';
import { useAuth } from '@/providers/auth-provider'; import { useAuth } from '@/providers/auth-provider';
@@ -8,33 +8,26 @@ import { useData } from '@/providers/data-provider';
import { useWorklist } from '@/hooks/use-worklist'; import { useWorklist } from '@/hooks/use-worklist';
import { useSip } from '@/providers/sip-provider'; import { useSip } from '@/providers/sip-provider';
import { WorklistPanel } from '@/components/call-desk/worklist-panel'; import { WorklistPanel } from '@/components/call-desk/worklist-panel';
import type { WorklistSelection } from '@/components/call-desk/worklist-panel'; import type { WorklistLead } from '@/components/call-desk/worklist-panel';
import { ContextPanel } from '@/components/call-desk/context-panel'; import { ContextPanel } from '@/components/call-desk/context-panel';
import type { ContextPanelSubject } from '@/components/call-desk/context-panel';
import { ActiveCallCard } from '@/components/call-desk/active-call-card'; import { ActiveCallCard } from '@/components/call-desk/active-call-card';
import { Input } from '@/components/base/input/input';
import { faIcon } from '@/lib/icon-wrapper';
import { apiClient } from '@/lib/api-client'; import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast'; import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx'; import { cx } from '@/utils/cx';
const SearchLg = faIcon(faMagnifyingGlass);
export const CallDeskPage = () => { export const CallDeskPage = () => {
const { user } = useAuth(); const { user } = useAuth();
const { leadActivities, calls, followUps: dataFollowUps, patients, appointments } = useData(); const { leadActivities, calls, followUps: dataFollowUps, patients, appointments } = useData();
const { callState, callerNumber, callUcid, dialOutbound, isRegistered } = useSip(); const { callState, callerNumber, callUcid, dialOutbound } = useSip();
const { missedCalls, followUps, marketingLeads, loading } = useWorklist(); const { missedCalls, followUps, marketingLeads, loading } = useWorklist();
const [selectedLead, setSelectedLead] = useState<ContextPanelSubject | null>(null); const [selectedLead, setSelectedLead] = useState<WorklistLead | null>(null);
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
const [contextOpen, setContextOpen] = useState(true); const [contextOpen, setContextOpen] = useState(true);
const [activeMissedCallId, setActiveMissedCallId] = useState<string | null>(null); const [activeMissedCallId, setActiveMissedCallId] = useState<string | null>(null);
const [callDismissed, setCallDismissed] = useState(false); const [callDismissed, setCallDismissed] = useState(false);
const [diallerOpen, setDiallerOpen] = useState(false); const [diallerOpen, setDiallerOpen] = useState(false);
const [dialNumber, setDialNumber] = useState(''); const [dialNumber, setDialNumber] = useState('');
const [dialling, setDialling] = useState(false); const [dialling, setDialling] = useState(false);
const [search, setSearch] = useState('');
// DEV: simulate incoming call // DEV: simulate incoming call
const setSimCallState = useSetAtom(sipCallStateAtom); const setSimCallState = useSetAtom(sipCallStateAtom);
@@ -98,7 +91,7 @@ export const CallDeskPage = () => {
.then((result) => { .then((result) => {
setResolvedCaller(result); setResolvedCaller(result);
if (result.isNew) { if (result.isNew) {
notify.info('New Caller', 'No existing records found for this number'); notify.info('New Caller', 'Lead and patient records created');
} }
}) })
.catch((err) => { .catch((err) => {
@@ -115,22 +108,14 @@ export const CallDeskPage = () => {
} }
}, [isInCall]); }, [isInCall]);
// Build activeLead from resolved caller or fallback to client-side match. // Build activeLead from resolved caller or fallback to client-side match
// The resolver is the authoritative source for patientId (it just joined
// lead↔patient by phone), so overlay it on top of any worklist row that
// pre-dates the linkage. Without this, the Book Appt pills can't find
// a returning caller's prior appointments because the frontend loses
// sight of which patient they are.
const workLead = resolvedCaller ? marketingLeads.find((l) => l.id === resolvedCaller.leadId) : null;
const callerLead = resolvedCaller const callerLead = resolvedCaller
? workLead ? marketingLeads.find((l) => l.id === resolvedCaller.leadId) ?? {
? { ...workLead, patientId: (workLead as any).patientId ?? resolvedCaller.patientId } id: resolvedCaller.leadId,
: { contactName: { firstName: resolvedCaller.firstName, lastName: resolvedCaller.lastName },
id: resolvedCaller.leadId, contactPhone: [{ number: resolvedCaller.phone, callingCode: '+91' }],
contactName: { firstName: resolvedCaller.firstName, lastName: resolvedCaller.lastName }, patientId: resolvedCaller.patientId,
contactPhone: [{ number: resolvedCaller.phone, callingCode: '+91' }], }
patientId: resolvedCaller.patientId,
}
: callerNumber : callerNumber
? marketingLeads.find((l) => l.contactPhone?.[0]?.number?.endsWith(callerNumber) || callerNumber.endsWith(l.contactPhone?.[0]?.number ?? '---')) ? marketingLeads.find((l) => l.contactPhone?.[0]?.number?.endsWith(callerNumber) || callerNumber.endsWith(l.contactPhone?.[0]?.number ?? '---'))
: null; : null;
@@ -141,59 +126,16 @@ export const CallDeskPage = () => {
: selectedLead; : selectedLead;
const activeLeadFull = activeLead as any; const activeLeadFull = activeLead as any;
// Handle selection from any worklist row type. Leads use the lead
// object directly; missed calls and follow-ups build a synthetic
// lead-like object from their phone/patientId so the P360 context
// panel can render for any row type.
const handleSelectItem = useCallback((selection: WorklistSelection) => {
setSelectedItemId(selection.rowId);
if (selection.lead) {
// Lead row — use the full lead object as before
setSelectedLead(selection.lead);
return;
}
// Non-lead row (missed call, follow-up, callback) — build a
// ContextPanelSubject from the row's available data. The panel
// uses contactPhone for call-history matching and patientId for
// appointment/follow-up lookups. No type cast needed — the
// ContextPanelSubject type accepts these optional fields.
const phone = selection.phoneRaw ? selection.phoneRaw.replace(/\D/g, '').slice(-10) : '';
const subject: ContextPanelSubject = {
id: selection.leadId ?? selection.rowId,
contactName: { firstName: selection.name.split(' ')[0] || '', lastName: selection.name.split(' ').slice(1).join(' ') || '' },
contactPhone: phone ? [{ number: phone, callingCode: '+91' }] : [],
patientId: selection.patientId,
};
setSelectedLead(subject);
}, []);
return ( return (
<div className="flex flex-1 flex-col overflow-hidden"> <div className="flex flex-1 flex-col overflow-hidden">
{/* Header — matches PageHeader visual pattern */} {/* Compact header: title + name on left, status + toggle on right */}
<div className="flex shrink-0 items-center justify-between px-6 py-3"> <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<h1 className="text-lg font-bold text-primary">Call Desk</h1> <h1 className="text-lg font-bold text-primary">Call Desk</h1>
<span className="text-sm text-tertiary ml-1">{user.name}</span> <span className="text-sm text-tertiary">{user.name}</span>
<span className="flex size-5 items-center justify-center text-fg-quaternary" title="Your active worklist — missed calls, leads, and follow-ups prioritised by SLA.">
<FontAwesomeIcon icon={faCircleInfo} className="size-4" />
</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{!isInCall && (
<div className="w-52">
<Input
placeholder="Search worklist..."
icon={SearchLg}
size="sm"
value={search}
onChange={setSearch}
aria-label="Search worklist"
/>
</div>
)}
{import.meta.env.DEV && (!isInCall ? ( {import.meta.env.DEV && (!isInCall ? (
<button <button
onClick={startSimCall} onClick={startSimCall}
@@ -262,11 +204,11 @@ export const CallDeskPage = () => {
</div> </div>
<button <button
onClick={handleDial} onClick={handleDial}
disabled={!isRegistered || dialling || dialNumber.replace(/[^0-9]/g, '').length < 10} disabled={dialling || dialNumber.replace(/[^0-9]/g, '').length < 10}
className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear" className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear"
> >
<FontAwesomeIcon icon={faPhone} className="size-3.5" /> <FontAwesomeIcon icon={faPhone} className="size-3.5" />
{dialling ? 'Dialling...' : !isRegistered ? 'Telephony unavailable' : 'Call'} {dialling ? 'Dialling...' : 'Call'}
</button> </button>
</div> </div>
)} )}
@@ -300,10 +242,9 @@ export const CallDeskPage = () => {
followUps={followUps} followUps={followUps}
leads={marketingLeads} leads={marketingLeads}
loading={loading} loading={loading}
onSelectItem={handleSelectItem} onSelectLead={(lead) => setSelectedLead(lead)}
selectedItemId={selectedItemId} selectedLeadId={selectedLead?.id ?? null}
onDialMissedCall={(id) => setActiveMissedCallId(id)} onDialMissedCall={(id) => setActiveMissedCallId(id)}
search={search}
/> />
)} )}
</div> </div>

256
src/pages/call-history.tsx
View File

@@ -11,46 +11,36 @@ import {
} from '@fortawesome/pro-duotone-svg-icons'; } from '@fortawesome/pro-duotone-svg-icons';
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />; const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Table } from '@/components/application/table/table'; import { Table, TableCard } from '@/components/application/table/table';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { Input } from '@/components/base/input/input'; import { Input } from '@/components/base/input/input';
import { Select } from '@/components/base/select/select'; import { Select } from '@/components/base/select/select';
import { PageHeader } from '@/components/layout/page-header'; import { TopBar } from '@/components/layout/top-bar';
import { PhoneActionCell } from '@/components/call-desk/phone-action-cell'; import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
import { formatShortDate, formatPhone } from '@/lib/format'; import { formatShortDate, formatPhone } from '@/lib/format';
// cx removed — no longer used after SLA column removal import { computeSlaStatus } from '@/lib/scoring';
import { cx } from '@/utils/cx';
import { useData } from '@/providers/data-provider'; import { useData } from '@/providers/data-provider';
import { useAuth } from '@/providers/auth-provider';
import { PaginationCardDefault } from '@/components/application/pagination/pagination'; import { PaginationCardDefault } from '@/components/application/pagination/pagination';
import type { Call, CallDirection, CallDisposition } from '@/types/entities'; import type { Call, CallDirection, CallDisposition } from '@/types/entities';
type FilterKey = 'all' | 'inbound' | 'outbound' | 'missed'; type FilterKey = 'all' | 'inbound' | 'outbound' | 'missed';
const allFilterItems = [ const filterItems = [
{ id: 'all' as const, label: 'All Calls' }, { id: 'all' as const, label: 'All Calls' },
{ id: 'inbound' as const, label: 'Inbound' }, { id: 'inbound' as const, label: 'Inbound' },
{ id: 'outbound' as const, label: 'Outbound' }, { id: 'outbound' as const, label: 'Outbound' },
{ id: 'missed' as const, label: 'Missed' }, { id: 'missed' as const, label: 'Missed' },
]; ];
const agentFilterItems = [
{ id: 'all' as const, label: 'All Calls' },
{ id: 'inbound' as const, label: 'Inbound' },
{ id: 'outbound' as const, label: 'Outbound' },
];
const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = { const dispositionConfig: Record<CallDisposition, { label: string; color: 'success' | 'brand' | 'blue-light' | 'warning' | 'gray' | 'error' }> = {
APPOINTMENT_BOOKED: { label: 'Appt Booked', color: 'success' }, APPOINTMENT_BOOKED: { label: 'Appt Booked', color: 'success' },
APPOINTMENT_RESCHEDULED: { label: 'Appt Rescheduled', color: 'warning' },
APPOINTMENT_CANCELLED: { label: 'Appt Cancelled', color: 'error' },
FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' }, FOLLOW_UP_SCHEDULED: { label: 'Follow-up', color: 'brand' },
INFO_PROVIDED: { label: 'Info Provided', color: 'blue-light' }, INFO_PROVIDED: { label: 'Info Provided', color: 'blue-light' },
NO_ANSWER: { label: 'No Answer', color: 'warning' }, NO_ANSWER: { label: 'No Answer', color: 'warning' },
WRONG_NUMBER: { label: 'Wrong Number', color: 'gray' }, WRONG_NUMBER: { label: 'Wrong Number', color: 'gray' },
NOT_INTERESTED: { label: 'Not Interested', color: 'error' },
CALLBACK_REQUESTED: { label: 'Callback', color: 'brand' }, CALLBACK_REQUESTED: { label: 'Callback', color: 'brand' },
CALL_DROPPED: { label: 'Call Dropped', color: 'gray' },
}; };
const formatDuration = (seconds: number | null): string => { const formatDuration = (seconds: number | null): string => {
@@ -61,6 +51,13 @@ const formatDuration = (seconds: number | null): string => {
return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`; return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
}; };
const formatPhoneDisplay = (call: Call): string => {
if (call.callerNumber && call.callerNumber.length > 0) {
return formatPhone(call.callerNumber[0]);
}
return '\u2014';
};
const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callStatus'] }> = ({ direction, status }) => { const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callStatus'] }> = ({ direction, status }) => {
if (status === 'MISSED') { if (status === 'MISSED') {
return <FontAwesomeIcon icon={faPhoneXmark} className="size-4 text-fg-error-secondary" />; return <FontAwesomeIcon icon={faPhoneXmark} className="size-4 text-fg-error-secondary" />;
@@ -71,6 +68,12 @@ const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callSta
return <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4 text-fg-success-secondary" />; return <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4 text-fg-success-secondary" />;
}; };
const getCallSla = (call: Call): { percent: number; status: 'low' | 'medium' | 'high' | 'critical' } | null => {
if (call.sla == null) return null;
const percent = Math.round(call.sla);
return { percent, status: computeSlaStatus(percent) };
};
const RecordingPlayer: FC<{ url: string }> = ({ url }) => { const RecordingPlayer: FC<{ url: string }> = ({ url }) => {
const audioRef = useRef<HTMLAudioElement>(null); const audioRef = useRef<HTMLAudioElement>(null);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
@@ -82,7 +85,8 @@ const RecordingPlayer: FC<{ url: string }> = ({ url }) => {
audio.pause(); audio.pause();
setIsPlaying(false); setIsPlaying(false);
} else { } else {
audio.play().then(() => setIsPlaying(true)).catch(() => {}); audio.play().catch(() => setIsPlaying(false));
setIsPlaying(true);
} }
}; };
@@ -112,11 +116,11 @@ const PAGE_SIZE = 20;
export const CallHistoryPage = () => { export const CallHistoryPage = () => {
const { calls, leads } = useData(); const { calls, leads } = useData();
const { user, isAdmin } = useAuth();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [filter, setFilter] = useState<FilterKey>('all'); const [filter, setFilter] = useState<FilterKey>('all');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// Build a map of lead names by ID for enrichment
const leadNameMap = useMemo(() => { const leadNameMap = useMemo(() => {
const map = new Map<string, string>(); const map = new Map<string, string>();
for (const lead of leads) { for (const lead of leads) {
@@ -128,10 +132,7 @@ export const CallHistoryPage = () => {
return map; return map;
}, [leads]); }, [leads]);
// Agent sees only their own calls; supervisor sees all // Sort by time (newest first) and apply filters
const agentConfig = localStorage.getItem('helix_agent_config');
const myAgentId = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
const filteredCalls = useMemo(() => { const filteredCalls = useMemo(() => {
let result = [...calls].sort((a, b) => { let result = [...calls].sort((a, b) => {
const dateA = a.startedAt ? new Date(a.startedAt).getTime() : 0; const dateA = a.startedAt ? new Date(a.startedAt).getTime() : 0;
@@ -139,95 +140,80 @@ export const CallHistoryPage = () => {
return dateB - dateA; return dateB - dateA;
}); });
// CC agent: filter to own calls only. // Direction / status filter
// Match on the authoritative agent relation (set by CDR enrichment) if (filter === 'inbound') result = result.filter((c) => c.callDirection === 'INBOUND');
// or the raw agentName for unenriched rows. Chain names like
// "RamaiahAdmin -> GlobalHealthX" are split — last segment is
// the final handler. Missed calls have no handler and are excluded
// from the agent's personal history (they belong on the Missed
// Calls queue).
if (!isAdmin && myAgentId) {
const myId = myAgentId.toLowerCase();
result = result.filter((c) => {
// Missed calls have no handler — exclude from agent history
if (c.callStatus === 'MISSED') return false;
// Authoritative: agent relation from CDR enrichment
if (c.agent?.ozonetelAgentId?.toLowerCase() === myId) return true;
// Fallback: parse chain in agentName, match last segment
if (c.agentName) {
const segments = c.agentName.split('->').map(s => s.trim().toLowerCase());
const finalHandler = segments[segments.length - 1];
if (finalHandler === myId) return true;
}
return false;
});
}
if (filter === 'inbound') result = result.filter((c) => c.callDirection === 'INBOUND' && c.callStatus !== 'MISSED');
else if (filter === 'outbound') result = result.filter((c) => c.callDirection === 'OUTBOUND'); else if (filter === 'outbound') result = result.filter((c) => c.callDirection === 'OUTBOUND');
else if (filter === 'missed') result = result.filter((c) => c.callStatus === 'MISSED'); else if (filter === 'missed') result = result.filter((c) => c.callStatus === 'MISSED');
// Search filter
if (search.trim()) { if (search.trim()) {
const q = search.toLowerCase(); const q = search.toLowerCase();
result = result.filter((c) => { result = result.filter((c) => {
const name = c.leadName ?? leadNameMap.get(c.leadId ?? '') ?? ''; const name = c.leadName ?? leadNameMap.get(c.leadId ?? '') ?? '';
const phone = c.callerNumber?.[0]?.number ?? ''; const phone = c.callerNumber?.[0]?.number ?? '';
const agent = c.agentName ?? ''; const agent = c.agentName ?? '';
return name.toLowerCase().includes(q) || phone.includes(q) || agent.toLowerCase().includes(q); return (
name.toLowerCase().includes(q) ||
phone.includes(q) ||
agent.toLowerCase().includes(q)
);
}); });
} }
return result; return result;
}, [calls, filter, search, leadNameMap, isAdmin, myAgentId, user.id]); }, [calls, filter, search, leadNameMap]);
const completedCount = filteredCalls.filter((c) => c.callStatus === 'COMPLETED').length; const completedCount = filteredCalls.filter((c) => c.callStatus !== 'MISSED').length;
const missedCount = filteredCalls.filter((c) => c.callStatus === 'MISSED').length; const missedCount = filteredCalls.filter((c) => c.callStatus === 'MISSED').length;
const totalPages = Math.max(1, Math.ceil(filteredCalls.length / PAGE_SIZE)); const totalPages = Math.max(1, Math.ceil(filteredCalls.length / PAGE_SIZE));
const pagedCalls = filteredCalls.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE); const pagedCalls = filteredCalls.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
// Reset page when filter/search changes
useEffect(() => { setPage(1); }, [filter, search]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { setPage(1); }, [filter, search]); // eslint-disable-line react-hooks/exhaustive-deps
return ( return (
<div className="flex flex-1 flex-col overflow-hidden"> <div className="flex flex-1 flex-col overflow-hidden">
<PageHeader <TopBar title="Call History" subtitle={`${filteredCalls.length} total calls`} />
title={isAdmin ? 'Call History' : 'My Call History'}
badge={filteredCalls.length} <div className="flex flex-1 flex-col overflow-hidden p-7">
subtitle={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`} <TableCard.Root size="md" className="flex-1 min-h-0">
infoText={isAdmin ? 'All calls across all agents with recordings and dispositions.' : 'Your answered inbound and outbound calls.'} <TableCard.Header
controls={ title="Call History"
<> badge={String(filteredCalls.length)}
<div className="w-44"> description={`${completedCount} completed \u00B7 ${missedCount} missed`}
<Select contentTrailing={
size="sm" <div className="flex items-center gap-2">
placeholder="All Calls" <div className="w-44">
selectedKey={filter} <Select
onSelectionChange={(key) => setFilter(key as FilterKey)} size="sm"
items={isAdmin ? allFilterItems : agentFilterItems} placeholder="All Calls"
aria-label="Filter calls" selectedKey={filter}
> onSelectionChange={(key) => setFilter(key as FilterKey)}
{(item) => ( items={filterItems}
<Select.Item id={item.id} label={item.label}> aria-label="Filter calls"
{item.label} >
</Select.Item> {(item) => (
)} <Select.Item id={item.id} label={item.label}>
</Select> {item.label}
</div> </Select.Item>
<div className="w-56"> )}
<Input </Select>
placeholder="Search calls..." </div>
icon={SearchLg} <div className="w-56">
size="sm" <Input
value={search} placeholder="Search calls..."
onChange={(value) => setSearch(value)} icon={SearchLg}
aria-label="Search calls" size="sm"
/> value={search}
</div> onChange={(value) => setSearch(value)}
</> aria-label="Search calls"
} />
/> </div>
</div>
}
/>
<div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3">
{filteredCalls.length === 0 ? ( {filteredCalls.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16"> <div className="flex flex-col items-center justify-center py-16">
<h3 className="text-sm font-semibold text-primary">No calls found</h3> <h3 className="text-sm font-semibold text-primary">No calls found</h3>
@@ -243,15 +229,17 @@ export const CallHistoryPage = () => {
<Table.Head label="PHONE" /> <Table.Head label="PHONE" />
<Table.Head label="DURATION" className="w-24" /> <Table.Head label="DURATION" className="w-24" />
<Table.Head label="OUTCOME" /> <Table.Head label="OUTCOME" />
{/* Agent columns — only visible for supervisor */} <Table.Head label="SLA" className="w-24" />
{isAdmin && <Table.Head label="AGENT" />} <Table.Head label="AGENT" />
{isAdmin && <Table.Head label="RECORDING" className="w-24" />} <Table.Head label="RECORDING" className="w-24" />
<Table.Head label="TIME" /> <Table.Head label="TIME" />
<Table.Head label="ACTIONS" className="w-24" />
</Table.Header> </Table.Header>
<Table.Body items={pagedCalls}> <Table.Body items={pagedCalls}>
{(call) => { {(call) => {
const patientName = call.leadName ?? leadNameMap.get(call.leadId ?? '') ?? 'Unknown';
const phoneDisplay = formatPhoneDisplay(call);
const phoneRaw = call.callerNumber?.[0]?.number ?? ''; const phoneRaw = call.callerNumber?.[0]?.number ?? '';
const patientName = call.leadName ?? leadNameMap.get(call.leadId ?? '') ?? (phoneRaw ? formatPhone({ number: phoneRaw, callingCode: '+91' }) : 'Unknown');
const dispositionCfg = call.disposition !== null ? dispositionConfig[call.disposition] : null; const dispositionCfg = call.disposition !== null ? dispositionConfig[call.disposition] : null;
return ( return (
@@ -265,14 +253,9 @@ export const CallHistoryPage = () => {
</span> </span>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
{phoneRaw ? ( <span className="text-sm text-tertiary whitespace-nowrap">
<PhoneActionCell {phoneDisplay}
phoneNumber={phoneRaw} </span>
displayNumber={formatPhone({ number: phoneRaw, callingCode: '+91' })}
/>
) : (
<span className="text-sm text-quaternary">{'\u2014'}</span>
)}
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<span className="text-sm text-secondary whitespace-nowrap"> <span className="text-sm text-secondary whitespace-nowrap">
@@ -288,43 +271,68 @@ export const CallHistoryPage = () => {
<span className="text-sm text-quaternary">{'\u2014'}</span> <span className="text-sm text-quaternary">{'\u2014'}</span>
)} )}
</Table.Cell> </Table.Cell>
{isAdmin && ( <Table.Cell>
<Table.Cell> {(() => {
<span className="text-sm text-secondary"> const sla = getCallSla(call);
{call.agent?.name ?? call.agentName ?? '\u2014'} if (!sla) return <span className="text-xs text-quaternary">—</span>;
</span> return (
</Table.Cell> <span className="inline-flex items-center gap-1.5 text-xs font-medium">
)} <span className={cx(
{isAdmin && ( 'size-2 rounded-full',
<Table.Cell> sla.status === 'low' && 'bg-success-solid',
{call.recordingUrl ? ( sla.status === 'medium' && 'bg-warning-solid',
<RecordingPlayer url={call.recordingUrl} /> sla.status === 'high' && 'bg-error-solid',
) : ( sla.status === 'critical' && 'bg-error-solid animate-pulse',
<span className="text-xs text-quaternary">{'\u2014'}</span> )} />
)} <span className="text-secondary">{sla.percent}%</span>
</Table.Cell> </span>
)} );
})()}
</Table.Cell>
<Table.Cell>
<span className="text-sm text-secondary">
{call.agentName ?? '\u2014'}
</span>
</Table.Cell>
<Table.Cell>
{call.recordingUrl ? (
<RecordingPlayer url={call.recordingUrl} />
) : (
<span className="text-xs text-quaternary">{'\u2014'}</span>
)}
</Table.Cell>
<Table.Cell> <Table.Cell>
<span className="text-sm text-tertiary whitespace-nowrap"> <span className="text-sm text-tertiary whitespace-nowrap">
{call.startedAt ? formatShortDate(call.startedAt) : '\u2014'} {call.startedAt ? formatShortDate(call.startedAt) : '\u2014'}
</span> </span>
</Table.Cell> </Table.Cell>
<Table.Cell>
{phoneRaw ? (
<ClickToCallButton
phoneNumber={phoneRaw}
leadId={call.leadId ?? undefined}
label="Call"
size="sm"
/>
) : (
<span className="text-xs text-quaternary">{'\u2014'}</span>
)}
</Table.Cell>
</Table.Row> </Table.Row>
); );
}} }}
</Table.Body> </Table.Body>
</Table> </Table>
)} )}
<div className="shrink-0">
<PaginationCardDefault
page={page}
total={totalPages}
onPageChange={setPage}
/>
</div>
</TableCard.Root>
</div> </div>
{totalPages > 1 && (
<div className="shrink-0 border-t border-secondary px-6 py-3">
<PaginationCardDefault
page={page}
total={totalPages}
onPageChange={setPage}
/>
</div>
)}
</div> </div>
); );
}; };

251
src/pages/call-recordings.tsx
View File

@@ -9,7 +9,7 @@ import { Badge } from '@/components/base/badges/badges';
import { Input } from '@/components/base/input/input'; import { Input } from '@/components/base/input/input';
import { Table } from '@/components/application/table/table'; import { Table } from '@/components/application/table/table';
import { PaginationPageDefault } from '@/components/application/pagination/pagination'; import { PaginationPageDefault } from '@/components/application/pagination/pagination';
import { PageHeader } from '@/components/layout/page-header'; import { TopBar } from '@/components/layout/top-bar';
import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle'; import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
import { PhoneActionCell } from '@/components/call-desk/phone-action-cell'; import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
import { RecordingAnalysisSlideout } from '@/components/call-desk/recording-analysis'; import { RecordingAnalysisSlideout } from '@/components/call-desk/recording-analysis';
@@ -26,7 +26,6 @@ type RecordingRecord = {
callStatus: string | null; callStatus: string | null;
callerNumber: { primaryPhoneNumber: string } | null; callerNumber: { primaryPhoneNumber: string } | null;
agentName: string | null; agentName: string | null;
agent: { id: string; name: string; ozonetelAgentId: string } | null;
startedAt: string | null; startedAt: string | null;
durationSec: number | null; durationSec: number | null;
disposition: string | null; disposition: string | null;
@@ -36,8 +35,7 @@ type RecordingRecord = {
const QUERY = `{ calls(first: 200, orderBy: [{ startedAt: DescNullsLast }]) { edges { node { const QUERY = `{ calls(first: 200, orderBy: [{ startedAt: DescNullsLast }]) { edges { node {
id createdAt direction callStatus callerNumber { primaryPhoneNumber } id createdAt direction callStatus callerNumber { primaryPhoneNumber }
agentName agent { id name ozonetelAgentId } agentName startedAt durationSec disposition sla
startedAt durationSec disposition sla
recording { primaryLinkUrl primaryLinkLabel } recording { primaryLinkUrl primaryLinkLabel }
} } } }`; } } } }`;
@@ -78,13 +76,13 @@ const RecordingPlayer = ({ url }: { url: string }) => {
}; };
const columnDefs = [ const columnDefs = [
{ id: 'agent', label: 'Agent', defaultVisible: true, allowsSorting: true, isRowHeader: true }, { id: 'agent', label: 'Agent', defaultVisible: true },
{ id: 'caller', label: 'Caller', defaultVisible: true }, { id: 'caller', label: 'Caller', defaultVisible: true },
{ id: 'ai', label: 'AI', defaultVisible: true }, { id: 'ai', label: 'AI', defaultVisible: true },
{ id: 'type', label: 'Type', defaultVisible: true }, { id: 'type', label: 'Type', defaultVisible: true },
{ id: 'sla', label: 'SLA', defaultVisible: true, allowsSorting: true }, { id: 'sla', label: 'SLA', defaultVisible: true },
{ id: 'dateTime', label: 'Date & Time', defaultVisible: true, allowsSorting: true }, { id: 'dateTime', label: 'Date & Time', defaultVisible: true },
{ id: 'duration', label: 'Duration', defaultVisible: true, allowsSorting: true }, { id: 'duration', label: 'Duration', defaultVisible: true },
{ id: 'disposition', label: 'Disposition', defaultVisible: true }, { id: 'disposition', label: 'Disposition', defaultVisible: true },
{ id: 'recording', label: 'Recording', defaultVisible: true }, { id: 'recording', label: 'Recording', defaultVisible: true },
]; ];
@@ -98,85 +96,6 @@ export const CallRecordingsPage = () => {
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({ column: 'dateTime', direction: 'descending' }); const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({ column: 'dateTime', direction: 'descending' });
const { visibleColumns, toggle: toggleColumn } = useColumnVisibility(columnDefs); const { visibleColumns, toggle: toggleColumn } = useColumnVisibility(columnDefs);
// Dynamic columns for React Aria — filter by visibility, pass as prop
const activeColumns = useMemo(
() => columnDefs.filter(c => visibleColumns.has(c.id)),
[visibleColumns],
);
// Cell renderer — lives inside the component so it can access setSlideoutCallId
const renderRecordingCell = useCallback((call: RecordingRecord, colId: string) => {
const phone = call.callerNumber?.primaryPhoneNumber ?? '';
const dirLabel = call.direction === 'INBOUND' ? 'In' : 'Out';
const dirColor: 'blue' | 'brand' = call.direction === 'INBOUND' ? 'blue' : 'brand';
switch (colId) {
case 'agent':
return <span className="text-sm text-primary">{call.agent?.name ?? call.agentName ?? '—'}</span>;
case 'caller':
return phone
? <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />
: <span className="text-xs text-quaternary">—</span>;
case 'ai':
return (
<span
role="button"
tabIndex={0}
onPointerDown={(e) => {
e.stopPropagation();
let longPressed = false;
const timer = setTimeout(() => {
longPressed = true;
window.dispatchEvent(new CustomEvent('maint:trigger', { detail: 'clearAnalysisCache' }));
}, 1000);
const up = () => { clearTimeout(timer); if (!longPressed) setSlideoutCallId(call.id); };
document.addEventListener('pointerup', up, { once: true });
}}
className="inline-flex items-center gap-1 rounded-full bg-brand-primary px-2.5 py-1 text-xs font-semibold text-brand-secondary hover:bg-brand-secondary hover:text-white cursor-pointer transition duration-100 ease-linear"
title="AI Analysis (long-press to regenerate)"
>
<FontAwesomeIcon icon={faSparkles} className="size-3" />
AI
</span>
);
case 'type':
return <Badge size="sm" color={dirColor} type="pill-color">{dirLabel}</Badge>;
case 'sla': {
const sla = getCallSla(call);
if (!sla) return <span className="text-xs text-quaternary">—</span>;
return (
<span className="inline-flex items-center gap-1.5 text-xs font-medium">
<span className={cx('size-2 rounded-full',
sla.status === 'low' && 'bg-success-solid',
sla.status === 'medium' && 'bg-warning-solid',
sla.status === 'high' && 'bg-error-solid',
sla.status === 'critical' && 'bg-error-solid animate-pulse',
)} />
<span className="text-secondary">{sla.percent}%</span>
</span>
);
}
case 'dateTime':
return call.startedAt ? (
<div>
<span className="text-sm text-primary">{formatDateOrdinal(call.startedAt)}</span>
<span className="block text-xs text-tertiary">{formatTimeOnly(call.startedAt)}</span>
</div>
) : <span className="text-xs text-quaternary">—</span>;
case 'duration':
return <span className="text-sm text-primary">{formatDuration(call.durationSec)}</span>;
case 'disposition':
return call.disposition
? <Badge size="sm" color="gray" type="pill-color">{call.disposition.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}</Badge>
: <span className="text-xs text-quaternary">—</span>;
case 'recording':
return call.recording?.primaryLinkUrl
? <RecordingPlayer url={call.recording.primaryLinkUrl} />
: null;
default:
return null;
}
}, []);
const fetchRecordings = useCallback(() => { const fetchRecordings = useCallback(() => {
apiClient.graphql<{ calls: { edges: Array<{ node: RecordingRecord }> } }>(QUERY, undefined, { silent: true }) apiClient.graphql<{ calls: { edges: Array<{ node: RecordingRecord }> } }>(QUERY, undefined, { silent: true })
.then(data => { .then(data => {
@@ -209,7 +128,7 @@ export const CallRecordingsPage = () => {
if (search.trim()) { if (search.trim()) {
const q = search.toLowerCase(); const q = search.toLowerCase();
result = result.filter(c => result = result.filter(c =>
(c.agent?.name ?? c.agentName ?? '').toLowerCase().includes(q) || (c.agentName ?? '').toLowerCase().includes(q) ||
(c.callerNumber?.primaryPhoneNumber ?? '').includes(q) || (c.callerNumber?.primaryPhoneNumber ?? '').includes(q) ||
(c.disposition ?? '').toLowerCase().includes(q), (c.disposition ?? '').toLowerCase().includes(q),
); );
@@ -219,7 +138,7 @@ export const CallRecordingsPage = () => {
const dir = sortDescriptor.direction === 'ascending' ? 1 : -1; const dir = sortDescriptor.direction === 'ascending' ? 1 : -1;
result = [...result].sort((a, b) => { result = [...result].sort((a, b) => {
switch (sortDescriptor.column) { switch (sortDescriptor.column) {
case 'agent': return (a.agent?.name ?? a.agentName ?? '').localeCompare(b.agent?.name ?? b.agentName ?? '') * dir; case 'agent': return (a.agentName ?? '').localeCompare(b.agentName ?? '') * dir;
case 'dateTime': { case 'dateTime': {
const ta = a.startedAt ? new Date(a.startedAt).getTime() : 0; const ta = a.startedAt ? new Date(a.startedAt).getTime() : 0;
const tb = b.startedAt ? new Date(b.startedAt).getTime() : 0; const tb = b.startedAt ? new Date(b.startedAt).getTime() : 0;
@@ -240,20 +159,19 @@ export const CallRecordingsPage = () => {
const handleSearch = (val: string) => { setSearch(val); setCurrentPage(1); }; const handleSearch = (val: string) => { setSearch(val); setCurrentPage(1); };
return ( return (
<div className="flex flex-1 flex-col overflow-hidden"> <>
<PageHeader <TopBar title="Call Recordings" />
title="Call Recordings" <div className="flex flex-1 flex-col overflow-hidden">
badge={filtered.length} {/* Toolbar */}
infoText="All call recordings with AI analysis, dispositions, and playback." <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-3">
controls={ <span className="text-sm text-tertiary">{filtered.length} recordings</span>
<> <div className="flex items-center gap-3">
<ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} /> <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
<div className="w-56"> <div className="w-56">
<Input placeholder="Search agent, phone, disposition..." icon={SearchLg} size="sm" value={search} onChange={handleSearch} /> <Input placeholder="Search agent, phone, disposition..." icon={SearchLg} size="sm" value={search} onChange={handleSearch} />
</div> </div>
</> </div>
} </div>
/>
{/* Table */} {/* Table */}
<div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3"> <div className="flex flex-1 flex-col min-h-0 overflow-hidden px-4 pt-3">
@@ -267,28 +185,120 @@ export const CallRecordingsPage = () => {
</div> </div>
) : ( ) : (
<div className="flex flex-1 flex-col min-h-0 overflow-auto"> <div className="flex flex-1 flex-col min-h-0 overflow-auto">
<Table key={Array.from(visibleColumns).sort().join(',')} size="sm" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}> <Table size="sm" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}>
<Table.Header columns={activeColumns}> <Table.Header>
{(col) => ( {visibleColumns.has('agent') && <Table.Head id="agent" label="Agent" isRowHeader allowsSorting />}
<Table.Head {visibleColumns.has('caller') && <Table.Head label="Caller" />}
key={col.id} {visibleColumns.has('ai') && <Table.Head label="AI" className="w-14" />}
id={col.id} {visibleColumns.has('type') && <Table.Head label="Type" className="w-16" />}
label={col.label} {visibleColumns.has('sla') && <Table.Head id="sla" label="SLA" className="w-24" allowsSorting />}
isRowHeader={col.isRowHeader} {visibleColumns.has('dateTime') && <Table.Head id="dateTime" label="Date & Time" className="w-28" allowsSorting />}
allowsSorting={col.allowsSorting} {visibleColumns.has('duration') && <Table.Head id="duration" label="Duration" className="w-20" allowsSorting />}
/> {visibleColumns.has('disposition') && <Table.Head label="Disposition" className="w-32" />}
)} {visibleColumns.has('recording') && <Table.Head label="Recording" className="w-24" />}
</Table.Header> </Table.Header>
<Table.Body items={pagedRows}> <Table.Body items={pagedRows}>
{(call) => ( {(call) => {
<Table.Row id={call.id} columns={activeColumns} className="group/row"> const phone = call.callerNumber?.primaryPhoneNumber ?? '';
{(col) => ( const dirLabel = call.direction === 'INBOUND' ? 'In' : 'Out';
<Table.Cell key={col.id}> const dirColor = call.direction === 'INBOUND' ? 'blue' : 'brand';
{renderRecordingCell(call, col.id)}
</Table.Cell> return (
)} <Table.Row id={call.id}>
</Table.Row> {visibleColumns.has('agent') && (
)} <Table.Cell>
<span className="text-sm text-primary">{call.agentName || '—'}</span>
</Table.Cell>
)}
{visibleColumns.has('caller') && (
<Table.Cell>
{phone ? (
<PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />
) : <span className="text-xs text-quaternary">—</span>}
</Table.Cell>
)}
{visibleColumns.has('ai') && (
<Table.Cell>
<span
role="button"
tabIndex={0}
onPointerDown={(e) => {
e.stopPropagation();
let longPressed = false;
const timer = setTimeout(() => {
longPressed = true;
window.dispatchEvent(new CustomEvent('maint:trigger', { detail: 'clearAnalysisCache' }));
}, 1000);
const up = () => { clearTimeout(timer); if (!longPressed) setSlideoutCallId(call.id); };
document.addEventListener('pointerup', up, { once: true });
}}
className="inline-flex items-center gap-1 rounded-full bg-brand-primary px-2.5 py-1 text-xs font-semibold text-brand-secondary hover:bg-brand-secondary hover:text-white cursor-pointer transition duration-100 ease-linear"
title="AI Analysis (long-press to regenerate)"
>
<FontAwesomeIcon icon={faSparkles} className="size-3" />
AI
</span>
</Table.Cell>
)}
{visibleColumns.has('type') && (
<Table.Cell>
<Badge size="sm" color={dirColor} type="pill-color">{dirLabel}</Badge>
</Table.Cell>
)}
{visibleColumns.has('sla') && (
<Table.Cell>
{(() => {
const sla = getCallSla(call);
if (!sla) return <span className="text-xs text-quaternary">—</span>;
return (
<span className="inline-flex items-center gap-1.5 text-xs font-medium">
<span className={cx(
'size-2 rounded-full',
sla.status === 'low' && 'bg-success-solid',
sla.status === 'medium' && 'bg-warning-solid',
sla.status === 'high' && 'bg-error-solid',
sla.status === 'critical' && 'bg-error-solid animate-pulse',
)} />
<span className="text-secondary">{sla.percent}%</span>
</span>
);
})()}
</Table.Cell>
)}
{visibleColumns.has('dateTime') && (
<Table.Cell>
{call.startedAt ? (
<div>
<span className="text-sm text-primary">{formatDateOrdinal(call.startedAt)}</span>
<span className="block text-xs text-tertiary">{formatTimeOnly(call.startedAt)}</span>
</div>
) : <span className="text-xs text-quaternary">—</span>}
</Table.Cell>
)}
{visibleColumns.has('duration') && (
<Table.Cell>
<span className="text-sm text-primary">{formatDuration(call.durationSec)}</span>
</Table.Cell>
)}
{visibleColumns.has('disposition') && (
<Table.Cell>
{call.disposition ? (
<Badge size="sm" color="gray" type="pill-color">
{call.disposition.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}
</Badge>
) : <span className="text-xs text-quaternary">—</span>}
</Table.Cell>
)}
{visibleColumns.has('recording') && (
<Table.Cell>
{call.recording?.primaryLinkUrl && (
<RecordingPlayer url={call.recording.primaryLinkUrl} />
)}
</Table.Cell>
)}
</Table.Row>
);
}}
</Table.Body> </Table.Body>
</Table> </Table>
</div> </div>
@@ -325,6 +335,7 @@ export const CallRecordingsPage = () => {
/> />
); );
})()} })()}
</div> </div>
</>
); );
}; };

Some files were not shown because too many files have changed in this diff Show More