# 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.