@cc-openmrs/cc-esm-active-prescriptions 1.0.65 → 1.0.68

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0"},"extensions":[{"name":"Red box","component":"redBox","slot":"Boxes"},{"name":"Blue box","component":"blueBox","slot":"Boxes"},{"name":"Brand box","component":"blueBox","slot":"Boxes"},{"name":"prescriptions-action-menu","component":"prescriptionsActionButton","slot":"action-menu-patient-chart-items-slot"}],"workspaces":[{"name":"active-prescriptions","title":"activePrescriptionsWorkspaceTitle","component":"root","type":"active-prescriptions","canHide":false,"width":"wider"}],"version":"1.0.65"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0"},"extensions":[{"name":"Red box","component":"redBox","slot":"Boxes"},{"name":"Blue box","component":"blueBox","slot":"Boxes"},{"name":"Brand box","component":"blueBox","slot":"Boxes"}],"workspaces2":[{"name":"active-prescriptions-workspace","component":"root","window":"active-prescriptions-workspace"}],"workspaceWindows2":[{"name":"active-prescriptions-workspace","group":"patient-chart","icon":"prescriptionsActionButton","width":"wider","order":4}],"version":"1.0.68"}

package/package.json

@@ -1,95 +1,105 @@
 {
   "name": "@cc-openmrs/cc-esm-active-prescriptions",
-  "version": "1.0.65",
+  "version": "1.0.68",
   "license": "MPL-2.0",
-  "description": "An OpenMRS seed application for building microfrontends",
-  "browser": "dist/openmrs-esm-template-app.js",
+  "description": "An OpenMRS frontend module for managing patient lists in the Patient Chart",
+  "browser": "dist/openmrs-esm-patient-lists-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
     "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
-    "build": "webpack --mode production",
+    "build": "webpack --mode production --color",
     "analyze": "webpack --mode=production --env analyze=true",
-    "lint": "eslint src --ext js,jsx,ts,tsx --max-warnings 0",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different",
+    "lint": "cross-env eslint src --ext js,jsx,ts,tsx --fix --max-warnings=0",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typescript": "tsc",
-    "test": "jest --config jest.config.js --passWithNoTests",
-    "verify": "turbo lint typescript coverage",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
-    "prepare": "husky install",
-    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./tools/i18next-parser.config.js",
-    "test-e2e": "playwright test"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
   "keywords": [
-    "openmrs",
-    "microfrontends"
+    "openmrs"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/openmrs/openmrs-esm-template-app.git"
-  },
-  "homepage": "https://github.com/openmrs/openmrs-esm-template-app#readme",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-chart#readme",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-chart.git"
+  },
   "bugs": {
-    "url": "https://github.com/openmrs/openmrs-esm-template-app/issues"
+    "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
-  "openmrs": {
-    "frontendModuleName": "@cc-openmrs/cc-esm-active-prescriptions",
-    "routes": "src/routes.json"
+  "dependencies": {
+    "@carbon/react": "^1.83.0"
   },
   "peerDependencies": {
-    "@carbon/react": "^1.x",
     "@openmrs/esm-framework": "9.x",
-    "@openmrs/esm-styleguide": "9.x",
+    "@openmrs/esm-patient-common-lib": "12.x",
+    "dayjs": "1.x",
     "react": "18.x",
-    "react-dom": "18.x",
     "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x",
     "swr": "2.x"
   },
   "devDependencies": {
-    "@carbon/react": "^1.83.0",
-    "@openmrs/esm-framework": "9.x",
-    "@openmrs/esm-styleguide": "9.x",
-    "@playwright/test": "^1.52.0",
-    "@swc/core": "^1.3.68",
-    "@swc/jest": "^0.2.36",
+    "@openmrs/esm-framework": "next",
+    "@playwright/test": "^1.51.1",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.89",
+    "@swc/jest": "^0.2.29",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.6",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.21",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/fhir": "^0.0.31",
+    "@types/jest": "^29.5.11",
+    "@types/lodash-es": "^4.17.9",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "dayjs": "^1.x",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.50.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "@types/webpack-env": "^1.18.8",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "babel-preset-minify": "^0.5.2",
+    "concurrently": "^8.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.6.0",
+    "d3-selection": "^3.0.0",
+    "dayjs": "^1.11.10",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-playwright": "^0.16.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "husky": "^8.0.3",
     "i18next": "^25.0.0",
     "i18next-parser": "^9.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.2",
-    "openmrs": "9.x",
-    "prettier": "^3.3.3",
+    "lint-staged": "^14.0.1",
+    "lodash": "^4.17.23",
+    "openmrs": "next",
+    "prettier": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^16.0.0",
-    "swr": "^2.3.3",
+    "react-router-dom": "^6.16.0",
+    "rxjs": "^6.6.7",
+    "sass": "^1.54.3",
+    "swc-loader": "^0.2.3",
+    "swr": "2.2.5",
     "turbo": "^2.5.2",
     "typescript": "^5.0.0"
-  },
-  "lint-staged": {
-    "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
-    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
-  },
-  "packageManager": "yarn@4.10.3"
+  }
 }

