Ocrvs 3423 (#3467)

* Update primary contact mapping of status table

* Add small padding to header and item content of TableView

* Update field agent type mapping

* Replace unnecessary useCallback with plain function

* Remove unused import

Author: tahmidrahman-dsi

packages/client/src/views/Performance/FieldAgentList.tsx

@@ -54,6 +54,7 @@ import {
   MobileWrapper,
   DesktopWrapper
 } from '@opencrvs/components/lib/styleForPagination'
+import { userMessages } from '@client/i18n/messages'
 
 const ToolTipContainer = styled.span`
   text-align: center;
@@ -327,6 +328,10 @@ function FieldAgentListComponent(props: IProps) {
     ]
   }
 
+  function getFieldAgentTypeLabel(type: string) {
+    return userMessages[type] ? intl.formatMessage(userMessages[type]) : type
+  }
+
   function getContent(data?: GQLSearchFieldAgentResult) {
     const content =
       data &&
@@ -350,7 +355,7 @@ function FieldAgentListComponent(props: IProps) {
         return {
           name: getNameWithAvatar(row.fullName || '', row.avatar),
           rawName: row.fullName || '',
-          type: row.type,
+          type: (row.type && getFieldAgentTypeLabel(row.type)) || '',
           officeName: (office && office.displayLabel) || '',
           startMonth: row.creationDate,
           totalDeclarations: String(row.totalNumberOfDeclarationStarted),

packages/client/src/views/SysAdmin/Performance/WorkflowStatus.tsx

@@ -164,7 +164,13 @@ const statusOptions = [
 const PrimaryContactLabelMapping = {
   MOTHER: formMessages.contactDetailsMother,
   FATHER: formMessages.contactDetailsFather,
-  INFORMANT: formMessages.contactDetailsInformant
+  INFORMANT: formMessages.contactDetailsInformant,
+  OTHER_FAMILY_MEMBER: formMessages.otherFamilyMember,
+  LEGAL_GUARDIAN: formMessages.legalGuardian,
+  GRANDMOTHER: formMessages.grandmother,
+  GRANDFATHER: formMessages.grandfather,
+  BROTHER: formMessages.brother,
+  SISTER: formMessages.sister
 }
 
 type PrimaryContact = keyof typeof PrimaryContactLabelMapping

packages/components/src/components/interface/TableView.tsx

@@ -182,6 +182,7 @@ const ContentWrapper = styled.span<{
   text-align: ${({ alignment }) => (alignment ? alignment.toString() : 'left')};
   cursor: ${({ sortable }) => (sortable ? 'pointer' : 'default')};
   color: ${({ theme }) => theme.colors.tertiary};
+  padding: 0 4px;
 `
 const ValueWrapper = styled.span<{
   width: number
@@ -195,7 +196,7 @@ const ValueWrapper = styled.span<{
   justify-content: ${({ alignment }) =>
     alignment === ColumnContentAlignment.RIGHT ? 'flex-end' : 'flex-start'};
   text-align: ${({ alignment }) => (alignment ? alignment.toString() : 'left')};
-  padding-right: 8px;
+  padding: 0 4px;
   align-self: center;
   ${({ color }) => color && `color: ${color};`}
 `