@kenyaemr/esm-imaging-orders-app 4.0.1-pre.1

package/src/form/imaging-orders/api.ts

@@ -0,0 +1,230 @@
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import type { OrderPost } from '@openmrs/esm-patient-common-lib';
+import useSWRImmutable from 'swr/immutable';
+import { type ImagingOrderBasketItem } from '../../types';
+
+// TODO: This should be dynamic through configs
+export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
+
+export function useOrderReasons(conceptUuids: Array<string>) {
+  const shouldFetch = conceptUuids && conceptUuids.length > 0;
+  const url = shouldFetch ? getConceptReferenceUrls(conceptUuids) : null;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/${url[0]}` : null,
+    openmrsFetch,
+  );
+
+  const ob = data?.data;
+  const orderReasons = ob
+    ? Object.entries(ob).map(([, value]) => ({
+        uuid: value.uuid,
+        display: value.display,
+      }))
+    : [];
+
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+
+  return { orderReasons: orderReasons, isLoading };
+}
+
+export interface ImagingOrderPost extends OrderPost {
+  scheduledDate?: Date | string;
+  commentToFulfiller?: string;
+  laterality?: string;
+  bodySite?: string;
+}
+
+export function prepImagingOrderPostData(
+  order: ImagingOrderBasketItem,
+  patientUuid: string,
+  encounterUuid: string,
+): ImagingOrderPost {
+  let payload = {};
+  if (order.action === 'NEW' || order.action === 'RENEW') {
+    payload = {
+      action: 'NEW',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: careSettingUuid,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      instructions: order.instructions,
+      orderReason: order.orderReason,
+      commentToFulfiller: order.commentsToFulfiller,
+      laterality: order.laterality,
+      bodySite: order.bodySite,
+      urgency: order.urgency,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] = order.scheduleDate;
+    }
+    return payload;
+  } else if (order.action === 'REVISE') {
+    payload = {
+      action: 'REVISE',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: order.careSetting,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      instructions: order.instructions,
+      orderReason: order.orderReason,
+      commentToFulfiller: order.commentsToFulfiller,
+      laterality: order.laterality,
+      bodySite: order.bodySite,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] = order.scheduleDate;
+    }
+    return payload;
+  } else if (order.action === 'DISCONTINUE') {
+    payload = {
+      action: 'DISCONTINUE',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: order.careSetting,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      orderReason: order.orderReason,
+      commentToFulfiller: order.commentsToFulfiller,
+      laterality: order.laterality,
+      bodySite: order.bodySite,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] = order.scheduleDate;
+    }
+    return payload;
+  } else {
+    throw new Error(`Unknown order action: ${order.action}.`);
+  }
+}
+const chunkSize = 10;
+export function getConceptReferenceUrls(conceptUuids: Array<string>) {
+  const accumulator = [];
+  for (let i = 0; i < conceptUuids.length; i += chunkSize) {
+    accumulator.push(conceptUuids.slice(i, i + chunkSize));
+  }
+
+  return accumulator.map((partition) => `conceptreferences?references=${partition.join(',')}&v=custom:(uuid,display)`);
+}
+
+export type PostDataPrepLabOrderFunction = (
+  order: ImagingOrderBasketItem,
+  patientUuid: string,
+  encounterUuid: string,
+) => OrderPost;
+
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  datatype: {
+    uuid: string;
+    display: string;
+  };
+  answers: Array<ConceptAnswers>;
+  setMembers: Array<ConceptAnswers>;
+}
+
+export interface OpenmrsObject {
+  uuid: string;
+}
+
+export type BaseOpenmrsObject = OpenmrsObject;
+
+export interface SessionPriviledge {
+  uuid: string;
+  name: string;
+}
+
+export interface Person {
+  uuid: string;
+  display: string;
+}
+
+export interface Role {
+  role: string;
+  display: string;
+}
+export interface User {
+  uuid: string;
+  display: string;
+  givenName: string;
+  familyName: string;
+  firstName: string;
+  lastName: string;
+  person?: Person;
+  roles?: Role[];
+  privileges: SessionPriviledge[];
+}
+export interface Auditable extends OpenmrsObject {
+  creator: User;
+  dateCreated: Date;
+  changedBy: User;
+  dateChanged: Date;
+}
+export interface Retireable extends OpenmrsObject {
+  retired: boolean;
+  dateRetired: Date;
+  retiredBy: User;
+  retireReason: string;
+}
+
+export interface ConceptName extends BaseOpenmrsObject {
+  conceptNameId: number;
+  concept: Concept;
+  name: string;
+  localePreferred: boolean;
+  short: boolean;
+  preferred: boolean;
+  indexTerm: boolean;
+  synonym: boolean;
+  fullySpecifiedName: boolean;
+}
+export interface Concept extends BaseOpenmrsObject, Auditable, Retireable {
+  conceptId: number;
+  display: string;
+  set: boolean;
+  version: string;
+  names: ConceptName[];
+  name: ConceptName;
+  numeric: boolean;
+  complex: boolean;
+  shortNames: ConceptName[];
+  indexTerms: ConceptName[];
+  synonyms: ConceptName[];
+  setMembers: Concept[];
+  possibleValues: Concept[];
+  preferredName: ConceptName;
+  shortName: ConceptName;
+  fullySpecifiedName: ConceptName;
+  answers: Concept[];
+}
+
+export function useConceptById(id: string) {
+  const apiUrl = `ws/rest/v1/concept/${id}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: Concept;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <Concept>{},
+    isLoading,
+    isError: error,
+  };
+}

