KODA ReactJS Developer Tasks

Complete Task Breakdown & Specifications

Created: October 31, 2025
Team: ReactJS Development
Total Hours: 912
Total Tasks: 67

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

Milestone 1: Setup & Architecture

86H
Milestone: M1 Total Tasks: 8
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

Milestone 2: KODA Website - Core Pages

76H
Milestone: M2 Total Tasks: 6
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

Milestone 3: KODA CORE - Customer Management

162H
Milestone: M3 Total Tasks: 12
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

\n

Milestone 4: KODA CORE - Reservations

78H
Milestone: M4 Total Tasks: 5
RE-M4-001 22H Critical Path

Reservations Calendar View

  • Install and configure FullCalendar or similar library
  • Create calendar view with day, week, and month views
  • Implement resource columns (by staff, by room, by service)
  • Display reservations as colored blocks on calendar
  • Implement drag-and-drop to reschedule appointments
  • Create color-coding by reservation status
  • Add time slot highlighting (available, booked, blocked)
  • Implement click on time slot to create new reservation
  • Create reservation details popover on hover
  • Implement click on reservation to open details dialog
  • Add filters (by branch, service, staff, room)
  • Create "Today" quick navigation button
  • Implement working hours display (gray out non-working hours)
  • Add legend for status colors
RE-M4-002 18H Critical Path

Add/Edit Reservation Dialog

  • Create reservation form dialog
  • Add customer search/select field (autocomplete)
  • Implement service selection dropdown
  • Create staff selection (filtered by service capability)
  • Add room selection (filtered by availability)
  • Implement date and time pickers
  • Display duration based on service selection
  • Add notes field for special instructions
  • Implement recurring reservation option
  • Create package selection if customer has packages
  • Show price calculation
  • Add confirmation button with availability check
  • Display conflict warnings if time slot busy
  • Implement "Book Anyway" override (admin only)
RE-M4-003 14H High

Reservation Details & Status Management

  • Create reservation details dialog
  • Display all reservation information (customer, service, staff, room, time)
  • Implement status change buttons (Confirmed, Checked-in, Completed, Cancelled, No-Show, Late)
  • Add cancellation reason dropdown on cancel
  • Create notes editing section
  • Implement rescheduling functionality
  • Add "Send Reminder" button (SMS/WhatsApp)
  • Show reservation history/audit log
  • Display package deduction if applicable
  • Add "Convert to Follow-up" button
  • Create print reservation slip functionality
RE-M4-004 12H Medium

Reservation Confirmation & Reminders System

  • Create bulk confirmation interface
  • Implement "Send Confirmations" button for upcoming reservations
  • Display confirmation status per reservation (sent, failed, confirmed, cancelled)
  • Create automatic reminder schedule configuration UI
  • Implement "Send Reminder Now" button
  • Display reminder history per reservation
  • Add message template preview
  • Create manual SMS/WhatsApp send dialog
  • Implement customer response tracking
  • Show confirmation rate statistics
RE-M4-005 12H Medium

Waiting List Management

  • Create waiting list page
  • Implement add customer to waiting list dialog
  • Display waiting list with customer info, desired service, date range
  • Add priority flag functionality
  • Implement "Notify Available Slot" button
  • Create automatic matching with cancelled slots
  • Show waiting list position
  • Add remove from waiting list functionality
  • Implement bulk notifications
  • Display notification history
\n

Milestone 5: KODA CORE - POS (Point of Sale)

72H
Milestone: M5 Total Tasks: 6 (5 + 1 Buffer)
RE-M5-001 16H Critical Path

POS Interface Layout

  • Create POS page layout (items panel, cart panel, payment panel)
  • Implement customer search bar with autocomplete
  • Display selected customer info card
  • Create product/service categories sidebar
  • Implement product/service grid display with images and prices
  • Create shopping cart component
  • Display cart items with quantity controls
  • Show cart subtotal, tax, discounts, and total
  • Implement item search functionality
  • Add barcode scanner input support
  • Create responsive layout for tablet use
  • Add "Hold" and "Retrieve" transaction buttons
RE-M5-002 14H High

POS Cart Management

  • Implement add item to cart functionality
  • Create quantity increase/decrease buttons
  • Add remove item from cart functionality
  • Implement item price editing (with permission check)
  • Create discount dialog (percentage or fixed amount)
  • Add discount approval workflow UI if required
  • Implement package selection if customer has packages
  • Display package session deduction
  • Create notes field per line item
  • Implement tax calculation display
  • Add clear cart button with confirmation
  • Create cart summary component
RE-M5-003 16H Critical Path

POS Payment Dialog

  • Create payment dialog modal
  • Display transaction total prominently
  • Implement payment method selection (Cash, Card, Balance, Points, Mixed)
  • Create cash payment interface with change calculation
  • Implement card payment interface
  • Add customer balance payment option
  • Create points redemption interface
  • Implement split payment (multiple payment methods)
  • Display payment summary
  • Add print receipt button
  • Create email receipt option
  • Implement payment confirmation and success feedback
  • Add "Park Transaction" functionality
RE-M5-004 12H Medium

Invoice Management

  • Create invoice list page
  • Implement invoice search and filters (date range, customer, status)
  • Display invoice summary cards (total, paid, pending, cancelled)
  • Create invoice details view
  • Implement invoice print functionality (PDF generation)
  • Add email invoice button
  • Create invoice cancellation dialog with reason
  • Implement refund processing interface
  • Display invoice audit trail
  • Add export invoices functionality
RE-M5-005 14H Medium

Cash Drawer Management

  • Create cash drawer page
  • Implement open drawer dialog (starting balance entry)
  • Create cash count interface (bills and coins breakdown)
  • Display expected vs actual cash
  • Implement close drawer dialog with final count
  • Create discrepancy resolution workflow
  • Display cash drawer history
  • Add cash-in/cash-out recording functionality
  • Implement shift summary report
  • Create cash drawer audit trail
RE-M5-006-BUFFER 40H BUFFER

Phase 1 Frontend Security Testing & Vulnerability Resolution (BUFFER)

THIS IS BUFFER TIME - Can be reallocated if no security issues found.
SAST (Static Application Security Testing):
  • Run ESLint security plugin checks
  • Check for hardcoded secrets (API keys, tokens)
  • Analyze dependency vulnerabilities (npm audit)
  • Review authentication and authorization implementation
  • Check for XSS vulnerabilities in user input handling
  • Verify CSRF protection mechanisms
  • Check for insecure localStorage usage
  • Review API call security (HTTPS, token handling)
DAST (Dynamic Application Security Testing):
  • Test authentication flows for bypass vulnerabilities
  • Check for session management issues
  • Test input validation on all forms
  • Verify authorization checks work correctly
  • Test for clickjacking vulnerabilities
  • Check for sensitive data exposure in browser
  • Test CORS configuration
  • Verify secure cookie flags
Resolution Work:
  • Fix any identified vulnerabilities
  • Update dependencies with security patches
  • Refactor insecure code patterns
  • Add additional security controls if needed
  • Re-test after fixes applied
  • Document security improvements made
Phase Milestone(s) Hours Tasks
Phase 1 M1-M5 462 31
Phase 1 Buffer M5 Security 40 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