Incident Management System - Copy this React, Tailwind Component to your project
Build a beautifully responsive but professionally appealing web application is an Incident Management System designed for handling network faults and issues. The app allows users to create incident reports and submit them to the server with structured data like nodes, stakeholders, fault types, and more. The web app consists of the following key features: Form based Incident Creation: Users can select domains (e.g., Switch/Access, Transport/Transmission) and corresponding equipment types based on the domain selection. Exchange names can be selected from a dropdown menu of pre defined exchanges. Fault types (e.g., Fiber Break, Outage, Corporate Fault) are selected via dropdown. The form allows manual input for Nodes A and B. Users can optionally add Nodes C and D for more detailed fault reporting. Multiple Incident Generation: The system supports the creation of multiple incidents within a single submission. This allows users to enter various nodes or faults within the same exchange or domain, significantly speeding up the incident reporting process when dealing with multiple issues at once. Stakeholder Group and Selection: Users can choose from two stakeholder groups, Morning Team and Night Team, and select specific stakeholders from these groups who need to be informed about the incident. Multiple stakeholders can be selected using checkboxes. Dynamic Ticket Generation: Based on the selected domain, the user can choose a ticket generator from a dropdown list of team members associated with that domain. Outage Marking for Specific Nodes: Users can mark individual nodes (A, B, C, or D) as experiencing an Outage, which will be reflected in the incident report output. WhatsApp Integration: After submitting the form, the user can generate an incident report formatted as a message. This message can be copied to the clipboard or automatically sent to a WhatsApp contact using a pre populated phone number and message. Output Display: Once the incident is submitted, the report is formatted and displayed, including details like the equipment type, fault type, nodes involved, selected stakeholders, and ticket generator. The system provides options to copy this output to the clipboard and send it via WhatsApp. Report Viewing: A button is provided to redirect users to the Reports page, where they can view previously submitted incident reports. Backend Logic (in api/create incident/route.ts): When an incident is created, the server generates a unique incident number formatted as IM000001, and increments it for each new incident. The incident is stored in Firestore with a status of Pending, and the creation time is logged. The form ensures required fields like exchange name, nodes, stakeholders, fault type, and ticket generator are filled in before submission. The system supports bulk incident generation, allowing for multiple incidents to be saved simultaneously with separate incident numbers. The backend handles errors gracefully and returns appropriate status messages. Error Handling and Validation: The form checks for required fields before submission to ensure that important information is not missing. If there is an issue during form submission (e.g., missing data or server error), appropriate error messages are displayed to the user.
