KODA ReactJS Developer Tasks
Complete Task Breakdown & Specifications
Table of Contents
Overview
The ReactJS team is responsible for building the KODA Website (public-facing) and KODA CORE (admin panel). Both applications are built using React 18+ with TypeScript, providing modern, responsive user interfaces.
Key Technologies
- React 18+ with Hooks
- TypeScript
- Vite (Build Tool)
- Material-UI (MUI) v5 for KODA CORE
- Tailwind CSS for KODA Website
- React Query (TanStack Query) for server state
- Zustand for client state management
- React Router v6
- Axios for API calls
Important Notes
- Two separate applications: KODA Website and KODA CORE
- All components must be responsive (mobile, tablet, desktop)
- Follow design system guidelines from UI/UX team
- Implement comprehensive error handling
Phase 1 - Foundation and Core Development
32 Tasks
502 Hours
55% of Total
RE-M1-001
8H
Medium
Project Initialization and Build Setup
- Initialize React 18+ project with Vite for KODA Website
- Initialize React 18+ project with Vite for KODA CORE
- Configure TypeScript with strict mode
- Setup ESLint and Prettier with team standards
- Configure path aliases (@/, @components/, etc.)
- Setup environment variable management (.env files)
- Configure build optimization and code splitting
- Setup development server with HMR
- Create initial folder structure (components, pages, hooks, utils, types, etc.)
RE-M1-002
12H
Medium
Design System and UI Library Setup
- Install and configure Material-UI (MUI) v5 for KODA CORE
- Install and configure Tailwind CSS for KODA Website
- Create theme configuration matching brand guidelines (gray, white, bronze colors)
- Setup custom typography system
- Create color palette with primary, secondary, accent colors
- Configure responsive breakpoints
- Setup CSS-in-JS solution (Emotion for MUI)
- Create global styles and CSS reset
- Setup icon library (Material Icons + custom icons)
- Create design tokens file
RE-M1-003
10H
Medium
State Management and API Client Setup
- Install and configure React Query (TanStack Query) for server state
- Install and configure Zustand for client state management
- Create API client with Axios
- Setup API base URL configuration
- Implement request/response interceptors
- Setup authentication token injection
- Create error handling middleware
- Configure request retry logic
- Setup query client with cache configuration
- Create custom hooks for API calls (useQuery, useMutation patterns)
RE-M1-004
8H
Medium
Routing and Navigation Setup
- Install and configure React Router v6
- Create routing structure for KODA Website (public pages)
- Create routing structure for KODA CORE (protected admin routes)
- Setup protected route wrapper component
- Implement role-based route guards
- Create navigation components (Navbar, Sidebar)
- Setup route-based code splitting with lazy loading
- Implement 404 page and error boundary
- Configure scroll restoration
- Setup navigation history management
RE-M1-005
14H
High
Authentication System Implementation
- Create login page for KODA CORE
- Implement authentication context/store
- Create login form with validation
- Integrate with backend authentication API
- Implement token storage (localStorage/sessionStorage)
- Setup automatic token refresh mechanism
- Create session timeout handling
- Implement "Remember Me" functionality
- Create logout functionality
- Setup authentication state persistence
- Implement redirect after login based on user role
- Create password recovery flow UI
RE-M1-006
10H
Medium
Multi-Tenant Context and Branch Selection
- Create multi-tenant context provider
- Implement API key injection in requests
- Create branch selection screen for KODA CORE
- Implement branch switching functionality
- Store selected branch in state and localStorage
- Display current branch in UI header
- Create branch-specific data filtering logic
- Implement sub-application context
- Setup connection switching for multi-tenant data
- Create hooks for accessing tenant context (useAppId, useBranch)
RE-M1-007
16H
High
Common UI Components Library
- Create Button component with variants (primary, secondary, outline, ghost)
- Create Input components (text, number, email, password, search)
- Create Select/Dropdown component
- Create DatePicker and TimePicker components
- Create Modal/Dialog component
- Create Table component with sorting and pagination
- Create Card component
- Create Alert/Toast notification system
- Create Loading spinner and skeleton components
- Create Badge and Chip components
- Create Tab component
- Create Accordion/Collapse component
- Create Tooltip component
- Create Avatar component
- Document all components with examples
RE-M1-008
8H
Medium
Form Validation and Management System
- Install and configure React Hook Form
- Install and configure Yup for schema validation
- Create form validation schemas for common forms
- Create reusable form field components with error handling
- Setup form submission handling with loading states
- Create form error display component
- Implement client-side validation rules
- Create custom validation hooks
- Setup form state persistence (draft saving)
- Create multi-step form component
RE-M2-001
18H
High
Website Landing Page (Homepage)
- Create hero section with CTA button
- Implement "Smart Luxury" concept showcase
- Create services overview section
- Implement image gallery/slider for facility photos
- Create testimonials carousel
- Implement statistics counter (clients served, satisfaction rate)
- Create "Why KODA?" section highlighting unique value
- Implement responsive design for mobile/tablet/desktop
- Add smooth scroll animations (intersection observer)
- Optimize images with lazy loading
- Create social media links footer
- Implement SEO meta tags
RE-M2-002
14H
Medium
Services Page
- Create services listing page with categories (Laser, Beauty Elite)
- Implement service cards with images and descriptions
- Create service detail modal/page
- Display pricing information (without revealing actual prices)
- Implement service filtering by category
- Create "Book Now" CTA buttons linking to app download
- Add service comparison feature
- Implement service search functionality
- Create FAQ section per service
- Add before/after gallery (if allowed)
- Optimize for SEO
RE-M2-003
10H
Medium
About Us Page
- Create about section with company story
- Implement team showcase (optional)
- Create values and mission statement section
- Add facility tour virtual gallery
- Implement equipment showcase
- Create certifications and accreditations display
- Add contact information section
- Implement embedded Google Maps
- Create responsive layout
- Add breadcrumb navigation
RE-M2-004
12H
Medium
Contact Us Page
- Create contact form with validation
- Implement form submission to backend
- Add Google Maps integration showing location
- Display phone numbers and email
- Display working hours
- Create social media links section
- Implement form success/error feedback
- Add reCAPTCHA integration
- Create "Quick Questions" FAQ section
- Implement "Schedule a Call" feature
- Setup email notification on form submission
RE-M2-005
10H
Medium
Website Global Navigation and Footer
- Create responsive navigation bar
- Implement mobile hamburger menu
- Create sticky header on scroll
- Implement active route highlighting
- Create footer with sitemap links
- Add newsletter subscription form in footer
- Implement social media icons
- Add "Download App" prominent CTA buttons
- Create language switcher (AR/EN)
- Implement smooth transitions and animations
RE-M3-001
16H
High
KODA CORE Dashboard Layout
- Create main dashboard layout with sidebar and header
- Implement collapsible sidebar navigation
- Create breadcrumb navigation system
- Implement user profile dropdown in header
- Display current branch in header
- Create notification bell icon with dropdown
- Implement sidebar menu items with icons
- Setup nested menu items for sub-modules
- Create responsive layout (mobile, tablet, desktop)
- Implement dark/light theme toggle (optional)
- Create quick action buttons in header
- Setup workspace area for main content
RE-M3-002
18H
High
Customers List Page
- Create customers data table with pagination
- Implement column sorting (name, ID, phone, join date)
- Create advanced search with multiple filters (name, phone, ID, tags)
- Implement customer status filters (active, inactive, blacklisted)
- Create quick actions menu per row (view, edit, delete)
- Implement bulk selection with bulk actions
- Add "Add New Customer" button
- Create export functionality (CSV, Excel)
- Implement infinite scroll or pagination controls
- Add customer avatar display
- Show customer tier badge (Insider, Ambassador, Royal)
- Create responsive table for mobile
RE-M3-003
16H
High
Add/Edit Customer Dialog
- Create customer form modal/dialog
- Implement multi-step form or tabbed form
- Add fields: Full Name (4 parts AR + EN), Gender, Date of Birth
- Add phone number fields (multiple phones with primary flags)
- Add email fields (multiple emails)
- Add address fields (multiple addresses)
- Add referral source dropdown
- Add sales representative assignment
- Add customer tags selection
- Add profile photo upload
- Implement form validation with error messages
- Create "Quick Add" simplified form
- Implement auto-save draft functionality
- Create duplicate customer detection on save
RE-M3-004
14H
High
Customer Profile Page - Overview Tab
- Create customer profile page with tabbed navigation
- Implement profile header with avatar and basic info
- Display customer tier badge and points
- Create editable basic information section
- Display customer status (active, suspended, blacklisted)
- Show customer lifetime value (CLV)
- Display join date and last visit date
- Create quick actions toolbar (send message, add note, block)
- Implement activity timeline (recent visits, purchases)
- Display assigned sales rep
- Show customer acquisition source
RE-M3-005
12H
Medium
Customer Profile - Phone & Email Management Tabs
- Create phone numbers tab with list of customer phones
- Implement add/edit/delete phone functionality
- Add "Set as Primary" button for calls and messages
- Show verification status badge per phone
- Create email tab with list of customer emails
- Implement add/edit/delete email functionality
- Add email verification status
- Create "Send Verification" button per phone/email
- Implement inline editing
- Show last verified date
RE-M3-006
16H
High
Customer Profile - Balance & Payments Tab
- Create balance overview card (current balance, credit limit)
- Implement transaction history table (payments, refunds, adjustments)
- Add "Add Payment" button opening payment dialog
- Create payment dialog with amount, method, notes fields
- Implement "Cancel Payment" functionality with confirmation
- Create "Refund" dialog
- Implement "Cash Return" functionality
- Create "Balance Adjustment" dialog (admin only)
- Display payment method icons
- Show transaction timestamps and staff member who processed
- Implement export transactions to PDF/Excel
- Create balance summary charts (optional)
RE-M3-007
18H
High
Customer Profile - Packages Tab
- Create packages list showing all customer packages
- Display package details card (name, sessions total, sessions remaining, expiry date)
- Add progress bar for session consumption
- Implement "Add Package" button opening package assignment dialog
- Create package assignment dialog (select package, set price, discount)
- Implement "Cancel Package" with confirmation and refund calculation
- Create "Add Discount" dialog for package
- Implement "Extend Expiry Date" dialog
- Create "Adjust Sessions" dialog (increase/decrease)
- Implement "Transfer Package" to another customer
- Add "Freeze Package" functionality
- Show package status badges (active, expired, frozen, cancelled)
RE-M3-008
14H
High
Customer Profile - Reservations Tab
- Create reservations history table
- Display upcoming reservations separately
- Show reservation details (service, date/time, staff, room, status)
- Implement "Book Appointment" button
- Create quick booking dialog
- Add "Edit Reservation" functionality
- Implement "Cancel Reservation" with cancellation reasons
- Create status update buttons (Checked-in, Completed, No-Show, Late)
- Add "Convert to Follow-up" button
- Display reservation notes
- Implement calendar view of reservations
- Show color-coded status badges
RE-M3-009
10H
Medium
Customer Profile - Notes & Tags Tabs
- Create notes tab with list of customer notes
- Implement add note dialog (text area, mark as private/public)
- Display note timestamp and author
- Add edit/delete note functionality
- Create tags tab showing assigned tags
- Implement tag assignment (search and select tags)
- Add remove tag functionality
- Create visual tag chips
- Implement tag filtering across customers
- Show tag usage count
RE-M3-010
12H
Medium
Customer Profile - Files & Documents Tab
- Create files tab with document list
- Implement file upload functionality (drag & drop, select)
- Display uploaded files with thumbnails (images) or icons (PDFs)
- Add file categorization (medical, consent, before/after photos)
- Implement file download functionality
- Create lightbox for image viewing
- Add delete file functionality with confirmation
- Display file metadata (upload date, size, uploader)
- Implement file search and filtering
- Create gallery view for before/after photos
RE-M3-011
10H
Medium
Customer Profile - Forms & Consent Tab
- Create forms tab showing signed consent forms
- Display list of forms with signature status
- Implement "Send Form" button to send form to customer
- Show form details (form name, sent date, signed date)
- Create form preview modal
- Add resend form functionality
- Display signature image/data
- Implement form version tracking
- Show form expiry dates if applicable
RE-M3-012
12H
Medium
Bulk Customer Operations
- Implement bulk customer import from CSV/Excel
- Create import mapping interface (map CSV columns to fields)
- Add import preview and validation
- Implement bulk export functionality
- Create bulk tag assignment
- Implement bulk SMS/email sending interface
- Create bulk delete with confirmation
- Add bulk status change (activate, suspend, blacklist)
- Implement duplicate detection and merging tool
- Create import/export job progress tracking
RE-M2-006
12H
High
Website SEO and Performance Optimization
- Implement React Helmet for dynamic meta tags
- Setup Open Graph tags for social media sharing
- Create sitemap.xml generation
- Implement lazy loading for images
- Setup code splitting for optimal bundle size
- Implement service worker for caching (PWA)
- Optimize images with WebP format
- Setup Google Analytics integration
- Implement structured data (JSON-LD) for SEO
- Configure robots.txt
- Optimize Lighthouse score (Performance, SEO, Accessibility > 90)
Summary
Total Development Hours by Phase
| Phase | Milestone(s) | Hours | Tasks |
|---|---|---|---|
| Phase 1 | M1-M5 | 462 | 31 |
| Phase 1 Buffer | M5 Security | \n40 | 1 |
| Phase 2 | M11-M12 | 138 | 11 |
| Phase 2 Buffer | M12 Security | 20 | 1 |
| Phase 3 | M16-M18 | 222 | 22 |
| Phase 3 Buffer | M18 Security | 30 | 1 |
| GRAND TOTAL | - | 912 | 67 |
Tasks Breakdown by Application
| Application | Phase 1 | Phase 2 | Phase 3 | Total Hours |
|---|---|---|---|---|
| KODA Website | 94 | 26 | 0 | 120 |
| KODA CORE | 368 | 112 | 222 | 702 |
| Security Buffers | 40 | 20 | 30 | 90 |
| TOTAL | 502 | 158 | 252 | 912 |