Compass - Nimbly Documentation

Sites Component Directory

4 min read

Location: /src/components/sites/

Main Components

1. SitesManager (/src/components/sites/SitesManager/SitesManager.js)

  • Main container component for the sites management page
  • Manages site list view with active/blocked tabs
  • Handles pagination and sorting
  • Integrates with Redux for state management
  • Shows activity history modal for individual sites
  • Contains tabs for Active and Blocked sites

2. SitesList (/src/components/sites/SitesList/SitesList.js)

  • Renders the list/table of sites
  • Displays site information in rows
  • Handles site selection and actions

3. SitesListHeader (/src/components/sites/SitesListHeader/SitesListHeader.js)

  • Header component for the sites list
  • Contains search, filters, and bulk action buttons

4. Site (/src/components/sites/Site/)

  • Site.ts - Site type definitions
  • SiteContainer.tsx - Container component for individual site
  • utils/fetchSiteData.ts - Utility for fetching site data
  • utils/storeAs.ts - Storage utility

5. SiteDetails (/src/components/sites/SiteDetails/)

  • Detailed view/edit form for individual sites
  • SiteDetails.ts - Type definitions
  • SiteDetailsContainer.tsx - Main container with form logic (2000+ lines)
  • SiteDetailsInputMultipleUsers.tsx - Multi-user input component
  • Components:
    • AssignedDepartment.tsx - Department assignment
    • FormControl.tsx - Form control wrapper
    • Label.tsx - Label component
  • Hooks:
    • useRadiusList.ts - Radius list management
    • useSiteActivityHistory.ts - Activity history tracking

6. SiteSchedule (/src/components/sites/SiteSchedule/)

  • Complex scheduling functionality for sites
  • SiteScheduleContainer.tsx - Main [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) container
  • SiteScheduleSingle.tsx - Single site scheduling
  • SiteScheduleTeam.tsx - Team scheduling
  • SiteScheduleAddQuestionnaireModal.tsx - Add questionnaire modal
  • Multiple tab components for [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) selection
  • Extensive utility functions for [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) validation and management

7. SiteTabNavigation (/src/components/sites/SiteTabNavigation.tsx)

  • Navigation tabs for site pages

1. SitesBulkModal (/src/components/sites/SitesBulkModal/)

  • Bulk site upload functionality
  • SitesBulkModal.tsx - Main modal component (469 lines)
  • generateSitesExcel.ts - Generate Excel template
  • uploadBulkSites.ts - Handle bulk upload
  • 4-step process: Download template, fill data, select file, upload

2. SiteBulkScheduleModal (/src/components/sites/SiteBulkScheduleModal/)

  • Bulk [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) upload for multiple sites
  • SiteBulkScheduleModal.tsx - Main modal (554 lines)
  • Utils:
    • generateExcelTemplate.ts
    • uploadBulkSchedule.ts
  • Includes replace [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) option

3. SiteBulkScheduleEditModal (/src/components/sites/SiteBulkScheduleEditModal/)

  • Edit [schedules](../Schedule/Schedule Listing/ScheduleListingOverview.md) in bulk
  • SiteBulkScheduleEditModal.tsx
  • Utils:
    • downloadBulkScheduleTemplate.ts
    • downloadBulkScheduleUploadTemplate.ts
    • uploadBulkScheduleEdit.ts

4. SitesQuickScheduleModal (/src/components/sites/SitesQuickScheduleModal/)

  • Quick scheduling interface
  • SitesQuickScheduleModal.ts
  • SitesQuickScheduleModalContainer.js

5. SiteAddSKUModal (/src/components/sites/SiteAddSKUModal/)

  • Add SKU to sites functionality
  • SiteAddSKUModal.js

6. SiteBlockConfirmationModal (/src/components/sites/SiteBlockConfirmationModal/)

  • Confirmation dialog for blocking sites
  • SiteBlockConfirmationModal.tsx
  • SiteBlockConfirmationModal.test_deprecated.tsx

7. SiteSaveTemplateModal (/src/components/sites/SiteSaveTemplateModal/)

  • Save site configuration as template
  • SiteSaveTemplateModal.tsx

8. SiteImportTemplateModal (/src/components/sites/SiteImportTemplateModal/)

  • Import site configuration from template
  • SiteImportTemplateModal.ts
  • SiteImportTemplateModalContainer.tsx

9. SiteSupervisorModal (/src/components/sites/SiteSupervisorModal/)

  • Manage site supervisors
  • SiteSupervisorModal.tsx

