// Seller.jsx — Allen Adm (Ecommerce seller) panel. // Lays the basis of the "Web primero" Allen ops surface mentioned in PRODUCT.md. // Sidebar nav + 4 sections: Dashboard, Pedidos (kanban), Productos, Mi tienda. const { useState: useSellerState } = React; const SELLER_NAV = [ { id: "dashboard", label: "Dashboard", icon: "tune" }, { id: "pedidos", label: "Pedidos", icon: "shopping_basket", badge: 4 }, { id: "productos", label: "Productos", icon: "shopping_cart" }, { id: "tienda", label: "Mi tienda", icon: "storefront" }, ]; const SellerPanel = ({ onNav }) => { const [tab, setTab] = useSellerState("dashboard"); return (
{/* SIDEBAR */} {/* CONTENT */}
{tab === "dashboard" && } {tab === "pedidos" && } {tab === "productos" && } {tab === "tienda" && }
); }; // ----- DASHBOARD ----- const DashboardTab = () => (

Hola, Ferretería El Tornillo

Esto pasó en tu tienda en los últimos 7 días.

{/* KPI cards */}
{/* Chart placeholder + activity feed */}

Ingresos por día

Esta semana Anterior

Actividad reciente

{[ { icon: "shopping_basket", color: "var(--primary)", fg: "var(--primary-soft)", title: "Nuevo pedido #AL-712840", sub: "hace 3 min · $2,499" }, { icon: "favorite", color: "var(--favorite-selected, #B691FF)", fg: "var(--favorite-unselected, #FAF6FF)", title: "Tornillería Pro favoriteada", sub: "hace 12 min" }, { icon: "check_circle", color: "var(--success)", fg: "var(--success-bg)", title: "Pedido #AL-712820 entregado", sub: "hace 1 h" }, { icon: "local_shipping", color: "#8A6500", fg: "var(--warning-bg)", title: "Pedido #AL-712810 salió", sub: "hace 2 h" }, { icon: "credit_card", color: "var(--primary)", fg: "var(--primary-soft)", title: "Pago procesado #AL-712802", sub: "hace 4 h · $1,560" }, ].map((it, i) => (
{it.title}
{it.sub}
))}
{/* Top products */}

Productos más vendidos

Ver todos →
{CATALOG.slice(0, 5).map((p, i) => ( ))}
ProductoUnidadesIngresosStock
{p.name}
{p.brand}
 {(48 - i * 7).toLocaleString("es-MX")} ${((48 - i * 7) * p.price).toLocaleString("es-MX")} {p.inStock || 12} disp.
); const KpiCard = ({ label, value, delta, deltaUp, icon }) => (
{label}
{value}
↑ {delta} vs. periodo anterior
); // Tiny SVG bar chart — not a real data viz, just an aesthetic placeholder. const RevenueChart = () => { const bars = [ { day: "Lun", this: 60, prev: 40 }, { day: "Mar", this: 80, prev: 70 }, { day: "Mié", this: 50, prev: 55 }, { day: "Jue", this: 95, prev: 60 }, { day: "Vie", this: 110, prev: 80 }, { day: "Sáb", this: 130, prev: 95 }, { day: "Dom", this: 75, prev: 50 }, ]; const max = 140; return (
{bars.map(b => (
{b.day}
))}
); }; const Th = ({ children, align = "left" }) => ( {children} ); const Td = ({ children, align = "left", style }) => ( {children} ); // ----- ORDERS KANBAN ----- const KAN_COLS = [ { id: "REQUESTED", label: "Nuevos", color: "var(--warning)" }, { id: "ACCEPTED", label: "Aceptados", color: "var(--primary)" }, { id: "READY", label: "Listos", color: "var(--success-strong)" }, { id: "IN_PROGRESS", label: "En camino", color: "#8A6500" }, { id: "COMPLETED", label: "Entregados", color: "var(--success)" }, ]; const KAN_ORDERS = [ { id: "AL-712840", status: "REQUESTED", client: "Bau Andalón", items: 1, total: 2499, t: "hace 3 min", pid: "p001" }, { id: "AL-712841", status: "REQUESTED", client: "Lucía Pérez", items: 2, total: 1758, t: "hace 8 min", pid: "p003" }, { id: "AL-712830", status: "ACCEPTED", client: "Carlos R.", items: 1, total: 1899, t: "hace 22 min", pid: "p005" }, { id: "AL-712820", status: "READY", client: "María G.", items: 3, total: 2247, t: "hace 1 h", pid: "p006" }, { id: "AL-712810", status: "IN_PROGRESS", client: "Diego T.", items: 1, total: 5499, t: "hace 2 h", pid: "p007" }, { id: "AL-712802", status: "COMPLETED", client: "Sofía L.", items: 2, total: 1560, t: "hace 4 h", pid: "p010" }, { id: "AL-712790", status: "COMPLETED", client: "Andrés M.", items: 1, total: 4299, t: "hace 6 h", pid: "p012" }, ]; const OrdersKanbanTab = () => { const toast = useToast(); return (

