UI Reference: Screens and Components
This document serves as the comprehensive technical directory for the TkushPatch web console (ota-web-console), engineered on Next.js 15, React 19, Tailwind CSS, and Lucide Icons.
1. App Router Route Inventory
| Route | Source File | Permitted RBAC Roles | Primary Purpose |
|---|---|---|---|
/ | src/app/page.tsx | All roles | Main operational cockpit: fleet metrics, pending approval alerts, subsystem health. |
/login | src/app/login/page.tsx | Public | Credential entry form triggering 2FA OTP verification challenge. |
/register | src/app/register/page.tsx | Public | Tenant registration or collaborator invitation onboarding with secure token. |
/forgot-password | src/app/forgot-password/page.tsx | Public | Password recovery flow with time-bound signed token dispatch. |
/releases | src/app/releases/page.tsx | ADMIN, DEV, SECURITY, SRE | Master-detail workspace for Store releases, architectures (aarch64/arm), and patches. |
/rollout | src/app/rollout/page.tsx | ADMIN, SRE | Canary percentage controls (0-100%), geo-targeting by ISO country, emergency Kill-Switch. |
/catalog | src/app/catalog/page.tsx | All roles | Registered application catalog, app_id identifiers, and public Cryptographic Signing Keys. |
/assets | src/app/assets/page.tsx | ADMIN, DEV | Dynamic OTA asset management (i18n translation bundles, hot-delivered media). |
/approvals | src/app/approvals/page.tsx | ADMIN, SECURITY, AUDITOR (read-only) | Maker-Checker governance center and cryptographic signing engine asymmetric RSA signing gateway. |
/symbols | src/app/symbols/page.tsx | ADMIN, DEV, SRE | Dart .symbols archive repository and live deobfuscation stack trace analyzer. |
/policies | src/app/policies/page.tsx | ADMIN, SECURITY, AUDITOR (read-only) | Governance rules, OTP token lifetimes, organization SMTP setup, and mobile shields. |
/cli/login | src/app/cli/login/page.tsx | ADMIN, DEV | OAuth/PKCE consent gateway for tk-ota-push command-line developer sessions. |
/telemetry | src/app/telemetry/page.tsx | ADMIN, SECURITY, SRE, AUDITOR | Real-time telemetry war room, crash rates, network latencies, circuit-breaker alerts. |
/support | src/app/support/page.tsx | ADMIN, DEV, SRE | L3 device diagnostics, client_id inspection, QA device whitelist, targeted rollbacks. |
/audit | src/app/audit/page.tsx | ADMIN, SECURITY, AUDITOR | Tamper-evident audit logs with SHA-256 integrity signatures and CSV/PDF export. |
/health | src/app/health/page.tsx | ADMIN, SRE | Day-2 infrastructure monitoring: signing engine seal status, disk space, and binary diff purges. |
/teams | src/app/teams/page.tsx | ADMIN (write), All (read) | Organization member roster, 5-role RBAC assignments, and MFA credential resets. |
/account | src/app/account/page.tsx | All roles | Operator profile view, light/dark theme switcher, and personal security summary. |
/organization/settings | src/app/organization/settings/page.tsx | ADMIN | Organization profile, application quotas, and enterprise license details. |
/apps/[appId]/tracks | src/app/apps/[appId]/tracks/page.tsx | ADMIN, DEV, SECURITY, SRE | Deployment tracks (dev, staging, stable) and 1-click zero-recompile promotion. |
2. Structural and Layout Components
The frontend layout relies on modular framing components to ensure consistency across responsive viewports:
| Component | Path | Architectural Function |
|---|---|---|
AppLayoutShell | src/components/layout/AppLayoutShell.tsx | Global layout shell: collapsible responsive sidebar, sticky header, and content canvas. |
Header | src/components/layout/Header.tsx | Top navigation bar: ProjectSwitcher, dark/light theme switch, language selector, and profile dropdown. |
ProjectSwitcher | src/components/layout/ProjectSwitcher.tsx | Synchronizes active application context (selectedAppId) across all sub-pages. |
RoleGuard | src/lib/auth/RoleGuard.tsx | Declarative RBAC authorization wrapper gating routes and buttons against the user's role. |
IdleTimer | src/lib/auth/IdleTimer.tsx | Client-side inactivity listener detecting mouse/keyboard idle state to enforce automatic lockouts. |
3. Specialized Deployment and Release Components
These interactive components power the complex release and patch workflows:
| Component | Path | Functionality |
|---|---|---|
ReleaseListMasterPane | src/components/deployments/ReleaseListMasterPane.tsx | Master view: sorted list of baseline Store releases with multi-platform badge indicators. |
ReleaseDetailInspectorPane | src/components/deployments/ReleaseDetailInspectorPane.tsx | Inspector view: patch children, lock state, adoption curves, and context actions. |
FullWidthPlatformBar | src/components/deployments/FullWidthPlatformBar.tsx | Full-width visual banner switching between Android, iOS, and unified target views. |
PlatformSegmentedControl | src/components/deployments/PlatformSegmentedControl.tsx | Compact segment control filtering CPU architectures (arm64-v8a, armeabi-v7a). |
PatchActionMenu | src/components/deployments/PatchActionMenu.tsx | Action menu exposing Rollback, Promote, Disable, and Download Binary operations. |
CountrySelectorModal | src/components/deployments/CountrySelectorModal.tsx | Multi-select dialog for configuring deployment ISO country codes (e.g., CM, CI, SN). |
UpdateStrategyModal | src/components/deployments/UpdateStrategyModal.tsx | Configuration modal for client update policies (Wi-Fi Only vs Forced Full Screen Lockout). |
CreateProjectModal | src/components/project/CreateProjectModal.tsx | Modal form declaring new applications with automated Store namespace detection. |
ReleaseHistoryDrawer | src/components/deployments/ReleaseHistoryDrawer.tsx | Slide-over drawer detailing the comprehensive historical timeline of a release version. |
4. Atomic UI Components
| Component | Path | Characteristics |
|---|---|---|
StatusBadge | src/components/ui/StatusBadge.tsx | Color-coded status badge with Lucide iconography for ACTIVE, STAGED, REVOKED, etc. |
CopyableHash | src/components/ui/CopyableHash.tsx | Truncated hexadecimal hash widget with 1-click clipboard copy and animated feedback. |
PaginationBar | src/components/ui/PaginationBar.tsx | Standardized server-side pagination bar supporting variable page sizing (10, 25, 50 items). |
Toast | src/components/ui/Toast.tsx | Ephemeral toast notifications (Success, Error, Warning, Info) with automated dismiss timers. |
Button | src/components/ui/Button.tsx | Accessible button primitive supporting primary, secondary, danger, and outline variants. |