10. SiteRemoveAuditorModal (/src/components/sites/SiteRemoveAuditorModal/)

  • Remove auditor from site
  • SiteRemoveAuditorModal.tsx

Supporting Components

1. SiteGroupManager (/src/components/sites/SiteGroupManager/)

  • Site group management functionality
  • SiteGroupManager.tsx
  • SiteGroupManagerHeader.tsx
  • SiteGroupEditor/ - Edit site groups
    • SiteGroupEditor.tsx
    • SiteGroupEditor.Container.tsx
    • SiteGroupEditor.Styles.ts
    • SiteGroupEditor.Types.d.ts
  • SiteGroupList/ - List site groups
    • SiteGroupList.tsx
    • SiteGroupListItem.tsx

2. SiteScheduleActivity (/src/components/sites/SiteScheduleActivity/)

  • Activity tracking for [schedules](../Schedule/Schedule Listing/ScheduleListingOverview.md)
  • SiteScheduleActivity.tsx
  • SiteScheduleActivityFilters.tsx
  • SiteScheduleActivityTable.tsx

3. SiteOffDays (/src/components/sites/SiteOffDays/)

  • Manage site off days/holidays
  • SiteOffDays.tsx
  • SiteOffDaysContainer.tsx
  • SiteOffDays.test.tsx
  • Hook: useSiteOffDays.ts

4. SiteReports (/src/components/sites/SiteReports/)

  • Site reporting functionality
  • SiteReports.tsx
  • SiteReports.test.tsx

5. SiteReportsFilter (/src/components/sites/SiteReportsFilter/)

  • Report filters
  • SiteReportsFilter.tsx

6. SitePOList (/src/components/sites/SitePOList/)

  • Purchase order list for sites
  • SitePOList.js
  • SitePOListContainer.js

7. SiteSKUList (/src/components/sites/SiteSKUList/)

  • SKU list management for sites
  • SiteSKUList.js
  • SiteSKUListContainer.js

8. Site Editor Components

  • SiteEditorQuestionnaireConfig/ - Questionnaire configuration
    • SiteEditorQuestionnaireConfig.css
    • SiteEditorQuestionnaireConfig.js
  • SiteEditorQuestionnaireDeadline/ - Deadline management
    • SiteEditorQuestionnaireDeadline.tsx
    • ActiveSchedulePeriod.tsx
  • SiteEditorQuestionnaireSchedule/ - [Schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) editor
    • SiteEditorQuestionnaireSchedule.css
    • SiteEditorQuestionnaireSchedule.js
  • SiteEditorQuestionnaireTable/ - Questionnaire table view
    • SiteEditorQuestionnaireTable.css
    • SiteEditorQuestionnaireTable.js

9. Deprecated/Legacy

  • DEPRECATED_ScheduleFormField/ - Legacy [schedule](../Schedule/Schedule Listing/ScheduleListingOverview.md) form field
    • ScheduleFormField.css
    • ScheduleFormField.js
  • SiteMapsFormField/ - Maps integration
    • SiteMapsFormField.js

Utility Functions and Hooks

Global Hooks (/src/components/sites/hooks/)

  • useOngoingReports.ts - Track ongoing reports
  • useQuestionnaireList.js - Questionnaire list management

Global Utils (/src/components/sites/utils/)

  • generateCreateButton.tsx - Generate create button component

Key Features Summary

  1. Site Management: Create, edit, view, and manage sites
  2. [Bulk Operationss](../Bulk Operation/BulkOperationOverview.md): Upload sites and [schedules](../Schedule/Schedule Listing/ScheduleListingOverview.md) in bulk via Excel
  3. Scheduling: Complex scheduling system with multiple questionnaires
  4. Team Management: Assign auditors and supervisors to sites
  5. Templates: Save and import site configurations
  6. Activity Tracking: Monitor site activity and changes
  7. Reporting: Generate and filter site reports
  8. Group Management: Organize sites into groups
  9. Off Days: Configure site-specific holidays/off days
  10. SKU/PO Management: Track SKUs and purchase orders per site

Component Architecture Notes

  • Mixed File Types: Components use both .js and .tsx extensions
  • Test Coverage: Some components have associated test files
  • Styling: Mix of CSS files and styled-components
  • Containers: Separation between container and presentation components
  • Legacy Code: Some deprecated components still exist
  • Complex Components: SiteDetails and SiteSchedule are particularly large and complex

Graph View

Backlinks