Refactor the monolithic RedemptionsTable component (614 lines) into a clean,
modular structure following the established tokens component pattern.
### Changes Made:
**New Components:**
- `RedemptionsColumnDefs.js` - Extract table column definitions and render logic
- `RedemptionsActions.jsx` - Extract action buttons (add, batch copy, clear invalid)
- `RedemptionsFilters.jsx` - Extract search and filter form components
- `RedemptionsDescription.jsx` - Extract description area component
- `redemptions/index.jsx` - Main container component managing state and composition
**New Hook:**
- `useRedemptionsData.js` - Extract all data management, CRUD operations, and business logic
**New Constants:**
- `redemption.constants.js` - Extract redemption status, actions, and form constants
**Architecture Changes:**
- Transform RedemptionsTable.jsx into pure table rendering component
- Move state management and component composition to index.jsx
- Implement consistent prop drilling pattern matching tokens module
- Add memoization for performance optimization
- Centralize translation function distribution
### Benefits:
- **Maintainability**: Each component has single responsibility
- **Reusability**: Components and hooks can be used elsewhere
- **Testability**: Individual modules can be unit tested
- **Team Collaboration**: Multiple developers can work on different modules
- **Consistency**: Follows established architectural patterns
### File Structure:
```
redemptions/
├── index.jsx # Main container (state + composition)
├── RedemptionsTable.jsx # Pure table component
├── RedemptionsActions.jsx # Action buttons
├── RedemptionsFilters.jsx # Search/filter form
├── RedemptionsDescription.jsx # Description area
└── RedemptionsColumnDefs.js # Column definitions
- Split monolithic 922-line TokensTable.js into modular components:
* useTokensData.js: Custom hook for centralized state and logic management
* TokensColumnDefs.js: Column definitions and rendering functions
* TokensTable.jsx: Pure table component for rendering
* TokensActions.jsx: Actions area (add, copy, delete tokens)
* TokensFilters.jsx: Search form component with keyword and token filters
* TokensDescription.jsx: Description area with compact mode toggle
* index.jsx: Main orchestrator component
- Features preserved:
* Token status management with switch controls
* Quota progress bars and visual indicators
* Model limitations display with vendor avatars
* IP restrictions handling and display
* Chat integrations with dropdown menu
* Batch operations (copy, delete) with confirmations
* Key visibility toggle and copy functionality
* Compact mode for responsive layouts
* Search and filtering capabilities
* Pagination and loading states
- Improvements:
* Better separation of concerns
* Enhanced reusability and testability
* Simplified maintenance and debugging
* Consistent modular architecture pattern
* Performance optimizations with useMemo
* Backward compatibility maintained
This refactoring follows the same successful pattern used for LogsTable, MjLogsTable, and TaskLogsTable, significantly improving code maintainability while preserving all existing functionality.
