@digihmis/esm-outpatient-app 1.0.0

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"outpatient-dashboard-header","slot":"outpatient-sidebar-slot","component":"outpatientDashboardHeader","order":0,"online":true,"offline":true},{"name":"outpatient-db-link","slot":"outpatient-dashboard-slot","component":"leftPanelLink","meta":{"name":"outpatient","slot":"outpatient-homepage-dashboard-slot","title":"Outpatient queue"},"order":1,"online":true,"offline":true},{"name":"outpatient-queue-dashboard","slot":"outpatient-homepage-dashboard-slot","component":"outpatientQueueDashboard"},{"name":"care-panel-link","slot":"outpatient-dashboard-slot","component":"carePanelLink","meta":{"name":"outpatient/patient/:patientUuid/file","slot":"outpatient-file-dashboard-slot","title":"Care panel","showOnlyOnRoute":"/file"},"order":2,"online":true,"offline":true},{"name":"care-panel-history","slot":"outpatient-file-dashboard-slot","component":"carePanel"}],"workspaces":[],"version":"1.0.0"}

package/jest.config.js

@@ -0,0 +1,26 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    'lodash-es': 'lodash',
+    '^dexie$': require.resolve('dexie'),
+  },
+  collectCoverageFrom: [
+    '**/src/**/*.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@digihmis/esm-outpatient-app",
+  "version": "1.0.0",
+  "description": "Outpatient microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-outpatient-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/its-kios09/DigiHMIS-apps#readme",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/DigiHMIS-apps.git#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/config-schema.ts

@@ -0,0 +1,347 @@
+import { ConfigSchema, Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema: ConfigSchema = {
+  outpatientIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/outpatient.svg',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+  },
+  outpatientQueueUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the queue room to be used for outpatient.',
+    _default: '13b5ce7a-cc47-434f-94d7-c7533f1d4b58',
+  },
+  concepts: {
+    waitingStatusUuid: {
+      _type: Type.UUID,
+      _default: '167407AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for waiting status concept',
+    },
+    inServiceStatusUuid: {
+      _type: Type.UUID,
+      _default: '167408AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for in-service status concept',
+    },
+    completedStatusUuid: {
+      _type: Type.UUID,
+      _default: '167409AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for completed status concept',
+    },
+  },
+  OpenmrsIdentifierTypeUuid: {
+    _type: Type.UUID,
+    _default: 'dfacd928-0370-4315-99d7-6ec1c9f7ae76',
+    _description: 'UUID for OpenMRS Identifier Type',
+  },
+  symptomsConceptAnswers: {
+    _type: Type.Array,
+    _description: 'Array of symptom concept objects with concept UUID and label',
+    _default: [],
+  },
+  tuberculosisContactQuestionConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for tuberculosis contact question concept',
+    _default: '124068AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  QuestionObservationConceptAnswers: {
+    _type: Type.Array,
+    _description: 'Array of question observation concept answer objects',
+    _default: [],
+  },
+  coughConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for cough concept',
+    _default: '143264AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  onsetStatusAnswers: {
+    _type: Type.Array,
+    _description: 'Array of onset status answer objects with label and concept UUID',
+    _default: [],
+  },
+  pastIllnessConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for past illness concept',
+    _default: '159520AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  pastIllnessAnswers: {
+    _type: Type.Array,
+    _description: 'Array of past illness concept answer objects with concept UUID and label',
+    _default: [],
+  },
+  generalExaminationConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for general examination concept',
+    _default: '162737AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  generalExaminationConceptAnswers: {
+    _type: Type.Array,
+    _description: 'Array of general examination concept answer objects with concept UUID and label',
+    _default: [],
+  },
+  gaitFindingConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for gait finding concept',
+    _default: '5108AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  gaitFindingConceptAnswers: {
+    _type: Type.Array,
+    _description: 'Array of gait finding concept answer objects with concept UUID and label',
+    _default: [],
+  },
+  jaundiceGradingConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for jaundice grading concept',
+    _default: '164448AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  jaundiceGradingAnswers: {
+    _type: Type.Array,
+    _description: 'Array of jaundice grading answer objects with concept UUID and label',
+    _default: [],
+  },
+  cyanosisTypeConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for cyanosis type concept',
+    _default: '136443AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  cyanosisTypeAnswers: {
+    _type: Type.Array,
+    _description: 'Array of cyanosis type answer objects with concept UUID and label',
+    _default: [],
+  },
+  dehydrationTypeConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for dehydration type concept',
+    _default: '142630AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  dehydrationTypeAnswers: {
+    _type: Type.Array,
+    _description: 'Array of dehydration type answer objects with concept UUID and label',
+    _default: [],
+  },
+  fingerclubGradingConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for fingerclub grading concept',
+    _default: '140125AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  fingerclubGradingAnswers: {
+    _type: Type.Array,
+    _description: 'Array of fingerclub grading answer objects with concept UUID and label',
+    _default: [],
+  },
+  oedemaLocationConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for oedema location concept',
+    _default: '460AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  oedemaLocationAnswers: {
+    _type: Type.Array,
+    _description: 'Array of oedema location answer objects with concept UUID and label',
+    _default: [],
+  },
+  oedemaTypeConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for oedema type concept',
+    _default: '166852AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  oedemaTypeAnswers: {
+    _type: Type.Array,
+    _description: 'Array of oedema type answer objects with concept UUID and label',
+    _default: [],
+  },
+  oedemaGradingConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for oedema grading concept',
+    _default: '166852AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  oedemaGradingAnswers: {
+    _type: Type.Array,
+    _description: 'Array of oedema grading answer objects with concept UUID and label',
+    _default: [],
+  },
+  pallorLocationConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for pallor location concept',
+    _default: '5245AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  pallorLocationAnswers: {
+    _type: Type.Array,
+    _description: 'Array of pallor location answer objects with concept UUID and label',
+    _default: [],
+  },
+  pallorGradingConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for pallor grading concept',
+    _default: '5245AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  pallorGradingAnswers: {
+    _type: Type.Array,
+    _description: 'Array of pallor grading answer objects with concept UUID and label',
+    _default: [],
+  },
+  siteLymphadenopathyConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for site lymphadenopathy concept',
+    _default: '5245AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  siteLymphadenopathyAnswers: {
+    _type: Type.Array,
+    _description: 'Array of site lymphadenopathy answer objects with concept UUID and label',
+    _default: [],
+  },
+  orders: {
+    _type: Type.Object,
+    _description: 'List of lab orderable concepts',
+    _default: {
+      labOrderableConcepts: [],
+      labOrderTypeUuid: '',
+    },
+  },
+  procedureOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'Procedure Order type UUID',
+    _default: 'b4a7c280-369e-4d12-9ce8-18e36783fed6',
+  },
+  procedureConceptSetUuid: {
+    _type: Type.String,
+    _description: 'Procedure Concept SET UUID',
+    _default: '165418AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  visitAttributeTypes: {
+    paymentMethods: {
+      _type: Type.String,
+      _description: 'The payment methods visit attribute uuid',
+      _default: 'e6cb0c3b-04b0-4117-9bc6-ce24adbda802',
+    },
+    insuranceScheme: {
+      _type: Type.String,
+      _description: 'The insurance scheme visit attribute uuid',
+      _default: '2d0fa959-6780-41f1-85b1-402045935068',
+    },
+    policyNumber: {
+      _type: Type.String,
+      _description: 'The policy number visit attribute uuid',
+      _default: '0f4f3306-f01b-43c6-af5b-fdb60015cb02',
+    },
+  },
+  insurancePaymentMethod: {
+    _type: Type.String,
+    _description: 'Insurance Payment method UUID',
+    _default: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+  },
+  patientOutcomeConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID for patient outcome concept',
+    _default: '160433AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  patientOutcomeAnswers: {
+    _type: Type.Array,
+    _description: 'Array of patient outcome answer objects with concept UUID and label',
+    _default: [
+      { concept: '160035AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', label: 'Review' },
+      { concept: '1654AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', label: 'Admit' },
+      { concept: '9008cf1c-8631-440b-8fde-061ff273c04c', label: 'Internal Referral' },
+    ],
+  },
+  SurgicalOutpatientDepartmentServiceConceptUuid: {
+    _type: Type.String,
+    _description: 'Configuration for the surgical outpatient department',
+    _default: '164164AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  LaboratoryServiceConceptUuid: {
+    _type: Type.String,
+    _description: 'Configuration for the laboratory services',
+    _default: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6',
+  },
+  ImagingServiceConceptUuid: {
+    _type: Type.String,
+    _description: 'Configuration for the imaging services',
+    _default: '160463AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  localeCurrencyMapping: {
+    _type: Type.Object,
+    _description: 'Mapping of locale codes to currency codes for internationalization',
+    _default: {
+      en: 'KES',
+      sw: 'KES',
+      am: 'ETB',
+      ar: 'SAR',
+      es: 'EUR',
+      fr: 'EUR',
+      he: 'ILS',
+      km: 'KHR',
+      pt: 'EUR',
+      vi: 'VND',
+      zh: 'CNY',
+      'en-KE': 'KES',
+      'sw-KE': 'KES',
+      'am-ET': 'ETB',
+    },
+  },
+};
+
+export type ConfigObject = {
+  outpatientIcon: { src: string; alt: string };
+  outpatientQueueUuid: string;
+  concepts: {
+    waitingStatusUuid: string;
+    inServiceStatusUuid: string;
+    completedStatusUuid: string;
+  };
+  OpenmrsIdentifierTypeUuid: string;
+  symptomsConceptAnswers: Array<{ concept: string; label: string }>;
+  tuberculosisContactQuestionConceptUuid: string;
+  QuestionObservationConceptAnswers: Array<{ concept: string; label: string }>;
+  coughConceptUuid: string;
+  onsetStatusAnswers: Array<{ label: string; concept: string }>;
+  pastIllnessConceptUuid: string;
+  pastIllnessAnswers: Array<{ concept: string; label: string }>;
+  surgicalHistoryConceptUuid: string;
+  admissionHistoryConceptUuid: string;
+  otherPastIllnessConceptUuid: string;
+  generalExaminationConceptUuid: string;
+  generalExaminationConceptAnswers: Array<{ concept: string; label: string }>;
+  gaitFindingConceptUuid: string;
+  gaitFindingConceptAnswers: Array<{ concept: string; label: string }>;
+  jaundiceGradingConceptUuid: string;
+  jaundiceGradingAnswers: Array<{ concept: string; label: string }>;
+  cyanosisTypeConceptUuid: string;
+  cyanosisTypeAnswers: Array<{ concept: string; label: string }>;
+  dehydrationTypeConceptUuid: string;
+  dehydrationTypeAnswers: Array<{ concept: string; label: string }>;
+  fingerclubGradingConceptUuid: string;
+  fingerclubGradingAnswers: Array<{ concept: string; label: string }>;
+  oedemaLocationConceptUuid: string;
+  oedemaLocationAnswers: Array<{ concept: string; label: string }>;
+  oedemaTypeConceptUuid: string;
+  oedemaTypeAnswers: Array<{ concept: string; label: string }>;
+  oedemaGradingConceptUuid: string;
+  oedemaGradingAnswers: Array<{ concept: string; label: string }>;
+  pallorLocationConceptUuid: string;
+  pallorLocationAnswers: Array<{ concept: string; label: string }>;
+  pallorGradingConceptUuid: string;
+  pallorGradingAnswers: Array<{ concept: string; label: string }>;
+  siteLymphadenopathyConceptUuid: string;
+  siteLymphadenopathyAnswers: Array<{ concept: string; label: string }>;
+  orders: {
+    labOrderTypeUuid: string;
+    labOrderableConcepts: Array<string>;
+  };
+  procedureOrderTypeUuid: string;
+  procedureConceptSetUuid: string;
+  visitAttributeTypes: {
+    paymentMethods: string;
+    insuranceScheme: string;
+    policyNumber: string;
+  };
+  insurancePaymentMethod: string;
+  patientOutcomeConceptUuid: string;
+  patientOutcomeAnswers: Array<{ concept: string; label: string }>;
+  SurgicalOutpatientDepartmentServiceConceptUuid: string;
+  LaboratoryServiceConceptUuid: string;
+  ImagingServiceConceptUuid: string;
+  localeCurrencyMapping: Record<string, string>;
+};

