@kenyaemr/esm-ward-app 7.0.3-pre.89 → 8.0.0

package/src/ward-view/ward-view.component.tsx

@@ -1,124 +1,120 @@
-import { InlineNotification } from '@carbon/react';
-import { WorkspaceContainer, useFeatureFlag, useLocations, useSession, type Location } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
+import { InlineNotification } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { WorkspaceContainer, useFeatureFlag } from '@openmrs/esm-framework';
 import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
 import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
 import WardBed from './ward-bed.component';
 import { bedLayoutToBed, filterBeds } from './ward-view.resource';
 import styles from './ward-view.scss';
 import WardViewHeader from '../ward-view-header/ward-view-header.component';
-import { type AdmittedPatient, type WardPatient } from '../types';
-import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
+import { type InpatientAdmission, type WardPatient } from '../types';
+import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
+import useWardLocation from '../hooks/useWardLocation';
+import UnassignedPatient from '../beds/unassigned-patient.component';
 
 const WardView = () => {
-  const { locationUuid: locationUuidFromUrl } = useParams();
-  const { sessionLocation } = useSession();
-  const allLocations = useLocations();
+  const response = useWardLocation();
+  const { isLoadingLocation, invalidLocation } = response;
   const { t } = useTranslation();
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-  const locationFromUrl = allLocations.find((l) => l.uuid === locationUuidFromUrl);
-  const invalidLocation = Boolean(locationUuidFromUrl && !locationFromUrl);
-  const location = (locationFromUrl ?? sessionLocation) as any as Location;
-  //TODO:Display patients with admitted status (based on their observations) that have no beds assigned
-  if (!isBedManagementModuleInstalled) {
+
+  if (isLoadingLocation) {
     return <></>;
   }
 
-  return invalidLocation ? (
-    <InlineNotification
-      kind="error"
-      lowContrast={true}
-      title={t('invalidLocationSpecified', 'Invalid location specified')}
-      subtitle={t('unknownLocationUuid', 'Unknown location uuid: {{locationUuidFromUrl}}', {
-        locationUuidFromUrl,
-      })}
-    />
-  ) : (
+  if (invalidLocation) {
+    return <InlineNotification kind="error" title={t('invalidLocationSpecified', 'Invalid location specified')} />;
+  }
+
+  return (
     <div className={styles.wardView}>
-      <WardViewHeader location={location} />
+      <WardViewHeader />
       <div className={styles.wardViewMain}>
-        <WardViewByLocation location={location} />
+        {isBedManagementModuleInstalled ? <WardViewWithBedManagement /> : <WardViewWithoutBedManagement />}
       </div>
-      <WorkspaceContainer contextKey="ward" />
+      <WorkspaceContainer overlay contextKey="ward" />
     </div>
   );
 };
 
-const WardViewByLocation = ({ location }: { location: Location }) => {
-  const {
-    admissionLocation,
-    isLoading: isLoadingLocation,
-    error: errorLoadingLocation,
-  } = useAdmissionLocation(location.uuid);
-  const {
-    admittedPatients,
-    isLoading: isLoadingPatients,
-    error: errorLoadingPatients,
-  } = useAdmittedPatients(location.uuid);
+// display to use if bed management is installed
+const WardViewWithBedManagement = () => {
+  const { location } = useWardLocation();
+  const { admissionLocation, isLoading: isLoadingLocation, error: errorLoadingLocation } = useAdmissionLocation();
+  const { inpatientAdmissions, isLoading: isLoadingPatients, error: errorLoadingPatients } = useInpatientAdmission();
   const { t } = useTranslation();
-  const admittedPatientsByUuid = useMemo(() => {
-    const map = new Map<string, AdmittedPatient>();
-    for (const admittedPatient of admittedPatients ?? []) {
-      map.set(admittedPatient.patient.uuid, admittedPatient);
+  const inpatientAdmissionsByPatientUuid = useMemo(() => {
+    const map = new Map<string, InpatientAdmission>();
+    for (const inpatientAdmission of inpatientAdmissions ?? []) {
+      map.set(inpatientAdmission.patient.uuid, inpatientAdmission);
     }
     return map;
-  }, [admittedPatients]);
-
-  if (admissionLocation != null && admittedPatients != null) {
-    const bedLayouts = filterBeds(admissionLocation);
+  }, [inpatientAdmissions]);
 
-    const wardBeds = bedLayouts.map((bedLayout, i) => {
+  if (admissionLocation != null || inpatientAdmissions != null) {
+    const bedLayouts = admissionLocation && filterBeds(admissionLocation);
+    // iterate over all beds
+    const wardBeds = bedLayouts?.map((bedLayout) => {
       const { patients } = bedLayout;
       const bed = bedLayoutToBed(bedLayout);
-      const wardPatients: WardPatient[] = patients.map((patient) => {
-        const admittedPatient = admittedPatientsByUuid.get(patient.uuid);
-
-        if (admittedPatient) {
-          // ideally, we can just use the patient object within admittedPatient
-          // and not need the one from bedLayouts, however, the emr api
-          // does not respect custom representation right now and does not return
-          // all required fields for the patient object
-          return { ...admittedPatient, admitted: true };
+      const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
+        const inpatientAdmission = inpatientAdmissionsByPatientUuid.get(patient.uuid);
+        if (inpatientAdmission) {
+          const { patient, visit } = inpatientAdmission;
+          return { patient, visit, bed, inpatientAdmission, inpatientRequest: null };
+        } else {
+          // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
+          return {
+            patient: patient,
+            visit: null,
+            bed,
+            inpatientAdmission: null, // populate after BED-13
+            inpatientRequest: null,
+          };
         }
-
-        // patient assigned a bed but *not* admitted
-        // TODO: get the patient's visit and current location
-        return {
-          patient,
-          visit: null,
-          admitted: true,
-          currentLocation: null,
-          timeSinceAdmissionInMinutes: null,
-          timeAtInpatientLocationInMinutes: null,
-        };
       });
       return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
     });
 
+    const patientsInBedsUuids = bedLayouts?.flatMap((bedLayout) => bedLayout.patients.map((patient) => patient.uuid));
+    const wardUnassignedPatients =
+      inpatientAdmissions &&
+      inpatientAdmissions
+        .filter(
+          (inpatientAdmission) =>
+            !patientsInBedsUuids || !patientsInBedsUuids.includes(inpatientAdmission.patient.uuid),
+        )
+        .map((inpatientAdmission) => {
+          return (
+            <UnassignedPatient
+              wardPatient={{
+                patient: inpatientAdmission.patient,
+                visit: inpatientAdmission.visit,
+                bed: null,
+                inpatientAdmission,
+                inpatientRequest: null,
+              }}
+              key={inpatientAdmission.patient.uuid}
+            />
+          );
+        });
+
     return (
       <>
         {wardBeds}
-        {bedLayouts.length == 0 && (
+        {bedLayouts?.length == 0 && (
           <InlineNotification
             kind="warning"
             lowContrast={true}
             title={t('noBedsConfigured', 'No beds configured for this location')}
           />
         )}
+        {wardUnassignedPatients}
       </>
     );
   } else if (isLoadingLocation || isLoadingPatients) {
-    return (
-      <>
-        {Array(20)
-          .fill(0)
-          .map((_, i) => (
-            <EmptyBedSkeleton key={i} />
-          ))}
-      </>
-    );
+    return <EmptyBeds />;
   } else if (errorLoadingLocation) {
     return (
       <InlineNotification
@@ -143,4 +139,46 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
   }
 };
 
+// display to use if not using bed management
+const WardViewWithoutBedManagement = () => {
+  const { inpatientAdmissions, isLoading: isLoadingPatients, error: errorLoadingPatients } = useInpatientAdmission();
+  const { t } = useTranslation();
+
+  if (inpatientAdmissions) {
+    const wardPatients = inpatientAdmissions?.map((inpatientAdmission) => {
+      const { patient, visit } = inpatientAdmission;
+      return (
+        <UnassignedPatient
+          wardPatient={{ patient, visit, bed: null, inpatientAdmission, inpatientRequest: null }}
+          key={inpatientAdmission.patient.uuid}
+        />
+      );
+    });
+    return <>{wardPatients}</>;
+  } else if (isLoadingPatients) {
+    return <EmptyBeds />;
+  } else {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast={true}
+        title={t('errorLoadingPatients', 'Error loading admitted patients')}
+        subtitle={errorLoadingPatients?.message}
+      />
+    );
+  }
+};
+
+const EmptyBeds = () => {
+  return (
+    <>
+      {Array(20)
+        .fill(0)
+        .map((_, i) => (
+          <EmptyBedSkeleton key={i} />
+        ))}
+    </>
+  );
+};
+
 export default WardView;

package/src/ward-view/ward-view.resource.ts

@@ -1,4 +1,4 @@
-import type { AdmissionLocation, Bed, BedLayout } from '../types';
+import type { AdmissionLocationFetchResponse, Bed, BedLayout } from '../types';
 
 // the server side has 2 slightly incompatible types for Bed
 export function bedLayoutToBed(bedLayout: BedLayout): Bed {
@@ -13,7 +13,7 @@ export function bedLayoutToBed(bedLayout: BedLayout): Bed {
   };
 }
 
-export function filterBeds(admissionLocation: AdmissionLocation): BedLayout[] {
+export function filterBeds(admissionLocation: AdmissionLocationFetchResponse): BedLayout[] {
   // admissionLocation.bedLayouts can contain row+column positions with no bed,
   // filter out layout positions with no real bed
   let collator = new Intl.Collator([], { numeric: true });

package/src/ward-view/ward-view.scss

@@ -1,4 +1,4 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 
 .wardView {
   background-color: #e4e4e4;
@@ -9,13 +9,13 @@
   right: 0;
   display: flex;
   flex-direction: column;
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
 }
 
 .wardViewMain {
   background-color: #e4e4e4;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   display: grid;
-  gap: spacing.$spacing-05;
-  padding: spacing.$spacing-05;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
 }

package/src/ward-view/ward-view.test.tsx

@@ -1,60 +1,43 @@
-import {
-  type Person,
-  type ConfigSchema,
-  getDefaultsFromConfigSchema,
-  useConfig,
-  useSession,
-  useFeatureFlag,
-} from '@openmrs/esm-framework';
-import { screen } from '@testing-library/react';
 import React from 'react';
+import { screen } from '@testing-library/react';
+import { type ConfigSchema, getDefaultsFromConfigSchema, useConfig, useFeatureFlag } from '@openmrs/esm-framework';
 import { useParams } from 'react-router-dom';
-import { mockLocations } from '../../../../__mocks__/locations.mock';
-import { mockAdmissionLocation } from '../../../../__mocks__/wards.mock';
-import { renderWithSwr } from '../../../../tools/test-utils';
+import { mockAdmissionLocation, mockInpatientAdmissions } from '__mocks__';
+import { renderWithSwr } from 'tools';
 import { configSchema } from '../config-schema';
 import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
+import useWardLocation from '../hooks/useWardLocation';
 import WardView from './ward-view.component';
-import { mockPatientAlice } from '../../../../__mocks__/patient.mock';
-import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
-
-jest.replaceProperty(mockPatientAlice.person as Person, 'preferredName', {
-  uuid: '',
-  givenName: 'Alice',
-  familyName: 'Johnson',
-});
 
 jest.mocked(useConfig).mockReturnValue({
   ...getDefaultsFromConfigSchema<ConfigSchema>(configSchema),
 });
 
-const mockedSessionLocation = { uuid: 'abcd', display: 'mock location', links: [] };
-jest.mocked(useSession).mockReturnValue({
-  sessionLocation: mockedSessionLocation,
-  authenticated: true,
-  sessionId: 'sessionId',
-});
+const mockUseFeatureFlag = jest.mocked(useFeatureFlag);
 
-const mockedUseFeatureFlag = useFeatureFlag as jest.Mock;
+jest.mock('../hooks/useWardLocation', () =>
+  jest.fn().mockReturnValue({
+    location: { uuid: 'abcd', display: 'mock location' },
+    isLoadingLocation: false,
+    errorFetchingLocation: null,
+    invalidLocation: false,
+  }),
+);
 
-jest.mock('@openmrs/esm-framework', () => {
-  return {
-    ...jest.requireActual('@openmrs/esm-framework'),
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data.results),
-  };
-});
+const mockUseWardLocation = jest.mocked(useWardLocation);
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: jest.fn().mockReturnValue({}),
 }));
-const mockedUseParams = useParams as jest.Mock;
+const mockUseParams = useParams as jest.Mock;
 
 jest.mock('../hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
 }));
-jest.mock('../hooks/useAdmittedPatients', () => ({
-  useAdmittedPatients: jest.fn(),
+jest.mock('../hooks/useInpatientAdmission', () => ({
+  useInpatientAdmission: jest.fn(),
 }));
 
 jest.mocked(useAdmissionLocation).mockReturnValue({
@@ -64,26 +47,25 @@ jest.mocked(useAdmissionLocation).mockReturnValue({
   isLoading: false,
   admissionLocation: mockAdmissionLocation,
 });
-jest.mocked(useAdmittedPatients).mockReturnValue({
+jest.mocked(useInpatientAdmission).mockReturnValue({
   error: undefined,
   mutate: jest.fn(),
   isValidating: false,
   isLoading: false,
-  admittedPatients: [],
+  inpatientAdmissions: mockInpatientAdmissions,
 });
 
-describe('WardView:', () => {
+describe('WardView', () => {
   it('renders the session location when no location provided in URL', () => {
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: mockedSessionLocation.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the location provided in URL', () => {
-    const locationToUse = mockLocations.data.results[0];
-    mockedUseParams.mockReturnValueOnce({ locationUuid: locationToUse.uuid });
+    mockUseParams.mockReturnValueOnce({ locationUuid: 'abcd' });
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: locationToUse.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
@@ -93,18 +75,63 @@ describe('WardView:', () => {
     expect(emptyBedCards).toHaveLength(3);
   });
 
+  it('renders admitted patient without bed', async () => {
+    renderWithSwr(<WardView />);
+    const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
+    expect(admittedPatientWithoutBed).toBeInTheDocument();
+  });
+
+  it('renders all admitted patients even if bed management module not installed', async () => {
+    mockUseFeatureFlag.mockReturnValueOnce(false);
+    renderWithSwr(<WardView />);
+    const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
+    expect(admittedPatientWithoutBed).toBeInTheDocument();
+  });
+
   it('renders notification for invalid location uuid', () => {
-    mockedUseParams.mockReturnValueOnce({ locationUuid: 'invalid-uuid' });
+    mockUseWardLocation.mockReturnValueOnce({
+      location: null,
+      isLoadingLocation: false,
+      errorFetchingLocation: null,
+      invalidLocation: true,
+    });
+
     renderWithSwr(<WardView />);
     const notification = screen.getByRole('status');
     expect(notification).toBeInTheDocument();
-    const invalidText = screen.getByText('Unknown location uuid: invalid-uuid');
+    const invalidText = screen.queryByText('Invalid location specified');
     expect(invalidText).toBeInTheDocument();
   });
 
-  it('screen should be empty if backend module is not installed', () => {
-    mockedUseFeatureFlag.mockReturnValueOnce(false);
-    const { container } = renderWithSwr(<WardView />);
-    expect(container.firstChild).not.toBeInTheDocument();
+  it('screen should render warning if backend module installed and no beds configured', () => {
+    // override the default response so that no beds are returned
+    jest.mocked(useAdmissionLocation).mockReturnValue({
+      error: undefined,
+      mutate: jest.fn(),
+      isValidating: false,
+      isLoading: false,
+      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
+    });
+    mockUseFeatureFlag.mockReturnValueOnce(true);
+
+    renderWithSwr(<WardView />);
+    const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
+    expect(noBedsConfiguredForThisLocation).toBeInTheDocument();
+  });
+
+  it('screen not should render warning if backend module installed and no beds configured', () => {
+    // override the default response so that no beds are returned
+    jest.mocked(useAdmissionLocation).mockReturnValue({
+      error: undefined,
+      mutate: jest.fn(),
+      isValidating: false,
+      isLoading: false,
+      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
+    });
+    mockUseFeatureFlag.mockReturnValueOnce(false);
+
+    renderWithSwr(<WardView />);
+    const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
+    expect(noBedsConfiguredForThisLocation).not.toBeInTheDocument();
   });
 });

package/src/ward-view-header/admission-requests-bar.component.tsx

@@ -1,45 +1,46 @@
-import { SkeletonIcon } from '@carbon/react';
-import { Movement } from '@carbon/react/icons';
-import { launchWorkspace, showNotification, type Location } from '@openmrs/esm-framework';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Movement } from '@carbon/react/icons';
+import { Button, InlineNotification } from '@carbon/react';
+import { ArrowRightIcon, isDesktop, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { useTranslation } from 'react-i18next';
 import styles from './admission-requests.scss';
 
-interface AdmissionRequestsBarProps {
-  location: Location;
-}
-
-const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ location }) => {
-  const { inpatientRequests, isLoading, error } = useInpatientRequest(location.uuid);
-  const admissionRequests = inpatientRequests?.filter((request) => request.type == 'ADMISSION');
+const AdmissionRequestsBar = () => {
+  const { inpatientRequests, isLoading, error } = useInpatientRequest(['ADMIT', 'TRANSFER']);
   const { t } = useTranslation();
+  const layout = useLayoutType();
 
-  if (isLoading) {
-    return <SkeletonIcon className={styles.skeleton} />;
+  if (isLoading || !inpatientRequests?.length) {
+    return null;
   }
 
   if (error) {
-    showNotification({
-      kind: 'error',
-      title: t('errorLoadingPatientAdmissionRequests', 'Error Loading Patient Admission Requests'),
-      description: error.message,
-    });
-    return <></>;
+    console.error(error);
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingPatientAdmissionRequests', 'Error Loading patient admission requests')}
+      />
+    );
   }
 
-  return admissionRequests.length > 0 ? (
+  return (
     <div className={styles.admissionRequestsContainer}>
       <Movement className={styles.movementIcon} size="24" />
-      <span className={styles.content}>{admissionRequests.length} admission requests</span>
-      <button
-        className={styles.manageButton}
-        onClick={() => launchWorkspace('admission-requests-cards', { admissionRequests })}>
-        Manage
-      </button>
+      <span className={styles.content}>
+        {t('admissionRequestsCount', '{{count}} admission request(s)', {
+          count: inpatientRequests.length,
+        })}
+      </span>
+      <Button
+        onClick={() => launchWorkspace('admission-requests-workspace')}
+        renderIcon={ArrowRightIcon}
+        kind="ghost"
+        size={isDesktop(layout) ? 'sm' : 'lg'}>
+        {t('manage', 'Manage')}
+      </Button>
     </div>
-  ) : (
-    <></>
   );
 };
 

package/src/ward-view-header/admission-requests-bar.test.tsx

@@ -1,23 +1,16 @@
+import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { renderWithSwr } from '../../../../tools/test-utils';
 import { screen } from '@testing-library/react';
 import { launchWorkspace } from '@openmrs/esm-framework';
-import React from 'react';
-import AdmissionRequestsBar from './admission-requests-bar.component';
-import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
+import { renderWithSwr } from 'tools';
+import { mockInpatientRequest } from '__mocks__';
 import { useInpatientRequest } from '../hooks/useInpatientRequest';
-import { mockLocationInpatientWard } from '../../../../__mocks__/locations.mock';
-
-jest.mock('@openmrs/esm-framework', () => {
-  return {
-    ...jest.requireActual('@openmrs/esm-framework'),
-    launchWorkspace: jest.fn(),
-  };
-});
+import AdmissionRequestsBar from './admission-requests-bar.component';
 
 jest.mock('../hooks/useInpatientRequest', () => ({
   useInpatientRequest: jest.fn(),
 }));
+
 const mockInpatientRequestResponse = {
   error: undefined,
   mutate: jest.fn(),
@@ -25,18 +18,21 @@ const mockInpatientRequestResponse = {
   isLoading: false,
   inpatientRequests: [mockInpatientRequest],
 };
+
 jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
 
 describe('Admission Requests Button', () => {
   it('call launch workspace when clicked on manage button', async () => {
     const user = userEvent.setup();
-    renderWithSwr(<AdmissionRequestsBar location={mockLocationInpatientWard} />);
+    renderWithSwr(<AdmissionRequestsBar />);
+
     await user.click(screen.getByRole('button', { name: /manage/i }));
     expect(launchWorkspace).toHaveBeenCalled();
   });
 
   it('there should be one admission request', () => {
-    const { getByText } = renderWithSwr(<AdmissionRequestsBar location={mockLocationInpatientWard} />);
-    expect(getByText('1 admission requests')).toBeInTheDocument();
+    renderWithSwr(<AdmissionRequestsBar />);
+
+    expect(screen.getByText('1 admission request(s)')).toBeInTheDocument();
   });
 });

package/src/ward-view-header/admission-requests.scss

@@ -1,42 +1,37 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .admissionRequestsContainer {
-  width: fit-content;
-  border-left: 2px solid $color-blue-60-2;
   background-color: $color-gray-70;
   display: flex;
   align-items: center;
-  padding: spacing.$spacing-02;
+  padding: layout.$spacing-02 0 layout.$spacing-02 layout.$spacing-04;
+  background-color: #393939;
+
+  & > button {
+    color: #78a9ff;
+
+    svg {
+      fill: #78a9ff !important;
+    }
+  }
+
+  & > button:hover {
+    color: #78a9ff;
+  }
 }
 
 .movementIcon {
-  padding: spacing.$spacing-02;
+  padding: layout.$spacing-02;
   border-radius: 50%;
   fill: $ui-03;
   background-color: $color-blue-60-2;
-}
-
-.manageButton {
-  background-color: transparent;
-  border: none;
-  color: $inverse-link;
-  cursor: pointer;
-  margin-left: spacing.$spacing-04;
-  &::after {
-    content: '→';
-    padding: spacing.$spacing-02;
-  }
+  margin-right: layout.$spacing-03;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $ui-02;
-  margin-left: spacing.$spacing-02;
-}
-
-.skeleton {
-  height: 20px;
-  width: 120px;
+  margin-right: layout.$spacing-03;
 }