Task 2.1: Develop Service Catalog UI

[scrollinondubs]

Description

Design and implement the front-end display for service information using Next.js and shadcn/ui.

Epic

Part of Epic 2: Service Information Display (#15)

Technical Details

• Files: /app/services/page.tsx, /components/service-card.tsx
• Framework: Next.js 14+ App Router with Server Components
• UI Components: shadcn/ui (Card, Badge, Button, Select)
• Data Fetching: Next.js Server Actions or TanStack Query
• State Management: TanStack Query for server state

Acceptance Criteria

• Display accurate service descriptions and prices
• Filter functionality works as expected (by type, duration, price)
• Mobile-responsive design (320px-768px)
• Real-time availability updates integrated
• Service cards show duration, price, and availability

Dependencies

• Depends on: Task 1.1: Implement Booking Request API (Task 1.1: Implement Booking Request API #13) - API before UI
• Depends on: Task 3.2: Notification System for Staff (#TBD) - API before UI
• Depends on: Epic 4: Technical Foundation (#TBD) - Models before services

Estimated Effort

15 hours

Priority

P1

Git Worktree

Can be developed in parallel worktree once API endpoints are available.