+ {/* ── Background Glow ── */}
+
+
+ {/* ── 1. Floating Product Assets (Around Dashboard) ── */}
+ {PRODUCT_ASSETS.map((product, idx) => {
+ // Hide specific products on tablet/mobile screens
+ let responsiveClass = "absolute z-20 ";
+ if (idx === 2 || idx === 3) {
+ responsiveClass += "hidden lg:block"; // Only desktop
+ } else if (idx === 0 || idx === 1 || idx === 4 || idx === 5) {
+ responsiveClass += "hidden md:block"; // Desktop & Tablet
+ }
+
+ const isCurrentlyAnimating = stage !== "idle" && animatingIndex === idx;
+
+ return (
+
+
+ {product.emoji}
+
+
+ );
+ })}
+
+ {/* ── 2. Flying Product Scan Asset ── */}
+
+ {stage === "flying" && animatingIndex < 4 && (
+
+ {PRODUCT_ASSETS[animatingIndex].emoji}
+
+ )}
+
+
+ {/* ── 3. AI Processing Particle Trails ── */}
+ {stage === "flying" && animatingIndex < 4 && (
+ <>
+ {[0, 1, 2].map((particleIdx) => (
+
+ ))}
+
+ )}
+
+ {/* ── 4. Slide-in Micro-Notifications ── */}
+
+ {stage === "notifying" && (
+
+ ✓
+
+ {animatingIndex === 0 && "Apple Catalog Listing Synced"}
+ {animatingIndex === 1 && "Milk Delivery Stock Updated"}
+ {animatingIndex === 2 && "Bread Pricing Configuration Live"}
+ {animatingIndex === 3 && "Spinach Category Catalog Indexed"}
+
+
+ )}
+
+
+ {/* ── 5. Main Dashboard Canvas ── */}
+
+ {/* Ambient Success Pulse Border */}
+
+
+
+ {/* Ground shadow */}
+
+
+ {/* Main dashboard window */}
+
+
+ {/* Top window bar chrome */}
+
+
+
+
+
+
+
+ {/* Sidebar navigation */}
+
+
+
+
+
+
+
+
+ {/* QR Ordering live badge */}
+
+
+
+ QR ACTIVE
+
+
+
+ {/* Loyalty active badge */}
+
+
+ LOYALTY
+
+
+
+ {/* ── KPI Chips ── */}
+ {/* KPI 1: Inventory Items */}
+
+
+ ITEMS
+
+ {/* Animate number change */}
+
+ {itemsCount}
+
+
+ {/* Micro pulse indicator */}
+
+
+
+ {/* KPI 2: Sales Counter */}
+
+
+ SALES
+
+ ₹18,240
+
+
+
+ {/* KPI 3: Orders Counter */}
+
+
+ ORDERS
+
+ {/* Animate orders increase */}
+
+ {ordersCount}
+
+
+
+
+
+ {/* ── Chart Panel (Middle Area) ── */}
+
+
+
+
+ {/* Gridlines */}
+
+
+
+ {/* Dynamic line graph */}
+
+
+ {/* Pulse node */}
+
+
+
+ {/* ── Mini Bar Chart ── */}
+
+
+
+ {[
+ { x: 314, h: 34, c: "#DDD0F4" },
+ { x: 332, h: 52, c: "#B99BEC" },
+ { x: 350, h: 44, c: "#9B78E4" },
+ { x: 368, h: 66, c: "#6330D6" },
+ ].map((b, bIdx) => {
+ // If index 2 product (price/pricing) updates, scale the heights briefly
+ const isTargetBar = bIdx === 2 || bIdx === 3;
+ const multiplier = stage === "updating" && animatingIndex === 2 && isTargetBar ? 1.25 : 1;
+ const barHeight = b.h * multiplier;
+
+ return (
+
+ );
+ })}
+
+
+ {/* ── Floating order card top right (floating) ── */}
+
+
+
+
+
+
+
+
+ {/* ── Floating live stock status bottom left (floating) ── */}
+
+
+
+
+
+
+
+ {/* ── Purple AI Laser Scanning Beam ── */}
+ {stage === "scanning" && (
+
+ )}
+
+
+