@ampath/esm-dha-workflow-app 4.0.0-next.13 → 4.0.0-next.131

package/src/bookings/daily/daily-bookings.component.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import styles from './daily-bookings.component.scss';
+import { Button, InlineLoading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import DailyBookingsFilter from './filters/daily-bookings-filter.component';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { type DailyBookingsResult, type BookingFilter, DailyBookingType } from '../types';
+import DailiyBookingsPatientList from './patient-list/daily-bookings-patient-list.component';
+import { getDailyBookings } from './daily-bookings.resource';
+
+interface DailyBookingsProps {}
+const DailyBookings: React.FC<DailyBookingsProps> = () => {
+  const [filters, setFilters] = useState<BookingFilter>();
+  const [appointments, setAppointments] = useState<DailyBookingsResult[]>([]);
+  const [visits, setVisits] = useState<DailyBookingsResult[]>([]);
+  const [hasNotReturned, setHasNotReturned] = useState<DailyBookingsResult[]>([]);
+  const [selectedTab, setSelectedTab] = useState<DailyBookingType>(DailyBookingType.Appointments);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (filters) {
+      getDailyBookingsByType(selectedTab);
+    }
+  }, [filters]);
+
+  const handleFilterSelected = (filters: BookingFilter) => {
+    setFilters(filters);
+  };
+  const handleSelectedTab = (userSelectedTab: DailyBookingType) => {
+    setSelectedTab(userSelectedTab);
+  };
+  const getDailyBookingsByType = async (dailyBookingType: DailyBookingType) => {
+    const isValidFilter = isValidFilterset(filters);
+    if (!isValidFilter) return;
+    setLoading(true);
+    try {
+      const resp = await getDailyBookings(filters, dailyBookingType);
+      if (selectedTab === DailyBookingType.Appointments) {
+        setAppointments(resp);
+      }
+      if (selectedTab === DailyBookingType.Visits) {
+        setVisits(resp);
+      }
+      if (selectedTab === DailyBookingType.HasNotReturned) {
+        setHasNotReturned(resp);
+      }
+    } catch (e) {
+      showSnackbar({
+        kind: 'error',
+        title: e.message ?? 'An error ocurred while fetching data',
+        subtitle: '',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const isValidFilterset = (filters: BookingFilter) => {
+    if (!filters) {
+      return false;
+    }
+    if (!filters.startDate) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Start Date not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    if (!filters.locationUuids) {
+      showSnackbar({
+        kind: 'error',
+        title: 'User location not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    if (!filters.department) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Department not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    return true;
+  };
+  const handleRefresh = () => {
+    getDailyBookingsByType(selectedTab);
+  };
+  return (
+    <>
+      <div className={styles.bookingsLayout}>
+        <div className={styles.bookingsHeader}>
+          <h4>Daily Bookings</h4>
+        </div>
+        <div className={styles.bookingsFilters}>
+          <DailyBookingsFilter filterSelected={handleFilterSelected} />
+        </div>
+        <div className={styles.bookingsContent}>
+          <div className={styles.contentActions}>
+            <Button kind="primary" onClick={handleRefresh} disabled={loading}>
+              {loading ? <InlineLoading description="Fetching..." /> : 'Refresh'}
+            </Button>
+          </div>
+          <div className={styles.contentData}>
+            <Tabs>
+              <TabList contained>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.Appointments)}>Appointments</Tab>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.Visits)}>Visits</Tab>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.HasNotReturned)}>Has Not Returned</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  {appointments && appointments.length > 0 ? (
+                    <DailiyBookingsPatientList patientListData={appointments} />
+                  ) : (
+                    <></>
+                  )}
+                </TabPanel>
+                <TabPanel>
+                  {visits && visits.length > 0 ? <DailiyBookingsPatientList patientListData={visits} /> : <></>}
+                </TabPanel>
+                <TabPanel>
+                  {hasNotReturned && hasNotReturned.length > 0 ? (
+                    <DailiyBookingsPatientList patientListData={hasNotReturned} />
+                  ) : (
+                    <></>
+                  )}
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DailyBookings;

package/src/bookings/daily/daily-bookings.resource.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../../shared/utils/get-base-url';
+import {
+  type BookingFilter,
+  type BookingDto,
+  type DailyBookingsResult,
+  type DailyBookingsReponse,
+  type DailyBookingType,
+} from '../types';
+
+export async function getDailyBookings(
+  bookingFilter: BookingFilter,
+  bookingType: DailyBookingType,
+): Promise<DailyBookingsResult[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const params: BookingDto = {
+    department: bookingFilter.department,
+    startDate: bookingFilter.startDate ?? new Date().toISOString().split('T')[0],
+    locationUuids: bookingFilter.locationUuids,
+    startIndex: '0',
+    limit: '1000',
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const dailyAppUrl = `${etlBaseUrl}/${bookingType}/${bookingFilter.startDate}?&${queryString}`;
+  const resp = await openmrsFetch(dailyAppUrl);
+  const data: DailyBookingsReponse = await resp.json();
+  return data.result ?? [];
+}

package/src/bookings/daily/filters/daily-bookings-filter.component.scss

@@ -0,0 +1,15 @@
+.filterLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}
+.filterRow{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    width: 100%;
+}
+.filterFormGroup{
+    width: 40%;
+}

package/src/bookings/daily/filters/daily-bookings-filter.component.tsx

@@ -0,0 +1,80 @@
+import React, { useRef } from 'react';
+import { Button, DatePicker, DatePickerInput, Dropdown, type OnChangeData } from '@carbon/react';
+import styles from './daily-bookings-filter.component.scss';
+import { type BookingFilter } from '../../types';
+import { useSession } from '@openmrs/esm-framework';
+
+interface DailyBookingsFilterProps {
+  filterSelected: (filters: BookingFilter) => void;
+}
+const DailyBookingsFilter: React.FC<DailyBookingsFilterProps> = ({ filterSelected }) => {
+  const dateRef = useRef<string>('');
+  const departmentRef = useRef<string>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const handleDateChange = (dateSelected: Date[]) => {
+    dateRef.current = new Date(dateSelected[0]).toLocaleDateString('en-CA');
+  };
+  const handleDepartmentChange = (selectedDept: OnChangeData<{ text: string }>) => {
+    departmentRef.current = selectedDept.selectedItem.text;
+  };
+  const handeleGenerateFilters = () => {
+    const filters: BookingFilter = {
+      startDate: dateRef.current,
+      department: departmentRef.current,
+      locationUuids: locationUuid,
+    };
+    filterSelected(filters);
+  };
+  return (
+    <>
+      <div className={styles.filterLayout}>
+        <div className={styles.filterRow}>
+          <div className={styles.filterFormGroup}>
+            <DatePicker
+              datePickerType="single"
+              locale="en"
+              onChange={handleDateChange}
+              onClose={() => {}}
+              onOpen={() => {}}
+            >
+              <DatePickerInput id="date-picker-single" labelText="Date" placeholder="mm/dd/yyyy" />
+            </DatePicker>
+          </div>
+          <div className={styles.filterFormGroup}>
+            <Dropdown
+              id="department"
+              invalidText="invalid selection"
+              itemToString={(item) => item.text}
+              onChange={handleDepartmentChange}
+              items={[
+                {
+                  text: 'HIV',
+                },
+                {
+                  text: 'CDM',
+                },
+                {
+                  text: 'ONCOLOGY',
+                },
+              ]}
+              label="Select Department"
+              titleText="Department"
+              type="default"
+              warnText=""
+            />
+          </div>
+        </div>
+        <div className={styles.filterRow}>
+          <div className={styles.filterFormGroup}>
+            <Button kind="primary" onClick={handeleGenerateFilters}>
+              Generate
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DailyBookingsFilter;

package/src/bookings/daily/patient-list/daily-bookings-patient-list.component.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { type DailyBookingsResult } from '../../types';
+
+interface DailiyBookingsPatientListProps {
+  patientListData: DailyBookingsResult[];
+}
+const DailiyBookingsPatientList: React.FC<DailiyBookingsPatientListProps> = ({ patientListData }) => {
+  if (!patientListData || patientListData.length === 0) {
+    return <>No Data</>;
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>CCC Number</TableHeader>
+            <TableHeader>UPI Number</TableHeader>
+            <TableHeader>Program</TableHeader>
+            <TableHeader>RTC Date</TableHeader>
+            <TableHeader>Med Pickup Date</TableHeader>
+            <TableHeader>ARV Start Date</TableHeader>
+            <TableHeader>HIV Disclosure Status</TableHeader>
+            <TableHeader>Height</TableHeader>
+            <TableHeader>Weight</TableHeader>
+            <TableHeader>Stage</TableHeader>
+            <TableHeader>Patient Categorization</TableHeader>
+            <TableHeader>Service Delivery Model</TableHeader>
+            <TableHeader>DSD Model</TableHeader>
+            <TableHeader>CD4 Date</TableHeader>
+            <TableHeader>CD4 Results</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Birthdate</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Patient Name</TableHeader>
+            <TableHeader>Identifiers</TableHeader>
+            <TableHeader>Phone Number</TableHeader>
+            <TableHeader>Latest RTC Date</TableHeader>
+            <TableHeader>Latest VL</TableHeader>
+            <TableHeader>VL Category</TableHeader>
+            <TableHeader>Latest VL Date</TableHeader>
+            <TableHeader>Last Appointment</TableHeader>
+            <TableHeader>Visit Type</TableHeader>
+            <TableHeader>Current Meds</TableHeader>
+            <TableHeader>Covid-19 Vaccination</TableHeader>
+            <TableHeader>TB Screening Date</TableHeader>
+            <TableHeader>TB Screening Result</TableHeader>
+            <TableHeader>Patient Category</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {patientListData &&
+            patientListData.map((val, index) => (
+              <TableRow key={val.patient_uuid ?? index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{val.ccc_number}</TableCell>
+                <TableCell>{val.upi_number}</TableCell>
+                <TableCell>{val.program}</TableCell>
+                <TableCell>{val.rtc_date}</TableCell>
+                <TableCell>{val.med_pick_up_date}</TableCell>
+                <TableCell>{val.arv_first_regimen_start_date}</TableCell>
+                <TableCell>{val.hiv_disclosure_status}</TableCell>
+                <TableCell>{val.height}</TableCell>
+                <TableCell>{val.weight}</TableCell>
+                <TableCell>{val.stage}</TableCell>
+                <TableCell>{val.patient_categorization}</TableCell>
+                <TableCell>{val.service_delivery_model}</TableCell>
+                <TableCell>{val.dsd_model}</TableCell>
+                <TableCell>{val.cd4_date}</TableCell>
+                <TableCell>{val.cd4_results}</TableCell>
+                <TableCell>{val.gender}</TableCell>
+                <TableCell>{val.birthdate}</TableCell>
+                <TableCell>{val.age}</TableCell>
+                <TableCell>{val.person_name}</TableCell>
+                <TableCell>{val.identifiers}</TableCell>
+                <TableCell>{val.phone_number}</TableCell>
+                <TableCell>{val.latest_rtc_date}</TableCell>
+                <TableCell>{val.latest_vl}</TableCell>
+                <TableCell>{val.vl_category}</TableCell>
+                <TableCell>{val.latest_vl_date}</TableCell>
+                <TableCell>{val.last_appointment}</TableCell>
+                <TableCell>{val.visit_type}</TableCell>
+                <TableCell>{val.cur_meds}</TableCell>
+                <TableCell>{val.covid_19_vaccination_status}</TableCell>
+                <TableCell>{val.tb_screening_date}</TableCell>
+                <TableCell>{val.tb_screening_result}</TableCell>
+                <TableCell>{val.patient_category}</TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+export default DailiyBookingsPatientList;

package/src/bookings/types/index.ts

@@ -0,0 +1,68 @@
+export type BookingFilter = {
+  startDate: string;
+  department: string;
+  locationUuids: string;
+};
+
+export type BookingDto = BookingFilter & {
+  startIndex: string;
+  limit: string;
+};
+
+export type DailyBookingsResult = {
+  ccc_number: string;
+  ovcid_id: string;
+  upi_number: string;
+  program: string;
+  rtc_date: string;
+  med_pick_up_date: string;
+  arv_first_regimen_start_date: string;
+  hiv_disclosure_status: string;
+  height: number;
+  weight: number;
+  stage: number;
+  patient_categorization: string;
+  service_delivery_model: string;
+  dsd_model: string;
+  cd4_date: string;
+  cd4_results: number;
+  patient_uuid: string;
+  gender: string;
+  birthdate: string;
+  age: number;
+  person_name: string;
+  identifiers: string;
+  phone_number: string;
+  latest_rtc_date: string;
+  latest_vl: number;
+  vl_category: string;
+  latest_vl_date: string;
+  last_appointment: string;
+  visit_type: string;
+  cur_meds: string;
+  previous_vl: number;
+  previous_vl_date: string;
+  nearest_center: string;
+  covid_19_vaccination_status: string;
+  sms_consent_provided: string;
+  sms_receive_time: string;
+  sms_delivery_status: string;
+  tb_screening_date: string;
+  patient_category: string;
+  tb_screening_result: string;
+  cervical_screening_date: string;
+  cervical_screening_method: string;
+  cervical_screening_result: string;
+};
+
+export type DailyBookingsReponse = {
+  schemas: any;
+  sqlQuery: string;
+  result: DailyBookingsResult[];
+};
+
+export enum DailyBookingType {
+  Appointments = 'daily-appointments',
+  Visits = 'daily-visits',
+  HasNotReturned = 'daily-has-not-returned',
+}

package/src/config-schema.ts

@@ -1,39 +1,141 @@
 import { Type, validator } from '@openmrs/esm-framework';
 
-/**
- * This is the config schema. It expects a configuration object which
- * looks like this:
- *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
- */
 export const configSchema = {
-  casualGreeting: {
-    _type: Type.Boolean,
-    _default: false,
-    _description: 'Whether to use a casual greeting (or a formal one).',
-  },
-  whoToGreet: {
-    _type: Type.Array,
-    _default: ['World'],
-    _description: 'Who should be greeted. Names will be separated by a comma and space.',
-    _elements: {
-      _type: Type.String,
+  concepts: {
+    defaultPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: false,
+      _description: 'The UUID of the default priority for the queues eg Not urgent.',
+    },
+    defaultStatusConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
+      _description: 'The UUID of the default status for the queues eg Waiting.',
+    },
+    defaultTransitionStatus: {
+      _type: Type.ConceptUuid,
+      _default: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
+      _description: 'The UUID of the default status for attending a service in the queues eg In Service.',
+    },
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    diastolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    emergencyPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: false,
+      _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
+    },
+    generalPatientNoteConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description:
+        'The UUID of the free text note field intended to capture unstructured description of the patient encounter',
+    },
+    heightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    historicalObsConceptUuid: {
+      _type: Type.Array,
+      _default: ['161643AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+      _description: 'The Uuids of the obs that are displayed on the previous visit modal',
+      _elements: {
+        _type: Type.ConceptUuid,
+      },
+    },
+    oxygenSaturationUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    pulseUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    problemListConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '1284AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    respiratoryRateUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    temperatureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    visitDiagnosesConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
-    _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')],
+    weightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+  },
+  subDomainUrl: {
+    _type: Type.String,
+    _description: 'Subdomain e.g training,staging',
+    _default: '',
+  },
+  etlBaseUrl: {
+    _type: Type.String,
+    _description: 'ETL Endpoint',
+    _default: '',
+  },
+  hieBaseUrl: {
+    _type: Type.String,
+    _description: 'HIE Endpoint',
+    _default: '',
+  },
+  claimsBaseUrl: {
+    _type: Type.String,
+    _description: '',
+    _default: '',
+  },
+  claimsKey: {
+    _type: Type.String,
+    _description: '',
+    _default: '',
+  },
+  registrationBillableServices: {
+    _type: Type.String,
+    _description: 'Billable services e.g consultation',
+    _default: '',
+  },
+  cashConsultationOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'CASH Consultation Order type uuid',
+    _default: '',
+  },
+  shaConsultationOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'SHA Consultation Order type uuid',
+    _default: '',
+  },
+  cashConsulationConceptUuid: {
+    _type: Type.String,
+    _description: 'Cash Consultation concept uuid',
+    _default: '',
+  },
+  shaConsulationConceptUuid: {
+    _type: Type.String,
+    _description: 'SHA Consultation concept uuid',
+    _default: '',
+  },
+  outPatientCareSettingUuid: {
+    _type: Type.String,
+    _description: 'Outpatient care settings uuid',
+    _default: '',
+  },
+  orderEncounterTypeUuid: {
+    _type: Type.String,
+    _description: 'Outpatient care settings uuid',
+    _default: '',
   },
 };
 
@@ -41,3 +143,55 @@ export type Config = {
   casualGreeting: boolean;
   whoToGreet: Array<string>;
 };
+
+export interface ConfigObject {
+  // priorityConfigs: Array<PriorityConfig>;
+  appointmentStatuses: Array<string>;
+  // biometrics: BiometricsConfigObject;
+  concepts: {
+    defaultPriorityConceptUuid: string;
+    defaultStatusConceptUuid: string;
+    defaultTransitionStatus: string;
+    diastolicBloodPressureUuid: string;
+    emergencyPriorityConceptUuid: string;
+    generalPatientNoteConceptUuid: string;
+    heightUuid: string;
+    historicalObsConceptUuid: Array<string>;
+    oxygenSaturationUuid: string;
+    pulseUuid: string;
+    problemListConceptUuid: string;
+    respiratoryRateUuid: string;
+    systolicBloodPressureUuid: string;
+    temperatureUuid: string;
+    visitDiagnosesConceptUuid: string;
+    weightUuid: string;
+  };
+  defaultInitialServiceQueue: string;
+  contactAttributeType: string;
+  customPatientChartUrl: string;
+  defaultIdentifierTypes: Array<string>;
+  dashboardTitle: {
+    key: string;
+    value: string;
+  };
+  // queueTables: TablesConfig;
+  showRecommendedVisitTypeTab: boolean;
+  visitQueueNumberAttributeUuid: string | null;
+  visitTypeResourceUrl: string;
+  subDomainUrl: string;
+  etlBaseUrl: string;
+  hieBaseUrl: string;
+  claimsBaseUrl: string;
+  claimsKey: string;
+  registrationBillableServices: Array<string>;
+  cashConsultationOrderTypeUuid: string;
+  cashConsulationConceptUuid: string;
+  shaConsultationOrderTypeUuid: string;
+  shaConsulationConceptUuid: string;
+  outPatientCareSettingUuid: string;
+  orderEncounterTypeUuid: string;
+  // vitals: VitalsConfigObject;
+}
+
+const queueEntryActions = ['move', 'call', 'edit', 'transition', 'signOff', 'remove', 'delete', 'undo'] as const;
+export type QueueEntryAction = (typeof queueEntryActions)[number];

package/src/createDashboardLink.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { DashboardExtension, type DashboardExtensionProps, type IconId } from '@openmrs/esm-framework';
+
+export const createDashboardLink = (config: Omit<DashboardExtensionProps, 'icon'> & { icon?: IconId }) => () => (
+  <BrowserRouter>
+    <DashboardExtension path={config.path} title={config.title} basePath={config.basePath} icon={config.icon} />
+  </BrowserRouter>
+);

package/src/dashboard/charts/chart.component.scss

@@ -0,0 +1,13 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: space-between;
+    width: 85vw;
+    min-height: 60vh;
+}
+
+.container iframe {
+  width: 85vw;
+  min-height: 85vh;
+}