package/src/form/imaging-orders/imaging-order-basket-panel/imaging-icon.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface ImagingProps {
+  isTablet: boolean;
+}
+
+export default function ImagingIcon({ isTablet }: ImagingProps) {
+  const size = isTablet ? 40 : 24;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_319_622)">
+        <mask id="mask0_319_622" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+          <path d="M24 0H0V24H24V0Z" fill="white" />
+        </mask>
+        <g mask="url(#mask0_319_622)">
+          <path d="M24 0H0V24H24V0Z" fill="#B2FFC7" />
+          <g clip-path="url(#clip1_319_622)">
+            <path
+              d="M18.5625 6.3125H12.4375C12.3215 6.3125 12.2102 6.35859 12.1281 6.44064C12.0461 6.52269 12 6.63397 12 6.75V12.4375C12 12.5535 12.0461 12.6648 12.1281 12.7469C12.2102 12.8289 12.3215 12.875 12.4375 12.875H18.5625C18.6785 12.875 18.7898 12.8289 18.8718 12.7469C18.9539 12.6648 19 12.5535 19 12.4375V6.75C19 6.63397 18.9539 6.52269 18.8718 6.44064C18.7898 6.35859 18.6785 6.3125 18.5625 6.3125ZM17.25 8.9375H15.9375V10.25H17.25V11.125H15.9375V12H15.0625V11.125H13.75V10.25H15.0625V8.9375H13.75V8.0625H15.0625V7.1875H15.9375V8.0625H17.25V8.9375Z"
+              fill="#028E28"
+            />
+            <path
+              d="M11.5625 18.125H10.6875V16.375C10.6907 16.2018 10.6589 16.0297 10.594 15.869C10.5292 15.7083 10.4326 15.5624 10.3101 15.4399C10.1876 15.3173 10.0417 15.2208 9.88099 15.1559C9.72031 15.0911 9.54822 15.0593 9.37498 15.0625H7.62498C7.45175 15.0593 7.27965 15.0911 7.11898 15.1559C6.9583 15.2208 6.81235 15.3173 6.68983 15.4399C6.56732 15.5624 6.47076 15.7083 6.40592 15.869C6.34109 16.0297 6.30931 16.2018 6.31248 16.375V18.125H5.43748V16.375C5.43464 16.0869 5.48928 15.8012 5.59821 15.5345C5.70713 15.2678 5.86816 15.0256 6.07185 14.8219C6.27555 14.6182 6.51783 14.4572 6.78451 14.3482C7.0512 14.2393 7.33693 14.1847 7.62498 14.1875H9.37498C9.66304 14.1847 9.94877 14.2393 10.2155 14.3482C10.4821 14.4572 10.7244 14.6182 10.9281 14.8219C11.1318 15.0256 11.2928 15.2678 11.4018 15.5345C11.5107 15.8012 11.5653 16.0869 11.5625 16.375V18.125Z"
+              fill="#028E28"
+            />
+            <path
+              d="M8.49998 9.8125C8.84808 9.8125 9.18192 9.95078 9.42806 10.1969C9.6742 10.4431 9.81248 10.7769 9.81248 11.125C9.81248 11.4731 9.6742 11.8069 9.42806 12.0531C9.18192 12.2992 8.84808 12.4375 8.49998 12.4375C8.15189 12.4375 7.81805 12.2992 7.57191 12.0531C7.32576 11.8069 7.18748 11.4731 7.18748 11.125C7.18748 10.7769 7.32576 10.4431 7.57191 10.1969C7.81805 9.95078 8.15189 9.8125 8.49998 9.8125ZM8.49998 8.9375C7.91982 8.9375 7.36342 9.16797 6.95319 9.5782C6.54295 9.98844 6.31248 10.5448 6.31248 11.125C6.31248 11.7052 6.54295 12.2616 6.95319 12.6718C7.36342 13.082 7.91982 13.3125 8.49998 13.3125C9.08014 13.3125 9.63654 13.082 10.0468 12.6718C10.457 12.2616 10.6875 11.7052 10.6875 11.125C10.6875 10.5448 10.457 9.98844 10.0468 9.5782C9.63654 9.16797 9.08014 8.9375 8.49998 8.9375Z"
+              fill="#028E28"
+            />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_319_622">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/form/imaging-orders/imaging-order-basket-panel/imaging-order-basket-item-tile.component.tsx

