@cc-openmrs/cc-esm-active-prescriptions 1.0.55 → 1.0.57

package/dist/openmrs-esm-template-app.js.buildmanifest.json

@@ -1,29 +1,5 @@
 {
   "chunks": [
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 61649,
-      "sizes": {
-        "javascript": 61649
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@cc-openmrs/cc-esm-active-prescriptions",
-        "main"
-      ],
-      "files": [
-        "11.js"
-      ],
-      "auxiliaryFiles": [
-        "11.js.map"
-      ],
-      "hash": "add31f0c3fc094bc",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -379,7 +355,7 @@
       "auxiliaryFiles": [
         "499.js.map"
       ],
-      "hash": "096ce8685a946497",
+      "hash": "18fd701fd0bcbb5c",
       "childrenByOrder": {}
     },
     {
@@ -499,7 +475,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "b928bde2fb58cae4",
+      "hash": "fe28e32959133b2b",
       "childrenByOrder": {}
     },
     {
@@ -529,6 +505,30 @@
       "hash": "31524ae59d310e8c",
       "childrenByOrder": {}
     },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 55232,
+      "sizes": {
+        "javascript": 55232
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@cc-openmrs/cc-esm-active-prescriptions",
+        "main"
+      ],
+      "files": [
+        "845.js"
+      ],
+      "auxiliaryFiles": [
+        "845.js.map"
+      ],
+      "hash": "b81c9b4af8da9da5",
+      "childrenByOrder": {}
+    },
     {
       "rendered": true,
       "initial": false,

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.55"}
+{"$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.56"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cc-openmrs/cc-esm-active-prescriptions",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
   "browser": "dist/openmrs-esm-template-app.js",

package/src/root.component.tsx

@@ -10,6 +10,8 @@
 
 import React, { useMemo, useState } from 'react';
 import { PrescriptionService, PrescriptionPayload } from './prescriptions.service';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import {
   Checkbox,
   ComboBox,
@@ -32,128 +34,245 @@ interface RootProps {
   patient?: { uuid: string }; // Alguns workspaces passam assim
 }
 
-const Root: React.FC<RootProps> = (props) => {
-  console.log('Root props:', props); // 👈 ADICIONE para debug
 
-  // Tenta pegar patientUuid de diferentes formas
-  const patientUuid = props.patientUuid || props.patient?.uuid;
-  
-  const { t } = useTranslation();
-  if (!patientUuid) {
-    return (
-      <InlineNotification
-        lowContrast
-        kind="warning"
-        title={t('ordersMissingPatientTitle', 'Select a patient to continue')}
+
+
+// Hook para buscar ConceptDrugs do OpenMRS
+function useConceptDrugs(query: string) {
+  const url = query ? `${restBaseUrl}/drug?q=${encodeURIComponent(query)}&v=custom:(uuid,name,display)` : null;
+  const swr = useSWR<any>(url, openmrsFetch);
+  return {
+    drugs: swr.data?.data?.results || [],
+    error: swr.error,
+    isLoading: swr.isValidating,
+  };
+}
+
+
+// Tipo para dados do medicamento
+type MedicationFormData = {
+  drugName: string;
+  dosage: string;
+  unit: string;
+  route: string;
+  frequency: string;
+  patientInstructions?: string;
+  asNeeded?: boolean;
+  asNeededCondition?: string;
+  startDate?: string;
+  duration?: string;
+  durationUnit?: string;
+  indication?: string;
+};
+
+const MOCK_UNITS = [
+  { value: 'mg' },
+  { value: 'ml' },
+  { value: 'g' },
+];
+const MOCK_FREQUENCIES = [
+  { value: '1x ao dia' },
+  { value: '2x ao dia' },
+  { value: '8/8h' },
+  { value: '12/12h' },
+];
+
+type MedicationFormProps = {
+  initialData?: MedicationFormData;
+  onSubmit: (data: MedicationFormData) => void;
+  onCancel: () => void;
+  t: any;
+};
+
+const MedicationForm: React.FC<MedicationFormProps> = ({ initialData, onSubmit, onCancel, t }) => {
+  const [drugName, setDrugName] = useState(initialData?.drugName || '');
+  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 || '');
+
+  // Busca ConceptDrugs conforme digitação
+  const { drugs, isLoading } = useConceptDrugs(drugName);
+  const drugOptions = drugs.map((d: any) => ({ value: d.name, uuid: d.uuid, display: d.display }));
+
+  const handleDrugInput = (input: string) => {
+    setDrugName(input);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!drugName || !dosage || !unit || !frequency) return;
+    onSubmit({
+      drugName,
+      dosage,
+      unit,
+      route,
+      frequency,
+      patientInstructions,
+      asNeeded,
+      asNeededCondition,
+      indication,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <ComboBox
+        id="drug-name"
+        items={drugOptions}
+        itemToString={(item) => item?.value || ''}
+        selectedItem={drugOptions.find((d: any) => d.value === drugName) || null}
+        onInputChange={handleDrugInput}
+        onChange={({ selectedItem }) => setDrugName(selectedItem?.value || '')}
+        placeholder={t('drugName', 'Nome do medicamento')}
+        titleText={t('drugName', 'Nome do medicamento')}
+        required
+        disabled={isLoading}
+      />
+      <TextInput
+        id="dosage"
+        labelText={t('dosage', 'Dose')}
+        value={dosage}
+        onChange={(e) => setDosage(e.target.value)}
+        required
+      />
+      <ComboBox
+        id="unit"
+        items={MOCK_UNITS}
+        itemToString={(item) => item?.value || ''}
+        selectedItem={MOCK_UNITS.find((u) => u.value === unit) || null}
+        onChange={({ selectedItem }) => setUnit(selectedItem?.value || '')}
+        placeholder={t('unit', 'Unidade')}
+        titleText={t('unit', 'Unidade')}
+        required
+      />
+      <TextInput
+        id="route"
+        labelText={t('route', 'Via de administração')}
+        value={route}
+        onChange={(e) => setRoute(e.target.value)}
+      />
+      <ComboBox
+        id="frequency"
+        items={MOCK_FREQUENCIES}
+        itemToString={(item) => item?.value || ''}
+        selectedItem={MOCK_FREQUENCIES.find((f) => f.value === frequency) || null}
+        onChange={({ selectedItem }) => setFrequency(selectedItem?.value || '')}
+        placeholder={t('frequency', 'Frequência')}
+        titleText={t('frequency', 'Frequência')}
+        required
+      />
+      <TextInput
+        id="patient-instructions"
+        labelText={t('patientInstructions', 'Instruções ao paciente')}
+        value={patientInstructions}
+        onChange={(e) => setPatientInstructions(e.target.value)}
+      />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Checkbox
+          id="as-needed"
+          labelText={t('asNeeded', 'Tomar se necessário (P.R.N.)')}
+          checked={asNeeded}
+          onChange={() => setAsNeeded((prev) => !prev)}
+        />
+        <TextInput
+          id="as-needed-condition"
+          labelText={t('asNeededCondition', 'Motivo P.R.N.')}
+          value={asNeededCondition}
+          onChange={(e) => setAsNeededCondition(e.target.value)}
+          disabled={!asNeeded}
+        />
+      </div>
+      <TextInput
+        id="indication"
+        labelText={t('indication', 'Indicação')}
+        value={indication}
+        onChange={(e) => setIndication(e.target.value)}
       />
-    );
-  }
+      <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+        <button type="submit" style={{ flex: 1 }}>
+          {t('saveMedication', 'Salvar medicamento')}
+        </button>
+        <button type="button" onClick={onCancel} style={{ flex: 1 }}>
+          {t('cancel', 'Cancelar')}
+        </button>
+      </div>
+    </form>
+  );
+};
 
+const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
+  const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<'new' | 'past'>('new');
   const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
   const [policyNumber, setPolicyNumber] = useState('');
-  const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
   const [digitallySigned, setDigitallySigned] = useState(false);
   const [printRequested, setPrintRequested] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const locations = useLocations();
-  const { orders, isLoading, error } = usePatientOrders(patientUuid);
+  const [medications, setMedications] = useState<MedicationFormData[]>([]);
+  const [showAddMedication, setShowAddMedication] = useState(false);
+  const [editIndex, setEditIndex] = useState<number | null>(null);
 
+  const locations = useLocations();
   const locationItems = useMemo(() => locations ?? [], [locations]);
-  const selectedOrdersLabel =
-    selectedOrders.size > 0
-      ? t('selectedOrdersCount', {
-          count: selectedOrders.size,
-        })
-      : null;
 
-  const toggleOrderSelection = (orderUuid: string) => {
-    setSelectedOrders((prev) => {
-      const updated = new Set(prev);
-      if (updated.has(orderUuid)) {
-        updated.delete(orderUuid);
-      } else {
-        updated.add(orderUuid);
-      }
-      return updated;
-    });
+  // Adiciona novo medicamento
+  const handleAddMedication = (med: MedicationFormData) => {
+    setMedications((prev) => [...prev, med]);
+    setShowAddMedication(false);
   };
 
-  const renderOrdersSection = () => {
-    if (!patientUuid) {
-      return null;
-    }
-
-    if (error) {
-      return (
-        <InlineNotification
-          lowContrast
-          kind="error"
-          title={t('ordersErrorTitle', 'Unable to load orders')}
-          subtitle={t('ordersErrorSubtitle', 'Try again or refresh the patient chart.')}
-        />
-      );
+  // Edita medicamento existente
+  const handleEditMedication = (med: MedicationFormData) => {
+    if (editIndex !== null) {
+      setMedications((prev) => prev.map((m, idx) => (idx === editIndex ? med : m)));
+      setEditIndex(null);
+      setShowAddMedication(false);
     }
+  };
 
-    if (isLoading) {
-      return <InlineLoading description={`${t('loading', 'Loading')}...`} />;
-    }
+  // Remove medicamento
+  const handleRemoveMedication = (idx: number) => {
+    setMedications((prev) => prev.filter((_, i) => i !== idx));
+  };
 
-    if (!orders.length) {
-      return (
-        <InlineNotification
-          lowContrast
-          kind="info"
-          title={t('ordersEmptyState', 'There are no orders for this patient yet.')}
-        />
-      );
-    }
+  // Abre tela de adicionar
+  const openAddMedication = () => {
+    setEditIndex(null);
+    setShowAddMedication(true);
+  };
 
-    return (
-      <>
-        <div className={styles.ordersList} role="group" aria-label={t('visitTypeHeading', 'Visit type')}>
-          {orders.map((order) => (
-            <Checkbox
-              key={order.uuid}
-              id={`order-${order.uuid}`}
-              labelText={
-                <span className={styles.orderLabel}>
-                  <span className={styles.orderName}>{order.conceptName}</span>
-                  {order.display && <span className={styles.orderMeta}>{order.display}</span>}
-                  {!order.display && order.orderNumber && <span className={styles.orderMeta}>{order.orderNumber}</span>}
-                </span>
-              }
-              checked={selectedOrders.has(order.uuid)}
-              onChange={() => toggleOrderSelection(order.uuid)}
-            />
-          ))}
-        </div>
-        {selectedOrdersLabel ? <p className={styles.selectionSummary}>{selectedOrdersLabel}</p> : null}
-      </>
-    );
+  // Abre tela de editar
+  const openEditMedication = (idx: number) => {
+    setEditIndex(idx);
+    setShowAddMedication(true);
   };
 
   return (
     <div className={styles.workspace}>
       <div className={styles.header}>
-        <h2>{t('activePrescriptionsWorkspaceTitle', 'Active prescriptions')}</h2>
+        <h2>{t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')}</h2>
         <p className={styles.subtitle}>
           {t(
             'activePrescriptionsHelper',
-            'Review the patient context, choose the visit details, and add the matching orders to the prescription.',
+            'Revise o contexto do paciente, escolha os detalhes da visita e adicione os medicamentos à prescrição.'
           )}
         </p>
       </div>
 
       <section className={styles.section}>
-        <p className={styles.fieldLabel}>{t('visitTimingLabel', 'The visit is')}</p>
+        <p className={styles.fieldLabel}>{t('visitTimingLabel', 'A visita é')}</p>
         <Tabs
           selectedIndex={activeTab === 'new' ? 0 : 1}
           onChange={({ selectedIndex }) => setActiveTab(selectedIndex === 0 ? 'new' : 'past')}
         >
-          <TabList aria-label={t('visitTimingLabel', 'The visit is')}>
-            <Tab>{t('visitTimingNew', 'New')}</Tab>
-            <Tab>{t('visitTimingPast', 'In the past')}</Tab>
+          <TabList aria-label={t('visitTimingLabel', 'A visita é')}>
+            <Tab>{t('visitTimingNew', 'Nova')}</Tab>
+            <Tab>{t('visitTimingPast', 'No passado')}</Tab>
           </TabList>
           <TabPanels>
             <TabPanel className={styles.tabContent}>
@@ -164,25 +283,17 @@ const Root: React.FC<RootProps> = (props) => {
                   itemToString={(item) => item?.display ?? ''}
                   selectedItem={selectedLocation}
                   onChange={({ selectedItem }) => setSelectedLocation((selectedItem as Location) ?? null)}
-                  placeholder={t('visitLocationPlaceholder', 'Select a location')}
-                  titleText={t('visitLocationHeading', 'Visit location')}
-                  helperText={t('visitLocationHelper', 'Select where the visit will take place.')}
+                  placeholder={t('visitLocationPlaceholder', 'Selecione o local')}
+                  titleText={t('visitLocationHeading', 'Local da visita')}
+                  helperText={t('visitLocationHelper', 'Selecione onde a visita ocorrerá.')}
                 />
               </div>
 
-              <div className={styles.fieldGroup}>
-                <p className={styles.fieldLabel}>{t('visitTypeHeading', 'Visit type')}</p>
-                <p className={styles.helperText}>
-                  {t('visitTypeHelper', 'Select the orders that should be included in this prescription.')}
-                </p>
-                {renderOrdersSection()}
-              </div>
-
               <div className={styles.fieldGroup}>
                 <TextInput
                   id="insurance-policy"
-                  labelText={t('insurancePolicyNumberLabel', 'Insurance Policy Number (optional)')}
-                  placeholder={t('insurancePolicyNumberPlaceholder', 'Enter the policy number')}
+                  labelText={t('insurancePolicyNumberLabel', 'Número da apólice (opcional)')}
+                  placeholder={t('insurancePolicyNumberPlaceholder', 'Digite o número da apólice')}
                   value={policyNumber}
                   onChange={(event) => setPolicyNumber(event.target.value)}
                 />
@@ -190,81 +301,65 @@ const Root: React.FC<RootProps> = (props) => {
               <div className={styles.fieldGroup}>
                 <Checkbox
                   id="sign-prescription-checkbox"
-                  labelText={t('signPrescriptionLabel', 'Digitally sign the prescription')}
+                  labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
                   checked={digitallySigned}
                   onChange={() => setDigitallySigned((prev) => !prev)}
                 />
                 <Checkbox
                   id="print-prescription-checkbox"
-                  labelText={t('printPrescriptionLabel', 'Print the prescription')}
+                  labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
                   checked={printRequested}
                   onChange={() => setPrintRequested((prev) => !prev)}
                 />
               </div>
-              <div className={styles.fieldGroup} style={{ flexDirection: 'row', gap: '1rem' }}>
-                <button
-                  type="button"
-                  id="discard-prescription-btn"
-                  onClick={() => {
-                    setSelectedLocation(null);
-                    setPolicyNumber('');
-                    setSelectedOrders(new Set());
-                    setDigitallySigned(false);
-                    setPrintRequested(false);
-                  }}
-                  disabled={isSubmitting}
-                >
-                  {t('discardButtonLabel', 'Discard')}
-                </button>
-                <button
-                  type="button"
-                  id="create-prescription-btn"
-                  onClick={async () => {
-                    if (!patientUuid || !selectedLocation || selectedOrders.size === 0) return;
-                    setIsSubmitting(true);
-                    // TODO: obter dados reais do paciente e do médico
-                    const payload: PrescriptionPayload = {
-                      patient: {
-                        uuid: patientUuid,
-                      },
-                      provider: {
-                        uuid: 'provider-uuid', // Substituir pelo uuid real do médico
-                      },
-                      location: {
-                        uuid: selectedLocation.uuid,
-                        name: selectedLocation.display,
-                      },
-                      policyNumber,
-                      orderUuids: Array.from(selectedOrders),
-                      digitallySigned,
-                      printRequested,
-                    };
-                    try {
-                      await PrescriptionService.createPrescription(payload);
-                      // Limpar formulário após sucesso
-                      setSelectedLocation(null);
-                      setPolicyNumber('');
-                      setSelectedOrders(new Set());
-                      setDigitallySigned(false);
-                      setPrintRequested(false);
-                    } catch (e) {
-                      // TODO: tratar erro
-                    } finally {
-                      setIsSubmitting(false);
-                    }
-                  }}
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? t('loading', 'Loading') : t('createPrescriptionButtonLabel', 'Create Prescription')}
+
+              {/* Lista de medicamentos adicionados */}
+              <div className={styles.fieldGroup}>
+                <h3>{t('medicationsList', 'Medicamentos adicionados')}</h3>
+                {medications.length === 0 ? (
+                  <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
+                ) : (
+                  <ul className={styles.medicationsList}>
+                    {medications.map((med, idx) => (
+                      <li key={idx} className={styles.medicationItem}>
+                        <span>
+                          <b>{med.drugName}</b> - {med.dosage} {med.unit} - {med.frequency}
+                        </span>
+                        <button type="button" onClick={() => openEditMedication(idx)}>{t('edit', 'Editar')}</button>
+                        <button type="button" onClick={() => handleRemoveMedication(idx)}>{t('remove', 'Remover')}</button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                <button type="button" onClick={openAddMedication} className={styles.addMedicationBtn}>
+                  {t('addMedication', '+ Adicionar medicamento')}
                 </button>
               </div>
+
+              {/* Tela sobreposta para adicionar/editar medicamento */}
+              {showAddMedication && (
+                <div className={styles.overlayForm}>
+                  <div className={styles.overlayContent}>
+                    <h3>{editIndex === null ? t('addMedication', 'Adicionar medicamento') : t('editMedication', 'Editar medicamento')}</h3>
+                    <MedicationForm
+                      initialData={editIndex !== null ? medications[editIndex] : undefined}
+                      onSubmit={editIndex === null ? handleAddMedication : handleEditMedication}
+                      onCancel={() => {
+                        setShowAddMedication(false);
+                        setEditIndex(null);
+                      }}
+                      t={t}
+                    />
+                  </div>
+                </div>
+              )}
             </TabPanel>
             <TabPanel className={styles.tabContent}>
               <InlineNotification
                 lowContrast
                 kind="info"
-                title={t('inPastTabPlaceholderTitle', 'Historic prescriptions will be available soon')}
-                subtitle={t('inPastTabPlaceholderSubtitle', 'Switch back to the New tab to manage current orders.')}
+                title={t('inPastTabPlaceholderTitle', 'Receitas históricas em breve')}
+                subtitle={t('inPastTabPlaceholderSubtitle', 'Volte para Nova para gerenciar medicamentos atuais.')}
               />
             </TabPanel>
           </TabPanels>