Compass - Nimbly Documentation

Sites Modal Implementation

4 min read

Overview

This document provides a comprehensive overview of all site-related modal components in the audit-admin application. These modals handle various site management operations including bulk uploads, scheduling, and site blocking.

1. SitesBulkModal

Location: /src/components/sites/SitesBulkModal/SitesBulkModal.tsx

Purpose: Handles bulk upload of sites via Excel file.

Key Features:

  • Excel file upload for creating multiple sites at once
  • Template download functionality
  • Error handling with line-by-line error reporting
  • Upload progress tracking
  • File format validation (XLSX only)

State Management:

  • Redux state: state.sites.modalVisible.bulk
  • Actions: showBulkModal(), dismissBulkModal()

Key Functions:

  • generateSitesExcel() - Generates Excel template
  • uploadBulkSites() - Handles bulk site upload

UI Components:

  • 4-step process guide
  • File upload area with drag-drop support
  • Error display section
  • Warning message about existing sites

2. SitesQuickScheduleModal (SitesScheduleModal)

Location:

  • Container: /src/components/sites/SitesQuickScheduleModal/SitesQuickScheduleModal.ts
  • Component: /src/components/sites/SitesQuickScheduleModal/SitesQuickScheduleModalContainer.js

Purpose: Quick scheduling for site audits with calendar interface.

Key Features:

  • Schedule type selection (recurring vs custom)
  • Frequency options (daily, weekly, monthly)
  • Calendar date picker for custom schedules
  • Team/multi-site support
  • Questionnaire selection
  • Time slot configuration

State Management:

  • Redux state: state.sites.modalVisible.schedule
  • Actions: showScheduleModal(), dismissScheduleModal()
  • Additional state for [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) configuration

Schedule Types:

  • Recurring: Daily, Weekly (specific days), Monthly (specific dates)
  • Custom: Individual date selection via calendar

Special Features:

  • Ongoing report detection and warning
  • Multi-site section summary display
  • Firebase integration for schedule persistence

3. SiteBulkScheduleEditModal

Location: /src/components/sites/SiteBulkScheduleEditModal/SiteBulkScheduleEditModal.tsx

Purpose: Bulk editing of existing site schedules via Excel upload.

Key Features:

  • Download current schedules as Excel template
  • Upload modified schedule Excel file
  • Error validation and reporting
  • Loading states for download/upload operations

State Management:

  • Redux state: state.sites.modalVisible.bulkScheduleEdit
  • Actions: showBulkScheduleEditModal(), dismissBulkScheduleEditModal()

Key Functions:

  • downloadBulkScheduleTemplate() - Downloads current schedules
  • uploadBulkScheduleEdit() - Processes schedule updates

UI Flow:

  1. Download template with current schedules
  2. Edit schedule data in Excel
  3. Upload modified file
  4. View validation results/errors

4. SiteBulkScheduleModal

Location: /src/components/sites/SiteBulkScheduleModal/SiteBulkScheduleModal.tsx

Purpose: Create new schedules in bulk via Excel upload.

Key Features:

  • Template download for schedule creation
  • Replace existing schedules option (Yes/No radio buttons)
  • Excel file upload and validation
  • Error reporting with line numbers

State Management:

  • Redux state: state.sites.modalVisible.bulkSchedule
  • Actions: showBulkScheduleModal(), dismissBulkScheduleModal()

Key Functions:

  • downloadBulkScheduleUploadTemplate() - Downloads blank template
  • uploadBulkSchedule() - Creates new schedules

Options:

5. SiteBlockConfirmationModal (SiteConfirmModal)

Location: /src/components/sites/SiteBlockConfirmationModal/SiteBlockConfirmationModal.tsx

Purpose: Confirmation dialog for blocking/unblocking sites.

Key Features:

  • Block/Unblock site confirmation
  • Shows count of active schedules that will be affected
  • Loading state during operation
  • Automatic refresh after action completion

State Management:

  • Redux state: state.sites.modalVisible.confirmBlockSite
  • Actions: showConfirmModal(), dismissConfirmModal()
  • Additional state for block operation status

Key Functions:

  • toggleBlockSiteAsync() - Handles block/unblock operation
  • checkSiteScheduleCountAsync() - Fetches active schedule count

UI States:

  • Loading spinner during operation
  • Different messages for block vs unblock
  • Schedule count display for block operations

Common Patterns

All modals follow a similar structure:

<Overlay onClick={handleCloseModal}>
  <Modal onClick={e => e.stopPropagation()}>
    {/* Modal content */}
  </Modal>
</Overlay>

State Management Pattern

modalVisible: {
  bulk: false,
  schedule: false,
  bulkSchedule: false,
  bulkScheduleEdit: false,
  confirmBlockSite: false
}

Common Actions

  • Show modal: Sets specific modal visibility to true
  • Dismiss modal: Sets specific modal visibility to false
  • Reset state on dismiss

Error Handling

  • Line-by-line error reporting for bulk operations
  • Toast notifications for success/failure
  • Visual error states with red styling

File Upload Pattern

  1. File selection/drag-drop
  2. Format validation (XLSX)
  3. Upload progress indication
  4. Success/error feedback
  5. Option to remove selected file

Usage in Sites Page

All modals are lazy-loaded in the sites page (/src/pages/sites.js):

const SitesBulkModal = lazy(() => import('../components/sites/SitesBulkModal/SitesBulkModal.tsx'));
const SitesScheduleModal = lazy(() => import('../components/sites/SitesQuickScheduleModal/SitesQuickScheduleModal'));
const SitesScheduleEditModal = lazy(() => import('../components/sites/SiteBulkScheduleEditModal/SiteBulkScheduleEditModal'));
const SitesBulkSchedule = lazy(() => import('../components/sites/SiteBulkScheduleModal/SiteBulkScheduleModal'));
const SitesConfirmModal = lazy(() => import('../components/sites/SiteBlockConfirmationModal/SiteBlockConfirmationModal'));

Styling Patterns

Common Styled Components

  • Overlay: Full-screen overlay with click-to-close
  • Modal: Centered modal container
  • Button: Primary action buttons
  • TertiaryCancel: Cancel buttons with transparent background
  • FileContainer: File upload status display
  • ErrorBox: Error message container

Color Scheme

Integration Points

Redux Integration

  • All modals connected to Redux store
  • Modal visibility managed in sites reducer
  • Actions dispatched from parent components

Firebase Integration

  • Schedule data persistence
  • Real-time updates for multi-site schedules
  • Site data fetching

Excel Processing

  • XLSX file format validation
  • Template generation utilities
  • Bulk data processing

Best Practices

  1. Lazy Loading: All modals are lazy-loaded to improve initial page load
  2. Error Handling: Comprehensive error handling with user-friendly messages
  3. Loading States: Clear loading indicators during async operations
  4. Confirmation: Critical actions (like blocking) require confirmation
  5. State Cleanup: Modal state is reset on dismiss
  6. Accessibility: Click-outside-to-close pattern
  7. Validation: Client-side validation before server requests

Graph View