I need support on full stack front end
The UI of the Team Configuration application consists of several key elements:
Navigation Bar: At the top, there is a navigation bar with buttons like Team Configuration, Briefing, and Administration. The background color is a deep brown, and the text color is white, providing contrast and clarity.
Left Panel: This panel displays various system groups, categorized into "Only Manned," "Manned or Unmanned," and "Only Unmanned." Each system has:
A radio button for selection.
A checkbox for choosing the system.
A circular toggle button that changes to green when active and red when inactive, indicating the system’s status.
Right Panel:
Buddy Name: The buddy name is entered in a text field.
System Details: This section includes fields for system information such as System Name, Distributor Value, Physical Length, and Bias.
Drop-down Menus: There are drop-down menus for selecting different components like B, S, W, C, and O. Upon selection, the subsystems related to these components will be loaded from a JSON file. The selected subsystem will display more details.
Footer: The footer includes an Accept button to submit the configuration, and a confirmation message appears upon submission.
The system also integrates data from a JSON file:
Buddy Name and System Details (System Name, Distributor Value, etc.) will be imported from the JSON file.
The drop-down menus will load subsystems from the JSON file, allowing you to select a component and display the relevant subsystems.
The UI should also provide visual status indicators for these subsystems using green or red circular toggle buttons, which reflect the system’s activity status.
The application will present the data in a tabular form, similar to the format shown in the PPT, after selecting and configuring systems.
The UI uses a military-inspired color palette, including shades of green, brown, and gray, ensuring that the interface looks professional and easy on the eyes, without altering the red or green toggle buttons that remain circular. This clean design promotes usability, with functional areas clearly delineated.