package/src/declarations.d.ts

@@ -1,5 +1,4 @@
-declare module '*.css';
-declare module '*.scss';
-declare module '*.png';
-
-declare type SideNavProps = object;
+declare module '*.scss' {
+	const content: { [className: string]: string };
+	export default content;
+}

package/src/prescriptions-actions/add-drug-prescription/add-drug-prescription.component.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, ComboBox, TextInput } from '@carbon/react';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface PrescriptionDrugItem {
+  drug: { uuid: string; name: string; display: string };
+  dosage: string;
+  unit: string;
+  route: string;
+  frequency: string;
+  patientInstructions?: string;
+  asNeeded?: boolean;
+  asNeededCondition?: string;
+  indication?: string;
+}
+
+export interface AddDrugPrescriptionProps {
+  initialData?: PrescriptionDrugItem;
+  onSave: (item: PrescriptionDrugItem) => void;
+  onCancel: () => void;
+}
+
+const UNITS = [{ value: 'mg' }, { value: 'ml' }, { value: 'g' }, { value: 'mcg' }, { value: 'comprimido(s)' }];
+
+const ROUTES = [
+  { value: 'Oral' },
+  { value: 'Intravenoso (IV)' },
+  { value: 'Intramuscular (IM)' },
+  { value: 'Subcutâneo (SC)' },
+  { value: 'Tópico' },
+  { value: 'Inalatório' },
+  { value: 'Sublingual' },
+];
+
+const FREQUENCIES = [
+  { value: '1x ao dia' },
+  { value: '2x ao dia' },
+  { value: '3x ao dia' },
+  { value: '4x ao dia' },
+  { value: '6/6h' },
+  { value: '8/8h' },
+  { value: '12/12h' },
+  { value: 'Se necessário' },
+];
+
+function useDrugSearch(query: string) {
+  const url =
+    query?.length >= 3
+      ? `${restBaseUrl}/drug?q=${encodeURIComponent(query)}&v=custom:(uuid,name,display)&limit=10`
+      : null;
+  const { data, isValidating } = useSWR<any>(url, openmrsFetch);
+  return {
+    drugs: (data?.data?.results ?? []) as Array<{ uuid: string; name: string; display: string }>,
+    isLoading: isValidating,
+  };
+}
+
+const AddDrugPrescription: React.FC<AddDrugPrescriptionProps> = ({ initialData, onSave, onCancel }) => {
+  const { t } = useTranslation();
+
+  const [drugQuery, setDrugQuery] = useState(initialData?.drug?.name ?? '');
+  const [selectedDrug, setSelectedDrug] = useState<PrescriptionDrugItem['drug'] | null>(initialData?.drug ?? null);
+  const [dosage, setDosage] = useState(initialData?.dosage ?? '');
+  const [unit, setUnit] = useState(initialData?.unit ?? '');
+  const [route, setRoute] = useState(initialData?.route ?? '');
+  const [frequency, setFrequency] = useState(initialData?.frequency ?? '');
+  const [patientInstructions, setPatientInstructions] = useState(initialData?.patientInstructions ?? '');
+  const [asNeeded, setAsNeeded] = useState(initialData?.asNeeded ?? false);
+  const [asNeededCondition, setAsNeededCondition] = useState(initialData?.asNeededCondition ?? '');
+  const [indication, setIndication] = useState(initialData?.indication ?? '');
+
+  const { drugs, isLoading } = useDrugSearch(drugQuery);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedDrug || !dosage || !unit || !frequency) return;
+    onSave({
+      drug: selectedDrug,
+      dosage,
+      unit,
+      route,
+      frequency,
+      patientInstructions: patientInstructions || undefined,
+      asNeeded,
+      asNeededCondition: asNeeded ? asNeededCondition || undefined : undefined,
+      indication: indication || undefined,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <ComboBox
+        id="drug-search"
+        titleText={t('drugName', 'Medicamento')}
+        placeholder={t('drugSearchPlaceholder', 'Digite para buscar (mín. 3 letras)...')}
+        items={drugs.map((d) => ({ id: d.uuid, label: d.display || d.name, ...d }))}
+        itemToString={(item: any) => item?.label ?? ''}
+        selectedItem={selectedDrug ? { id: selectedDrug.uuid, label: selectedDrug.display } : null}
+        onInputChange={(v: string) => {
+          setDrugQuery(v);
+          if (!v) setSelectedDrug(null);
+        }}
+        onChange={({ selectedItem }: any) => {
+          if (selectedItem) {
+            setSelectedDrug({
+              uuid: selectedItem.uuid,
+              name: selectedItem.name,
+              display: selectedItem.display ?? selectedItem.name,
+            });
+          }
+        }}
+        disabled={isLoading}
+        helperText={isLoading ? t('searching', 'Buscando...') : undefined}
+      />
+      <TextInput
+        id="dosage"
+        labelText={t('dosage', 'Dose')}
+        value={dosage}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDosage(e.target.value)}
+        required
+      />
+      <ComboBox
+        id="unit"
+        titleText={t('unit', 'Unidade')}
+        items={UNITS}
+        itemToString={(item: any) => item?.value ?? ''}
+        selectedItem={UNITS.find((u) => u.value === unit) ?? null}
+        onChange={({ selectedItem }: any) => setUnit(selectedItem?.value ?? '')}
+      />
+      <ComboBox
+        id="route"
+        titleText={t('route', 'Via de administração')}
+        items={ROUTES}
+        itemToString={(item: any) => item?.value ?? ''}
+        selectedItem={ROUTES.find((r) => r.value === route) ?? null}
+        onChange={({ selectedItem }: any) => setRoute(selectedItem?.value ?? '')}
+      />
+      <ComboBox
+        id="frequency"
+        titleText={t('frequency', 'Frequência')}
+        items={FREQUENCIES}
+        itemToString={(item: any) => item?.value ?? ''}
+        selectedItem={FREQUENCIES.find((f) => f.value === frequency) ?? null}
+        onChange={({ selectedItem }: any) => setFrequency(selectedItem?.value ?? '')}
+      />
+      <TextInput
+        id="patient-instructions"
+        labelText={t('patientInstructions', 'Instruções ao paciente')}
+        value={patientInstructions}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPatientInstructions(e.target.value)}
+      />
+      <Checkbox
+        id="as-needed"
+        labelText={t('asNeeded', 'Tomar se necessário (P.R.N.)')}
+        checked={asNeeded}
+        onChange={(_: any, { checked }: any) => setAsNeeded(checked)}
+      />
+      {asNeeded && (
+        <TextInput
+          id="as-needed-condition"
+          labelText={t('asNeededCondition', 'Motivo P.R.N.')}
+          value={asNeededCondition}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAsNeededCondition(e.target.value)}
+        />
+      )}
+      <TextInput
+        id="indication"
+        labelText={t('indication', 'Indicação')}
+        value={indication}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setIndication(e.target.value)}
+      />
+      <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
+        <Button type="submit" kind="primary" disabled={!selectedDrug || !dosage || !unit || !frequency}>
+          {t('saveMedication', 'Salvar medicamento')}
+        </Button>
+        <Button type="button" kind="secondary" onClick={onCancel}>
+          {t('cancel', 'Cancelar')}
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default AddDrugPrescription;

