🎨 [Day 1 - Afternoon] UI Components & Layout Implementation

[uozopio]

📋 Task Overview

Sprint Day: Day 1 - Afternoon Session
Time Slot: 14:00 - 18:00 (4 hours)
Task Type: Individual UI/UX Development
Estimated Duration: 4 hours
Dependencies: Project Structure (Issue #4)

🎯 Objectives

Set up the complete UI foundation with shadcn/ui component library, create layout components with navigation, implement progress indicators, status badges, and establish responsive design patterns for the escrow platform.

📝 Detailed Requirements

1. shadcn/ui Component Library Setup (1 hour)

• Install and configure shadcn/ui:
  • Run initialization with proper config
  • Set up Tailwind CSS configuration
  • Configure CSS variables for theming
  • Set up dark mode with next-themes
• Install essential components:
  • Forms: Button, Input, Label, Textarea, Select, Checkbox, Radio
  • Feedback: Alert, Toast, Badge, Progress, Skeleton
  • Layout: Card, Separator, Tabs, Accordion
  • Overlay: Dialog, Sheet, Popover, Tooltip
  • Data: Table, Avatar, Badge
  • Navigation: Navigation Menu, Breadcrumb
• Customize theme:
  • Brand colors (primary, secondary, accent)
  • Turkish typography considerations
  • Spacing and sizing scales
  • Border radius conventions
  • Shadow definitions
• Create component exports:
  • Central export file at components/ui/index.ts
  • Type definitions for all components
  • Prop documentation

2. Layout Components (1 hour)

• Create components/layout/EscrowLayout.tsx:
  • Main layout wrapper with sidebar
  • Responsive navigation (mobile hamburger)
  • User account dropdown
  • Language switcher integration
  • Notification bell icon
  • Help/support button
• Implement components/layout/Header.tsx:
  • Brand logo and name
  • Transaction progress indicator
  • Current step highlight
  • User greeting with avatar
  • Quick actions menu
  • Responsive breakpoints
• Build components/layout/Sidebar.tsx:
  • Navigation menu items:
    • Dashboard
    • Active Transactions
    • Transaction History
    • Documents
    • Settings
    • Help Center
  • Collapsible on mobile
  • Active state indicators
  • Icon + text display
  • Role-based menu items
• Create components/layout/Footer.tsx:
  • Copyright information
  • Legal links (Terms, Privacy)
  • Contact information
  • Social media links
  • Language selector
  • Payment method logos

3. Progress Indicator Component (1 hour)

• Create components/ui/ProgressIndicator.tsx:
  • Multi-step visual indicator
  • Steps: Info → Payment → Delivery → Completion
  • States: Upcoming, Active, Completed, Error
  • Animated transitions between steps
  • Mobile-responsive design (vertical on small screens)
• Implement step features:
  • Step number display
  • Step title and description
  • Completion checkmark
  • Error state with retry option
  • Time estimates per step
  • Skip step capability (admin only)
• Add interactive elements:
  • Click to view step details
  • Hover effects with tooltips
  • Progress percentage display
  • Estimated completion time
• Create variations:
  • Horizontal bar version
  • Circular progress version
  • Minimal text-only version
  • Detailed timeline version

4. Status and UI Components (1 hour)

• Create components/ui/StatusBadge.tsx:
  • Color-coded status indicators:
    • DRAFT (gray)
    • PENDING_PAYMENT (yellow)
    • PAYMENT_RECEIVED (blue)
    • PENDING_DELIVERY (orange)
    • DELIVERED (purple)
    • COMPLETED (green)
    • DISPUTED (red)
    • CANCELLED (dark gray)
  • Icon support per status
  • Animated state changes
  • Tooltip with details
• Build components/ui/TransactionCard.tsx:
  • Compact transaction display
  • Product image thumbnail
  • Price and status display
  • Buyer/seller info
  • Action buttons
  • Responsive grid layout
• Implement components/ui/NotificationToast.tsx:
  • Success, error, warning, info variants
  • Auto-dismiss with timer
  • Action buttons support
  • Stack multiple toasts
  • Swipe to dismiss on mobile
• Create components/ui/LoadingStates.tsx:
  • Full-page loader
  • Inline spinners
  • Skeleton screens for:
    • Transaction list
    • Form sections
    • Dashboard cards
  • Progress bar for uploads
  • Shimmer effects

5. Settings Panel Component (1 hour)

• Create components/layout/SettingsPanel.tsx:
  • Slide-out panel from right
  • Settings categories:
    • Appearance (theme, language)
    • Notifications preferences
    • Security settings
    • Payment methods
    • Account information
• Implement theme switcher:
  • Light/Dark/System modes
  • Preview before applying
  • Persist preference
  • Smooth transitions
• Add language selector:
  • Turkish/English toggle
  • Flag icons
  • RTL support ready
  • Instant preview
• Build notification settings:
  • Email notifications toggle
  • SMS notifications toggle
  • Push notifications (PWA ready)
  • Notification frequency
  • Quiet hours setting
• Create help integration:
  • FAQ accordion
  • Contact support button
  • Live chat widget placeholder
  • Documentation links
  • Video tutorials section

🔧 Technical Context

Design System Principles

• Consistency: Unified look across all components
• Accessibility: WCAG 2.1 AA compliance
• Performance: Optimized bundle size
• Customization: Easy theming and branding
• Responsiveness: Mobile-first approach

Component Architecture

• Composition: Build complex from simple components
• Separation: Logic separate from presentation
• Reusability: DRY principle for components
• Testing: Each component independently testable
• Documentation: Storybook-ready structure

Responsive Design Strategy

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px - 1440px
• Wide: 1440px+

Performance Considerations

• Lazy load heavy components
• Use CSS-in-JS sparingly
• Optimize image loading
• Minimize re-renders
• Code split by route

✅ Acceptance Criteria

• All components render correctly across devices
• Dark mode works without flickers
• Navigation is intuitive and accessible
• Progress indicator accurately reflects state
• Status badges have correct colors
• Settings panel saves preferences
• Loading states appear during async operations
• All components follow design system

👥 Developer Assignment

Lead Developer: @teczopio (Enes)
Role: UI Components & Design System
Availability for Questions: Slack #dev-design channel

---

This task is part of the 2-day MVP sprint for the Paylox Escrow System