Directing the user back to Attik.

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 BlurView footer, ~lines 520–530)

UX

Button

  • Primary action: "View in Attik" with a chevron (dropdown).
  • Placed beside the existing "Start Inspection" button in the footer.

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 (see uniquePeople, roleCount in reference file).
  • Opening the portal:
  • Client portal base URL: config (e.g. NEXT_PUBLIC_CLIENT_URL equivalent / 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:
  • uniquePeople deduplication (by role + contact).
  • roleCount for 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 with companyId + 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 (type InspectionPopulatedWithServices).
  • Populate: people is already requested (useInspectionDetails populates people).
  • 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._companyId or AuthContext companyId for 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 /access with companyId and (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.

Please authenticate to join the conversation.

Upvoters
Status

Completed

Board
🏠

Main App

Date

4 months ago

Author

Linear

Subscribe to post

Get notified by email when there are changes.