@kenyaemr/esm-morgue-app 5.4.2-pre.2283 → 5.4.2-pre.2291

package/src/card/compartment-view.compartment.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import styles from './compartment.scss';
-import EmptyCompartment from './empty-compartment.component';
-import AvailableCompartment from './avail-compartment.compartment';
-import EmptyDeceasedSearch from '../empty-state/empty-morgue-admission.component';
-import { useTranslation } from 'react-i18next';
-import { useAdmissionLocation } from '../hook/useMortuaryAdmissionLocation';
-import { InlineLoading } from '@carbon/react';
-import CompartmentShareDivider from './compartmentSharing.component';
-
-const CompartmentView: React.FC = () => {
-  const { t } = useTranslation();
-  const { admissionLocation, isLoading } = useAdmissionLocation();
-
-  if (isLoading) {
-    return (
-      <InlineLoading
-        status="active"
-        iconDescription="Loading"
-        description={t('pullingCompartment', 'Pulling compartments data...')}
-      />
-    );
-  }
-
-  return admissionLocation?.bedLayouts?.length > 0 ? (
-    <div className={styles.allPatientCardWrapper}>
-      {admissionLocation?.bedLayouts?.map((bed, index) => (
-        <div key={bed.bedUuid} className={styles.cardRow}>
-          {bed.status === 'OCCUPIED' ? (
-            <>
-              {bed.patients.length > 1 ? (
-                <div className={styles.verticalLayout}>
-                  {bed.patients.map((patient, patientIndex) => (
-                    <React.Fragment key={patient.uuid}>
-                      <AvailableCompartment patientInfo={patient} bedNumber={bed?.bedNumber} />
-                      {patientIndex < bed.patients.length - 1 && <CompartmentShareDivider />}
-                    </React.Fragment>
-                  ))}
-                </div>
-              ) : (
-                <div className={styles.horizontalLayout}>
-                  <AvailableCompartment patientInfo={bed.patients[0]} bedNumber={bed?.bedNumber} />
-                </div>
-              )}
-            </>
-          ) : (
-            <EmptyCompartment bedNumber={bed?.bedNumber} />
-          )}
-        </div>
-      ))}
-    </div>
-  ) : (
-    <div className={styles.emptyStateContainer}>
-      <EmptyDeceasedSearch
-        title={t('noResultNotFound', 'No result found')}
-        subTitle={t('adjustFilterOrSwitch', 'Try adjusting your search.')}
-      />
-    </div>
-  );
-};
-
-export default CompartmentView;

package/src/card/compartment.scss

@@ -1,128 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.allPatientCardWrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: layout.$spacing-01;
-  width: 100%;
-  padding: 0;
-  justify-items: center;
-  align-items: start;
-
-  :global(.omrs-breakpoint-lt-desktop) & {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.cardView {
-  width: 100%;
-  max-width: 380px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  padding: layout.$spacing-04;
-  background-color: colors.$gray-20;
-
-  :global(.omrs-breakpoint-lt-desktop) & {
-    padding: layout.$spacing-03;
-    gap: layout.$spacing-02;
-  }
-}
-
-.cardRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-bottom: layout.$spacing-03;
-
-  &.centeredContent {
-    justify-content: center;
-    text-align: center;
-  }
-}
-
-.verticalLayout {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.horizontalLayout {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.cardLabelWrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: layout.$spacing-10;
-}
-
-.cardLabel {
-  font-size: layout.$spacing-05;
-  line-height: 1.29;
-  color: colors.$blue-60;
-  width: layout.$spacing-13;
-}
-
-.deceasedName,
-.noCompartment {
-  font-size: type.type-scale(2);
-  font-weight: 600;
-  color: colors.$black;
-  margin-left: layout.$spacing-05;
-  width: 100%;
-}
-
-.deceasedReason,
-.deceasedNoDays,
-.noDays {
-  color: colors.$gray-90;
-  font-size: type.type-scale(2);
-}
-
-.viewDetailsLink {
-  margin: 0;
-  padding: 0;
-  color: colors.$gray-60;
-}
-
-.middot {
-  margin: 0 layout.$spacing-03;
-  font-weight: normal;
-  color: colors.$gray-60;
-  font-size: type.type-scale(2);
-}
-
-.age {
-  font-weight: normal;
-  color: colors.$gray-60;
-  font-size: type.type-scale(2);
-}
-
-.causeDisplay {
-  font-size: type.type-scale(2);
-  color: colors.$gray-60;
-  text-align: justify;
-}
-
-.emptyStateContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.borderLine {
-  width: 100%;
-  height: 1px;
-  background-color: colors.$gray-30;
-  margin: layout.$spacing-03 0;
-}

package/src/card/compartmentSharing.component.tsx

@@ -1,21 +0,0 @@
-import { SkeletonText, Tag } from '@carbon/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './compartmentSharing.scss';
-
-interface CompartmentShareDividerProps {
-  isLoading?: boolean;
-}
-
-const CompartmentShareDivider: React.FC<CompartmentShareDividerProps> = ({ isLoading }) => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.compartmentDivider}>
-      <div className={styles.compartmentDividerLine}></div>
-      {isLoading ? <SkeletonText /> : <Tag>{t('sharing', 'Sharing')}</Tag>}
-      <div className={styles.compartmentDividerLine}></div>
-    </div>
-  );
-};
-
-export default CompartmentShareDivider;

