Build Front End Page with Angular Framwork -- 4

Requirements:

NOTE:
- This project will continue developing from an existing Angular project, which will be provided once confirmed.
- All screens must support RWD, including Side navigation and Table.
- Able to scroll the whole page in smaller screen.
- Ignore the font setting in XD file, this application will use "Source Sans Pro" font, which has already been implemented.

1) Drop-off Event Management
- There should have 1 dropdown field (Transaction Type)
- All elements/components (eg. dropdown, button, table) are required to be placed accordingly as shown in the expected screenshot
- "Transaction Type" dropdown is pre-selected when the page loads.
- For the table section, there should have 5 columns inside it, including checkbox (first column).
>> Able to loop a list of records into the table (as per existing Table component)
>> Checkbox, dropdown, label are required to be placed accordingly as shown in the expected screenshot
>> Able to support word-break inside table if the content is too long (as per existing Table component)
>> Able to control the flag of whether the table header need to be fixed and static when scrolling the content (as per existing Table component)
>> All the dropdowns and inputs for a specific record can only be editable when the checkbox is checked
>> Checkbox in first column can be checked by default (depends on the TableData that passed from @Input)
>> "Track Events" is containing label only.
>> The checkbox is NOT placed inside "Track Event", instead it is placed in the first column
>> "Rules" and "Value" are containing dropdown fields
>> Message on the right side of Rules dropdown are containing a combination of label & numeric input field, with minlength of 1 and maxlength of 60 minutes
>> This minute message will NOT show when the Rule selection is "Cancel button"
>> "Notification Content" is containing freetext input/textarea fields with a maxlength of 300
>> Height should be auto based on content
>> It will need to show the full message inside the cell
>> When specific record is NOT checked, the N/A remain as label which is not editable
>> When specific record is checked, the N/A in "Notification Content" will change from label to input with grey color cell for user to edit
>> Do not need to clear any existing selection or value when the checkbox has changed from checked to unchecked
>> But for "Notification Content", if the content is empty string when uncheck the checkbox, change the input back to N/A label with white color cell
>> The table cell will be in grey color when there is a value in it
>> N/A is not considered as value
- All buttons are able to support redirection / open a modal

2) Drop-off Event Report
- There should have 1 dropdown field (Transaction Type) and a Search button beside it.
- All elements/components (eg. dropdown, button, table, pagination) are required to be placed accordingly as shown in the expected screenshot
- "Transaction Type" dropdown is pre-selected when the page loads.
- Pagination does not need to change the design (remain as per existing design)
- For the table section, there should have 5 columns inside it.
>> Able to loop a list of records into the table (as per existing Table component)
>> Able to support word-break inside table if the content is too long (as per existing Table component)
>> Able to control the flag of whether the table header need to be fixed and static when scrolling the content (as per existing Table component)
>> Striped rows
>> All cells are containing label only