Orders

Routes:

• /orders — Order history list
• /orders/[id] — Order detail + real-time tracking

Files:

• ayts-fe/app/orders/page.tsx
• ayts-fe/app/orders/[id]/page.tsx

Auth required: Yes

Orders List (/orders)

Purpose

Shows a customer's complete order history, newest first.

Display

Each order shows:

• Order ID (e.g., AYTS-20260107-4976)
• Date placed
• Status badge (Pending / Confirmed / Preparing / Ready / Out for Delivery / Delivered / Cancelled)
• Store name(s)
• Total amount (₱)
• "View Details" link

Data Fetching

GET /api/orders?userId={userId}&limit=20&offset={page}

---

Order Detail (/orders/[id])

Purpose

Full detail view of a single order with real-time status updates via Server-Sent Events.

Sections

Order Summary

• Order ID + timestamp
• Status badge with timeline

Order Timeline

Animated step-by-step status history:

1. Order Placed
2. Confirmed
3. Preparing
4. Ready for Pickup / Out for Delivery
5. Delivered

Items

• Product name, quantity, unit price, subtotal per line item
• Store name per group

Payment Details

• Payment method (COD / GCash / Maya)
• Payment status (Pending / Paid / Failed)
• Total amount

Delivery Info

• Delivery address
• Estimated delivery time (if set)
• Rider info (if assigned)

Real-Time Tracking

Order status updates in real time via SSE:

// Connects to SSE stream
const eventSource = new EventSource(
  `${API_URL}/api/orders/${orderId}/stream`,
  { withCredentials: true }
);

eventSource.onmessage = (event) => {
  const { status } = JSON.parse(event.data);
  setOrderStatus(status);
};

Data Fetching

// Static order data
GET /api/orders/{id}

// Real-time status stream
GET /api/orders/{id}/stream  (SSE)

Order Statuses

Status	Description
pending	Order placed, awaiting payment confirmation
confirmed	Payment confirmed (COD auto-confirms)
preparing	Vendor is preparing the order
ready	Ready for pickup / handoff to rider
out_for_delivery	Rider picked up, en route
delivered	Order delivered to customer
cancelled	Order cancelled
refunded	Refund processed

Known Issues / Status

Item	Status
Order list displays	✅ Working
Order detail displays	✅ Working
Real-time SSE tracking	✅ Working
Payment status reflected	✅ Working
preparing not in filter	⚠️ Admin filter missing this status
Payment status page (post-redirect)	❌ Missing for GCash/Maya