"use client"; import { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, BarChart, Bar, Cell, LineChart, Line } from "recharts"; import { ShoppingBag, CreditCard, Users, Package, TrendingUp, Globe, Zap, Activity, ArrowUpRight, ArrowDownRight, Search, Settings, Menu, Box, DollarSign, LayoutGrid } from "lucide-react"; import { HudCard, NavIcon, REVENUE_DATA, LIVE_ORDERS, TOP_PRODUCTS, FUNNEL_DATA } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/COMMERCE_HUD"; import { cn } from "@/src/lib/utils"; // --- MAIN LAYOUT --- export default function CommerceHud() { const [activeTab, setActiveTab] = useState("Analytics"); const [time, setTime] = useState(""); useEffect(() => { const t = setInterval(() => { setTime(new Date().toLocaleTimeString('en-US', { hour12: false })); }, 1000); return () => clearInterval(t); }, []); return (

{/* BACKGROUND EFFECTS */}

{/* Grid Line Overlay */}

{/* Glows */}

{/* TOP FLOATING STATUS BAR */}

STORE_ONLINE

NIKE_US_STORE_01 v2.4

{time}

{/* MAIN CONTENT GRID (DISORDERED BENTO) */}

{/* 1. TOTAL REVENUE (Big Number) */}

$42,593 .00

14.2% vs yesterday

{/* 2. MAIN CHART (Centerpiece) */}

Today

Yesterday

{/* 3. LIVE ORDER FEED (Sidebar Replacement) */}

{LIVE_ORDERS.map((order) => (

{order.product} {order.amount}

{order.loc} {order.time}

))} {/* Fading bottom simulation */}

{/* 4. CONVERSION FUNNEL */}

{FUNNEL_DATA.map((step, i) => (

{step.stage} {step.value.toLocaleString()}

))}

{/* 5. METRICS GRID */}

$85.20

{/* 6. INVENTORY / PRODUCTS */}

{TOP_PRODUCTS.map((prod) => (

{prod.name}

Stock: {prod.stock}

{prod.sales} {prod.trend}

))}

{/* BOTTOM COMMAND DOCK (NAVIGATION) */}

setActiveTab('Dashboard')} /> setActiveTab('Orders')} /> setActiveTab('Customers')} /> setActiveTab('Products')} />

setActiveTab('Settings')} />

); }

Property	Type	Default	Description
primaryColor	string	#00ff88	Primary HUD color for data displays and highlights.
backgroundColor	string	#0a0a0a	Background color for the HUD interface.
enableGrid	boolean	true	Enable background grid pattern.
animationSpeed	number	1	Speed of HUD animations and transitions.

Commerce HUD

Props