{
  "id": "order-tracker",
  "name": "Order Tracker",
  "category": "e-commerce",
  "tags": ["orders", "shipping", "delivery", "tracking"],
  "description": "Visual order status tracker with a step timeline.",
  "triggers": ["order tracker", "track package", "delivery status", "shipping"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function OrderTracker() {\n  const [orders, setOrders] = React.useState([\n    { id: 'ORD-7281', store: 'Amazon', status: 2, steps: ['Ordered', 'Shipped', 'Out for delivery', 'Delivered'], items: ['Wireless Mouse', 'USB-C Cable'] },\n    { id: 'ORD-9102', store: 'Best Buy', status: 1, steps: ['Ordered', 'Shipped', 'Out for delivery', 'Delivered'], items: ['Monitor Stand'] }\n  ]);\n  const [newStore, setNewStore] = React.useState('');\n  const [newItems, setNewItems] = React.useState('');\n\n  function addOrder() {\n    if (!newStore.trim()) return;\n    const id = 'ORD-' + Math.floor(1000 + Math.random() * 9000);\n    setOrders([...orders, { id, store: newStore, status: 0, steps: ['Ordered', 'Shipped', 'Out for delivery', 'Delivered'], items: newItems.split(',').map(s => s.trim()).filter(Boolean) }]);\n    setNewStore('');\n    setNewItems('');\n  }\n\n  function advanceStatus(idx) {\n    setOrders(orders.map((o, i) => i === idx ? { ...o, status: Math.min(o.steps.length - 1, o.status + 1) } : o));\n  }\n\n  function removeOrder(idx) {\n    setOrders(orders.filter((_, i) => i !== idx));\n  }\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h2 style={{ margin: '0 0 12px 0', fontSize: 18, color: '#1a1a1a' }}>Order Tracker</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>\n        <input placeholder=\"Store\" value={newStore} onChange={e => setNewStore(e.target.value)} style={{ flex: 1, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <input placeholder=\"Items (comma sep)\" value={newItems} onChange={e => setNewItems(e.target.value)} style={{ flex: 1, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <button onClick={addOrder} style={{ padding: '6px 14px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontSize: 13, cursor: 'pointer' }}>Add</button>\n      </div>\n      <div style={{ flex: 1, overflowY: 'auto' }}>\n        {orders.map((order, i) => (\n          <div key={i} style={{ marginBottom: 14, padding: 12, borderRadius: 8, background: '#f8f9fa' }}>\n            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>\n              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                <span style={{ fontWeight: 700, fontSize: 13, color: '#2563eb' }}>{order.id}</span>\n                <span style={{ fontSize: 13, color: '#444' }}>{order.store}</span>\n              </div>\n              <div style={{ display: 'flex', gap: 6 }}>\n                <button onClick={() => advanceStatus(i)} style={{ padding: '4px 10px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontSize: 12, cursor: 'pointer' }}>Next</button>\n                <button onClick={() => removeOrder(i)} style={{ background: 'transparent', border: 'none', color: '#999', cursor: 'pointer', fontSize: 16 }}>x</button>\n              </div>\n            </div>\n            <div style={{ fontSize: 12, color: '#666', marginBottom: 10 }}>{order.items.join(', ')}</div>\n            <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>\n              {order.steps.map((step, si) => (\n                <React.Fragment key={si}>\n                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1 }}>\n                    <div style={{ width: 14, height: 14, borderRadius: '50%', background: si <= order.status ? '#2563eb' : '#d1d5db', border: '2px solid ' + (si <= order.status ? '#2563eb' : '#d1d5db'), transition: 'all 0.3s' }} />\n                    <div style={{ fontSize: 10, color: si <= order.status ? '#2563eb' : '#9ca3af', marginTop: 4, textAlign: 'center' }}>{step}</div>\n                  </div>\n                  {si < order.steps.length - 1 && (\n                    <div style={{ flex: 1, height: 2, background: si < order.status ? '#2563eb' : '#e5e7eb', marginTop: -14 }} />\n                  )}\n                </React.Fragment>\n              ))}\n            </div>\n          </div>\n        ))}\n        {orders.length === 0 && <div style={{ textAlign: 'center', color: '#999', fontSize: 13, padding: 20 }}>No orders to track.</div>}\n      </div>\n    </div>\n  );\n}\nrender(<OrderTracker/>);",
  "placeholders": []
}