# CustomMatchPage (index.jsx)

## Overview

`CustomMatchPage` is the main parent component for the custom match flow in the application. It manages the overall workflow for uploading, processing, and matching files across multiple steps, and coordinates the rendering and state management of each `StepCard` (step) and the `ResultsTable`.

## Main Features
- **Multi-Step Workflow:** Manages an array of steps, each represented by a `StepCard` component.
- **Step Management:** Allows users to add, remove, and update steps dynamically.
- **File Processing:** Coordinates file uploads, processing, and matching logic for each step.
- **Custom Flows:** Supports saving and loading custom step flows from local storage and the backend.
- **Results Display:** Integrates with `ResultsTable` to show processing and matching results.
- **Persistence:** Uses localStorage and backend APIs to persist and sync step and result data.
- **Error Handling:** Provides error boundaries and user feedback for robust operation.

## State Management
- **Steps:** Maintains an array of step objects in localStorage (via a custom hook) for persistence and cross-session continuity.
- **Loading/Error State:** Tracks loading and error status for user feedback.
- **Custom Flows:** Loads and saves named flows for reuse.
- **Results State:** Syncs results and matching data with the backend and localStorage.

## Key Logic
- **Adding/Removing Steps:**
  - `handleAddStep`: Adds a new step to the flow.
  - `handleRemoveStep`: Removes a step and re-numbers remaining steps.
- **Updating Steps:**
  - `handleUpdateStep`: Updates a step's data in the state.
- **Saving/Loading Flows:**
  - `handleSaveCustomFlow`: Saves the current flow (steps) for reuse.
  - `handleLoadCustomFlow`: Loads a saved flow into the current session.
- **Clearing All Data:**
  - `handleClearAll`: Clears all steps and results from both the backend and localStorage.
- **Syncing Results:**
  - `syncResultsWithDB` and `syncMatchingResultsWithDB`: Fetch and update results/matching data from the backend.

## Integration
- **StepCard:** Renders a `StepCard` for each step, passing down props and handlers for file processing, updating, and removal.
- **ResultsTable:** Renders a results drawer to display processing and matching results for all steps.

## Usage Example
```jsx
<CustomMatchPage currentUser={currentUser} />
```

## Notes
- The component is designed to be the main entry point for the custom match workflow.
- All step and result state is managed here and passed down to child components.
- For advanced flows (e.g., auto-advancing steps), additional logic can be added to coordinate between steps.