4a2533f121
- Installed framer-motion dependency - Added Hero1 component with 'Digital Command Center' branding - Replaced MetrcDashboardPage header with new Hero component
64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# AuraUI Integration Plan and Audit
|
|
|
|
## Snapshot Info
|
|
|
|
- **Commit Hash**: `da5af8c` (Before AuraUI)
|
|
- **Rollback Command**: `git reset --hard da5af8c && git push -f origin main`
|
|
|
|
## Component Audit
|
|
|
|
We have selected the following components from the [AuraUI Library](https://auraui.com) to enhance the `ca-grow-ops-manager`:
|
|
|
|
### 1. 3D Digital Twin Hero (`feature-4-3d`)
|
|
|
|
- **Visuals**: Dark mode, floating 3D elements (cubes/spheres) with lime/purple accents.
|
|
- **Use Case**: **Facility 3D Viewer Loading/Landing State**.
|
|
- **Reason**: Perfectly aligns with the "Digital Twin" core pillar. Replaces the generic "Loading..." spinner with a technical, high-end visual.
|
|
|
|
### 2. High-Trust Hero (`hero-1`)
|
|
|
|
- **Visuals**: Centered H1, clear subtext, primary/secondary action buttons.
|
|
- **Use Case**: **Main Dashboard Header**.
|
|
- **Reason**: Provides immediate access to critical actions ("Emergency Stop", "Metrc Sync") and sets the tone for the application.
|
|
|
|
### 3. Split-Screen Auth Form (`signup-1`)
|
|
|
|
- **Visuals**: Left side form, Right side high-quality operational image.
|
|
- **Use Case**: **Visitor Kiosk Check-In** and **SOP Acknowledgement**.
|
|
- **Reason**: The "Compliance" aspect needs to feel authoritative and polished. The split view allows us to show legal text/images alongside the signature input.
|
|
|
|
### 4. Minimal Navbar (`header-6`)
|
|
|
|
- **Visuals**: Dark background, subtle hover effects, active state indicators.
|
|
- **Use Case**: **Global App Shell Navigation**.
|
|
- **Reason**: The current sidebar is functional but bulky. Moving to a sleek top-nav (or refined side-nav) using these styles cleans up screen real estate for the 3D viewer.
|
|
|
|
### 5. Bento Grid (`feature-14`)
|
|
|
|
- **Visuals**: Grid of varied-size cards, bento-box style.
|
|
- **Use Case**: **Operations Dashboard**.
|
|
- **Reason**: We have too many disparate metrics (Temp, Humidity, Task Count, Compliance Status). A bento grid unifies them into a single "Command Center" view.
|
|
|
|
## Integration Strategy
|
|
|
|
### Prerequisites (Checked)
|
|
|
|
- [x] `clsx` (Installed)
|
|
- [x] `tailwind-merge` (Installed)
|
|
- [x] `class-variance-authority` (Installed)
|
|
- [x] `lucide-react` (Installed)
|
|
- [ ] `framer-motion` (Missing - **Install Required**)
|
|
|
|
### Implementation Order
|
|
|
|
1. **Install `framer-motion`**: Required for AuraUI animations.
|
|
2. **Setup Utils**: Ensure `lib/utils.ts` has the standard `cn()` helper (it likely does, but verify).
|
|
3. **Implement `Hero-1`**: Replace the Dashboard header first as a low-risk, high-impact test.
|
|
4. **Implement `Feature-4-3d`**: Add to the 3D Viewer page.
|
|
|
|
### Rollback Plan
|
|
|
|
If the new components break the build or styling:
|
|
|
|
1. Revert to the snapshot commit.
|
|
2. Clean `node_modules` if `framer-motion` causes issues.
|