Components Directory

Location: src/components/

Purpose: React components organized by feature domain and type.

Structure

components/
├── auth/                       # Authentication components
│   ├── authNav.tsx            # Auth navigation
│   └── checkMail.tsx          # Email verification check
│
├── campaign/                   # Campaign-related components
│   ├── CamapignUsers/         # Campaign user management
│   ├── campaign-create.tsx
│   ├── campaign-stats.tsx
│   ├── campaign-update.tsx
│   ├── new-campaign-cta.tsx
│   ├── rate-create.tsx
│   ├── rate-update.tsx
│   ├── transaction-create.tsx
│   └── transaction-update.tsx
│
├── common/                     # Shared/common components
│   ├── access-not-found.tsx
│   ├── add-user.tsx
│   ├── app-sidebar.tsx        # Main application sidebar
│   ├── body-container.tsx
│   ├── campaign-no-acess.tsx
│   ├── campaign-not-found.tsx
│   ├── campaign-switcher.tsx
│   ├── fieldsGroup.tsx
│   ├── invite-new-user.tsx
│   ├── invite-user.tsx
│   ├── loadingAnimation/      # Loading animations
│   ├── navbar.tsx             # Top navigation bar
│   ├── nav-main.tsx           # Main navigation
│   ├── nav-projects.tsx       # Projects navigation
│   ├── nav-user.tsx           # User navigation
│   ├── profileMenu.tsx
│   ├── statsCard.tsx
│   ├── team-switcher.tsx
│   └── ... (many more shared components)
│
├── dashboard/                   # Dashboard and analytics components
│   ├── campaign-stats/
│   ├── custom-label-bar-chart/
│   ├── legend-bar-chart/
│   ├── petitions-chart/
│   ├── signatures-card/
│   ├── signatures-pie-chart/
│   ├── singnatures-by-circulators-chart/
│   └── stacked-bar-chart/
│
├── forms/                      # Form components with validation
│   ├── authForms/             # Authentication forms
│   ├── campaignForm/          # Campaign creation/editing
│   ├── credentialsForm/       # Credentials management
│   ├── formComponents/        # Reusable form field components
│   ├── permission-sets/       # Responsibilities forms
│   ├── permissionsKeys/       # Permission key forms
│   ├── petitionForm/          # Petition forms
│   ├── rateForm/              # Rate forms
│   ├── roles/                 # Role forms
│   ├── teamForm/              # Team forms
│   └── transactionForm/       # Transaction forms
│
├── permission-sets/             # Responsibilities UI
│   ├── permission-sets-create.tsx
│   └── permission-sets-update.tsx
│
├── permissions/                # Permission management UI
│   ├── permissionsKeys-create.tsx
│   └── permissionsKeys-update.tsx
│
├── petitions/                   # Petition-related components
│   ├── changeFormatDropdown.tsx
│   ├── petition-create.tsx
│   ├── petition-update.tsx
│   ├── PetitionSignaturesData.tsx
│   ├── SelectPetitionFormat.tsx
│   ├── Signatures/             # Signature collection components
│   │   ├── signatureFlow.tsx  # Main signature workflow
│   │   ├── Step1County.tsx
│   │   ├── Step2Circultor.tsx
│   │   ├── Step3Circulation.tsx
│   │   ├── Step4SignaturesForm.tsx
│   │   ├── Step5SignaturesReview.tsx
│   │   └── ... (many signature-related components)
│   └── voterSearchInput.tsx
│
├── roles/                      # Role management components
│   ├── permission-card.tsx
│   ├── permission-list.tsx
│   ├── permissions-manager.tsx
│   ├── role-create.tsx
│   └── role-update.tsx
│
├── superAdmin/                 # Super admin components
│   ├── campaign-logo.tsx
│   ├── campaign-sidebar.tsx
│   └── credentials/
│
├── tables/                     # Data table components (TanStack Table)
│   ├── campaigns-view/
│   ├── circulators-view/
│   ├── common/                # Shared table utilities
│   ├── credentials/
│   ├── households-view/
│   ├── permission-keys/
│   ├── permission-sets/
│   ├── petitions/
│   ├── rates/
│   ├── roles/
│   ├── signatures/
│   ├── sub-teams/
│   ├── teams/
│   ├── teams-users/
│   ├── transactions/
│   ├── users/
│   └── validators-view/
│
├── teams/                      # Team management components
│   ├── accept-campaign-invite.tsx
│   ├── accept-invite.tsx
│   ├── add-admin.tsx
│   ├── add-member.tsx
│   ├── add-sub-team.tsx
│   ├── choseTeam.tsx
│   ├── member-role-update.tsx
│   ├── team-create.tsx
│   ├── team-update.tsx
│   └── update-sub-team.tsx
│
├── ui/                         # Reusable UI primitives (Radix UI)
│   ├── accordion.tsx
│   ├── alert.tsx
│   ├── avatar.tsx
│   ├── button.tsx
│   ├── card.tsx
│   ├── checkbox.tsx
│   ├── dialog.tsx
│   ├── dropdown-menu.tsx
│   ├── form.tsx
│   ├── input.tsx
│   ├── label.tsx
│   ├── select.tsx
│   ├── table.tsx
│   ├── toast.tsx
│   └── ... (many more UI components)
│
└── voter-search/               # Voter search components
    ├── SearchResultCard.tsx
    ├── useESVoterSearch.tsx
    ├── voterSearchAdminForm.tsx
    └── voterSearchForm.tsx

Component Organization Principles

1. Domain-based: Components grouped by feature (campaign, petitions, teams)
2. Type-based: Shared components separated by type (forms, tables, ui)
3. Reusability: Common components in common/ and ui/
4. Feature-specific: Complex features have their own directories with sub-components

---