package/src/prescriptions-actions/add-drug-prescription/add-drug-prescription.scss

@@ -0,0 +1 @@
+@import "../add-drug-order/add-drug-order.scss";

package/src/prescriptions-actions/add-drug-prescription/index.ts

@@ -0,0 +1,2 @@
+export { default } from './add-drug-prescription.component';
+export type { PrescriptionDrugItem, AddDrugPrescriptionProps } from './add-drug-prescription.component';

package/src/prescriptions-actions/prescriptions-action-button.component.tsx

@@ -1,24 +1,18 @@
-import React, { useCallback } from 'react';
-import { launchWorkspace2 } from '@openmrs/esm-framework';
-import { ChevronRight } from '@carbon/icons-react';
-import { ActionMenuButton } from '@openmrs/esm-styleguide';
+import React, { type ComponentProps } from 'react';
+import { ActionMenuButton2, EventsIcon } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 
-const handleClick = () => {
-  void launchWorkspace2('active-prescriptions');
-};
-
 const PrescriptionsActionButton: React.FC = () => {
   const { t } = useTranslation();
   const label = t('activePrescriptions', 'Active prescriptions');
 
   return (
-    <ActionMenuButton
-      getIcon={(props) => <ChevronRight {...props} />}
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof EventsIcon>) => <EventsIcon {...props} />}
       label={label}
-      iconDescription={label}
-      handler={handleClick}
-      type="active-prescriptions"
+      workspaceToLaunch={{
+        workspaceName: 'active-prescriptions-workspace',
+      }}
     />
   );
 };

package/src/prescriptions-actions/prescriptions-action-menu-item.component.tsx

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { OverflowMenuItem } from '@carbon/react';
+import { CertificateCheck } from '@carbon/react/icons';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './prescriptions-action-menu-item.scss';
+
+const PrescriptionsActionMenuItem: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchWorkspace('active-prescriptions-workspace');
+  }, []);
+
+  const label = t('prescriptionsActionMenuItem', 'Active prescriptions');
+
+  return (
+    <OverflowMenuItem
+      itemText={
+        <span className={styles.iconOnly} aria-label={label} title={label}>
+          <CertificateCheck size={16} aria-hidden="true" />
+        </span>
+      }
+      onClick={handleClick}
+    />
+  );
+};
+
+// export default PrescriptionsActionMenuItem;

package/src/prescriptions-actions/prescriptions-action-menu-item.scss

@@ -0,0 +1,12 @@
+.iconOnly {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 0;
+}
+
+.iconOnly :global(svg) {
+  display: block;
+}