package/src/card/compartmentSharing.scss

@@ -1,24 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.compartmentDivider {
-  background-color: colors.$gray-80;
-  color: colors.$white;
-  padding: layout.$spacing-02;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 95.4%;
-
-  :global(.omrs-breakpoint-lt-desktop) & {
-    padding: layout.$spacing-01;
-    width: 92%;
-  }
-}
-
-.compartmentDividerLine {
-  height: 1px;
-  background-color: colors.$white;
-  width: 30%;
-}

package/src/card/empty-compartment.component.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import styles from './empty-compartment.scss';
-import { Button, Tile } from '@carbon/react';
-import { Movement } from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import { launchWorkspace } from '@openmrs/esm-framework';
-interface EmptyCompartmentProps {
-  bedNumber: string;
-}
-
-const EmptyCompartment: React.FC<EmptyCompartmentProps> = ({ bedNumber }) => {
-  const { t } = useTranslation();
-  const handleSearchAdmitWorkspace = () => {
-    launchWorkspace('admit-body-form');
-  };
-  return (
-    <div className={styles.cardView}>
-      <div className={`${styles.cardRow} ${styles.centeredContent}`}>
-        <div className={styles.cardLabelWrapper}>
-          <div className={styles.cardLabel}>{bedNumber}</div>
-        </div>
-        <span className={styles.noCompartment}>{t('empty', 'Empty')}</span>
-      </div>
-    </div>
-  );
-};
-
-export default EmptyCompartment;

package/src/card/empty-compartment.scss

@@ -1,61 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.cardView {
-  width: 100%;
-  max-width: 380px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  padding: layout.$spacing-04;
-  background-color: colors.$gray-20;
-
-  :global(.omrs-breakpoint-lt-desktop) & {
-    padding: layout.$spacing-03;
-    gap: layout.$spacing-02;
-  }
-}
-
-.cardRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-bottom: layout.$spacing-03;
-
-  &.centeredContent {
-    justify-content: center;
-    text-align: center;
-  }
-}
-
-.cardLabelWrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: layout.$spacing-10;
-}
-
-.cardLabel {
-  font-size: layout.$spacing-05;
-  line-height: 1.29;
-  color: colors.$blue-60;
-  width: layout.$spacing-13;
-}
-
-.deceasedName,
-.noCompartment {
-  font-size: type.type-scale(2);
-  font-weight: 600;
-  color: colors.$black;
-  width: 100%;
-  margin-right: layout.$spacing-09;
-}
-
-.assignButton {
-  width: 100%;
-  margin-top: layout.$spacing-05;
-}

package/src/component/main.component.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { MorgueHeader } from '../header/morgue-header.component';
-import { MorgueTabs } from '../tabs/tabs.component';
-
-const MainComponent: React.FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className={`omrs-main-content`}>
-      <MorgueHeader title={t('mortuary', 'Mortuary')} />
-      <MorgueTabs />
-    </div>
-  );
-};
-
-export default MainComponent;

