GOLDMEX WMS: Order Lifecycle Screen (Client View)

{
  "code": "## GOLDMEX WMS: Order Lifecycle Screen (Client View)\n\n### File: `goldmex-wms/src/app/orders/page.tsx`\n\n```tsx\nimport { createClient } from '@/lib/supabase-server'\nimport OrderDashboard from '@/components/order-dashboard'\n\nexport const revalidate = 30\n\nexport default async function OrdersPage() {\n  const supabase = await createClient()\n  const { data: { user } } = await supabase.auth.getUser()\n  \n  const { data: orders } = await supabase\n    .from('wms_orders')\n    .select('*, wms_order_items(*)')\n    .eq('client_id', user?.id)\n    .order('created_at', { ascending: false })\n    .limit(200)\n\n  return <OrderDashboard orders={orders ?? []} />\n}\n```\n\n### File: `goldmex-wms/src/components/order-dashboard.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState, useMemo } from 'react'\n\n// ── Types ──────────────────────────────────────────────────────\n\ninterface OrderItem {\n  id: string\n  product_sku: string\n  product_name: string\n  quantity: number\n  unit: string\n}\n\ninterface Order {\n  id: string\n  order_number: string        // TJ/EXA/022526-01\n  client_id: string\n  warehouse_code: string      // TJ, GDL, MTY\n  client_code: string         // EXA, BET, etc.\n  status: 'awaiting_arrival' | 'pending' | 'in_process' | 'shipped' | 'completed'\n  is_urgent: boolean\n  arrival_date: string\n  arrival_window: 'morning' | 'midday' | 'afternoon'\n  ready_date: string\n  shipped_at: string | null\n  bol_url: string | null\n  evidence_url: string | null\n  notes: string | null\n  created_at: string\n  wms_order_items: OrderItem[]\n}\n\nconst STATUS_ORDER: Order['status'][] = [\n  'awaiting_arrival', 'pending', 'in_process', 'shipped', 'completed'\n]\n\nconst STATUS_LABELS: Record<Order['status'], string> = {\n  awaiting_arrival: 'Awaiting Arrival',\n  pending: 'Pending',\n  in_process: 'In Process',\n  shipped: 'Shipped',\n  completed: 'Completed',\n}\n\nconst STATUS_COLORS: Record<Order['status'], string> = {\n  awaiting_arrival: 'bg-blue-500/10 text-blue-400 border-blue-500/30',\n  pending: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/30',\n  in_process: 'bg-purple-500/10 text-purple-400 border-purple-500/30',\n  shipped: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30',\n  completed: 'bg-green-500/10 text-green-400 border-green-500/30',\n}\n\nconst WINDOW_LABELS = {\n  morning: '8:00 – 12:00',\n  midday: '12:00 – 16:00',\n  afternoon: '16:00 – 20:00',\n}\n\n// ── Order Number Generator ─────────────────────────────────────\n\nfunction generateOrderNumber(\n  warehouseCode: string,\n  clientCode: string,\n  existingOrders: Order[]\n): string {\n  const now = new Date()\n  const dateStr = [\n    String(now.getMonth() + 1).padStart(2, '0'),\n    String(now.getDate()).padStart(2, '0'),\n    String(now.getFullYear()).slice(-2),\n  ].join('')\n  \n  // Count today's orders for consecutive number\n  const todayPrefix = `${warehouseCode}/${clientCode}/${dateStr}`\n  const todayCount = existingOrders.filter(o => \n    o.order_number.startsWith(todayPrefix)\n  ).length\n  \n  return `${todayPrefix}-${String(todayCount + 1).padStart(2, '0')}`\n}\n\n// ── New Order Modal ────────────────────────────────────────────\n\nfunction NewOrderModal({\n  onClose,\n  onSubmit,\n  warehouseCode,\n  clientCode,\n  orderNumber,\n}: {\n  onClose: () => void\n  onSubmit: (data: {\n    arrival_date: string\n    arrival_window: string\n    ready_date: string\n    is_urgent: boolean\n    notes: string\n  }) => void\n  warehouseCode: string\n  clientCode: string\n  orderNumber: string\n}) {\n  const [arrivalDate, setArrivalDate] = useState('')\n  const [arrivalWindow, setArrivalWindow] = useState('morning')\n  const [readyDate, setReadyDate] = useState('')\n  const [isUrgent, setIsUrgent] = useState(false)\n  const [notes, setNotes] = useState('')\n  const [error, setError] = useState('')\n\n  const handleSubmit = () => {\n    if (!arrivalDate || !readyDate) {\n      setError('Both dates are required')\n      return\n    }\n    if (new Date(readyDate) <= new Date(arrivalDate)) {\n      setError('Ready date must be after arrival date')\n      return\n    }\n    setError('')\n    onSubmit({ arrival_date: arrivalDate, arrival_window: arrivalWindow, ready_date: readyDate, is_urgent: isUrgent, notes })\n  }\n\n  return (\n    <div className=\"fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-card border border-border rounded-xl w-full max-w-lg p-6 space-y-5\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"text-lg font-bold\">New Order</h2>\n          <button type=\"button\" onClick={onClose} className=\"text-muted hover:text-foreground text-xl\">&times;</button>\n        </div>\n\n        <div className=\"bg-background rounded-lg p-3 text-center\">\n          <span className=\"text-xs text-muted uppercase tracking-wide\">Order Number</span>\n          <div className=\"text-lg font-mono font-bold mt-1\">{orderNumber}</div>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div>\n            <label className=\"block text-xs text-muted mb-1\">Arrival Date</label>\n            <input\n              type=\"date\"\n              value={arrivalDate}\n              onChange={e => setArrivalDate(e.target.value)}\n              className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-xs text-muted mb-1\">Time Window</label>\n            <select\n              value={arrivalWindow}\n              onChange={e => setArrivalWindow(e.target.value)}\n              className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n            >\n              <option value=\"morning\">Morning (8–12)</option>\n              <option value=\"midday\">Midday (12–16)</option>\n              <option value=\"afternoon\">Afternoon (16–20)</option>\n            </select>\n          </div>\n        </div>\n\n        <div>\n          <label className=\"block text-xs text-muted mb-1\">Ready Date (when you need it processed)</label>\n          <input\n            type=\"date\"\n            value={readyDate}\n            onChange={e => setReadyDate(e.target.value)}\n            className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n          />\n        </div>\n\n        <label className=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            checked={isUrgent}\n            onChange={e => setIsUrgent(e.target.checked)}\n            className=\"rounded\"\n          />\n          <span className=\"text-sm\">Mark as urgent</span>\n          {isUrgent && <span className=\"text-lg\">🔥</span>}\n        </label>\n\n        <div>\n          <label className=\"block text-xs text-muted mb-1\">Notes (optional)</label>\n          <textarea\n            value={notes}\n            onChange={e => setNotes(e.target.value)}\n            rows={2}\n            className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm resize-none\"\n          />\n        </div>\n\n        {error && (\n          <p className=\"text-sm text-red-400 bg-red-400/10 rounded-lg px-3 py-2\">{error}</p>\n        )}\n\n        <div className=\"flex gap-3 justify-end\">\n          <button type=\"button\" onClick={onClose} className=\"px-4 py-2 text-sm text-muted border border-border rounded-lg hover:bg-background\">Cancel</button>\n          <button type=\"button\" onClick={handleSubmit} className=\"px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium\">Create Order</button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ── Main Dashboard ─────────────────────────────────────────────\n\nexport default function OrderDashboard({ orders: initialOrders }: { orders: Order[] }) {\n  const [orders] = useState(initialOrders)\n  const [showNewOrder, setShowNewOrder] = useState(false)\n  const [statusFilter, setStatusFilter] = useState<string>('all')\n\n  // Status summary cards\n  const statusCounts = useMemo(() => {\n    const counts: Record<string, { total: number; urgent: number }> = {}\n    for (const s of STATUS_ORDER) {\n      counts[s] = { total: 0, urgent: 0 }\n    }\n    for (const order of orders) {\n      if (counts[order.status]) {\n        counts[order.status].total++\n        if (order.is_urgent) counts[order.status].urgent++\n      }\n    }\n    return counts\n  }, [orders])\n\n  const filteredOrders = statusFilter === 'all'\n    ? orders\n    : orders.filter(o => o.status === statusFilter)\n\n  const warehouseCode = orders[0]?.warehouse_code || 'TJ'\n  const clientCode = orders[0]?.client_code || 'EXA'\n  const nextOrderNumber = generateOrderNumber(warehouseCode, clientCode, orders)\n\n  return (\n    <div className=\"max-w-7xl mx-auto p-6 space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-xl font-bold\">My Orders</h1>\n          <p className=\"text-sm text-muted mt-1\">{orders.length} total orders</p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setShowNewOrder(true)}\n          className=\"bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg text-sm font-medium\"\n        >\n          + New Order\n        </button>\n      </div>\n\n      {/* Status Cards (REQ-003: urgent flame per column) */}\n      <div className=\"grid grid-cols-5 gap-3\">\n        {STATUS_ORDER.map(status => {\n          const c = statusCounts[status]\n          const isActive = statusFilter === status\n          return (\n            <button\n              key={status}\n              type=\"button\"\n              onClick={() => setStatusFilter(isActive ? 'all' : status)}\n              className={`rounded-xl border p-4 text-left transition-all ${\n                isActive ? STATUS_COLORS[status] + ' border-2' : 'border-border bg-card hover:bg-background'\n              }`}\n            >\n              <div className=\"text-xs text-muted uppercase tracking-wide mb-2\">\n                {STATUS_LABELS[status]}\n              </div>\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"text-2xl font-mono font-bold\">{c.total}</span>\n                {c.urgent > 0 && (\n                  <span className=\"text-sm text-orange-400\">\n                    🔥 {c.urgent}\n                  </span>\n                )}\n              </div>\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Orders Table */}\n      <div className=\"rounded-xl border border-border bg-card overflow-hidden\">\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"text-left text-xs text-muted uppercase tracking-wide border-b border-border bg-background/50\">\n                <th className=\"p-4\">Order #</th>\n                <th className=\"p-4\">Status</th>\n                <th className=\"p-4\">Arrival</th>\n                <th className=\"p-4\">Window</th>\n                <th className=\"p-4\">Ready Date</th>\n                <th className=\"p-4\">Items</th>\n                <th className=\"p-4\">Actions</th>\n              </tr>\n            </thead>\n            <tbody className=\"text-sm\">\n              {filteredOrders.map(order => (\n                <tr key={order.id} className=\"border-b border-border/50 hover:bg-background/30\">\n                  <td className=\"p-4\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"font-mono font-medium\">{order.order_number}</span>\n                      {order.is_urgent && <span title=\"Urgent\">🔥</span>}\n                    </div>\n                  </td>\n                  <td className=\"p-4\">\n                    <span className={`inline-block px-2.5 py-1 rounded-lg text-xs font-medium border ${STATUS_COLORS[order.status]}`}>\n                      {STATUS_LABELS[order.status]}\n                    </span>\n                  </td>\n                  <td className=\"p-4 text-muted font-mono text-xs\">\n                    {new Date(order.arrival_date).toLocaleDateString('es-MX')}\n                  </td>\n                  <td className=\"p-4 text-muted text-xs\">\n                    {WINDOW_LABELS[order.arrival_window] || order.arrival_window}\n                  </td>\n                  <td className=\"p-4 text-muted font-mono text-xs\">\n                    {new Date(order.ready_date).toLocaleDateString('es-MX')}\n                  </td>\n                  <td className=\"p-4 font-mono text-xs\">\n                    {order.wms_order_items?.length || 0}\n                  </td>\n                  <td className=\"p-4\">\n                    <div className=\"flex gap-2\">\n                      {order.status === 'shipped' && (\n                        <>\n                          {order.bol_url && (\n                            <a\n                              href={order.bol_url}\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"px-3 py-1 rounded-md text-xs font-medium bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 hover:bg-cyan-500/20\"\n                            >\n                              BOL\n                            </a>\n                          )}\n                          {order.evidence_url && (\n                            <a\n                              href={order.evidence_url}\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"px-3 py-1 rounded-md text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/30 hover:bg-green-500/20\"\n                            >\n                              Evidence\n                            </a>\n                          )}\n                        </>\n                      )}\n                    </div>\n                  </td>\n                </tr>\n              ))}\n              {filteredOrders.length === 0 && (\n                <tr>\n                  <td colSpan={7} className=\"p-8 text-center text-muted\">\n                    No orders match the current filter.\n                  </td>\n                </tr>\n              )}\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      {/* New Order Modal */}\n      {showNewOrder && (\n        <NewOrderModal\n          onClose={() => setShowNewOrder(false)}\n          warehouseCode={warehouseCode}\n          clientCode={clientCode}\n          orderNumber={nextOrderNumber}\n          onSubmit={async (data) => {\n            // Supabase insert would go here\n            console.log('Creating order:', { ...data, order_number: nextOrderNumber })\n            setShowNewOrder(false)\n          }}\n        />\n      )}\n    </div>\n  )\n}\n```\n\n### Acceptance Criteria Verification\n1. Dashboard shows all orders in a table with order #, status, dates, items, actions\n2. \"New Order\" button opens modal with arrival date, time window, ready date\n3. System blocks if ready_date <= arrival_date (validation in modal)\n4. Orders show structured number: TJ/EXA/022526-01 (warehouse/client_3char/MMDDYY-consecutive)\n5. Status cards show total + urgent (flame) + normal breakdown per status column\n6. Shipped orders show BOL + Evidence buttons (conditionally rendered)\n7. Desktop-first layout with responsive grid (5 status cards collapse on narrow screens)\n\n### Schema (Supabase)\n```sql\nCREATE TABLE wms_orders (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  order_number TEXT NOT NULL UNIQUE,\n  client_id UUID REFERENCES auth.users(id),\n  warehouse_code TEXT NOT NULL DEFAULT 'TJ',\n  client_code TEXT NOT NULL,\n  status TEXT NOT NULL DEFAULT 'awaiting_arrival',\n  is_urgent BOOLEAN DEFAULT FALSE,\n  arrival_date DATE NOT NULL,\n  arrival_window TEXT NOT NULL DEFAULT 'morning',\n  ready_date DATE NOT NULL,\n  shipped_at TIMESTAMPTZ,\n  bol_url TEXT,\n  evidence_url TEXT,\n  notes TEXT,\n  created_at TIMESTAMPTZ DEFAULT NOW(),\n  CONSTRAINT valid_dates CHECK (ready_date > arrival_date)\n);\n\nCREATE TABLE wms_order_items (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  order_id UUID REFERENCES wms_orders(id) ON DELETE CASCADE,\n  product_sku TEXT NOT NULL,\n  product_name TEXT NOT NULL,\n  quantity NUMERIC NOT NULL DEFAULT 1,\n  unit TEXT NOT NULL DEFAULT 'pcs'\n);\n```",
  "content": "## GOLDMEX WMS: Order Lifecycle Screen (Client View)\n\n### File: `goldmex-wms/src/app/orders/page.tsx`\n\n```tsx\nimport { createClient } from '@/lib/supabase-server'\nimport OrderDashboard from '@/components/order-dashboard'\n\nexport const revalidate = 30\n\nexport default async function OrdersPage() {\n  const supabase = await createClient()\n  const { data: { user } } = await supabase.auth.getUser()\n  \n  const { data: orders } = await supabase\n    .from('wms_orders')\n    .select('*, wms_order_items(*)')\n    .eq('client_id', user?.id)\n    .order('created_at', { ascending: false })\n    .limit(200)\n\n  return <OrderDashboard orders={orders ?? []} />\n}\n```\n\n### File: `goldmex-wms/src/components/order-dashboard.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState, useMemo } from 'react'\n\n// ── Types ──────────────────────────────────────────────────────\n\ninterface OrderItem {\n  id: string\n  product_sku: string\n  product_name: string\n  quantity: number\n  unit: string\n}\n\ninterface Order {\n  id: string\n  order_number: string        // TJ/EXA/022526-01\n  client_id: string\n  warehouse_code: string      // TJ, GDL, MTY\n  client_code: string         // EXA, BET, etc.\n  status: 'awaiting_arrival' | 'pending' | 'in_process' | 'shipped' | 'completed'\n  is_urgent: boolean\n  arrival_date: string\n  arrival_window: 'morning' | 'midday' | 'afternoon'\n  ready_date: string\n  shipped_at: string | null\n  bol_url: string | null\n  evidence_url: string | null\n  notes: string | null\n  created_at: string\n  wms_order_items: OrderItem[]\n}\n\nconst STATUS_ORDER: Order['status'][] = [\n  'awaiting_arrival', 'pending', 'in_process', 'shipped', 'completed'\n]\n\nconst STATUS_LABELS: Record<Order['status'], string> = {\n  awaiting_arrival: 'Awaiting Arrival',\n  pending: 'Pending',\n  in_process: 'In Process',\n  shipped: 'Shipped',\n  completed: 'Completed',\n}\n\nconst STATUS_COLORS: Record<Order['status'], string> = {\n  awaiting_arrival: 'bg-blue-500/10 text-blue-400 border-blue-500/30',\n  pending: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/30',\n  in_process: 'bg-purple-500/10 text-purple-400 border-purple-500/30',\n  shipped: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30',\n  completed: 'bg-green-500/10 text-green-400 border-green-500/30',\n}\n\nconst WINDOW_LABELS = {\n  morning: '8:00 – 12:00',\n  midday: '12:00 – 16:00',\n  afternoon: '16:00 – 20:00',\n}\n\n// ── Order Number Generator ─────────────────────────────────────\n\nfunction generateOrderNumber(\n  warehouseCode: string,\n  clientCode: string,\n  existingOrders: Order[]\n): string {\n  const now = new Date()\n  const dateStr = [\n    String(now.getMonth() + 1).padStart(2, '0'),\n    String(now.getDate()).padStart(2, '0'),\n    String(now.getFullYear()).slice(-2),\n  ].join('')\n  \n  // Count today's orders for consecutive number\n  const todayPrefix = `${warehouseCode}/${clientCode}/${dateStr}`\n  const todayCount = existingOrders.filter(o => \n    o.order_number.startsWith(todayPrefix)\n  ).length\n  \n  return `${todayPrefix}-${String(todayCount + 1).padStart(2, '0')}`\n}\n\n// ── New Order Modal ────────────────────────────────────────────\n\nfunction NewOrderModal({\n  onClose,\n  onSubmit,\n  warehouseCode,\n  clientCode,\n  orderNumber,\n}: {\n  onClose: () => void\n  onSubmit: (data: {\n    arrival_date: string\n    arrival_window: string\n    ready_date: string\n    is_urgent: boolean\n    notes: string\n  }) => void\n  warehouseCode: string\n  clientCode: string\n  orderNumber: string\n}) {\n  const [arrivalDate, setArrivalDate] = useState('')\n  const [arrivalWindow, setArrivalWindow] = useState('morning')\n  const [readyDate, setReadyDate] = useState('')\n  const [isUrgent, setIsUrgent] = useState(false)\n  const [notes, setNotes] = useState('')\n  const [error, setError] = useState('')\n\n  const handleSubmit = () => {\n    if (!arrivalDate || !readyDate) {\n      setError('Both dates are required')\n      return\n    }\n    if (new Date(readyDate) <= new Date(arrivalDate)) {\n      setError('Ready date must be after arrival date')\n      return\n    }\n    setError('')\n    onSubmit({ arrival_date: arrivalDate, arrival_window: arrivalWindow, ready_date: readyDate, is_urgent: isUrgent, notes })\n  }\n\n  return (\n    <div className=\"fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-card border border-border rounded-xl w-full max-w-lg p-6 space-y-5\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"text-lg font-bold\">New Order</h2>\n          <button type=\"button\" onClick={onClose} className=\"text-muted hover:text-foreground text-xl\">&times;</button>\n        </div>\n\n        <div className=\"bg-background rounded-lg p-3 text-center\">\n          <span className=\"text-xs text-muted uppercase tracking-wide\">Order Number</span>\n          <div className=\"text-lg font-mono font-bold mt-1\">{orderNumber}</div>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div>\n            <label className=\"block text-xs text-muted mb-1\">Arrival Date</label>\n            <input\n              type=\"date\"\n              value={arrivalDate}\n              onChange={e => setArrivalDate(e.target.value)}\n              className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-xs text-muted mb-1\">Time Window</label>\n            <select\n              value={arrivalWindow}\n              onChange={e => setArrivalWindow(e.target.value)}\n              className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n            >\n              <option value=\"morning\">Morning (8–12)</option>\n              <option value=\"midday\">Midday (12–16)</option>\n              <option value=\"afternoon\">Afternoon (16–20)</option>\n            </select>\n          </div>\n        </div>\n\n        <div>\n          <label className=\"block text-xs text-muted mb-1\">Ready Date (when you need it processed)</label>\n          <input\n            type=\"date\"\n            value={readyDate}\n            onChange={e => setReadyDate(e.target.value)}\n            className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm\"\n          />\n        </div>\n\n        <label className=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            type=\"checkbox\"\n            checked={isUrgent}\n            onChange={e => setIsUrgent(e.target.checked)}\n            className=\"rounded\"\n          />\n          <span className=\"text-sm\">Mark as urgent</span>\n          {isUrgent && <span className=\"text-lg\">🔥</span>}\n        </label>\n\n        <div>\n          <label className=\"block text-xs text-muted mb-1\">Notes (optional)</label>\n          <textarea\n            value={notes}\n            onChange={e => setNotes(e.target.value)}\n            rows={2}\n            className=\"w-full bg-background border border-border rounded-lg px-3 py-2 text-sm resize-none\"\n          />\n        </div>\n\n        {error && (\n          <p className=\"text-sm text-red-400 bg-red-400/10 rounded-lg px-3 py-2\">{error}</p>\n        )}\n\n        <div className=\"flex gap-3 justify-end\">\n          <button type=\"button\" onClick={onClose} className=\"px-4 py-2 text-sm text-muted border border-border rounded-lg hover:bg-background\">Cancel</button>\n          <button type=\"button\" onClick={handleSubmit} className=\"px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium\">Create Order</button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ── Main Dashboard ─────────────────────────────────────────────\n\nexport default function OrderDashboard({ orders: initialOrders }: { orders: Order[] }) {\n  const [orders] = useState(initialOrders)\n  const [showNewOrder, setShowNewOrder] = useState(false)\n  const [statusFilter, setStatusFilter] = useState<string>('all')\n\n  // Status summary cards\n  const statusCounts = useMemo(() => {\n    const counts: Record<string, { total: number; urgent: number }> = {}\n    for (const s of STATUS_ORDER) {\n      counts[s] = { total: 0, urgent: 0 }\n    }\n    for (const order of orders) {\n      if (counts[order.status]) {\n        counts[order.status].total++\n        if (order.is_urgent) counts[order.status].urgent++\n      }\n    }\n    return counts\n  }, [orders])\n\n  const filteredOrders = statusFilter === 'all'\n    ? orders\n    : orders.filter(o => o.status === statusFilter)\n\n  const warehouseCode = orders[0]?.warehouse_code || 'TJ'\n  const clientCode = orders[0]?.client_code || 'EXA'\n  const nextOrderNumber = generateOrderNumber(warehouseCode, clientCode, orders)\n\n  return (\n    <div className=\"max-w-7xl mx-auto p-6 space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-xl font-bold\">My Orders</h1>\n          <p className=\"text-sm text-muted mt-1\">{orders.length} total orders</p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setShowNewOrder(true)}\n          className=\"bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg text-sm font-medium\"\n        >\n          + New Order\n        </button>\n      </div>\n\n      {/* Status Cards (REQ-003: urgent flame per column) */}\n      <div className=\"grid grid-cols-5 gap-3\">\n        {STATUS_ORDER.map(status => {\n          const c = statusCounts[status]\n          const isActive = statusFilter === status\n          return (\n            <button\n              key={status}\n              type=\"button\"\n              onClick={() => setStatusFilter(isActive ? 'all' : status)}\n              className={`rounded-xl border p-4 text-left transition-all ${\n                isActive ? STATUS_COLORS[status] + ' border-2' : 'border-border bg-card hover:bg-background'\n              }`}\n            >\n              <div className=\"text-xs text-muted uppercase tracking-wide mb-2\">\n                {STATUS_LABELS[status]}\n              </div>\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"text-2xl font-mono font-bold\">{c.total}</span>\n                {c.urgent > 0 && (\n                  <span className=\"text-sm text-orange-400\">\n                    🔥 {c.urgent}\n                  </span>\n                )}\n              </div>\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Orders Table */}\n      <div className=\"rounded-xl border border-border bg-card overflow-hidden\">\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"text-left text-xs text-muted uppercase tracking-wide border-b border-border bg-background/50\">\n                <th className=\"p-4\">Order #</th>\n                <th className=\"p-4\">Status</th>\n                <th className=\"p-4\">Arrival</th>\n                <th className=\"p-4\">Window</th>\n                <th className=\"p-4\">Ready Date</th>\n                <th className=\"p-4\">Items</th>\n                <th className=\"p-4\">Actions</th>\n              </tr>\n            </thead>\n            <tbody className=\"text-sm\">\n              {filteredOrders.map(order => (\n                <tr key={order.id} className=\"border-b border-border/50 hover:bg-background/30\">\n                  <td className=\"p-4\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"font-mono font-medium\">{order.order_number}</span>\n                      {order.is_urgent && <span title=\"Urgent\">🔥</span>}\n                    </div>\n                  </td>\n                  <td className=\"p-4\">\n                    <span className={`inline-block px-2.5 py-1 rounded-lg text-xs font-medium border ${STATUS_COLORS[order.status]}`}>\n                      {STATUS_LABELS[order.status]}\n                    </span>\n                  </td>\n                  <td className=\"p-4 text-muted font-mono text-xs\">\n                    {new Date(order.arrival_date).toLocaleDateString('es-MX')}\n                  </td>\n                  <td className=\"p-4 text-muted text-xs\">\n                    {WINDOW_LABELS[order.arrival_window] || order.arrival_window}\n                  </td>\n                  <td className=\"p-4 text-muted font-mono text-xs\">\n                    {new Date(order.ready_date).toLocaleDateString('es-MX')}\n                  </td>\n                  <td className=\"p-4 font-mono text-xs\">\n                    {order.wms_order_items?.length || 0}\n                  </td>\n                  <td className=\"p-4\">\n                    <div className=\"flex gap-2\">\n                      {order.status === 'shipped' && (\n                        <>\n                          {order.bol_url && (\n                            <a\n                              href={order.bol_url}\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"px-3 py-1 rounded-md text-xs font-medium bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 hover:bg-cyan-500/20\"\n                            >\n                              BOL\n                            </a>\n                          )}\n                          {order.evidence_url && (\n                            <a\n                              href={order.evidence_url}\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"px-3 py-1 rounded-md text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/30 hover:bg-green-500/20\"\n                            >\n                              Evidence\n                            </a>\n                          )}\n                        </>\n                      )}\n                    </div>\n                  </td>\n                </tr>\n              ))}\n              {filteredOrders.length === 0 && (\n                <tr>\n                  <td colSpan={7} className=\"p-8 text-center text-muted\">\n                    No orders match the current filter.\n                  </td>\n                </tr>\n              )}\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n      {/* New Order Modal */}\n      {showNewOrder && (\n        <NewOrderModal\n          onClose={() => setShowNewOrder(false)}\n          warehouseCode={warehouseCode}\n          clientCode={clientCode}\n          orderNumber={nextOrderNumber}\n          onSubmit={async (data) => {\n            // Supabase insert would go here\n            console.log('Creating order:', { ...data, order_number: nextOrderNumber })\n            setShowNewOrder(false)\n          }}\n        />\n      )}\n    </div>\n  )\n}\n```\n\n### Acceptance Criteria Verification\n1. Dashboard shows all orders in a table with order #, status, dates, items, actions\n2. \"New Order\" button opens modal with arrival date, time window, ready date\n3. System blocks if ready_date <= arrival_date (validation in modal)\n4. Orders show structured number: TJ/EXA/022526-01 (warehouse/client_3char/MMDDYY-consecutive)\n5. Status cards show total + urgent (flame) + normal breakdown per status column\n6. Shipped orders show BOL + Evidence buttons (conditionally rendered)\n7. Desktop-first layout with responsive grid (5 status cards collapse on narrow screens)\n\n### Schema (Supabase)\n```sql\nCREATE TABLE wms_orders (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  order_number TEXT NOT NULL UNIQUE,\n  client_id UUID REFERENCES auth.users(id),\n  warehouse_code TEXT NOT NULL DEFAULT 'TJ',\n  client_code TEXT NOT NULL,\n  status TEXT NOT NULL DEFAULT 'awaiting_arrival',\n  is_urgent BOOLEAN DEFAULT FALSE,\n  arrival_date DATE NOT NULL,\n  arrival_window TEXT NOT NULL DEFAULT 'morning',\n  ready_date DATE NOT NULL,\n  shipped_at TIMESTAMPTZ,\n  bol_url TEXT,\n  evidence_url TEXT,\n  notes TEXT,\n  created_at TIMESTAMPTZ DEFAULT NOW(),\n  CONSTRAINT valid_dates CHECK (ready_date > arrival_date)\n);\n\nCREATE TABLE wms_order_items (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  order_id UUID REFERENCES wms_orders(id) ON DELETE CASCADE,\n  product_sku TEXT NOT NULL,\n  product_name TEXT NOT NULL,\n  quantity NUMERIC NOT NULL DEFAULT 1,\n  unit TEXT NOT NULL DEFAULT 'pcs'\n);\n```"
}