# StepCard Component

## Overview

`StepCard` is a React component used in the custom match flow of the application. It represents a single step in a multi-step process for uploading, processing, and matching files (such as PDFs or Excel documents) as part of an accountant/auditor workflow. Each step can have its own configuration, files, and processing logic.

## Main Features
- **File Uploading:** Allows users to upload files (PDF or Excel) for the current step.
- **Field Builder:** Lets users define and edit fields for the document type in the step.
- **Processing Status:** Tracks and displays the processing status of each file, including progress, errors, and completion.
- **Matching:** For steps beyond the first, supports matching records between steps (e.g., reconciling data between two sets of files).
- **Custom Document Types:** Users can define and save custom document types for reuse.
- **Polling:** Periodically polls the backend to update file processing status.
- **Local Storage Sync:** Syncs step and file data with localStorage for persistence and cross-component communication.

## Props
- `step` (object): The step data, including number, description, type, fields, files, and options.
- `onRemove` (function): Callback to remove the step from the flow.
- `onUpdate` (function): Callback to update the step's data.
- `currentUser` (object): The current user, used for API calls and permissions.
- `syncResultsWithDB` (function): Function to sync file processing results with the backend/database.
- `syncMatchingResultsWithDB` (function): Function to sync matching results with the backend/database.

## Key Logic
- **File Upload:**
  - Validates file types and uploads files to S3.
  - Saves file metadata and options to the backend via API.
  - Updates progress and handles errors.
- **Processing Polling:**
  - Uses a `useEffect` hook to poll the backend every 5 seconds for file processing status.
  - Stops polling when all files are processed or after a timeout.
- **Matching:**
  - For steps > 1, allows matching records between the current and previous step.
  - Saves match prompts and results to the backend and localStorage.
- **Custom Types:**
  - Users can save field configurations as custom document types for future use.
- **Event Handling:**
  - Listens for and dispatches custom events to coordinate updates across components (e.g., when files are processed or results are updated).
- **Local Storage:**
  - Reads and writes step and file data to localStorage for persistence and to support multi-step workflows.

## Usage Example
```jsx
<StepCard
  step={step}
  onRemove={handleRemoveStep}
  onUpdate={handleUpdateStep}
  currentUser={currentUser}
  syncResultsWithDB={syncResultsWithDB}
  syncMatchingResultsWithDB={syncMatchingResultsWithDB}
/>
```

## Notes
- The component is designed to be used as part of a multi-step flow, with the parent component managing the current step and passing the appropriate props.
- The component is highly interactive and relies on both backend APIs and localStorage for state management.
- For advanced flows (e.g., auto-advancing steps), additional props and logic may be required in the parent component.