Skip to main content

Phase 8: Frontend Development - KICKOFF 🎨

Started: October 26, 2025
Estimated Time: 120 hours (3 weeks)
Status: IN PROGRESS 🚀

🎯 Frontend Development Plan​

Overview​

Build a beautiful, intuitive UI for managing recipient groups and rules in the frontend PWA app.

Target App: apps/frontend-pwa
Tech Stack: React + TypeScript + Tailwind + React Query
Pages to Build: 2 main pages + supporting components

📋 Sprint Breakdown​

Sprint 1: API Integration Layer (Week 1 - 40h)​

Goal: Connect to backend APIs with error handling and state management

Day 1-2: API Client Setup (16h)​

  • Create RecipientGroupsAPI service
  • Create RecipientRulesAPI service
  • Set up React Query hooks
  • Error handling utilities
  • Loading state management
  • Success/error toast notifications

Day 3-4: Core Hooks (16h)​

  • useRecipientGroups() - List & CRUD
  • useGroupMembers() - Member management
  • useRecipientRules() - List & CRUD
  • usePreviewRecipients() - Preview functionality
  • Query invalidation strategies
  • Optimistic updates

Day 5: Testing & Documentation (8h)​

  • API integration tests
  • Hook usage examples
  • Error scenario handling
  • Documentation

Sprint 2: Core Components (Week 2 - 40h)​

Goal: Build reusable components for groups and rules

Day 1-2: Group Components (16h)​

  • RecipientGroupCard - Display group info
  • GroupMemberCard - Display member info
  • AddMemberForm - Add member modal
  • GroupFormFields - Reusable form fields
  • Empty states
  • Loading skeletons

Day 3-4: Rule Components (16h)​

  • RecipientRuleCard - Display rule info
  • RuleFormFields - Reusable form fields
  • TargetingTypeSelector - Radio/dropdown for targeting
  • PreviewRecipientsModal - Show who will receive
  • Priority indicators
  • Status badges

Day 5: Shared Components (8h)​

  • MemberTypeIcon - Icon for email/phone/user
  • ChannelBadge - Badge for email/sms/whatsapp
  • ValidationFeedback - Error/success messages
  • SearchFilter - Filter groups/rules
  • SortControls - Sort options

Sprint 3: Main Pages (Week 3 - 40h)​

Goal: Complete pages for managing groups and rules

Day 1-2: Groups Management Page (16h)​

  • /settings/recipient-groups route
  • List all groups with filters
  • Create new group modal
  • Edit group modal
  • Delete group confirmation
  • Member management section
  • Add member modal
  • Remove member confirmation
  • Search and sort functionality

Day 3-4: Rules Management Page (16h)​

  • /settings/recipient-rules route
  • List all rules with filters
  • Create new rule modal
  • Edit rule modal
  • Delete rule confirmation
  • Deactivate/activate toggle
  • Preview recipients button
  • Priority reordering (drag & drop optional)

Day 5: Polish & Integration (8h)​

  • i18n (English + Spanish)
  • Responsive design (mobile/tablet)
  • Loading states
  • Error states
  • Empty states
  • Success notifications
  • Integration with settings menu

🎨 Design System​

Color Scheme​

// Tailwind classes to use
groups: "bg-blue-50 border-blue-200 text-blue-900"
rules: "bg-purple-50 border-purple-200 text-purple-900"
members: "bg-green-50 border-green-200 text-green-900"
preview: "bg-orange-50 border-orange-200 text-orange-900"

Component Patterns​

  • Cards for entities (groups, rules, members)
  • Modals for create/edit forms
  • Toasts for notifications
  • Tables for lists
  • Badges for status/types

📁 File Structure​

apps/frontend-pwa/src/
├── api/
│   ├── recipient-groups.api.ts      (NEW)
│   └── recipient-rules.api.ts       (NEW)
├── hooks/
│   ├── useRecipientGroups.ts        (NEW)
│   ├── useGroupMembers.ts           (NEW)
│   ├── useRecipientRules.ts         (NEW)
│   └── usePreviewRecipients.ts      (NEW)
├── components/
│   ├── recipient-groups/
│   │   ├── RecipientGroupCard.tsx   (NEW)
│   │   ├── GroupMemberCard.tsx      (NEW)
│   │   ├── AddMemberForm.tsx        (NEW)
│   │   └── GroupFormFields.tsx      (NEW)
│   └── recipient-rules/
│       ├── RecipientRuleCard.tsx    (NEW)
│       ├── RuleFormFields.tsx       (NEW)
│       ├── TargetingTypeSelector.tsx(NEW)
│       └── PreviewRecipientsModal.tsx(NEW)
├── pages/
│   ├── RecipientGroupsPage.tsx      (NEW)
│   └── RecipientRulesPage.tsx       (NEW)
└── i18n/
    ├── locales/en.json               (UPDATE)
    └── locales/es.json               (UPDATE)

Estimated: ~30 new files, 2 updates

🚀 Immediate Next Steps (First 4 Hours)​

Step 1: API Integration Layer (2h)​

  1. Create RecipientGroupsAPI service
  2. Create RecipientRulesAPI service
  3. Add error handling
  4. Add TypeScript types

Step 2: React Query Hooks (2h)​

  1. Create useRecipientGroups() hook
  2. Create useGroupMembers() hook
  3. Test with backend API
  4. Handle loading/error states

✨ Success Criteria​

Week 1​

  • ✅ API client fully functional
  • ✅ React Query integrated
  • ✅ Can fetch groups/rules from backend
  • ✅ Can create/update/delete groups
  • ✅ Error handling working

Week 2​

  • ✅ All core components built
  • ✅ Components are reusable
  • ✅ Styled with Tailwind
  • ✅ Responsive design

Week 3​

  • ✅ Both pages complete
  • ✅ Full CRUD functionality
  • ✅ i18n (EN + ES)
  • ✅ Tested on mobile/tablet
  • ✅ Integrated in settings

🎯 Key Features to Build​

  1. Recipient Groups Management

    • List all groups for business
    • Create custom groups
    • Edit group details
    • Delete groups
    • Add members (users, emails, phones)
    • Remove members
    • View member details

  2. Recipient Rules Management

    • List all rules for business
    • Create targeting rules
    • Select targeting type (role/group/ad-hoc)
    • Set priority
    • Preview recipients
    • Activate/deactivate rules
    • Edit rules
    • Delete rules

  3. Preview Functionality

    • See who will receive communications
    • Filter by communication type
    • Filter by channel
    • Show source (rule/group/role)
    • Display contact info

📊 Technical Requirements​

API Integration​

  • ✅ Use Axios (already in project)
  • ✅ Use React Query for state
  • ✅ Handle errors gracefully
  • ✅ Show loading states
  • ✅ Optimistic updates

Forms​

  • ✅ Use react-hook-form (check if installed)
  • ✅ Validate on client side
  • ✅ Match backend validation rules
  • ✅ Show helpful error messages

UI/UX​

  • ✅ Use existing Tailwind theme
  • ✅ Match existing app design
  • ✅ Responsive (mobile-first)
  • ✅ Accessible (ARIA labels)
  • ✅ Loading skeletons
  • ✅ Empty states

🎉 Let's Build!​

Ready to create the first API service and hook! 🚀

Starting with: RecipientGroupsAPI service

Next: Create API integration layer (2h)