This is a comprehensive spec for Bambusa Connect's Returns Module - an internal operations tool for customer service and warehouse employees. Let me break this down into structured tasks and build it systematically.
Let me start building the Returns Module. I'll first update the globals.css with the proper design tokens per the spec, then create the global layout, and build out all the pages and components.
Now let me update the layout and create the module layout with navigation:
Now let me create the shared components and module layout:
Now let me create the Search Orders page with its components:
Now let me create the main page and move on to the Ongoing Returns list:
Now let me build the Return Detail page with all its cards (timeline, form status, original order, customer items, warehouse received, tracking):
Now let me create the Return Detail page component and the page itself:
Now let me create the final modals - Deviation Modal, Resolve Deviation Modal, and Cancel Return Modal:
I've built the complete Bambusa Connect Returns Module as specified. Here's a summary of what was created:
Pages & Navigation:
/) - Entry point with debounced search across all systems (Woo, Centra, App), filterable by source, with results table showing order details, return badges, and action buttons/ongoing) - List view with filters for status, source, marketplace, and "needs attention" toggle/returns/[id]) - Full return workspace with all cards and actionsComponents Built:
The design follows all spec requirements: light mode only, card-based layout with proper hierarchy, status colors (blue=info, yellow=warning, green=success, red=error, gray=neutral), and max 1200px width.
Added loading.tsx files to all route directories that use useSearchParams(). In Next.js, when a component uses useSearchParams(), it needs to be wrapped in a Suspense boundary - the loading.tsx file in each route directory automatically provides this boundary during the streaming/loading phase.