psp-8228 | Updated header status display (#4028)

* Added generic status component for headers

* Updated tests

source/frontend/src/assets/scss/_variables.module.scss

@@ -22,4 +22,18 @@
   activeActionColor: $active-action-color;
   headerTextColor: $header-text-color;
   headerBorderColor: $header-border-color;
+
+  disabledColor: $disabled-color;
+  disabledFieldBackgroundColor: $disabled-field-background-color;
+
+  slideOutBlue: $slide-out-blue;
+  filterBoxColor: $filter-box-color;
+
+
+  filterBoxColor: $filter-box-color;
+
+  completedColor: $completed-color;
+  selectedColor: $selected-color;
+
+  fontDangerColor: $font-danger-color;
 }

source/frontend/src/assets/scss/colors.scss

@@ -1,23 +1,45 @@
 @import '@/../node_modules/@bcgov/design-tokens/css/variables.css';
 
+$pims-blue-20: #d9eaf7;
+$pims-blue-80: #1a5496;
+
 $pims-blue-50: #428bca;
-$pims-grey-80: #606060;
+
 $pims-yellow-10: #fef1d8;
 $pims-yellow-30: #fcba19;
 $pims-red-10: #f2dede;
+$pims-red-80: #a12622;
 $pims-white: #f2f2f2;
-$pims-blue-20: #d9eaf7;
 $pims-yellow-100: #6c4a00;
 
+$pims-grey-10: #e8ecef;
+
+$pims-grey-20: #959da5;
+$pims-grey-80: #606060;
+
+$pims-green-20: #dff0d8;
+$pims-green-80: #2e8540;
+
 $active-action-color: $pims-blue-50;
 $border-outline-color: $pims-grey-80;
 $warning-background-color: $pims-yellow-10;
 $number-background-color: $pims-yellow-30;
 $danger-background-color: $pims-red-10;
+$light-danger-color: $pims-red-10;
 $highlight-background-color: $pims-white;
 $filter-box-color: $pims-blue-20;
 $text-warning-color: $pims-yellow-100;
 $header-text-color: #{'var(--theme-blue-100)'};
 $header-border-color: #{'var(--theme-blue-90)'};
 $link-color: #{'var(--surface-color-primary-button-default)'};
 $link-hover-color: #{'var(--surface-color-primary-button-hover)'};
+
+$completed-color: $pims-green-80;
+$selected-color: $pims-green-20;
+
+$disabled-color: $pims-grey-20;
+$disabled-field-background-color: $pims-grey-10;
+
+$slide-out-blue: $pims-blue-80;
+
+$font-danger-color: $pims-red-80;

source/frontend/src/components/common/HeaderField/AuditSection.tsx