@@ -0,0 +1,96 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, ClickableTile, Tile } from '@carbon/react';
+import { TrashCan, Warning } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './imaging-order-basket-item-tile.scss';
+import { type ImagingOrderBasketItem } from '../../../types';
+
+export interface OrderBasketItemTileProps {
+  orderBasketItem: ImagingOrderBasketItem;
+  onItemClick: () => void;
+  onRemoveClick: () => void;
+}
+
+export function ImagingOrderBasketItemTile({ orderBasketItem, onItemClick, onRemoveClick }: OrderBasketItemTileProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  // This here is really dirty, but required.
+  // If the ref's value is false, we won't react to the ClickableTile's handleClick function.
+  // Why is this necessary?
+  // The "Remove" button is nested inside the ClickableTile. If the button's clicked, the tile also raises the
+  // handleClick event later. Not sure if this is a bug, but this shouldn't be possible in our flows.
+  // Hence, we manually prevent the handleClick callback from being invoked as soon as the button is pressed once.
+  const shouldOnClickBeCalled = useRef(true);
+
+  const labTile = (
+    <div className={styles.orderBasketItemTile}>
+      <div className={styles.clipTextWithEllipsis}>
+        <OrderActionLabel orderBasketItem={orderBasketItem} />
+        <br />
+        <span className={styles.name}>{orderBasketItem.testType?.label}</span>
+        <span className={styles.label01}>
+          {!!orderBasketItem.orderError && (
+            <>
+              <br />
+              <span className={styles.orderErrorText}>
+                <Warning size={16} /> &nbsp; <span className={styles.label01}>{t('error', 'Error').toUpperCase()}</span>{' '}
+                &nbsp;
+                {orderBasketItem.orderError.responseBody?.error?.message ?? orderBasketItem.orderError.message}
+              </span>
+            </>
+          )}
+        </span>
+      </div>
+      <Button
+        className={styles.removeButton}
+        kind="ghost"
+        hasIconOnly={true}
+        renderIcon={(props) => <TrashCan size={16} {...props} />}
+        iconDescription={t('removeFromBasket', 'Remove from basket')}
+        onClick={() => {
+          shouldOnClickBeCalled.current = false;
+          onRemoveClick();
+        }}
+        tooltipPosition="left"
+      />
+    </div>
+  );
+
+  return orderBasketItem.action === 'DISCONTINUE' ? (
+    <Tile>{labTile}</Tile>
+  ) : (
+    <ClickableTile
+      role="listitem"
+      className={classNames({
+        [styles.clickableTileTablet]: isTablet,
+        [styles.clickableTileDesktop]: !isTablet,
+      })}
+      onClick={() => shouldOnClickBeCalled.current && onItemClick()}>
+      {labTile}
+    </ClickableTile>
+  );
+}
+
+function OrderActionLabel({ orderBasketItem }: { orderBasketItem: ImagingOrderBasketItem }) {
+  const { t } = useTranslation();
+
+  if (orderBasketItem.isOrderIncomplete) {
+    return <span className={styles.orderActionIncompleteLabel}>{t('orderActionIncomplete', 'Incomplete')}</span>;
+  }
+
+  switch (orderBasketItem.action) {
+    case 'NEW':
+      return <span className={styles.orderActionNewLabel}>{t('orderActionNew', 'New')}</span>;
+    case 'RENEW':
+      return <span className={styles.orderActionRenewLabel}>{t('orderActionRenew', 'Renew')}</span>;
+    case 'REVISE':
+      return <span className={styles.orderActionRevisedLabel}>{t('orderActionRevise', 'Modify')}</span>;
+    case 'DISCONTINUE':
+      return <span className={styles.orderActionDiscontinueLabel}>{t('orderActionDiscontinue', 'Discontinue')}</span>;
+    default:
+      return <></>;
+  }
+}

