Skip to content

feat: implement Orders List and Order Details pages#83

Open
giorgigordiashvili wants to merge 1 commit into
Qualiora:mainfrom
giorgigordiashvili:feat/orders-pages
Open

feat: implement Orders List and Order Details pages#83
giorgigordiashvili wants to merge 1 commit into
Qualiora:mainfrom
giorgigordiashvili:feat/orders-pages

Conversation

@giorgigordiashvili

Copy link
Copy Markdown

Summary

  • Orders List (/pages/orders/list): TanStack React Table with 20 seed orders, clickable order ID links to detail page, customer name + email column, order date, total (formatted currency), payment status badges (Paid/Pending/Failed/Refunded), delivery status badges with icons (Delivered/Shipped/In Transit/Processing/Pending), search by customer name, payment status filter, column sorting, pagination, row selection, and delete action
  • Order Details (/pages/orders/[id]): Dynamic route with 4-card grid layout:
    • Header Card: Order ID, date, payment + delivery status badges
    • Items Card: Product table with images, SKU, qty, prices + order summary (subtotal, shipping, tax, total) with ScrollArea for mobile
    • Customer Card: Name, email, phone, address with lucide icons
    • Timeline Card: Order status history using the existing Timeline component
    • Not Found: Fallback component for invalid order IDs

Localized links via ensureLocalizedPathname, RTL-safe with logical CSS properties. 15 new files, 20 seed orders with items and timeline events.

Test plan

  • Navigate via sidebar: Pages > Orders > List
  • Orders List: search customers, filter by payment status, sort, paginate, delete
  • Click an order ID (e.g. #ORD-1001) — navigates to detail page
  • Order Details: verify header badges, items table with summary math, customer info, timeline
  • Navigate to /en/pages/orders/INVALID — shows "Order Not Found"
  • "Back to Orders" link returns to list
  • Sidebar: Orders > Details links to /pages/orders/ORD-1001
  • RTL test at /ar/pages/orders/list and /ar/pages/orders/ORD-1001

Add two pages under Pages > Orders:
- Orders List: data table with 20 orders, clickable order ID links,
  customer name + email, payment status filter (Paid/Pending/Failed/
  Refunded), delivery status badges with icons, search, sort,
  pagination, row selection, and delete action
- Order Details: dynamic [id] route with 4-card layout — order header
  with status badges, items table with order summary (subtotal, tax,
  total), customer info card with icons, and order timeline using the
  Timeline component. Includes "not found" fallback for invalid IDs.

Follows existing project patterns (TanStack Table, localized Links
via ensureLocalizedPathname, ScrollArea for mobile, logical CSS
properties for RTL support).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant