Voice Channel Simulator - Copy this React, Tailwind Component to your project

Project Title: React-Based Channel Simulation App The project is a dynamic, user-interactive simulator built in React, designed to calculate monthly minutes and simultaneous channels for telecom traffic. The app presents the user with options to select a type of traffic, the type of calculation they want to perform, and the information they have. Based on these selections, the app dynamically updates the options and inputs for the user. Key Features: Traffic Type Selection: Users can select between "Inbound" and "Outbound" traffic types. Based on the selection, the available calculation options and data input fields dynamically change. Dynamic Calculation Options: If the user selects "Inbound" traffic, they can only calculate "Monthly Minutes." If they select "Outbound," they can choose between calculating: Monthly Minutes Simultaneous Channels Both Monthly Minutes and Simultaneous Channels. Input Fields: The app asks for various input fields based on the selected calculation and information provided, such as: Monthly calls Average call duration ASR percentage (Answer Seizure Ratio) Working hours per day Working days per month Monthly minutes (when selected). Real-time Calculations: The app performs real-time calculations based on input values, using the following formulas: Monthly Minutes Calculation (from channels): Channels * (60 / average call duration) * ASR * working hours per day * working days per month. Simultaneous Channels Calculation (from monthly minutes): (Monthly minutes / average call duration) / (working hours per day * working days per month * 60). Other variations of formulas are included based on the selection of "What information do you have?" and "What do you want to calculate?" Results Display: The app displays the calculated results in real-time. For simultaneous channels, the app always rounds the result up using Math.ceil(), ensuring that users get whole numbers for channels. State Management: The app uses React's useState and useEffect hooks to handle the dynamic state of the form and to trigger recalculations whenever the input values change. Responsive UI: The user interface is built with basic styling, including dropdowns and inputs that dynamically appear based on the user's selections. Technologies Used: React: For building the user interface and handling dynamic state changes. JavaScript (ES6): To implement the calculation logic and interactivity. CSS: Basic styling to make the UI clean and responsive. Example Input/Output Flow: Scenario: Traffic Type: "Outbound" Calculation: "Simultaneous Channels" Information: "Monthly Minutes" Input: Monthly Minutes: 30,000 Average Call Duration: 5 minutes Working hours/day: 8 Working days/month: 25 Output: Simultaneous Channels: 2 (rounded up using Math.ceil()).