Summary
On the Inspection Details screen in the Attik mobile app, add a "View in Attik" dropdown button next to the existing Start Inspection button. The dropdown provides two discrete sections: (1) open the client portal as one of the job contacts, and (2) open the work order in Attik (tools web app).
Location
- App: Attik mobile (inspector-app)
- Screen: Inspection details —
app/(app)/inspection/[id].tsx - UI: Footer area, next to the "Start Inspection" button (same
BlurViewfooter, ~lines 520–530)
UX
Button
- Primary action: "View in Attik" with a chevron (dropdown).
- Placed beside the existing "Start Inspection" button in the footer.
Dropdown – two sections
1. Client portal (discrete section)
- Section title: e.g. "Portal" (or "Client Portal").
- Behavior: Mirror the pattern from toolsv2
WorkorderActionsDropdown.tsx: - No contacts: Single option: "Open Client Portal" → open portal without token.
- With contacts: One option per contact: "Open Portal as {roleName}" (and if multiple people share the same role, append contact name: "Open Portal as Client (Jane Smith)").
- Deduplication: Use the same logic as WorkorderActionsDropdown: dedupe by
_roleId._id+_contactId._id, and use role name + optional contact name for labels (seeuniquePeople,roleCountin reference file). - Opening the portal:
- Client portal base URL: config (e.g.
NEXT_PUBLIC_CLIENT_URLequivalent / env for client app URL). - With contact: get a portal access token (see Backend below), then open:
{clientPortalBaseUrl}/job/{inspection.slug}?access_token={token} - Without contact: open
{clientPortalBaseUrl}/job/{inspection.slug}(no token).
2. Work order in Attik (discrete section)
- Section title: e.g. "Attik" or "Work order".
- Single option: "View work order in Attik" (or similar).
- Action: Open in device browser (or in-app browser):
{toolsBaseUrl}/tools/inspections/{inspection._id}
(Tools base URL from app config/env.)
Backend: access token (mobile vs tools)
- Tools (WorkorderActionsDropdown): Uses a server action that ultimately calls the same access-token logic (server-side).
- Mobile: Runs in the client; must call the backend API directly.
Use the access route in attik-backend:
- File:
attik-backend/src/routes/access.ts - Endpoint:
POST /access(or whatever base path the backend exposes for this router, e.g.POST /api/access). - Request body:
{ companyId, contactId?, expiresIn?, type? } companyId(required): from AuthContext (companyId) or inspection (inspection._companyId).contactId: required when opening portal as a specific contact; omit for view-only/no-contact.expiresIn: optional (default e.g.'2d').type: optional; use'portal-access'(default) for client portal.- Response:
{ token: string }. - Mobile app must send this request with the same auth/session the app uses for other backend calls (e.g. bearer token or cookies, depending on how the backend is secured).
If the access route is behind auth middleware, ensure the mobile app’s requests include the inspector’s auth so the backend can validate and issue the token.
Reference implementation (portal behavior)
- File:
toolsv2/src/app/tools/inspections/[id]/components/WorkorderActionsDropdown.tsx - Reuse conceptually:
uniquePeoplededuplication (by role + contact).roleCountfor deciding when to show contact name.- Portal section: one item per contact with "Open Portal as {roleName}" and optional " ({contactName})".
- Logic in
handleOpenClientPortal(personIndex?): if no people or no index, open without token; else POST for token withcompanyId+contactId, then open URL with?access_token=....
Do not call a tools server action from mobile; implement the same behavior in the app by calling attik-backend POST /access and then opening the client portal URL.
Data available on inspection details
- Hook:
useInspectionDetails(id)→inspection(typeInspectionPopulatedWithServices). - Populate:
peopleis already requested (useInspectionDetailspopulatespeople). - Fields used:
inspection.slug— client portal path:/job/{slug}.inspection._id— work order URL:/tools/inspections/{_id}.inspection.people— each has_roleId(name, icon),_contactId(_id, firstName, lastName).inspection._companyIdor AuthContextcompanyIdfor the access request.
Acceptance criteria
- [ ] "View in Attik" dropdown appears in the inspection details footer next to "Start Inspection".
- [ ] Dropdown has two sections: Portal (client portal) and Attik (work order).
- [ ] Portal section: same options and labels as WorkorderActionsDropdown (per-contact "Open Portal as {role}" with optional contact name when needed).
- [ ] Selecting a portal option calls backend
POST /accesswithcompanyIdand (when applicable)contactId, then opens client portal URL with token; no contact → open without token. - [ ] "View work order in Attik" opens the tools URL for this inspection in browser.
- [ ] Config/env for client portal base URL and tools base URL (or single “Attik web” base) is used; no hardcoded production URLs.