Prompt for the PortApp

Please create a React-JS application for the PortModule. The application  has to offer the following views for the user interface: 
    1. AlertEventView 
    2. AlertRuleView 
    3. PortView 
    4. RouteView 
The views have to be reachable for the user via a menu list at the left side of each view. The requirements for the 4 views are defined below.

1. The AlertEventView must contain the following fields: 
    - name: AlertRule   type: AlertRule 
    - name: EventDescription   type: STRING 
    - name: GeographicalArea   type: GeographicalArea 
    - name: Port   type: Port 
    - name: PositionReport   type: PositionReport 
    - name: TriggeredUtc   type: DATE 
    - name: Vessel   type: Vessel 
The data source for the [Vessel] select control should be loaded from the relative URL: 
    "/VesselService/vessel"   (HTTP-GET) 
The data source for the [Port] select control should be loaded from the relative URL: 
    "/PortService/port"   (HTTP-GET) 
The data source for the [GeographicalArea] select control should be loaded from the relative URL: 
    "/GeographicalAreaService/geographicalarea"   (HTTP-GET) 
The data source for the [AlertRule] select control should be loaded from the relative URL: 
    "/PortService/alertrule"   (HTTP-GET) 
The data source for the [PositionReport] select control should be loaded from the relative URL: 
    "/VesselService/positionreport"   (HTTP-GET) 
An existing AlertEvent entity should be loaded from the relative URL: 
    "/PortService/alertevent/{id}"   (HTTP-GET) 
If a new AlertEvent entity has been created, the new entity should be posted to the relative URL: 
    "/PortService/alertevent"   (HTTP-POST) 
If an existing AlertEvent entity has been updated, the modified entity should be sent to the relative URL: 
    "/PortService/alertevent/{id}"   (HTTP-PUT) 
If an existing AlertEvent entity has to be deleted, the following relative URL should be called: 
    "/PortService/alertevent/{id}"   (HTTP-DELETE) 
Add a HTML table to the view with the following Notification columns: 
    - column: UserAccount 
    - column: AlertEvent 
    - column: Body 
    - column: ErrorMessage 
    - column: SentUtc 
    - column: Channel 
    - column: DeliveryStatus 
    - column: Subject 
The table should have the title "Notifications" und the data must be loaded from the server with the following relative URL: 
    "/FleetService/notification/alertevent/{id}"

2. The AlertRuleView must contain the following fields: 
    - name: AlertType   type: STRING 
    - name: CreatedUtc   type: DATE 
    - name: Description   type: STRING 
    - name: GeographicalArea   type: GeographicalArea 
    - name: IsActive   type: BOOL 
    - name: Name   type: STRING 
    - name: Port   type: Port 
    - name: ThresholdSpeed   type: STRING 
    - name: UserAccount   type: UserAccount 
    - name: Vessel   type: Vessel 
The data source for the [Vessel] select control should be loaded from the relative URL: 
    "/VesselService/vessel"   (HTTP-GET) 
The data source for the [Port] select control should be loaded from the relative URL: 
    "/PortService/port"   (HTTP-GET) 
The data source for the [GeographicalArea] select control should be loaded from the relative URL: 
    "/GeographicalAreaService/geographicalarea"   (HTTP-GET) 
The data source for the [UserAccount] select control should be loaded from the relative URL: 
    "/UserAccountService/useraccount"   (HTTP-GET) 
An existing AlertRule entity should be loaded from the relative URL: 
    "/PortService/alertrule/{id}"   (HTTP-GET) 
If a new AlertRule entity has been created, the new entity should be posted to the relative URL: 
    "/PortService/alertrule"   (HTTP-POST) 
If an existing AlertRule entity has been updated, the modified entity should be sent to the relative URL: 
    "/PortService/alertrule/{id}"   (HTTP-PUT) 
If an existing AlertRule entity has to be deleted, the following relative URL should be called: 
    "/PortService/alertrule/{id}"   (HTTP-DELETE) 
Add a HTML table to the view with the following AlertEvent columns: 
    - column: Vessel 
    - column: GeographicalArea 
    - column: PositionReport 
    - column: AlertRule 
    - column: EventDescription 
    - column: TriggeredUtc 
    - column: Port 
The table should have the title "AlertEvents" und the data must be loaded from the server with the following relative URL: 
    "/PortService/alertevent/alertrule/{id}"

3. The PortView must contain the following fields: 
    - name: Country   type: Country 
    - name: Latitude   type: STRING 
    - name: Longitude   type: STRING 
    - name: Name   type: STRING 
    - name: PortType   type: STRING 
    - name: TimeZone   type: STRING 
    - name: Unlocode   type: STRING 
The data source for the [Country] select control should be loaded from the relative URL: 
    "/UserAccountService/country"   (HTTP-GET) 
An existing Port entity should be loaded from the relative URL: 
    "/PortService/port/{id}"   (HTTP-GET) 
If a new Port entity has been created, the new entity should be posted to the relative URL: 
    "/PortService/port"   (HTTP-POST) 
