ISSUE-WAVE-004: Implement CRUD Functionalities for Catalogs and Parameters

[davidmelendez]

ISSUE-WAVE-004: Implement CRUD Functionalities for Catalogs and Parameters

✨ Issue Request

Develop Create, Modify, and Delete functionalities for catalogs and parameters through modals/popups, with deletion confirmations and dynamic interface updates. This functionality is based on the screen developed in ISSUE-HACK15-003.

📌 Description

This issue implements complete CRUD functionality for the catalog and parameters management system. Modals for inserting and modifying records will be developed, confirmation dialogs for deletions, and a local state system that simulates database operations reflecting changes immediately in the interface. All based on the visualization screen created in ISSUE-HACK15-003.

🛠️ Steps to Reproduce (if applicable)

1. Access catalog management screen (developed in ISSUE-HACK15-003)
2. Click "Create Catalog" → should open creation modal
3. Click "Edit" on a row → should open modal with preloaded data
4. Click "Delete" on a row → should show confirmation
5. Verify that changes are immediately reflected in the interface

🖼️ Screenshots (if applicable)

N/A

🎯 Expected Behavior

1. 🔹 Creation modal for catalogs with complete form.
2. 🔹 Creation modal for parameters associated with a selected catalog.
3. 🔹 Modification modal for catalogs with preloaded data.
4. 🔹 Modification modal for parameters with preloaded data.
5. 🔹 Confirmation dialog for catalog and parameter deletion.
6. 🔹 Immediate interface update after CRUD operations (local state).
7. 🔹 Basic validations in forms.
8. 🔹 Success/error messages after each operation.

🚀 Suggested Solution / Feature Request

1. Implement Local State System:

• Create a custom hook to manage catalogs and parameters state
• Include functions to add, update, and delete records
• Maintain referential integrity (deleting catalog deletes its parameters)
• Auto-generate IDs for new records
• Initialize with existing mock data

2. Create Catalog Modal:

• Develop a reusable modal for creating and editing catalogs
• Include fields: name, description, and active status
• Implement basic validations (name required)
• Differentiate between creation and edit mode via props
• Pre-load data when editing an existing catalog

3. Create Parameter Modal:

• Develop specific modal for parameters
• Include fields: code, value, description, order, and active status
• Validate required fields (code and value)
• Automatically associate with selected catalog
• Pre-load data when editing an existing parameter

4. Implement Delete Confirmation:

• Create confirmation dialog for destructive operations
• Show special warning when deleting catalogs (deletes associated parameters)
• Include the name of the element to delete in the message
• Allow canceling the operation

5. Notification System:

• Implement toast/alert notification system
• Show success messages after successful operations
• Show error messages for validation failures
• Auto-hide notifications after a determined time

6. Integrate with Main Component:

• Connect all modals with the main management screen
• Handle modal open/close states
• Pass correct data between components
• Update interface immediately after CRUD operations
• Maintain active catalog selection

7. Functionalities to Implement:

• Hook for local state management of catalogs and parameters
• Catalog creation modal with validations
• Catalog edit modal with preloaded data
• Parameter creation modal with validations
• Parameter edit modal with preloaded data
• Confirmation dialog for deletions
• Notification system (success/error)
• Immediate interface update after operations
• Form validations (required fields, formats)
• Duplicate prevention (unique code per catalog)

📌 Additional Notes

• CRUD operations are performed on local state, simulating a real API.
• Changes are immediately reflected in the interface without needing to reload.
• Referential integrity must be maintained (deleting catalog deletes its parameters).
• Modals must be responsive and follow ToKasa's design.
• Implement client-side validations before saving.
• IDs are automatically generated for new records.
• PR description must include: Close ISSUE-WAVE-004: Implement CRUD Functionalities for Catalogs and Parameters #19

⚠️ Before Applying

Please read this guide: https://github.com/tokasa-starknet/ToKasa/blob/main/CONTRIBUTING.md