package/src/component/next-of-kin-details/nextOfKinDetails.component.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import styles from './nextOfKinDetails.scss';
-import { useTranslation } from 'react-i18next';
-import { Tag } from '@carbon/react';
-import toUpper from 'lodash/toUpper';
-import capitalize from 'lodash/capitalize';
-import { formatDateTime } from '../../utils/utils';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
-
-interface NextOfKinProps {
-  nextOfKin?: {
-    name: string;
-    phone: string;
-    address: string;
-    relationship: string;
-  };
-}
-
-const NextOfKinDetails: React.FC<NextOfKinProps> = ({ nextOfKin }) => {
-  const { t } = useTranslation();
-
-  if (!nextOfKin) {
-    return <div>{t('noAvailable', 'No available')}</div>;
-  }
-
-  return (
-    <div className={styles.nextOfKinDetailsContainer}>
-      <div className={styles.nextOfKinTitle}>
-        <span>{toUpper(t('nextOfKin', 'Next of Kin'))}</span>
-        <span>{formatDateTime(new Date())}</span>
-      </div>
-      <div className={styles.nextOfKinName}>
-        <span>
-          {toUpper(nextOfKin?.name)} &middot;
-          <Tag size="md">{capitalize(nextOfKin?.relationship)}</Tag>
-        </span>
-      </div>
-      <div className={styles.nextOfKinInfo}>
-        <span className={styles.nextOfKinPhone}>
-          {t('phone', 'Phone')}: {nextOfKin?.phone}
-        </span>
-        <span>
-          {t('address', 'Address')}: {nextOfKin?.address}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default NextOfKinDetails;

package/src/component/next-of-kin-details/nextOfKinDetails.scss

@@ -1,37 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.nextOfKinDetailsContainer {
-  background-color: colors.$white;
-  width: 50%;
-  padding: layout.$spacing-04;
-}
-
-.nextOfKinTitle {
-  @include type.type-style('label-02');
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: colors.$gray-70;
-  gap: layout.$spacing-01;
-  margin-left: layout.$spacing-02;
-  margin-right: layout.$spacing-02;
-  margin-bottom: layout.$spacing-02;
-  font-weight: 600;
-}
-.nextOfKinName {
-  margin-left: layout.$spacing-02;
-  margin-right: layout.$spacing-02;
-}
-.nextOfKinInfo {
-  margin-left: layout.$spacing-02;
-  margin-right: layout.$spacing-02;
-}
-
-.middot {
-  margin: 0 layout.$spacing-01;
-}
-.nextOfKinPhone {
-  margin-right: layout.$spacing-05;
-}

package/src/header/admitted-queue-header.component.tsx

@@ -1,30 +0,0 @@
-import { Search } from '@carbon/react';
-import React, { useState } from 'react';
-import styles from './admitted-queue-header.scss';
-
-const DeceasedFilter: React.FC<{ onSearchChange: (searchQuery: string) => void }> = ({ onSearchChange }) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const handleSearchChange = (event) => {
-    const query = event.target.value;
-    setSearchQuery(query);
-    onSearchChange(query);
-  };
-
-  return (
-    <div className={styles.metricsContainer}>
-      <Search
-        size="sm"
-        placeholder="Search for deceased"
-        labelText="Search"
-        closeButtonLabelText="Clear search input"
-        id="search-deceased"
-        onChange={handleSearchChange}
-        value={searchQuery}
-        className={styles.searchInput}
-      />
-    </div>
-  );
-};
-
-export default DeceasedFilter;

package/src/header/admitted-queue-header.scss

@@ -1,32 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.metricsContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 layout.$spacing-05;
-  height: 4rem;
-  margin-bottom: 0 layout.$spacing-05;
-}
-
-.searchInput {
-  flex-grow: 1;
-  margin-right: layout.$spacing-03;
-}
-
-.actionBtn {
-  display: flex;
-  align-items: center;
-  column-gap: layout.$spacing-03;
-  min-width: 200px;
-}
-.comboBox input[type='text'] {
-  background-color: colors.$white;
-  cursor: default;
-}
-.searchInput input[type='text'] {
-  background-color: colors.$white;
-  cursor: default;
-}

package/src/header/morgue-header.component.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Calendar, Location, UserFollow } from '@carbon/react/icons';
-import { useSession, formatDate } from '@openmrs/esm-framework';
-import styles from './morgue-header.scss';
-import MorgueIllustration from './morgue-illustration.component';
-import { InlineLoading } from '@carbon/react';
-
-interface MorgueHeaderProps {
-  title: string;
-}
-
-export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
-  const { t } = useTranslation();
-  const session = useSession();
-  const location = session?.sessionLocation?.display;
-
-  return (
-    <div className={styles.header}>
-      <div className={styles['left-justified-items']}>
-        <MorgueIllustration />
-        <div className={styles['page-labels']}>
-          <p className={styles['page-name']}>{title}</p>
-          <p>{t('mortuaryManagement', 'Mortuary management')}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{location}</span>
-          <span className={styles.middot}>&middot;</span>
-          <Calendar size={16} />
-          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/header/morgue-header.scss

@@ -1,95 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-.header {
-  @include type.type-style('body-compact-02');
-  height: layout.$spacing-12;
-  border-left: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: layout.$spacing-07;
-  margin-right: 0;
-  overflow-x: hidden;
-  padding: 0 layout.$spacing-05;
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: layout.$spacing-04;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-svg.iconOverrides {
-  width: 72 !important;
-  height: 72 !important;
-  fill: var(--brand-03);
-}
-
-.svgContainer svg {
-  width: layout.$spacing-11;
-  height: layout.$spacing-11;
-  fill: var(--brand-03);
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  margin: layout.$spacing-05;
-
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.userContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: layout.$spacing-05;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
-  margin: 0 layout.$spacing-03;
-}
-
-.view {
-  @include type.type-style('label-01');
-}

package/src/header/morgue-illustration.component.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import styles from './morgue-header.scss';
-import { HospitalBed } from '@carbon/react/icons';
-
-const MorgueIllustration: React.FC = () => {
-  return (
-    <div className={styles.svgContainer}>
-      <HospitalBed className={styles.iconOverrides} />
-    </div>
-  );
-};
-
-export default MorgueIllustration;

package/src/hook/useDeceasedPatients.ts

@@ -1,12 +0,0 @@
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { PaginatedResponse } from '../types';
-export async function fetchDeceasedPatient(query: string, abortController: AbortController) {
-  const customRepresentation =
-    'custom:(uuid,display,identifiers:(identifier,uuid,preferred,location:(uuid,name)),person:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),preferredAddress:(uuid,stateProvince,countyDistrict,address4)))';
-  const url = `${restBaseUrl}/morgue/patient?v=${customRepresentation}&dead=true&name=${query}`;
-
-  const resp = await openmrsFetch<{ results: Array<PaginatedResponse> }>(url, {
-    signal: abortController.signal,
-  });
-  return resp?.data?.results;
-}