Customer App: $($User Angular material components for front end$)$

UI: Customer List having columns:

Name $($Last Name, FirstName$)$

Phone Number

Email

DOB

Item

One column for Action $($Edit and delete$)$

List should have paging, sorting and searching

Add button: On click of add button a customer form should appear inside a popup with fields

FirstName $($text field with validation required and min and max length$)$

Last Name $($text field with validation required and min and max length$)$

Phone Number $($text field with validation required, phone number pattern$)$

Email $($text field with validation required, email pattern$)$

Address $($text area, no validation$)$

DOB $($Date picker, required field $($MM$/$dd$/$YYYY$))$

Item $($Drop down $[$stationary$,$ food, clothes$],$ no validation$)$

Button: Submit and Cancel $($on click of submit data should save and on cancel popup should close$)$

on click of edit button: fetch all the details and bind all details to form, add and edit fields with be same but instead of submit update button should be there.

then Update the details and changes should be reflected to the list.

API:

Add Customer

Update Customer

Get Customer detail on the basis of ID

Get Customer List