@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/billing/dashboard/v2/inpatient-requests/inpatient-requests.component.tsx

@@ -0,0 +1,389 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { type Encounter, formatDate, showSnackbar, type Visit } from '@openmrs/esm-framework';
+import {
+  CLAIM_VISIT_START_SERVICE_POINTS_UUID,
+  type LocationAttribute,
+  SERVICE_POINT_NAME,
+  type FacilityAdmissionRequest,
+  type AdmitPatientDto,
+  type BedLayout,
+  type AssignBedToPatientDto,
+} from '../../../../admissions/types';
+import { type PaymentMode } from '../../../../shared/types';
+import { fetchPaymentModes } from '../../../../shared/services/billing.resource';
+import {
+  admitPatientToWard,
+  assignBedToPatient,
+  fetchFacilityAdmissionRequests,
+  fetchLocationDetails,
+  getAdmittedPatientsData,
+} from '../../../../admissions/admissions.resource';
+import { createVisit } from '../../../../resources/visit.resource';
+import { type CreateVisitDto, type VisitAttribute } from '../../../../registry/types';
+import { VisitTypeUuids } from '../../../../shared/constants/visit-types';
+import {
+  Button,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import AdmitPatientModal from '../../../../admissions/modal/admit-patient/admit-patient.modal';
+import CancelAdmissionRequestModal from '../../../../admissions/modal/cancel-admission-request/cancel-admission-request';
+import SendToQueueModal from '../../../../registry/modal/send-to-triage/send-to-queue.modal';
+import { fetchFacilityBedOccupancy } from '../../../billing-claims.resource';
+import { type BedOccupancy } from '../../../types';
+import styles from './inpatient-requests.component.scss';
+import DashboardCard from '../shared/dash-board-card/dash-board-card.component';
+import { AdmissionEncounterTypeUuids } from '../../../../admissions/constants';
+
+interface inpatientRequestsProps {
+  locationUuid: string;
+  requestDate: string;
+}
+const InpatientRequests: React.FC<inpatientRequestsProps> = ({ locationUuid, requestDate }) => {
+  const [selectedAdmissionRequest, setSelectedAdmissionRequest] = useState<FacilityAdmissionRequest>();
+  const [showAdmitModal, setShowAdmitModal] = useState<boolean>(false);
+  const [showCancelAdmissionModal, setShowCancelAdmissionModal] = useState<boolean>(false);
+  const [startClaimVisit, setStartClaimVisit] = useState<boolean>(false);
+  const [showStartClaimModal, setShowStartClaimModal] = useState<boolean>(false);
+  const [admissionInpatientVisit, setAdmissionInpatientVisit] = useState<Visit>();
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const [admissionRequests, setAdmissionRequests] = useState<FacilityAdmissionRequest[]>([]);
+  const [bedOccupancy, setBedOccupancy] = useState<BedOccupancy | null>(null);
+  const [bedStats, setBedStats] = useState<{ name: string; value: number }[]>([]);
+  const [bedLayouts, setBedLayouts] = useState<BedLayout[]>([]);
+
+  const freeBeds = useMemo(() => {
+    return bedLayouts.filter((bl) => {
+      return bl.status === 'AVAILABLE';
+    });
+  }, [bedLayouts]);
+
+  const selectedPaymentMode = useMemo(() => {
+    return paymentModes.find((p) => {
+      return p.name === 'SHA';
+    });
+  }, [paymentModes]);
+  useEffect(() => {
+    if (locationUuid) {
+      getLocationDetails();
+      getAdmissionRequests();
+      getFacilityBedOccupancy();
+      getbedLayouts();
+    }
+    getPaymentMethods();
+  }, [locationUuid]);
+  if (!admissionRequests || admissionRequests.length === 0) {
+    return <>No Data</>;
+  }
+  async function getAdmissionRequests() {
+    const admissionRequests = await fetchFacilityAdmissionRequests(locationUuid);
+    if (admissionRequests) {
+      setAdmissionRequests(admissionRequests);
+    } else {
+      setAdmissionRequests([]);
+    }
+  }
+  async function getbedLayouts() {
+    const res = await getAdmittedPatientsData(locationUuid);
+    setBedLayouts(res);
+  }
+  async function getPaymentMethods() {
+    const methods = await fetchPaymentModes();
+    setPaymentModes(methods);
+  }
+  const handleCancelRequest = (admissionRequest: FacilityAdmissionRequest) => {
+    setSelectedAdmissionRequest(admissionRequest);
+    setShowCancelAdmissionModal(true);
+  };
+  const handleAdmitPatient = (admissionRequest: FacilityAdmissionRequest) => {
+    setShowAdmitModal(true);
+    setSelectedAdmissionRequest(admissionRequest);
+  };
+  const handleAdmitModalClose = () => {
+    setShowAdmitModal(false);
+  };
+  const handeSuccessfullAdmission = () => {
+    handleAdmitModalClose();
+  };
+  const handleCancelAdmissionClose = () => {
+    setShowCancelAdmissionModal(false);
+  };
+  const handleCancelAdmissionSuccess = () => {
+    handleCancelAdmissionClose();
+  };
+  const handleStartClaimAndAdmit = (admissionRequest: FacilityAdmissionRequest) => {
+     //check if beds are free
+    setSelectedAdmissionRequest(admissionRequest);
+    createInpatientVisit(admissionRequest);
+  };
+  async function createInpatientVisit(admissionRequest: FacilityAdmissionRequest) {
+    const resp = await createPatientVisit(admissionRequest);
+    if (resp) {
+      setAdmissionInpatientVisit(resp);
+      setShowStartClaimModal(true);
+    }
+  }
+  async function getLocationDetails() {
+    const resp = await fetchLocationDetails(locationUuid);
+    if (resp) {
+      const locationAttributes: LocationAttribute[] = resp?.attributes ?? [];
+      const startClaimVisitAttr = getLocationAttribute(locationAttributes, CLAIM_VISIT_START_SERVICE_POINTS_UUID);
+      if (startClaimVisitAttr) {
+        const val = canStartClaimVisit(startClaimVisitAttr);
+        setStartClaimVisit(val);
+      } else {
+        setStartClaimVisit(false);
+      }
+    }
+  }
+  function getLocationAttribute(attributes: LocationAttribute[], attributeTypeUuid: string) {
+    return attributes.find((a) => {
+      return a.attributeType.uuid === attributeTypeUuid;
+    });
+  }
+  function canStartClaimVisit(startClaimVisitAttr: LocationAttribute): boolean {
+    if (!startClaimVisitAttr) {
+      return false;
+    }
+    const attrValue: string = startClaimVisitAttr?.value ?? '';
+    return attrValue.toLowerCase().trim().includes(SERVICE_POINT_NAME.toLowerCase());
+  }
+  const createPatientVisit = async (admissionRequest: FacilityAdmissionRequest) => {
+    const visitDto = getCreateVisitDto(admissionRequest);
+    if (!isValidCreateVisitDto(visitDto)) {
+      return false;
+    }
+    const result = await createVisit(visitDto);
+    if (result) {
+      showAlert('success', 'Inpatient Visit has been created succesfully', '');
+      return result;
+    } else {
+      showAlert('error', 'Error creating patient visit', '');
+      throw new Error('Error creating patient visit');
+    }
+  };
+  const isValidCreateVisitDto = (createVisitDto: CreateVisitDto): boolean => {
+    if (!createVisitDto.location) {
+      showAlert('error', 'Missing location in create visits', '');
+      return false;
+    }
+    if (!createVisitDto.patient) {
+      showAlert('error', 'Please select a patient', '');
+      return false;
+    }
+
+    if (!createVisitDto.visitType) {
+      showAlert('error', 'Please select a visit', '');
+      return false;
+    }
+    return true;
+  };
+  const getCreateVisitDto = (admissionRequest: FacilityAdmissionRequest): CreateVisitDto => {
+    const visitAttributes = getVisitAttributes();
+    const visitDto: CreateVisitDto = {
+      visitType: VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID,
+      location: locationUuid,
+      startDatetime: null,
+      stopDatetime: null,
+      patient: admissionRequest?.patient_uuid ?? '',
+    };
+    if (visitAttributes.length > 0) {
+      visitDto['attributes'] = visitAttributes;
+    }
+    return visitDto;
+  };
+  function getVisitAttributes(): VisitAttribute[] {
+    const attributes: VisitAttribute[] = [];
+    if (selectedPaymentMode) {
+      attributes.push({
+        attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+        value: selectedPaymentMode.uuid,
+      });
+    }
+    return attributes;
+  }
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const onCreateClaimVisitModalClose = (closeParams: { success: boolean }) => {
+    setShowStartClaimModal(false);
+    if (closeParams.success) {
+      admitPatient();
+    }
+  };
+  function generateBedData(bedOccupancy: BedOccupancy) {
+    const bedrate = bedOccupancy?.bed_occupancy_rate ?? null;
+    const bedValues: { name: string; value: number }[] = [];
+    if (bedrate) {
+      Object.keys(bedrate).forEach((k: string) => {
+        const val = bedrate[k];
+        if (val > 0) {
+          bedValues.push({
+            name: formatToTitleCase(k),
+            value: val,
+          });
+        }
+      });
+      setBedStats(bedValues);
+    }
+  }
+  async function getFacilityBedOccupancy() {
+    const resp = await fetchFacilityBedOccupancy(locationUuid);
+    if (resp) {
+      setBedOccupancy(resp);
+      generateBedData(resp);
+    } else {
+      setBedOccupancy(null);
+      setBedStats([]);
+    }
+  }
+  function formatToTitleCase(str: string) {
+    if (!str) return '';
+    return str
+      .replace(/_/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .toLowerCase()
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  const generateAdmitPatientPayload = (): AdmitPatientDto => {
+    return {
+      patient: selectedAdmissionRequest?.patient_uuid ?? '',
+      encounterType: {
+        uuid: AdmissionEncounterTypeUuids.ADMIT_ENCOUNTER_TYPE_UUID,
+      },
+      location: locationUuid ?? '',
+      obs: [],
+      visit: admissionInpatientVisit?.uuid,
+    };
+  };
+  const admitPatient = async () => {
+    if(freeBeds.length === 0){
+        return;
+    }
+    try {
+      const admitPatientDto = generateAdmitPatientPayload();
+      const resp = await admitPatientToWard(admitPatientDto);
+
+      showSnackbar({
+        kind: 'success',
+        title: 'Admission Successfull',
+        subtitle: 'Patient Successfully Admitted',
+      });
+
+        //assign bed to patient
+        const assignBedDto = generateAssignBedPayload(resp);
+        const selectedFreeBed = freeBeds[0];
+        const selectedBedId = selectedFreeBed.bedId ?? '';
+        if(selectedBedId){
+                     await assignBedToPatient(selectedBedId,assignBedDto);
+          }
+                  
+          showSnackbar({
+                      kind: 'success',
+                      title: 'Bed Assignment Successfull',
+                      subtitle: `Patient Successfully assigned bed ${selectedFreeBed.bedNumber}`,
+          });
+    } catch (error: any) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Bed Assignment failed',
+        subtitle: error.message ?? 'Bed Assignment failed',
+      });
+    }
+  };
+   const generateAssignBedPayload = (admissionEncounter: Encounter): AssignBedToPatientDto=>{
+          return {
+              patientUuid: selectedAdmissionRequest?.patient_uuid ?? '',
+              encounterUuid: admissionEncounter.uuid
+          }
+  }
+  return (
+    <>
+      <div className={styles.inpatientRequestsLayout}>
+        <div className={styles.inpatientRequestsHeader}>
+          {bedOccupancy &&
+            bedStats.map((s) => {
+              return (
+                <div className={styles.headerCol}>
+                  <DashboardCard title={s.name} value={s.value} />
+                </div>
+              );
+            })}
+        </div>
+        <div className={styles.inpatientRequestsContent}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>No</TableHeader>
+                <TableHeader>Date</TableHeader>
+                <TableHeader>Name</TableHeader>
+                <TableHeader>Visit Type</TableHeader>
+                <TableHeader>Identifiers</TableHeader>
+                <TableHeader>Gender</TableHeader>
+                <TableHeader>Age</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {admissionRequests &&
+                admissionRequests.map((val, index) => (
+                  <TableRow key={val.patient_uuid ?? index}>
+                    <TableCell>{index + 1}</TableCell>
+                    <TableCell>{formatDate(new Date(val.admission_request_date))}</TableCell>
+                    <TableCell>{val.patient_name}</TableCell>
+                    <TableCell>{val.visit_type}</TableCell>
+                    <TableCell>{val.identifiers}</TableCell>
+                    <TableCell>{val.gender}</TableCell>
+                    <TableCell>{val.age}</TableCell>
+                    <TableCell>
+                      <div className={styles.btnContainer}>
+                        <Button kind="primary" onClick={() => handleStartClaimAndAdmit(val)} size="sm" disabled={freeBeds.length === 0}>
+                          Raise SHA Claim
+                        </Button>
+                        <Button kind="secondary" onClick={() => handleCancelRequest(val)} size="sm">
+                          Cancel
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      {showCancelAdmissionModal && selectedAdmissionRequest ? (
+        <>
+          <CancelAdmissionRequestModal
+            open={showCancelAdmissionModal}
+            onModalClose={handleCancelAdmissionClose}
+            onCancelAdmission={handleCancelAdmissionSuccess}
+            facilityAdmissionRequest={selectedAdmissionRequest}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {selectedAdmissionRequest && admissionInpatientVisit && showStartClaimModal && (
+        <SendToQueueModal
+          patientUuid={selectedAdmissionRequest?.patient_uuid}
+          visitUuid={admissionInpatientVisit?.uuid}
+          visitTypeUuid={VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID}
+          onModalClose={onCreateClaimVisitModalClose}
+        />
+      )}
+    </>
+  );
+};
+export default InpatientRequests;

package/src/billing/dashboard/v2/new-facility-bills/bills-table.component.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { type PatientBill } from '../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+
+import styles from './bills-table.scss';
+
+interface BillsTableProps {
+  patients: PatientBill[];
+  onPatientClick?: (patientUuid: string) => void;
+}
+
+const BillsTable: React.FC<BillsTableProps> = ({ patients, onPatientClick }) => {
+  const [patientUuid, setPatientUuid] = useState<string | null>('');
+  const [visitUuid, setVisitUuid] = useState<string | null>('');
+  const [visitTypeUuid, setVisitTypeUuid] = useState('');
+  const formatDate = (date?: string | null) => {
+    if (!date) return '—';
+
+    return new Intl.DateTimeFormat('en-KE', {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    }).format(new Date(date));
+  };
+  const handleInitiateClaim = (patientUuid: string, visitTypeUuid: string, visitUuid: string) => {
+    setPatientUuid(patientUuid);
+    setVisitTypeUuid(visitTypeUuid);
+    setVisitUuid(visitUuid);
+  };
+
+  function onModalClose({ success }: { success: boolean }): void {
+    setPatientUuid(null);
+    setVisitUuid(null);
+  }
+  return (
+    <>
+      <Table aria-label="sample table" size="lg">
+        <TableHead>
+          <TableRow>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Cr Identifier</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader>Receipt Number</TableHeader>
+            <TableHeader>Bill Date</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {patients.map((patient) => {
+            const canOpen = Boolean(patient.patient_uuid || patient.consent_token);
+            return (
+              <TableRow key={patient.patient_uuid}>
+                <TableCell>
+                  {canOpen ? (
+                    <button
+                      type="button"
+                      className={styles.clickableData}
+                      onClick={() => onPatientClick?.(patient.patient_uuid)}
+                    >
+                      {patient.patient_name}
+                    </button>
+                  ) : (
+                    patient.patient_name
+                  )}
+                </TableCell>
+                <TableCell>{patient.identifier}</TableCell>
+                <TableCell>{patient.bill_status}</TableCell>
+                <TableCell>{patient.receipt_number}</TableCell>
+                <TableCell>{formatDate(patient.bill_date)}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default BillsTable;

package/src/billing/dashboard/v2/new-facility-bills/bills-table.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+
+
+.clickableData {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--brand-01);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  font-weight: 600;
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/src/billing/dashboard/v2/new-facility-bills/new-facility-bills.component.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { type FacilityBillsDto, type PatientBill } from '../types';
+import { fetchFacilityBills } from '../../../billing-claims.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useNavigate } from 'react-router-dom';
+import BillsTable from './bills-table.component';
+import { DataTableSkeleton } from '@carbon/react';
+
+import styles from './new-facility-bills.scss';
+
+interface NewFacilityBillsProps {
+  billingDate: string;
+  locationUuid: string;
+  onDateChange?: (date: string) => void;
+}
+const NewFacilityBills: React.FC<NewFacilityBillsProps> = ({ billingDate, locationUuid }) => {
+  const navigate = useNavigate();
+  const [facilityBills, setFacilityBills] = useState<PatientBill[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const handlePatientClick = (patientUuid: string) => {
+    if (!patientUuid) return;
+    navigate(`/bill/${encodeURIComponent(patientUuid)}`);
+  };
+
+  useEffect(() => {
+    if (locationUuid && billingDate) {
+      getFacilityBills();
+    }
+  }, [billingDate, locationUuid]);
+
+  async function getFacilityBills() {
+    setLoading(true);
+    const facilityBillsPayload = generateFacilityBillsPayload();
+    try {
+      const data = await fetchFacilityBills(facilityBillsPayload);
+
+      setFacilityBills(data ?? []);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching facility bills',
+        subtitle: 'An error occurred while fetching facility bills, please reload or contact support',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+  function generateFacilityBillsPayload(): FacilityBillsDto {
+    return {
+      locationUuid: locationUuid ?? '',
+      billingDate: billingDate,
+    };
+  }
+
+  return (
+    <>
+      {loading && <DataTableSkeleton columnCount={6} rowCount={5} />}
+      <BillsTable patients={facilityBills} onPatientClick={handlePatientClick} />
+    </>
+  );
+};
+
+export default NewFacilityBills;

package/src/billing/dashboard/v2/new-facility-bills/new-facility-bills.scss

@@ -0,0 +1,146 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Boxed panel matching the Consultation clearance section. */
+.panel {
+  padding: layout.$spacing-05;
+  border: 1px solid $ui-03;
+  background-color: $ui-01;
+}
+
+/* Explanatory intro header, matching the Consultation clearance header. */
+.intro {
+  margin-bottom: layout.$spacing-04;
+}
+
+/* Trim Carbon's roomy tab-panel padding so the payer tabs, status sub-tabs, search and
+   table sit close together as one block. */
+.panel :global(.cds--tab-content) {
+  padding-inline: 0;
+  padding-block: layout.$spacing-04 0;
+}
+.introTitle {
+  margin: 0 0 layout.$spacing-02;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #161616;
+}
+.introText {
+  margin: 0;
+  max-width: 62ch;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #525252;
+}
+
+/* Status sub-tabs (per payer), between the payer tabs and the search toolbar. */
+.statusTabs {
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-04;
+}
+
+/* Count pill on each status sub-tab, matching the Consultation clearance tabs. */
+.pill {
+  display: inline-block;
+  margin-left: layout.$spacing-03;
+  min-width: 1.15rem;
+  padding: 0 layout.$spacing-02;
+  border-radius: 999px;
+  background-color: var(--brand-01);
+  color: #ffffff;
+  font-size: 0.68rem;
+  line-height: 1.15rem;
+  text-align: center;
+}
+
+/* Says whether the claim statuses on screen are still being confirmed against the HIE,
+   and admits it when some of them couldn't be. */
+.statusNotice {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-top: layout.$spacing-03;
+  font-size: 0.75rem;
+  color: #525252;
+}
+
+.statusNoticeWarning {
+  color: #8e6a00;
+}
+
+/* Matches the other billing tables (clearance / active visits). */
+.tableCard {
+  overflow-x: auto;
+}
+
+/* Patient name as a neat inline link-button. */
+.clickableData {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--brand-01);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+.clickableData:hover {
+  color: var(--brand-02);
+  text-decoration: underline;
+}
+
+/* Bill details view: flat, no border, background or extra padding — the surrounding
+   page padding already insets it. */
+.detailsView {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+
+}
+
+/* Breadcrumb on the left, reload action on the right. Kept a light, backgroundless
+   bar so it takes minimal vertical space. */
+.detailsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-04;
+  padding: 0 0 layout.$spacing-02;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid $ui-03;
+}
+
+/* Breadcrumb stays clearly visible, larger text. */
+.breadcrumb {
+  margin-bottom: 0;
+
+  :global(.cds--breadcrumb-item),
+  :global(.cds--link) {
+    font-size: 0.9375rem;
+  }
+  /* Current page ("Bill details") — dark and bold so it stands out. */
+  :global(.cds--breadcrumb-item--current) {
+    color: #161616;
+    font-weight: 700;
+  }
+}
+
+/* The clickable "Facility bills" crumb rendered as a link-styled button. */
+.breadcrumbLink {
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  color: var(--brand-01);
+  font-weight: 600;
+  cursor: pointer;
+}
+.breadcrumbLink:hover {
+  color: var(--brand-02);
+  text-decoration: underline;
+}