Order & Inventory Tracker - Select Admin Docs

주문 목록과 재고 현황을 함께 보여주는 기본 예시입니다. 상단 표에서는 주문 상태(대기·배송·취소)를 색상으로 구분하고, 각 행에서 상세 모달을 열어 주문 정보를 확인할 수 있습니다. 하단은 SKU별 재고량을 바차트로 표시해 주문 데이터와 재고 흐름을 한눈에 볼 수 있도록 구성되어 있습니다.

blocks:
  - type: http
    method: GET
    fetchFn: |    
      return [
        { id: 5001, sku: 'KR-TEE-001', qty: 2,  price: 12900, status: 'pending',  created_at: '2025-10-19' },
        { id: 5002, sku: 'KR-MUG-002', qty: 1,  price: 14900, status: 'shipped',  created_at: '2025-10-20' },
        { id: 5003, sku: 'KR-BAG-003', qty: 3,  price: 35900, status: 'canceled', created_at: '2025-10-21' },
        { id: 5004, sku: 'KR-TEE-001', qty: 4,  price: 12900, status: 'pending',  created_at: '2025-10-21' },
        { id: 5005, sku: 'KR-CAP-004', qty: 2,  price: 21900, status: 'pending',  created_at: '2025-10-22' },
        { id: 5006, sku: 'KR-MUG-002', qty: 5,  price: 14900, status: 'pending',  created_at: '2025-10-22' }
      ]
    columns:
      status:
        valueAs: { pending: 대기, shipped: 배송, canceled: 취소 }
        color: { pending: orange, shipped: green, canceled: red }
      id:
        buttons:
          - label: 상세
            openModal: order-:id
    modals:
      - path: order-:id
        blocks:
          - type: http
            method: GET
            fetchFn: |
              // 상세는 선택 id를 그대로 보여줌
              return [{
                id,
                items: [{ sku: 'KR-TEE-001', qty: 2 }, { sku: 'KR-MUG-002', qty: 1 }],
                status: 'pending',
                address: '서울특별시 성동구 성수이로 50'
              }]
            params:
              - key: id
                valueFromRow: id
            display: form
    selectOptions:
      enabled: true
    actions:
      - label: 배송처리
        forEach: true
        type: http
        method: POST
        fetchFn: |
          if (!id) { throw new Error('ID_REQUIRED') }
          alert(`배송 처리 완료: ${id}`)
          return [{ shipped_id: id, shipped_at: new Date().toISOString() }]

  - type: http
    style:
      width: 1000px
    method: GET
    fetchFn: |
      return [
        { sku: 'KR-TEE-001', quantity: 120 },
        { sku: 'KR-MUG-002', quantity: 45  },
        { sku: 'KR-BAG-003', quantity: 200 },
        { sku: 'KR-CAP-004', quantity: 30  },
        { sku: 'KR-NOTE-005', quantity: 85  }
      ]
    chartOptions:
      type: bar
      x: sku
      y: quantity

All