Configuration U I - Copy this React, Tailwind Component to your project

You are tasked with designing a UI component for configuration based on a given JSON structure. The component should allow users to interact with and modify the configuration data. Here's the JSON configuration you'll be working with: <json_config> { "service_provider": "ADP RK", # abbrivations used "source_type": "ec", "incoming_sheet_name":census, "outgoing_sheet_name":"ec", "description_of_sheet":"ai description(need to use prompt) file nature", "versionId":"v2023", "importance":{"required","not_required","optional"}, "cpaId":"AUT", "columns": { "date of birth": { "empty_check": true, "zero_check": false, "required":"", "sample_entry":[list of 3 4 records data], "description":"sample entry description using ai", "data_type":"date", }, "ssn": { "empty_check": true, "zero_check": false } }, "sample_template_path": "RK DATA/2023/ADP RK/Census.csv" }{ "service_provider": "ADP RK", # abbrivations used "source_type": "ec", "incoming_sheet_name":census, "outgoing_sheet_name":"ec", "description_of_sheet":"ai description(need to use prompt) file nature", "versionId":"v2023", "importance":{"required","not_required","optional"}, "cpaId":"AUT", "columns": { "date of birth": { "empty_check": true, "zero_check": false, "required":"", "sample_entry":[list of 3 4 records data], "description":"sample entry description using ai", "data_type":"date", }, "ssn": { "empty_check": true, "zero_check": false } }, "sample_template_path": "RK DATA/2023/ADP RK/Census.csv" } </json_config> Your task is to create a detailed description of a UI component that allows users to view, edit, and manage this configuration data. The component should have the following features and structure: 1. Service Provider Selection: At the top of the component, include a dropdown menu for selecting a Service Provider. The selected provider should determine which configuration entries are displayed. 2. Sheet Information Display: List multiple sheet names with their associated flags and fields. Create user friendly, intuitive names for these elements. Display this information either on the same row as the sheet entry or in an expandable section. 3. Column Configuration: Provide a way to expand into column configurations for each sheet. When expanded, display a list of columns with column headers on the left hand side and flags on the right hand side. Consider using a table format to display this information, with table headers showing various flag and field names. 4. CRUD Operations: Implement Create, Read, Update, and Delete functionality for all elements in the UI. Ensure that users can modify any part of the configuration through the interface. 5. Hierarchical Structure: Maintain the hierarchical structure present in the JSON configuration. Use appropriate UI elements (e.g., nested sections, tree views) to represent this hierarchy visually. 6. Data Types and Validation: Account for different data types (e.g., strings, booleans, arrays) in the configuration. Implement appropriate input methods and validation for each data type. 7. User Friendly Design: Ensure the UI is intuitive and easy to navigate. Use clear labels and tooltips to explain the purpose of each element. 8. Responsive Design: Make sure the component is responsive and works well on different screen sizes. Please provide a detailed description of how you would implement this UI component, including: The overall layout and structure Specific UI elements you would use for each part of the configuration How you would handle the hierarchical nature of the data Your approach to implementing CRUD operations Any additional features or considerations you think would be beneficial Write your description inside <ui_component_description> tags. Be as detailed and specific as possible, considering all aspects of the configuration data and user interaction.