Frontend Components & UI
Relevant source files
The following files were used as context for generating this wiki page:
The DRX CRM frontend is a modern, mobile-first interface designed for retail dispensaries and small businesses. Built using Next.js 16 (App Router) and React 19, it prioritizes speed, privacy, and accessibility. The UI leverages Tailwind CSS for utility-first styling and Shadcn/ui for high-quality, accessible component primitives. The system is designed as a Progressive Web App (PWA) to provide a native-like experience across devices, supporting offline operations and one-handed mobile use.
Sources: README.md:5-13, README.md:27-36, testsprite_tests/standard_prd.json:8-14
UI Architecture & Tech Stack
The frontend architecture follows a modular pattern using Next.js route groups to separate the marketing landing pages from the authenticated application shell. Components are categorized into global layouts (sidebars, navigation), feature-specific modules (onboarding guides, help centers), and reusable UI primitives.
Core Technologies
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router), React 19 |
| Styling | Tailwind CSS, Lucide Icons, Framer Motion |
| Component Library | Shadcn/ui (Radix UI primitives) |
| State & Data | React Hooks, Supabase Client, Server Actions |
| Feedback/Monitoring | Sonner (Toasts), Sentry (Bug Reporting) |
Sources: README.md:27-40, package.json:34-110, CHANGELOG.md:104-106
Navigation and Layout Flow
The application uses a persistent sidebar for desktop environments and a bottom navigation bar for mobile devices. Navigation visibility is controlled by a server-side validated Role-Based Access Control (RBAC) system.
The diagram shows the high-level layout structure and how authentication state determines the view.
Sources: app/(app)/admin/layout.tsx:39-65, components/layout/sidebar.tsx:18-42, README.md:121-131
Key UI Modules
1. Global Navigation (Sidebar)
The sidebar component serves as the primary navigation hub for the desktop experience. It dynamically filters navigation items based on the user's specific permissions (e.g., settings.manage, reports.view_all).
- Logic: Uses
usePermissionhook to verify access before rendering links. - Key Items: Dashboard, Sales, Inventory, Customers, Reports, and Settings.
- Admin Console: A restricted link visible only to users with
system.manageorusers.manage_allpermissions.
Sources: components/layout/sidebar.tsx:14-55, components/layout/sidebar.tsx:75-84
2. Onboarding Setup Guide
The SetupGuide is a task-oriented component that assists new users in completing their initial business configuration. It tracks progress through a checklist and provides visual feedback via a progress bar.
| Step | Requirement | Target Route |
|---|---|---|
| Business Profile | Set up basic identity and tax settings | /settings/profile |
| Add Product | Create first inventory item | /inventory |
| Add Customer | Create first customer profile | /customers |
| Make Sale | Process first transaction | /sales |
Sources: components/onboarding/setup-guide.tsx:28-65
3. Help Center & Support
The Help system provides a dual-layered support approach:
- Static Guides: Local documentation covering core workflows like POS processing, inventory intake, and credit tracking.
- Contextual Feedback: Integrated Sentry feedback widgets allowing users to "Report a Bug" directly from the navigation or help pages.
Sources: app/(app)/help/page.tsx:25-212, scripts/help-center-data.ts:13-50
Admin UI & Management
The Admin Console is a distinct sub-system within the app, accessible only to Super Admins. It uses a tabbed layout to manage high-level enterprise entities.
The sequence shows the authorization check and data retrieval process for the Admin Console.
Sources: app/(app)/admin/layout.tsx:43-65, app/(app)/admin/page.tsx:29-55
Admin Navigation Tabs
- Overview: General system statistics.
- Approvals: Workflow for pending inventory intakes.
- Businesses: Management of multi-tenant business profiles.
- Audit Logs: Append-only logs for sensitive actions (Voids, Overrides, RTBF).
- AI Management: Configuration for automated credit and pricing engines.
Sources: app/(app)/admin/layout.tsx:19-27, app/(app)/admin/page.tsx:78-150
Branding & Styling
The system follows a "Neon Velocity" branding theme, utilizing neon-lime assets (drx-mark) and transparent icons.
- Color Palette: High-contrast background with accent colors for active states.
- Responsive Design: Grid systems stack vertically on mobile (375px wide) to ensure accessibility for one-handed operation.
- Visual Indicators: Components use
framer-motionfor bounce animations in mobile navigation.
Sources: CHANGELOG.md:65-68, CHANGELOG.md:104-106, tests/event-desk-integration.spec.ts:257-268
Summary
The Frontend Components & UI of DRX CRM provide a permission-aware, mobile-optimized experience for business operations. By combining modular layout components with strict RBAC guards and a robust help system, the interface ensures that users can process transactions quickly while maintaining high data integrity and security.
Sources: README.md:5-13, testsprite_tests/standard_prd.json:8-14