UI / Surface

What it does

The CLIC frontend is where users log in, configure plans/clients, and manage drug intent forms. It's split across a primary Next.js application (RxDrugIntent-Surface) and two supporting monorepos (Rx-DrugIntent-MP, PBRSharedComponent) that publish reusable packages and web components consumed by the surface.

How it works

RxDrugIntent-Surface is a Next.js monorepo (Yarn workspaces) organized around routed pages:

• Landing / Login — authentication and entry (LoginPage, Authentication, loginStatus)
• Client & Plan management — AddPlanContainer, ClientDetails, CopyPlan, HistoricalClientContainer, TierContainer
• Forms — FormDetails, Forms, ProjectForms
• Audit & content — AuditMenu, ContentReader
• Version comparison — VersionCompare

Rx-DrugIntent-MP and PBRSharedComponent are built from the same "micro-product template" (Lerna + Yarn Workspaces): each publishes independently-versioned packages/web components to Artifactory/CDN, which RxDrugIntent-Surface and other surfaces consume as dependencies.

The low-level design document describes the client stack in slightly different terms than the README (React + hooks/context, React Hook Form, Redux Toolkit) — likely reflecting the target/updated architecture versus the as-collected README's older Redux-Saga reference. Treat both as valid until reconciled against current code.

Non-functional targets

Requirement	Target
Page load	Time-to-Interactive < 4s (mid-tier device)
Browser support	Chrome/Edge/Firefox (latest 2), Safari (latest 2)
Accessibility	WCAG 2.1 AA

Observability

Frontend Real User Monitoring (RUM) tracks Core Web Vitals and errors: LCP, FID, CLS, and JS error rate.

Testing

• Automation via Playwright using the Page Object Model
• MFA handled via cookie-based session management in automated tests
• GitHub Actions CI/CD integration is in progress (not yet fully wired per the LLD test plan)

Known gaps / open questions

• No SharePoint UI/UX or feature spec docs collected yet — page-by-page functional behavior is inferred from route folder names only, not confirmed against design docs.
• Relationship/versioning contract between Rx-DrugIntent-MP, PBRSharedComponent, and RxDrugIntent-Surface (which packages does Surface actually consume?) is not explicit in current sources.
• The Redux-Saga (README) vs. Redux Toolkit (LLD) discrepancy noted above has not been reconciled against actual package.json dependencies.

Technical reference

Detail	Value
Repo	RxDrugIntent-Surface
Stack	Next.js, Redux, Redux-Saga, Yarn workspaces
Environments	test → tstrxcapi-us-c-cloud.optum.com, dev → devrxcapi-us-c-cloud.optum.com
Shared libs	Rx-DrugIntent-MP, PBRSharedComponent (Lerna/Yarn micro-product template)
Dev tooling	ESLint (eslint-plugin-optum), Prettier, TypeScript (@skyline/typescript), Storybook
Test automation	Playwright (Page Object Model)