CMD Portal (UI Application)
Index
- Introduction
- UI Application Capabilities
- Backend services used in UI
- UI Validations
- Roles and Access levels
- Technologies used for UI Development
- Other features
- Other links
- TODOs (Later):
Introduction
This article will focus on CMD UI application only.
CMD portal from UI Point-of-view
CMD stands for Customer Master Data. CMD Portal UI is a UI application that basically acts as an interface that facilitates Searching, Creating, and Editing customers doing business with Maersk and it has many more capabilities built into it. This is used as data governance tool to maintain bsiness entities Customer, Contact, Customer Facility, Concern, Collection Business Unit. The business users can create, update and search all various bsuiness entities mentioned above. Business users can also use for Bulk load of customer and contact entities to update records in bulk. This is also used by Ares Data Steward users for workflow task management, ADS users will be displayed the respective tasks for their actions. ADS can either approve the task or reject it.
CMD Portal(Access/See) from UI Point-of-view
Below are the links to the CMD portal
| CMD Portal Environments | Modern Cloud CMD Portal | Onprem CMD Portal |
|---|---|---|
| SIT Link | https://cmdportalsit.azurewebsites.net/ | http://cmdt.apmoller.net/cmdfrontier/#customer/search/by-trading-name |
| Preprod Link | Yet to be created | http://cmdd.apmoller.net/cmdfrontier/#customer/search/by-trading-name |
| Prod Link | Yet to be created | Missing info. Please add it. |
CMD Modernization from UI Point-of-view
CMD Modernization is a project to re-write the old Onprem - CMD Portal using a new tech stack.
Objective(Why modernization) (From UI Point-of-view)
- Reduce the load times
- Making the system flexible enough for future M&As
- Enabling new capabilities (Notifications, workflows, etc.)
- Reducing the dependency on multiple outdated systems by decommissioning them
- Making CMD a standalone one-stop place for all master data-related things.
Its Use (From UI Point-of-view)
It is used internally within Maersk by it’s
- Employees
- Area data stewards (ADSs)
UI Application Capabilities
The below table contains the list of screens in UI and the API services that are used on each screen.
| Functional Area | Features/Capability | Details |
|---|---|---|
| Login - Azure SSO | Azure AD | Any user will land on this screen if they are Either unauthenticated.Switched to different browser.Left the screen idle for at least 1 hour. (Your session will expire) |
| Customer | Search Customer | User can search the Customer in Customer Search page by below combinations:Trading Name and Country is mandatory.Search by Trading name, Country and any 1 field from City / Postal CodeSearch by Trading name, Country and any 1 field from City / Postal Code and atleast 1 from By Address fields.Search by Trading name, Country and any 2 fields from Street Name / Street Number / PO Box / Region.By ReferenceAllows a user to search for a customer by reference values.User can search byCustomer Code (FACT/CMD code)Customer reference types and valuesCustomer Tax registration NumberCustomer alternate codes like (BE/BPMA/Alt Code etc)ResultsUser is able to see the possible customer matches to what they have searched.Results are shown in a tabular format. They are able to sort, filter and even download the data in CSV format.' |
| Retrieve Customer | Customer detailsThis page shows all the details of a single customer There are multiple tabs available to view the information of customer in organized groups.Customer Details - Customer alt codes, Address details etc.Business Details - Enriched information, Tax & Reference details.Segmentation Details - Webbill, brand & segment details, External System Identifiers etc.Other Details - Audit data, workflow information etc.Customer RelationshipsShows the customer relationships with other customers. You can add relationships or view the related customers.User Can relate Master Duplicate Relationship between the Master Customer and Duplicate Customer.Once the relationship established, Duplicate customer will gets suspended with reason Duplicate.If User wants to brake the relationship, then user has to reactivate the duplicate customer.Customer ContactlistUser is able to see the possible contact matches specific to the customer record they have opened.Results are shown in a tabular format. They are able to sort, filter and even download the data in CSV format. | |
| Create Customer | User can create Customer with Min Mandatory Info or Max info respective to country rules.User can create SCPI or Non SCPI or SCPI Tax Exempted Customer through Portal.Customer Creation can be routed to Workflow Approval based on below cases and upon the Approval then Customer will be created.If Customer Address is not Validated then WF will get generateIf user tries to create duplicate Customer then WF will get generateIf Customer belongs to European Country and Tax is not validated as per Vies then WF will get generate.If user select Customer group type as SCPI Tax Exempted while creatingIf Customer is detected as Internal Customer then WF gets generated.BvD SearchUser is able to search BvD(Orbis) using the UI. Results are shown in a tabular format. They are able to sort and filter data. They can select a record to proceed for entering customer details.Customer DetailsUser can add customer details like address details or website details, contact details etc in this screen while creating customer.The fields get auto populated by BvD retrieve results. Address doctor is run when Next button is clicked, if the user changes any fields which are auto-populated by BvD.Business DetailsUser can add business details like tax info/reference info etc in this screen while creating customer.Review PageThis is a review page where user gets a chance to review what they are going to submit. They can go back or edit the fields there itself.They will be choosing BE code here.Confirmation/duplicateIt shows a confirmation/duplicate records after the form is submitted. Also prompts the user to take actions ex: to create a contact or go back home and re-search. | |
| Update Customer | Users can Edit the active Customer details (Name, Address, Tax, Reference, Segmentation) and save them.Customer Updation can be routed to Workflow Approval based on belowTrading Name ChangeIf the user tries to reactivate the customer i.e status change from Suspend to ActiveIf the user select Customer group type as SCPI Tax ExemptedUser Updates Address and if it is not ValidatedUser Updates Customer details and found duplicates and still proceeds further with duplicate creationUser Changes Existing Tax Number or Adds Tax against EU Country for which VIES tax validation fails.Note: Customers which are Suspended or Inactive or in Workflow Approval, User can't edit this customer.NOT AVAILABLE CURRENTLY (Edit Customer functionality is yet to be implemented) | |
| Contact | Search Contact | Users can search the Contact in Contact Search Page by giving inputs such as Contact parameters or Customer Parameters(Customer Code and Trading Name).Contact DetailsAllows user to search for a contact using its email/name/contact status/phone numbers/customer code/trading name etc. There is a form to enter what you need to search and also a reset button to clear the form.Contact Search ResultsUser can see the possible contact matches to what they have searchedResults are shown in a tabular format. They can sort, filter, and even download the data in CSV format. |
| Retrieve Contact | This screen shows all the basic details(name, contact code, contact info etc) and other details(relationships etc) stored in the CMD of a single contact.There are multiple tabs present, to display the information in simplified way.Users can directly open the linked customer from the contact page. | |
| Create Contact | Users can create the Cust-Cont or OBO Contact against the Customer through Portal.Users can create the Contact along with the Customer in the Customer Creation phase.NOT AVAILABLE IN PORTAL | |
| Update Contact | Users can update the active Contact details and save them through the portal.User Can able to link or Delink the OBO Contact ( On Behalf of) against the Customer.Users can Switch the Master Contact within the Contacts of Customer.Users can change the Contact status from Active to Inactive and vice-versa.NOT AVAILABLE IN PORTAL | |
| Facility | Facility Search | User can search the Customer Facility in Search Page by below inputsBy Facility Name & AddressBy AddressBy Facility Code.(CMD or SCV Code)HomeAllows users to search for a facility using its address or facility name or status. There is a form to enter what you need to search and also a reset button to clear the form. By ReferenceAllows a user to search for a facility by reference values.Users can search byFacility code / Alternate Facility Code |
| Facility Retrieve | NOT AVAILABLE IN PORTAL | |
| Facility Create | User Can Create Customer Facility through portal.NOT AVAILABLE IN PORTAL | |
| Facility Update | User Can Update Customer Facility through portal.User can Add/Remove relationship between Customer and Facility.NOT AVAILABLE IN PORTAL | |
| Workflow | Search workflows | HomepageWhen someone edits a customer the changes go into a workflow. A workflow is generated that ADSs will be able to see and they can either Approve or Reject the workflow. |
| Retrieve Workflow | Focus modeYou can open/share a single workflow with anyone having a Maersk email ID.They will be able to see this single workflow record in a focused mode. | |
| Others | Settings | Account SettingsSee here all the settings related to your accountYou will also be able to see your profile information.Notifications SettingsManage the UI notifications related settingsSend FeedbackSend feedback to the CMD team admins from this page. You will be able to upload files as well. |
| 404 not found page | If the URL is wrong or it is not from any of the above endpoints then this 404 screen will be shown. |
Backend services used in UI
| Service Name | Service Details | Service Endpoints Examples |
|---|---|---|
| Access Token API | It fetches a token to make subsequently authorized requests to the backend. | Access token endpointhttps://iam-cdt.maersk.com/acm/oauth2/realms/mau/access%5FtokenLogin - No URL since It is handled by Azure AD. |
| Search Customer API | Search Customer service is a backend REST service that used to fetch the customers doing/have done business with Maersk. It will take a few input parameters and search with Exact and Fuzzy and gives result. | Customer Search endpointhttps://api-cdt.maersk.com/master-data/customers?tradingName=tata&countryCode=INCustomer Search by Taxhttps://api-cdt.maersk.com/master-data/customers?taxNumber=GBHA876Customer Search by Referencehttps://api-cdt.maersk.com/master-data/customers?referenceType=BVD&referenceValue=GB05327113Customer Search by AltCodehttps://api-cdt.maersk.com/master-data/customers/AE00791564?altCodeType=SCVCustomer Search by CustomerCodehttps://api-cdt.maersk.com/master-data/customers/AE00807597 |
| GEO Country/City/Postal Code/Region | It is used to fetch and show the country, city, region, and postal code suggestions list while you are typing. | GEO Country/City/Region/Postal Code endpoint Country - https://api-cdt.maersk.com/master-data/countries/country-summariesCities - https://api-cdt.maersk.com/master-data/countries/IN/citiesRegions - https://api-cdt.maersk.com/master-data/countries/IN/statePostal Codes - https://api-cdt.maersk.com/master-data/postal-codes-summary?name=AGARTALA&countryCode=IN |
| Address Validation API | This API is providing data from Country Generic rule table. It sends the validations specific to a country. | NOT AVAILABLE |
| Customer Retrieve API | It is used to retrieve all the details of a single customer. It is used for searching by AltCode or CMD Code. | Customer Retrieve endpoint https://api-cdt.maersk.com/master-data/customers/AE00791564 |
| Upsert Customer API | This API is responsible for updating or creating a customer. | NOT AVAILABLE |
| Assign Customer Segements API | This API assigns a customer segment to a brand for a specific customer. | NOT AVAILABLE |
| BE code API | Used to assign / generate / validate BE Code. | Generate BE code - NOT AVAILABLE Validate BE code - NOT AVAILABLE Assign BE code - NOT AVAILABLE |
| BvD Retrieve API | Used to retrieve details of specific BvD records using BvD ID. | BvD Retrieve endpointhttps://mlitcmdsitwebvdapi.azurewebsites.net/master-data/bvd/customer?reqType=internal&bvdId=INFSGBR071CI |
| BvD Match API | Used to fetch matching customers in BvD Orbis. | BvD Match endpointhttps://mlitcmdsitwebvdapi.azurewebsites.net/master-data/bvd/customer?country=IN&customerName=tata&pageSize=100 |
| Contact Search API | It is used to fetch the contacts doing/have done business with Maersk, by fuzzy or exact match. | Contact Search endpoint by CustomerCodehttps://api-cdt.maersk.com/master-data/contacts?customerCode=AE00259651Contact Search endpointhttps://api-cdt.maersk.com/master-data/contacts?statusCode=Active&firstName=a |
| Contact Retrieve API | It is used to retrieve all the details of a single contact. | Contact Retrieve endpoint https://api-cdt.maersk.com/master-data/contacts/AE00807597 |
| Upsert Contact API | This API is responsible for updating or creating a contact. | NOT AVAILABLE |
| Facility Search API | This API is responsible for searching a facility in CMD. | Facility Search by facility name - NOT AVAILABLE Facility Search by facility code- NOT AVAILABLE |
| Facility Retrieve API | This API is responsible for retrieving details of a facility. | NOT AVAILABLE |
| Upsert Facility API | This API is responsible for updating or creating a facility | NOT AVAILABLE |
| More to be added later | - | - |
For more details of All Screens and backend APIs, please expand this section (It is optional to read).
| Screen | Screen endpoint & Status | Screen Description | Used Backend APIs Description | API URLs | Epic links, Progress tracker JIRA | |
|---|---|---|---|---|---|---|
| 1 | /loginStatus - COMPLETE | Any user will land on this screen if they are Either unauthenticated.Switched to a different browser.Left the screen idle for at least 1 hour. (Your session will expire) | Access Token API POST REQUEST It fetches a token in order to make subsequent authorized requests to the backend. | Access token endpointhttps://iam-cdt.maersk.com/acm/oauth2/realms/mau/access%5FtokenLogin - No URL since It is handled by Azure AD. | N.A | |
| 2 | / /customer/search /customer/search/tradingnameStatus - VALIDATIONS ARE LEFT +ENHANCEMENTS NEEDED | Allows user to search for a customer using its address or trading name or status. There is a form to enter what you need to search and also a reset button to clear the form. | Customer Search API GET REQUEST It is used to fetch the customers doing/have done business with Maersk, by fuzzy or exact match.GEO Country/City/Postal Code/Region GET REQUEST It is used to fetch and show the country, city, region, postal code suggestions list while you are typing. | Customer Search endpointhttps://api-cdt.maersk.com/master-data/customers?tradingName=tata&countryCode=INGEO Country/City/Region/Postal Code endpoint Country - https://api-cdt.maersk.com/master-data/countries/country-summariesCities - https://api-cdt.maersk.com/master-data/countries/IN/citiesRegions - https://api-cdt.maersk.com/master-data/countries/IN/statePostal Codes - https://api-cdt.maersk.com/master-data/postal-codes-summary?name=AGARTALA&countryCode=IN | CMD1-1 -Getting issue details... STATUS | |
| 3 | /customer/search/reference/customer/search/reference/altcode/customer/search/reference/custref/customer/search/reference/taxno/customer/search/reference/custcodeStatus - VALIDATIONS ARE LEFT +ENHANCEMENTS NEEDED | Allows a user to search for a customer by reference values.User can search byCustomer Code (FACT/CMD code)Customer reference types and valuesCustomer tax numberCustomer alternate codes like (BE/BPMA/Alt Code etc) | Customer Search API GET REQUESTIt uses the same API mentioned in 2 row. The parameters are different though. Customer Retrieve API GET REQUESTIt is used for searching by AltCode or CMD Code. | Customer Search by Taxhttps://api-cdt.maersk.com/master-data/customers?taxNumber=GBHA876Customer Search by Referencehttps://api-cdt.maersk.com/master-data/customers?referenceType=BVD&referenceValue=GB05327113Customer Search by AltCodehttps://api-cdt.maersk.com/master-data/customers/AE00791564?altCodeType=SCVCustomer Search by CustomerCodehttps://api-cdt.maersk.com/master-data/customers/AE00807597 | ||
| 4 | /customer/search/resultsStatus - COMPLETE | User is able to see the possible customer matches to what they have searched.Results are shown in a tabular format. They are able to sort, filter and even download the data in CSV format. | NO APIS USED HERE | N.A | ||
| 5 | /customer/detail/customer/detail/detailsStatus - EDIT AND UPSERT PENDING +ENHANCEMENTS NEEDED | This screen shows the all the details stored in CMD of a single customer.There are multiple tabs present, to display the information in simplied way. | Customer Retrieve API GET REQUESTIt is used to retrieve all the details of a single customer. | Customer Retrieve endpoint https://api-cdt.maersk.com/master-data/customers/AE00791564 | ||
| 6 | /customer/detail/contactsStatus - COMPLETE | User is able to see the possible contact matches specific to the customer record they have openedResults are shown in a tabular format. They are able to sort, filter and even download the data in CSV format. | Contact Search API GET REQUESTIt is used to fetch the contacts doing/have done business with Maersk, by fuzzy or exact match. | Contact Search endpoint by CustomerCodehttps://api-cdt.maersk.com/master-data/contacts?customerCode=AE00259651 | ||
| 7 | /customer/detail/relationshipsStatus - COMPLETE | User is able to see how the customer which is opened is related to any other customer. | NO APIS USED HERE since the same response from Customer Retrieve API is used. | N.A | ||
| 8 | /contact/searchStatus - VALIDATIONS ARE LEFT + ENHANCEMENTS NEEDED | Allows user to search for a contact using its email/name/status/phone numbers etc. There is a form to enter what you need to search and also a reset button to clear the form. | Contact Search API GET REQUEST It is used to fetch the contacts doing/have done business with Maersk, by fuzzy or exact match. | Contact Search endpointhttps://api-cdt.maersk.com/master-data/contacts?statusCode=Active&firstName=a | CMD1-3 -Getting issue details... STATUS | |
| 9 | /contact/search/resultsStatus - ENHANCEMENTS NEEDED | User is able to see the possible contact matches to what they have searchedResults are shown in a tabular format. They are able to sort, filter and even download the data in CSV format. | NO APIS USED HERE | N.A | ||
| 10 | /contactStatus - EDIT AND UPSERT PENDING + ENHANCEMENTS NEEDED | This screen shows the all the details stored in CMD of a single contact.There are multiple tabs present, to display the information in simplied way.User can directly open the linked customer. | Contact Retrieve API GET REQUEST It is used to retrieve all the details of a single contact. | Contact Retrieve endpoint https://api-cdt.maersk.com/master-data/contacts/AE00807597 | ||
| 11 | /facility/search/facility/search/facilitynameStatus - COMPLETE but API NOT AVAILABLE | Allows user to search for a facility using its address or facility name or status. There is a form to enter what you need to search and also a reset button to clear the form. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | CMD1-4 -Getting issue details... STATUS | |
| 12 | /facility/search/referenceStatus - COMPLETE but API NOT AVAILABLE | Allows a user to search for a facility by reference values.User can search byFacility code / Alternate Facility Code | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | ||
| 13 | /bvd-searchStatus - COMPLETE + CORS - ENHANCEMENT NEEDED | User is able to search BvD(Orbis) using the UI. Results are shown in a tabular format. They are able to sort and filter data. They can select a record to proceed for customer creation. | BvD Match API GET REQUESTUsed to fetch matching customers in BvD Orbis.BvD Retrieve API GET REQUESTUsed to retrieve details of specific BvD record using BvD ID. | BvD Match endpointhttps://mlitcmdsitwebvdapi.azurewebsites.net/master-data/bvd/customer?country=IN&customerName=tata&pageSize=100BvD Retrieve endpointhttps://mlitcmdsitwebvdapi.azurewebsites.net/master-data/bvd/customer?reqType=internal&bvdId=INFSGBR071CI | CMD1-9 -Getting issue details... STATUS | |
| 14 | Customer Create - The sub-routes/endpoints will change | /customer/add/customer/add/step1Status - ENHANCEMENTS NEEDED | User can add customer details in this screen while creating customer.The fields get auto populated by BvD retrieve results. Address doctor is run when Next button is clicked, if the user changes any fields which are auto-populated by BvD. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK |
| 15 | /customer/add/step2Status - ENHANCEMENTS NEEDED and API NOT AVAILABLE | User can add business details in this screen while creating customer. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK | |
| 16 | /customer/add/step3Status - ENHANCEMENTS NEEDED | This is a review page where user gets a chance to review what they are going to submit. They can go back or edit the fields there itself. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK | |
| 17 | /customer/add/step4Status - COMPLETE but API NOT AVAILABLE | It shows a confirmation/duplicate records after the form is submitted. Also prompts the user to take actions to create a contact. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK | |
| 18 | /settings/settings/accountStatus - COMPLETE + ENHANCEMENTS NEEDED in future | See here all the settings related to your accountYou will also be able to see your profile information. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | N.A | |
| 19 | /settings/notificationStatus - ENHANCEMENTS NEEDED & API NOT AVAILABLE | Manage the UI notifications related settings | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | N.A | |
| 20 | /settings/feedbackStatus - COMPLETE but API NOT AVAILABLE | Send feedback to the CMD team admins from this page. You will be able to upload files as well. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | N.A | |
| 21 | /workflowsStatus - ENHANCEMENTS NEEDED and API NOT AVAILABLE | When someone edits a customer/contact/facility the changes goes into a workflow. A workflow is generated which ADSs will be able to see and they can either Approve or Reject the workflow. | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK | |
| 22 | /workflows/:workflowIDStatus - ENHANCEMENTS NEEDED and API NOT AVAILABLE | You can open/share a single workflow with anyone having a Maersk email ID.They will be able to see this in a focused mode | BACKEND YET TO BE DEVELOPED | NOT YET FINALISED | PLEASE ATTACH A JIRA LINK | |
| 23 | /6s&76%vbd82/any_random_link/sk0ai | If the URL is wrong or it is not from any of the above endpoints then this 404 screen will be shown. | N.A | N.A | N.A |
UI Navigation flow
UI Validations
| Business Entity | Features / Capability | Field/Section Validation | Validation Detail | Min/Max Length |
|---|---|---|---|---|
| Customer | Customer Search | Mandatory Fields | ||
| Trading Name | Trading name is a mandatory field and length can not be more than 128 and it can't be empty. | 3/128 | ||
| Country | Trading name is a mandatory field and it can be selected from the dropdown list. | |||
| Optional Fields | ||||
| City | City is an optional field and it can be selected based on the country from the dropdown list | |||
| Postal Code / Zip Code | Postal Code / Zip Code is an optional field | |||
| Street Name | Street Name is an optional field and it can be empty | 0/36 | ||
| Street Number | Street Number is an optional field and it can be empty | 0/10 | ||
| P.O. Box | P.O. Box is an optional field and it can be empty | 0/36 | ||
| Region | Region is an optional field and it can be empty | 0/48 | ||
| Account Status | Account Status is a mandatory field. Its value can be All, Active, Inactive, Suspended. | |||
| Contact | Contact Search | Optional Fields | ||
| First Name | First Name is an optional field | 0/128 | ||
| Last Name | Last Name is an optional field | 0/128 | ||
| Primary Email | Primary Email is an optional field | |||
| Secondary Email | Secondary Email is an optional field | |||
| ISD Code | ISD Code is an optional field | 0/4 | ||
| Phone Number | Phone Number is an optional field | 0/20 | ||
| Country Code | Country Code is an optional field | 0/2 | ||
| Contact Role | Contact Role is an optional field and it can be selected from the dropdown list. It can be either CUST_CONT or ON_BEHALF_OF | |||
| Trading Name | Trading name is optional and length can not be more than 128 and it cant be empty. | 3/128 | ||
| Customer Code | Customer Code is an optional field | 0/11 | ||
| Account Status | Account Status is a mandatory field. Its value can be All, Active, Inactive. | |||
| Facility | Facility Search | Optional Fields | ||
| Facility Name | Facility Name is an optional field | 0/128 | ||
| Country | Country is an optional field | |||
| City | City is an optional field | 0/48 | ||
| Postal Code / Zip Code | Postal Code / Zip Code is an optional field | |||
| Street Name | Street Name is an optional field | 0/36 | ||
| Street Number | Street Number is an optional field | 0/10 | ||
| P.O. Box | P.O. Box is an optional field | 0/36 | ||
| Region | Region is an optional field | 0/48 | ||
| Account Status | Account Status is a mandatory field. Its value can be All, Active, Inactive. | |||
| Create Customer | BvD | Optional Fields | ||
| Trading Name | Trading Name is an optional field | 0/128 | ||
| Tax Reference | Tax Reference is an optional field | 0/25 | ||
| Country | Country is a mandatory field and it can be selected from the dropdown list | |||
| City | City is an optional field | 0/48 | ||
| Customer Details | Mandatory Fields | |||
| Trading Name | - | 3/128 | ||
| Search Country | Can’t be empty user needs to select from the provided list only | 0/36 | ||
| Search City | City suggestion is only populated when the country is selected first. | 0/48 | ||
| Customer Group Type | It can be selected from the dropdown list | |||
| Optional Fields | ||||
| Website URL | - | 0/292 | ||
| Country Code | - | 0/36 | ||
| Primary Contact Number | - | 0/20 | ||
| Alternate Contact Number | - | 0/20 | ||
| Street Name | - | 0/36 | ||
| Street Number | - | 0/10 | ||
| Apartment, Suite, Floor, etc | - | 0/36 | ||
| Postal Code / Zip Code | - | 0/10 | ||
| City sub-area / City District | - | 0/36 | ||
| Region | - | 0/20 | ||
| P.O. Box | - | 0/36 |
Currently, only basic validations and char length checks are present in the portal. These need to be finalized and provided by Vinesh/Sudhir/Naveen.
-
UI errors - This is not shown to the user.
-
All API-related errors are handled and shown with user-friendly descriptions and error codes to the user. The user can
go backto what they were doing orSend feedbackto CMD Team. -
Warnings are shown wherever the user is missing critical things in the CMD Portal.
Roles and Access levels
- Roles and capabilities of each role and access levels. (From Vinesh/Naveen/Srini)
| Role Name | Access Level | Role Activities |
|---|---|---|
| SegmentationManager | Can Read and Update Customer | This role user can only update customer segment data and they can read or retrieve or search customers. |
| All Cluster roles (CMD_IBC, CMD_NCR, CMD_ ) | Can access the respective cluster tasks assigned | |
| More roles to be added |
Older roles table with respect to screens
| Screen Name | Buttons that need to be protected by roles | Which roles are having the access to the UI element? | Which roles are NOT having the access to the UI element? |
|---|---|---|---|
| Customer Search Screen | - | ACCESSIBLE TO ALL ROLES | - |
| Customer Search Results Screen | Download button please put a screenshot | CMD-ABCDCMD-BCDESuperuser | CMD-XYZCMD-READERXYZ |
| Workflow Homepage | Approve button - please put a screenshot | Superuser | CMD-READERXYZ |
| Reject All button - please put a screenshot | Superuser | CMD-READER1243SMDS-FINANCE121 |
Technologies used for UI Development
Main UI Development tech stack
- React - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjl4s%5F34Pf3AhWoTGwGHX48AjMQFnoECAgQAQ&url=https%3A%2F%2Freactjs.org%2Fdocs%2Fgetting-started.html&usg=AOvVaw2ELKlyujw4msP4lLpv0rOd
- Redux - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjQuLPD4ff3AhVuUGwGHdOnCzMQjBB6BAgNEAE&url=https%3A%2F%2Freact-redux.js.org%2Fintroduction%2Fgetting-started&usg=AOvVaw3imOL5u2ZwOmuQX9a7mA3U
- React Router v5 - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwierq7X4%5Ff3AhXKSWwGHS4PBDMQFnoECBgQAQ&url=https%3A%2F%2Freactrouter.com%2F&usg=AOvVaw2slQbsol-LDDDDAITBclze
- Material UI v4 - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwi8%5F5ig4ff3AhX-SWwGHT01DYMQFnoECA4QAQ&url=https%3A%2F%2Fv4.mui.com%2F&usg=AOvVaw0dAgYfnoAiXNWFKzQv%5FPWk
- React MDS - https://mds-components.maersk-digital.net/?path=/story/welcome--page
Other beta libraries for UI Development
- Moment JS - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwif8r6U4%5Ff3AhWZRmwGHfzcDTMQjBB6BAgMEAE&url=https%3A%2F%2Fmomentjs.com%2Fdocs%2F&usg=AOvVaw09DE0vuj8XdDnM6eRIw4o8
- Azure AD - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjol7Ob4%5Ff3AhXBR2wGHa%5F-BTMQFnoECAUQAQ&url=https%3A%2F%2Fazure.microsoft.com%2Fen-in%2Fservices%2Factive-directory%2F&usg=AOvVaw2TF5NnilewA-9-1N1ghtDM
- React toastify - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwinmoHo4%5Ff3AhVrS2wGHQ8iBDIQFnoECAkQAQ&url=https%3A%2F%2Ffkhadra.github.io%2Freact-toastify%2Finstallation%2F&usg=AOvVaw0YbEH3DRrqQMOSWlAGnlCY
- React dropzone - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjX%5FvXu4%5Ff3AhUrRWwGHbvyBdcQFnoECAgQAQ&url=https%3A%2F%2Freact-dropzone.js.org%2F&usg=AOvVaw0FW86te19i7Q5MkGSiql3I
- Material UI pickers - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiogtqA5Pf3AhV7RWwGHZpwBjEQFnoECAkQAQ&url=https%3A%2F%2Fmaterial-ui-pickers.dev%2Fgetting-started%2Finstallation&usg=AOvVaw25ziYGPcJB97Mpq8yRZBMQ
Design
- Adobe XD - https://xd.adobe.com/view/3abe670c-c94c-4da1-996e-457792e63dcd-6fed/screen/f34d776e-f866-483e-b0bb-0df5ff21375b/
- Figma (Rarely used) - https://figma.com/
- Maersk Design System (MDS) - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwi8--%5F04ff3AhU5R2wGHfTqCqoQFnoECAgQAQ&url=https%3A%2F%2Fdesignsystem.maersk.com%2F&usg=AOvVaw28-NXBnJapy2h-f1jm6yi8
Testing
- Jest - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjTkdve4vf3AhUxR2wGHYLiDTMQFnoECAMQAQ&url=https%3A%2F%2Fjestjs.io%2Fdocs%2Ftutorial-react&usg=AOvVaw3kXG0yX5Zvg1KKnM7DV0zy
- Cypress - for automation & integration testing - https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjNvfHs4vf3AhVlSmwGHXflCTMQFnoECAcQAQ&url=https%3A%2F%2Fwww.cypress.io%2Fblog%2F2021%2F04%2F06%2Fcypress-component-testing-react%2F&usg=AOvVaw3XwursX%5Faawid8cM7B4yDt
Other features
- Offline mode
- The user is restricted to perform any kind of activity when they are
Offline.
- The user is restricted to perform any kind of activity when they are
Other links
- Modern CMD Portal SIT Link: https://cmdportalsit.azurewebsites.net/
- Modern CMD-Portal-UI Github repo: https://github.com/Maersk-Global/cmd-portal-ui
Epic Links
- Put links here.
TODOs (Later):
- Create doc for CMD UI application LLD - for developers
If you find any mistake here or have a suggestion to include in this document. Then please put a comment and tag Srikant Sahoo or Naveen Varma Roda
Was this page helpful?