import * as React from "react"; import { Boxes, Building2, ClipboardCheck, PackageSearch, ShieldAlert, Truck, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall } = Typography; import { SidebarAppShellCommerceOperationsDualRailsSix } from "@/registry/sidebar-app-shell-commerce-operations-dual-rails-six/sidebar-app-shell-commerce-operations-dual-rails-six"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SidebarAppShellCommerceOperationsDualRailsSix >; type SidebarAppShellCommerceOperationsDualRailsSixModule = NonNullable< ComponentProps["modules"] >[number]; type SidebarAppShellCommerceOperationsDualRailsSixFilterSection = NonNullable< ComponentProps["filters"] >[number]; type SidebarAppShellCommerceOperationsDualRailsSixCommandItem = NonNullable< ComponentProps["commandItems"] >[number]; const modules: SidebarAppShellCommerceOperationsDualRailsSixModule[] = [ { id: "orders", label: "Orders", icon: , badge: "12", isActive: true, }, { id: "inventory", label: "Inventory", icon: , badge: "3", }, { id: "warehouses", label: "Warehouses", icon: , }, { id: "transport", label: "Transport", icon: , }, ]; const filters: SidebarAppShellCommerceOperationsDualRailsSixFilterSection[] = [ { id: "order-status", label: "Order status", items: [ { id: "pending", label: "Pending", count: 126, active: true }, { id: "ready", label: "Ready to ship", count: 58 }, { id: "exception", label: "Exceptions", count: 14 }, ], }, { id: "fulfillment", label: "Fulfillment lane", items: [ { id: "express", label: "Express", count: 39, active: true }, { id: "standard", label: "Standard", count: 94 }, { id: "intl", label: "International", count: 27 }, ], }, { id: "safety", label: "Safety holds", items: [ { id: "temperature", label: "Temperature", count: 8 }, { id: "compliance", label: "Compliance", count: 6 }, ], }, ]; const commandItems: SidebarAppShellCommerceOperationsDualRailsSixCommandItem[] = [ { id: "cmd-priority", title: "View priority orders", description: "Sort by promised delivery", icon: , group: "Shortcuts", }, { id: "cmd-audit", title: "Run compliance audit", description: "Generate customs paperwork", icon: , group: "Automations", }, ]; export function SidebarAppShellCommerceOperationsDualRailsSixDemo() { const [activeFilters, setActiveFilters] = React.useState(filters); return ( { setActiveFilters((prev) => prev.map((s) => s.id === section.id ? { ...s, items: s.items.map( ( i: SidebarAppShellCommerceOperationsDualRailsSixFilterSection["items"][number], ) => (i.id === item.id ? { ...i, active: !i.active } : i), ), } : s, ), ); }} header={{ title: "Fulfillment control", description: "Monitor order health, carrier SLAs, and exception queues for the next 24 hours.", stats: [ { id: "orders", label: "Orders to fulfill", value: "418", helper: "+32 vs yesterday", }, { id: "exceptions", label: "Exception queue", value: "14", helper: "6 temperature holds", }, { id: "sla", label: "Carrier SLA", value: "92%", helper: "Goal ≥ 95%", }, { id: "returns", label: "Returns processed", value: "67", helper: "Rolling 7 days", }, ], actions: [{ id: "assign", label: "Assign to team" }], }} >

Exception workflow Automate handoffs when orders require manual review.

{[ "Temperature breach", "Compliance hold", "Carrier delay", "Payment review", ].map((lane) => (

{lane} Auto-assign to specialists with Slack follow-up tasks.

))} ); } export default SidebarAppShellCommerceOperationsDualRailsSixDemo;

Simple