malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ca-grow-ops-manager/docs/AURA_UI_PLAN.md
fullsizemalt 4a2533f121
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Details
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details
feat(ui): Integrate AuraUI Hero component 
- Installed framer-motion dependency
- Added Hero1 component with 'Digital Command Center' branding
- Replaced MetrcDashboardPage header with new Hero component
2025-12-19 17:03:53 -08:00

2.6 KiB
Raw Blame History

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 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)

  • clsx (Installed)
  • tailwind-merge (Installed)
  • class-variance-authority (Installed)
  • 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.