Skip to content

feat: implement Customers List and Customer Details pages#84

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

feat: implement Customers List and Customer Details pages#84
giorgigordiashvili wants to merge 1 commit into
Qualiora:mainfrom
giorgigordiashvili:feat/customers-pages

Conversation

@giorgigordiashvili

Copy link
Copy Markdown

Summary

  • Customers List (/pages/customers/list): TanStack React Table with 20 seed customers, avatar + name + email column (clickable link to details), phone, status badges (Active/VIP/Inactive), total orders, total spent (formatted currency), join date, search by name, status filter, column sorting, pagination, row selection, and delete action
  • Customer Details (/pages/customers/[id]): Dynamic route with profile-style layout:
    • Header Card: Large avatar with fallback initials, name, email, status badge, join date
    • Info Card: Phone, full address, country, organization with lucide icons
    • Stats Cards: 3-column grid showing total orders, total spent, avg order value
    • Recent Orders Card: Static table with order IDs, dates, amounts, payment status badges. ScrollArea for mobile
    • Not Found: Fallback component for invalid customer IDs

20 seed customers with 5 avatar variants, mix of Active/VIP/Inactive statuses, realistic order data. RTL-safe with logical CSS properties, ARIA labels on search/filter inputs.

Test plan

  • Navigate via sidebar: Pages > Customers > List
  • Customers List: search, filter by status, sort, paginate, delete
  • Click a customer name — navigates to detail page
  • Customer Details: verify avatar, info, stats math, recent orders table
  • Navigate to /en/pages/customers/INVALID — shows "Customer Not Found"
  • "Back to Customers" link returns to list
  • Sidebar: Customers > Details links to /pages/customers/CUS-1001
  • RTL test at /ar/pages/customers/list and /ar/pages/customers/CUS-1001

Add two pages under Pages > Customers:
- Customers List: data table with 20 customers, avatar + name + email
  column, phone, status filter (Active/VIP/Inactive), total orders,
  total spent, join date, search, sort, pagination, delete action
- Customer Details: dynamic [id] route with profile-style layout —
  header card with avatar and status badge, info card with contact
  details, stats cards (total orders, total spent, avg order value),
  and recent orders table with payment status badges

Follows established patterns (TanStack Table, localized Links,
ScrollArea for mobile, ARIA labels, logical CSS for RTL).
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