package/src/form/imaging-orders/imaging-order-basket-panel/imaging-order-basket-item-tile.scss

@@ -0,0 +1,72 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.clickableTileDesktop {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid $ui-03;
+}
+
+.clickableTileTablet {
+  padding: 0.75rem 1rem;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+}
+
+.orderBasketItemTile {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.label {
+  display: inline-block;
+  @include type.type-style('label-01');
+  margin-bottom: 0.5rem;
+}
+
+.orderActionNewLabel {
+  @extend .label;
+  color: black;
+  background-color: #c4f4cc;
+  padding: 0 0.25rem;
+}
+
+.orderActionIncompleteLabel {
+  @extend .label;
+  color: white;
+  background-color: $danger;
+  padding: 0 0.25rem;
+}
+
+.orderActionRenewLabel {
+  @extend .label;
+  color: $support-02;
+}
+
+.orderActionRevisedLabel {
+  @extend .label;
+  color: #943d00;
+}
+
+.orderActionDiscontinueLabel {
+  @extend .label;
+  color: $danger;
+}
+
+.orderErrorText {
+  color: $danger;
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  @include type.type-style('heading-compact-01');
+  color: black;
+}
+
+.removeButton {
+  svg {
+    fill: $danger !important;
+  }
+}

package/src/form/imaging-orders/imaging-order-basket-panel/imaging-order-basket-panel.extension.tsx

@@ -0,0 +1,191 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Tile } from '@carbon/react';
+import { Add, ChevronDown, ChevronUp } from '@carbon/react/icons';
+import { useLayoutType, closeWorkspace } from '@openmrs/esm-framework';
+import { launchPatientWorkspace, type OrderBasketItem, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { ImagingOrderBasketItemTile } from './imaging-order-basket-item-tile.component';
+import { prepImagingOrderPostData } from '../api';
+import ImagingIcon from './imaging-icon.component';
+import styles from './imaging-order-basket-panel.scss';
+import { type ImagingOrderBasketItem } from '../../../types';
+
+/**
+ * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/648c44d9d4052c613e7f23da
+ */
+export default function ImagingOrderBasketPanelExtension() {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { orders, setOrders } = useOrderBasket<ImagingOrderBasketItem>('imaging', prepImagingOrderPostData);
+  const [isExpanded, setIsExpanded] = useState(orders.length > 0);
+  const {
+    incompleteOrderBasketItems,
+    newOrderBasketItems,
+    renewedOrderBasketItems,
+    revisedOrderBasketItems,
+    discontinuedOrderBasketItems,
+  } = useMemo(() => {
+    const incompleteOrderBasketItems: Array<ImagingOrderBasketItem> = [];
+    const newOrderBasketItems: Array<ImagingOrderBasketItem> = [];
+    const renewedOrderBasketItems: Array<ImagingOrderBasketItem> = [];
+    const revisedOrderBasketItems: Array<ImagingOrderBasketItem> = [];
+    const discontinuedOrderBasketItems: Array<ImagingOrderBasketItem> = [];
+
+    orders.forEach((order) => {
+      if (order?.isOrderIncomplete) {
+        incompleteOrderBasketItems.push(order);
+      } else if (order.action === 'NEW') {
+        newOrderBasketItems.push(order);
+      } else if (order.action === 'RENEW') {
+        renewedOrderBasketItems.push(order);
+      } else if (order.action === 'REVISE') {
+        revisedOrderBasketItems.push(order);
+      } else if (order.action === 'DISCONTINUE') {
+        discontinuedOrderBasketItems.push(order);
+      }
+    });
+
+    return {
+      incompleteOrderBasketItems,
+      newOrderBasketItems,
+      renewedOrderBasketItems,
+      revisedOrderBasketItems,
+      discontinuedOrderBasketItems,
+    };
+  }, [orders]);
+
+  const launchImagingOrderForm = useCallback(() => {
+    closeWorkspace('order-basket', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('add-imaging-order'),
+    });
+  }, []);
+
+  const openImagingOrderFormForEditing = useCallback((order: OrderBasketItem) => {
+    closeWorkspace('order-basket', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('add-imaging-order', { order }),
+    });
+  }, []);
+
+  const removeLabOrder = useCallback(
+    (order: ImagingOrderBasketItem) => {
+      const newOrders = [...orders];
+      newOrders.splice(orders.indexOf(order), 1);
+      setOrders(newOrders);
+    },
+    [orders, setOrders],
+  );
+
+  useEffect(() => {
+    setIsExpanded(orders.length > 0);
+  }, [orders]);
+
+  return (
+    <Tile
+      className={classNames(isTablet ? styles.tabletTile : styles.desktopTile, {
+        [styles.collapsedTile]: !isExpanded,
+      })}>
+      <div className={styles.container}>
+        <div className={styles.iconAndLabel}>
+          <ImagingIcon isTablet={isTablet} />
+          <h4 className={styles.heading}>{`${t('imagingOrders', 'Imaging orders')} (${orders.length})`}</h4>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            iconDescription="Add imaging order"
+            onClick={launchImagingOrderForm}
+            size={isTablet ? 'md' : 'sm'}>
+            {t('add', 'Add')}
+          </Button>
+          <Button
+            className={styles.chevron}
+            hasIconOnly
+            kind="ghost"
+            renderIcon={(props) =>
+              isExpanded ? <ChevronUp size={16} {...props} /> : <ChevronDown size={16} {...props} />
+            }
+            iconDescription="View"
+            disabled={orders.length === 0}
+            onClick={() => setIsExpanded(!isExpanded)}>
+            {t('add', 'Add')}
+          </Button>
+        </div>
+      </div>
+      {isExpanded && (
+        <>
+          {orders.length > 0 && (
+            <>
+              {incompleteOrderBasketItems.length > 0 && (
+                <>
+                  {incompleteOrderBasketItems.map((order) => (
+                    <ImagingOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openImagingOrderFormForEditing(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+              {newOrderBasketItems.length > 0 && (
+                <>
+                  {newOrderBasketItems.map((order) => (
+                    <ImagingOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openImagingOrderFormForEditing(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {renewedOrderBasketItems.length > 0 && (
+                <>
+                  {renewedOrderBasketItems.map((order) => (
+                    <ImagingOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openImagingOrderFormForEditing(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {revisedOrderBasketItems.length > 0 && (
+                <>
+                  {revisedOrderBasketItems.map((order) => (
+                    <ImagingOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openImagingOrderFormForEditing(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {discontinuedOrderBasketItems.length > 0 && (
+                <>
+                  {discontinuedOrderBasketItems.map((order) => (
+                    <ImagingOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openImagingOrderFormForEditing(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Tile>
+  );
+}

package/src/form/imaging-orders/imaging-order-basket-panel/imaging-order-basket-panel.scss

@@ -0,0 +1,74 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.desktopTile {
+  border-left: 4px solid #18cd69;
+  background-color: $ui-02;
+  border-top: 1px solid #8ecdaa;
+  border-right: none;
+  padding: 0;
+}
+
+.tabletTile {
+  @extend .desktopTile;
+  border-top: 1px solid #0ec862;
+}
+
+.collapsedTile {
+  border-bottom: none;
+  min-height: 0;
+
+  .orderBasketHeader {
+    margin-bottom: 0;
+  }
+}
+
+.tabletTile.collapsedTile {
+  border-bottom: 1px solid $grey-2;
+}
+
+.container {
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+}
+
+.desktopTile .container {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletTile .container {
+  padding: spacing.$spacing-03;
+
+  h4 {
+    @include type.type-style('heading-03');
+    color: $ui-05;
+  }
+}
+
+.heading {
+  margin-left: spacing.$spacing-03;
+}
+
+.iconAndLabel {
+  display: flex;
+  align-items: center;
+  margin: spacing.$spacing-03;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+}
+
+.chevron {
+  svg {
+    fill: black;
+  }
+}