@@ -8,7 +8,7 @@ import { prettyFormatUTCDate } from '@/utils';
 
 export interface IAuditSectionProps {
   baseAudit: ApiGen_Base_BaseAudit;
-  lastUpdatedBy: Api_LastUpdatedBy;
+  lastUpdatedBy?: Api_LastUpdatedBy;
 }
 
 export const AuditSection: React.FC<IAuditSectionProps> = ({ baseAudit, lastUpdatedBy }) => {
@@ -30,10 +30,13 @@ export const AuditSection: React.FC<IAuditSectionProps> = ({ baseAudit, lastUpda
         <Col className="text-right">
           <StyledSmallText>
             <strong>Updated: </strong>
-            {prettyFormatUTCDate(lastUpdatedBy?.appLastUpdateTimestamp)} by{' '}
+            {prettyFormatUTCDate(
+              lastUpdatedBy?.appLastUpdateTimestamp ?? baseAudit?.appLastUpdateTimestamp,
+            )}{' '}
+            by{' '}
             <UserNameTooltip
-              userName={lastUpdatedBy?.appLastUpdateUserid}
-              userGuid={lastUpdatedBy?.appLastUpdateUserGuid}
+              userName={lastUpdatedBy?.appLastUpdateUserid ?? baseAudit?.appLastUpdateUserid}
+              userGuid={lastUpdatedBy?.appLastUpdateUserGuid ?? baseAudit?.appLastUpdateUserGuid}
             />
           </StyledSmallText>
         </Col>

source/frontend/src/components/common/HeaderField/StatusField.tsx

@@ -0,0 +1,138 @@
+import { Col, Row } from 'react-bootstrap';
+import { IconType } from 'react-icons';
+import { BiDuplicate } from 'react-icons/bi';
+import { FaCheck, FaPauseCircle, FaStopCircle } from 'react-icons/fa';
+import { MdArchive, MdCancel, MdCircle, MdEdit } from 'react-icons/md';
+import styled from 'styled-components';
+
+import { Dictionary } from '@/interfaces/Dictionary';
+import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType';
+
+import { InlineFlexDiv } from '../styles';
+
+interface IStatusFieldProps {
+  statusCodeType: ApiGen_Base_CodeType<string>;
+}
+
+interface StatusStyle {
+  icon: IconType;
+  colorVariant: string;
+}
+
+const statusDictionary: Dictionary<StatusStyle> = {
+  active: { icon: MdCircle, colorVariant: 'green' },
+  archived: { icon: MdArchive, colorVariant: 'grey' },
+  completed: { icon: FaCheck, colorVariant: 'blue' },
+  hold: { icon: FaPauseCircle, colorVariant: 'yellow' },
+  cancelled: { icon: MdCancel, colorVariant: 'red' },
+  draft: { icon: MdEdit, colorVariant: 'yellow' },
+  terminated: { icon: FaStopCircle, colorVariant: 'red' },
+  duplicate: { icon: BiDuplicate, colorVariant: 'blue' },
+};
+
+const StatusField: React.FunctionComponent<React.PropsWithChildren<IStatusFieldProps>> = ({
+  statusCodeType,
+}) => {
+  const translateStatusCode = (statusCodeType: ApiGen_Base_CodeType<string>) => {
+    switch (statusCodeType.id.toLowerCase()) {
+      case 'active':
+      case 'ac':
+        return statusDictionary['active'];
+      case 'archived':
+      case 'cncn':
+      case 'archiv':
+        return statusDictionary['archived'];
+      case 'cancelled':
+      case 'ca':
+      case 'cancel':
+      case 'discard':
+        return statusDictionary['cancelled'];
+      case 'complete':
+      case 'closed':
+      case 'co':
+      case 'complt':
+        return statusDictionary['completed'];
+      case 'draft':
+      case 'pl':
+        return statusDictionary['draft'];
+      case 'duplicate':
+        return statusDictionary['duplicate'];
+      case 'hold':
+      case 'inactive':
+      case 'ho':
+        return statusDictionary['hold'];
+      case 'terminated':
+        return statusDictionary['terminated'];
+      default:
+        break;
+    }
+    return statusDictionary['cancelled'];
+  };
+
+  const statusFound = translateStatusCode(statusCodeType);
+  return (
+    <StyledBottomRow className="no-gutters justify-content-end align-items-end">
+      <Col />
+      <Col xs="auto" className="align-self-end">
+        <RetiredWarning $variant={statusFound.colorVariant}>
+          <statusFound.icon size={16} />
+          {statusCodeType?.description.toUpperCase()}
+        </RetiredWarning>
+      </Col>
+    </StyledBottomRow>
+  );
+};
+
+export default StatusField;
+
+const RetiredWarning = styled(InlineFlexDiv)<{ $variant: string }>`
+  //font-weight: bold; TODO: Bold should be enough, but atm the bcsans-bold is different
+  font-family: 'BCSans-Bold';
+  font-size: 1.4rem;
+
+  border-radius: 0.4rem;
+
+  letter-spacing: 0.1rem;
+  align-items: center;
+
+  padding: 0.2rem 0.5rem;
+
+  gap: 0.5rem;
+
+  ${props => {
+    if (props.$variant === 'green') {
+      return `
+  color: ${props.theme.css.completedColor};
+  background-color: ${props.theme.css.selectedColor};
+    `;
+    } else if (props.$variant === 'grey') {
+      return `
+  color: ${props.theme.css.disabledColor};
+  background-color: ${props.theme.css.disabledFieldBackgroundColor};
+    `;
+    } else if (props.$variant === 'blue') {
+      return `
+  color: ${props.theme.css.slideOutBlue};
+  background-color: ${props.theme.css.filterBoxColor};
+    `;
+    } else if (props.$variant === 'yellow') {
+      return `
+  color: ${props.theme.css.textWarningColor};
+  background-color: ${props.theme.css.warningBackgroundColor};
+    `;
+    } else if (props.$variant === 'red') {
+      return `
+  color: ${props.theme.css.fontDangerColor};
+  background-color: ${props.theme.css.dangerBackgroundColor};
+    `;
+    } else {
+      return `color: red`;
+    }
+  }}
+`;
+
+const StyledBottomRow = styled(Row)`
+  margin-top: auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+`;

source/frontend/src/components/common/HeaderField/styles.tsx

@@ -0,0 +1,16 @@
+import { Row } from 'react-bootstrap';
+import styled from 'styled-components';
+
+export const StyledRow = styled(Row)`
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom-style: solid;
+  border-bottom-color: grey;
+  border-bottom-width: 0.1rem;
+`;
+
+export const StyledFiller = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;