If an existing Port entity has been updated, the modified entity should be sent to the relative URL: 
    "/PortService/port/{id}"   (HTTP-PUT) 
If an existing Port entity has to be deleted, the following relative URL should be called: 
    "/PortService/port/{id}"   (HTTP-DELETE) 
Add a HTML table to the view with the following PortCall columns: 
    - column: DepartureActualUtc 
    - column: BerthName 
    - column: Vessel 
    - column: DepartureEstimatedUtc 
    - column: ArrivalEstimatedUtc 
    - column: ArrivalActualUtc 
    - column: Route 
    - column: DraftDeparture 
    - column: DraftArrival 
    - column: Port 
    - column: Reason 
The table should have the title "PortCalls" und the data must be loaded from the server with the following relative URL: 
    "/SubscriptionPlanService/portcall/port/{id}" 
Add a HTML table to the view with the following AlertRule columns: 
    - column: AlertType 
    - column: UserAccount 
    - column: ThresholdSpeed 
    - column: Name 
    - column: CreatedUtc 
    - column: GeographicalArea 
    - column: Vessel 
    - column: Description 
    - column: Port 
    - column: IsActive 
The table should have the title "AlertRules" und the data must be loaded from the server with the following relative URL: 
    "/PortService/alertrule/port/{id}" 
Add a HTML table to the view with the following AlertEvent columns: 
    - column: Vessel 
    - column: GeographicalArea 
    - column: PositionReport 
    - column: AlertRule 
    - column: EventDescription 
    - column: TriggeredUtc 
    - column: Port 
The table should have the title "AlertEvents" und the data must be loaded from the server with the following relative URL: 
    "/PortService/alertevent/port/{id}" 
Add a HTML table to the view with the following Route columns: 
    - column: Status 
    - column: DistanceNm 
    - column: ActualArrivalUtc 
    - column: Name 
    - column: PlannedDepartureUtc 
    - column: PlannedArrivalUtc 
    - column: Vessel 
    - column: EndPort 
    - column: StartPort 
    - column: ActualDepartureUtc 
The table should have the title "Routes" und the data must be loaded from the server with the following relative URL: 
    "/PortService/route/endport/{id}" 
Add a HTML table to the view with the following Route columns: 
    - column: Status 
    - column: DistanceNm 
    - column: ActualArrivalUtc 
    - column: Name 
    - column: PlannedDepartureUtc 
    - column: PlannedArrivalUtc 
    - column: Vessel 
    - column: EndPort 
    - column: StartPort 
    - column: ActualDepartureUtc 
The table should have the title "Routes" und the data must be loaded from the server with the following relative URL: 
    "/PortService/route/startport/{id}"

4. The RouteView must contain the following fields: 
    - name: ActualArrivalUtc   type: DATE 
    - name: ActualDepartureUtc   type: DATE 
    - name: DistanceNm   type: STRING 
    - name: EndPort   type: Port 
    - name: Name   type: STRING 
    - name: PlannedArrivalUtc   type: DATE 
    - name: PlannedDepartureUtc   type: DATE 
    - name: StartPort   type: Port 
    - name: Status   type: STRING 
    - name: Vessel   type: Vessel 
The data source for the [Vessel] select control should be loaded from the relative URL: 
    "/VesselService/vessel"   (HTTP-GET) 
The data source for the [EndPort] select control should be loaded from the relative URL: 
    "/PortService/port"   (HTTP-GET) 
The data source for the [StartPort] select control should be loaded from the relative URL: 
    "/PortService/port"   (HTTP-GET) 
An existing Route entity should be loaded from the relative URL: 
    "/PortService/route/{id}"   (HTTP-GET) 
If a new Route entity has been created, the new entity should be posted to the relative URL: 
    "/PortService/route"   (HTTP-POST) 
If an existing Route entity has been updated, the modified entity should be sent to the relative URL: 
    "/PortService/route/{id}"   (HTTP-PUT) 
If an existing Route entity has to be deleted, the following relative URL should be called: 
    "/PortService/route/{id}"   (HTTP-DELETE) 
Add a HTML table to the view with the following PortCall columns: 
    - column: DepartureActualUtc 
    - column: BerthName 
    - column: Vessel 
    - column: DepartureEstimatedUtc 
    - column: ArrivalEstimatedUtc 
    - column: ArrivalActualUtc 
    - column: Route 
    - column: DraftDeparture 
    - column: DraftArrival 
    - column: Port 
    - column: Reason 
The table should have the title "PortCalls" und the data must be loaded from the server with the following relative URL: 
    "/SubscriptionPlanService/portcall/route/{id}" 
Add a HTML table to the view with the following RouteWaypoint columns: 
    - column: Longitude 
    - column: EstimatedTimeUtc 
    - column: Route 
    - column: Latitude 
    - column: SequenceNumber 
The table should have the title "RouteWaypoints" und the data must be loaded from the server with the following relative URL: 
    "/SubscriptionPlanService/routewaypoint/route/{id}"