Pedidos

Notificaciones de pedido {}} />

Acepta nuevos pedidos. Cuando estés online, los pedidos te avisan con sonido aunque tu cel esté en silencio.

{KAN_COLS.map(col => { const items = KAN_ORDERS.filter(o => o.status === col.id); return (
{col.label}
{items.length}
{items.map(o => { const p = CATALOG.find(x => x.id === o.pid); return (
#{o.id.split("-")[1]} {o.t}
{o.client}
{p &&
} {o.items} producto{o.items === 1 ? "" : "s"}
${o.total.toLocaleString("es-MX")} {col.id === "REQUESTED" && ( )} {col.id === "ACCEPTED" && ( )}
); })} {items.length === 0 && (
Sin pedidos
)}
); })}
); }; const Switch = ({ on, onChange }) => ( ); // ----- PRODUCTS ADM ----- const ProductsAdmTab = () => { const [q, setQ] = useSellerState(""); const [showNew, setShowNew] = useSellerState(false); const list = CATALOG.filter(p => p.name.toLowerCase().includes(q.toLowerCase())); return (

Productos

{CATALOG.length} productos en tu catálogo

setShowNew(true)}> Nuevo producto
setQ(e.target.value)} placeholder="Buscar por nombre o SKU" style={{ flex: 1, border: 0, outline: 0, background: "transparent", font: "400 14px var(--font-sans)", color: "var(--fg-strong)" }} />
{list.map((p, i) => ( ))}
ProductoSKUPrecioStockEstado
{p.name}
{CATEGORIES.find(c => c.id === p.cat)?.label}
 {p.id.toUpperCase()} ${p.price.toLocaleString("es-MX")} {p.inStock || 12} {(p.inStock || 12) === 0 ? "Agotado" : (p.inStock || 12) < 5 ? "Stock bajo" : "Activo"}
{showNew && setShowNew(false)} />}
); }; // ----- NEW PRODUCT MODAL ----- const NewProductModal = ({ onClose }) => { const [form, setForm] = useSellerState({ name: "", brand: "", cat: "herramientas", desc: "", price: "", was: "", stock: "", sku: "", images: 0, status: "draft", }); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const toast = useToast(); const commission = form.price ? Math.round(form.price * 0.085) : 0; const payout = form.price ? form.price - commission - Math.round(form.price * 0.029) - 4 : 0; return (
e.stopPropagation()} style={{ background: "var(--bg-elev-1)", borderRadius: "var(--radius-xl)", maxWidth: 880, width: "100%", maxHeight: "calc(100vh - 64px)", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "var(--elev-pop)", animation: "modalSlide .25s var(--ease-out-quart)", }}> {/* Header */}

Nuevo producto

Llena los datos, sube fotos y publícalo cuando quieras.

{/* Body */}
{/* Left — form */}
set("name", e.target.value)} />
set("brand", e.target.value)} />