package/src/dashboard.meta.ts

@@ -0,0 +1,16 @@
+import { HealthCross, UserIdentification } from '@carbon/react/icons';
+
+export const dashboardMeta = {
+  name: 'outpatient',
+  slot: 'outpatient-dashboard-slot',
+  title: 'Outpatient queue',
+  icon: HealthCross,
+};
+
+export const carePanelMeta = {
+  name: 'outpatient/patient/:patientUuid/file',
+  slot: 'outpatient-file-dashboard-slot',
+  title: 'Care panel',
+  icon: UserIdentification,
+  showOnlyOnRoute: '/file',
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/icon-wrapper/icon-wrapper.extension.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface IconWrapperProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const IconWrapper: React.FC<IconWrapperProps> = ({
+  src,
+  alt = 'Icon',
+  className,
+  style = { width: '100px', height: '148px' },
+}) => {
+  return <img src={src} alt={alt} className={className} style={style} />;
+};

package/src/index.ts

@@ -0,0 +1,27 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { carePanelMeta, dashboardMeta } from './dashboard.meta';
+import { createDashboardLink } from './left-panel/left-panel.component';
+import { OutpatientQueueDashboard } from './main-dashboard/outpatient-dashboard.component';
+import CarePanel from './patient-management/patient-management.component';
+const moduleName = '@digihmis/esm-outpatient-app';
+const pageName = 'outpatient';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+// t('outpatientQueue', 'Outpatient queue')
+export const leftPanelLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+// t('carePanel', 'Care panel')
+export const carePanelLink = getSyncLifecycle(createDashboardLink(carePanelMeta), options);
+
+export const outpatientQueueDashboard = getSyncLifecycle(OutpatientQueueDashboard, options);
+export const carePanel = getSyncLifecycle(CarePanel, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/left-panel/left-panel.component.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { BrowserRouter, useLocation, useParams } from 'react-router-dom';
+import { type CarbonIconType } from '@carbon/react/icons';
+import last from 'lodash-es/last';
+import styles from './left-panel.scss';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  icon?: string | CarbonIconType;
+  showOnlyOnRoute?: string;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon, showOnlyOnRoute } = dashboardLinkConfig;
+  const location = useLocation();
+  const params = useParams();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  // Extract patientUuid from the current URL path if params.patientUuid is not available
+  const patientUuid = useMemo(() => {
+    if (params.patientUuid) {
+      return params.patientUuid;
+    }
+    // Extract UUID from path like /outpatient/UUID/file or /outpatient/patient/UUID/file
+    const pathParts = location.pathname.split('/');
+    const outpatientIndex = pathParts.indexOf('outpatient');
+    if (outpatientIndex !== -1 && pathParts.length > outpatientIndex + 1) {
+      const nextPart = pathParts[outpatientIndex + 1];
+      // Check if it's a UUID pattern (basic check)
+      if (nextPart && nextPart.length > 20 && nextPart.includes('-')) {
+        return nextPart;
+      }
+      // Check if path is /outpatient/patient/UUID/file
+      if (nextPart === 'patient' && pathParts.length > outpatientIndex + 2) {
+        const uuidPart = pathParts[outpatientIndex + 2];
+        if (uuidPart && uuidPart.length > 20 && uuidPart.includes('-')) {
+          return uuidPart;
+        }
+      }
+    }
+    return null;
+  }, [params.patientUuid, location.pathname]);
+
+  const shouldShow = useMemo(() => {
+    if (!showOnlyOnRoute) {
+      return true;
+    }
+    return location.pathname.includes(showOnlyOnRoute);
+  }, [showOnlyOnRoute, location.pathname]);
+
+  const linkPath = useMemo(() => {
+    let path = name;
+    if (name.includes(':patientUuid') && patientUuid) {
+      path = name.replace(':patientUuid', patientUuid);
+    }
+    return path;
+  }, [name, patientUuid]);
+
+  const isActive = useMemo(() => {
+    if (name.includes(':patientUuid')) {
+      return location.pathname.includes('/file');
+    }
+    const urlSegment = decodeURIComponent(last(location.pathname.split('/')));
+    const nameSegment = name.split('/').at(-1);
+    return nameSegment === urlSegment;
+  }, [location.pathname, name]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${linkPath}`}
+      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
+      {typeof icon === 'string' ? (
+        <MaybeIcon icon={icon} className={styles.icon} size={16} />
+      ) : (
+        IconComp && <IconComp className={styles.icon} />
+      )}
+      {t(title)}
+    </ConfigurableLink>
+  );
+};
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
+  return (
+    <BrowserRouter>
+      <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );
+};
+
+export default DashboardLink;

package/src/left-panel/left-panel.scss

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-05;
+  fill: colors.$gray-70;
+}