@cc-openmrs/cc-esm-active-prescriptions 1.0.67 → 1.0.69

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/root.component.tsx

@@ -9,10 +9,10 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import { PrescriptionService, PrescriptionPayload } from './prescriptions.service';
-import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl, Workspace2 } from '@openmrs/esm-framework';
+import { PrescriptionService } from './prescriptions.service';
+import { Workspace2 } from '@openmrs/esm-framework';
 import {
+  Button,
   Checkbox,
   ComboBox,
   InlineLoading,
@@ -22,176 +22,23 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  TextArea,
   TextInput,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useLocations, type Location } from '@openmrs/esm-framework';
-import { usePatientOrders } from './prescriptions-orders/usePatientOrders';
 import styles from './root.scss';
+import AddDrugPrescription, { type PrescriptionDrugItem } from './prescriptions-actions/add-drug-prescription/add-drug-prescription.component';
 
 interface RootProps {
   patientUuid?: string;
-  patient?: { uuid: string }; // Alguns workspaces passam assim
-}
-
-// 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,
+  patient?: {
+    name?: Array<{ given?: string[]; family?: string }>;
+    birthDate?: string;
+    gender?: string;
   };
 }
 
-// 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');
@@ -199,46 +46,74 @@ const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
   const [policyNumber, setPolicyNumber] = useState('');
   const [digitallySigned, setDigitallySigned] = useState(false);
   const [printRequested, setPrintRequested] = useState(false);
+  const [observations, setObservations] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [medications, setMedications] = useState<MedicationFormData[]>([]);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // Lista de medicamentos da prescrição — escopo da prescrição
+  const [prescriptionOrders, setPrescriptionOrders] = useState<PrescriptionDrugItem[]>([]);
   const [showAddMedication, setShowAddMedication] = useState(false);
   const [editIndex, setEditIndex] = useState<number | null>(null);
 
   const locations = useLocations();
   const locationItems = useMemo(() => locations ?? [], [locations]);
 
-  // Adiciona novo medicamento
-  const handleAddMedication = (med: MedicationFormData) => {
-    setMedications((prev) => [...prev, med]);
-    setShowAddMedication(false);
-  };
-
-  // Edita medicamento existente
-  const handleEditMedication = (med: MedicationFormData) => {
+  const handleSaveMedication = (item: PrescriptionDrugItem) => {
     if (editIndex !== null) {
-      setMedications((prev) => prev.map((m, idx) => (idx === editIndex ? med : m)));
+      setPrescriptionOrders((prev) => prev.map((m, idx) => (idx === editIndex ? item : m)));
       setEditIndex(null);
-      setShowAddMedication(false);
+    } else {
+      setPrescriptionOrders((prev) => [...prev, item]);
     }
+    setShowAddMedication(false);
   };
 
-  // Remove medicamento
   const handleRemoveMedication = (idx: number) => {
-    setMedications((prev) => prev.filter((_, i) => i !== idx));
-  };
-
-  // Abre tela de adicionar
-  const openAddMedication = () => {
-    setEditIndex(null);
-    setShowAddMedication(true);
+    setPrescriptionOrders((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  // Abre tela de editar
   const openEditMedication = (idx: number) => {
     setEditIndex(idx);
     setShowAddMedication(true);
   };
 
+  const handleSubmitPrescription = async () => {
+    if (!patientUuid || !selectedLocation || prescriptionOrders.length === 0) return;
+    setIsSubmitting(true);
+    setSubmitError(null);
+    try {
+      const payload = {
+        patientUuid,
+        patientName: patient?.name?.[0]
+          ? `${patient.name[0].given?.join(' ')} ${patient.name[0].family}`.trim()
+          : '',
+        patientBirthDate: patient?.birthDate ?? '',
+        patientGender: patient?.gender ?? '',
+        providerUuid: '',
+        providerName: '',
+        locationUuid: selectedLocation.uuid,
+        locationName: selectedLocation.display,
+        policyNumber,
+        orderUuids: prescriptionOrders.map((o) => o.drug.uuid),
+        digitallySigned,
+        printRequested,
+        observations,
+      };
+      await PrescriptionService.createPrescription(payload as any);
+      // Limpar após sucesso
+      setPrescriptionOrders([]);
+      setSelectedLocation(null);
+      setPolicyNumber('');
+      setDigitallySigned(false);
+      setPrintRequested(false);
+      setObservations('');
+    } catch (e: any) {
+      setSubmitError(e?.message ?? t('submitError', 'Erro ao salvar a prescrição.'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <Workspace2 title={t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')} hasUnsavedChanges={false}>
       <div className={styles.workspace}>
@@ -264,6 +139,7 @@ const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
             </TabList>
             <TabPanels>
               <TabPanel className={styles.tabContent}>
+                {/* Local da visita */}
                 <div className={styles.fieldGroup}>
                   <ComboBox
                     id="visit-location"
@@ -277,6 +153,7 @@ const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
                   />
                 </div>
 
+                {/* Número da apólice */}
                 <div className={styles.fieldGroup}>
                   <TextInput
                     id="insurance-policy"
@@ -286,68 +163,119 @@ const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
                     onChange={(event) => setPolicyNumber(event.target.value)}
                   />
                 </div>
+
+                {/* Assinatura digital e impressão */}
                 <div className={styles.fieldGroup}>
                   <Checkbox
                     id="sign-prescription-checkbox"
                     labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
                     checked={digitallySigned}
-                    onChange={() => setDigitallySigned((prev) => !prev)}
+                    onChange={(_: any, { checked }: any) => setDigitallySigned(checked)}
                   />
                   <Checkbox
                     id="print-prescription-checkbox"
                     labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
                     checked={printRequested}
-                    onChange={() => setPrintRequested((prev) => !prev)}
+                    onChange={(_: any, { checked }: any) => setPrintRequested(checked)}
                   />
                 </div>
 
+                {/* Observações */}
                 <div className={styles.fieldGroup}>
-                  <h3>{t('medicationsList', 'Medicamentos adicionados')}</h3>
-                  {medications.length === 0 ? (
+                  <TextArea
+                    id="observations"
+                    labelText={t('observations', 'Observações')}
+                    placeholder={t('observationsPlaceholder', 'Observações da prescrição...')}
+                    value={observations}
+                    onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setObservations(event.target.value)}
+                    rows={3}
+                  />
+                </div>
+
+                {/* Lista de medicamentos da prescrição */}
+                <div className={styles.fieldGroup}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                    <h3 style={{ margin: 0 }}>{t('medicationsList', 'Medicamentos')}</h3>
+                    <Button
+                      size="sm"
+                      hasIconOnly
+                      kind="ghost"
+                      renderIcon={() => (
+                        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M16 6V26" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                          <path d="M6 16H26" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                        </svg>
+                      )}
+                      iconDescription={t('addMedication', 'Adicionar medicamento')}
+                      onClick={() => { setEditIndex(null); setShowAddMedication(true); }}
+                    />
+                  </div>
+
+                  {prescriptionOrders.length === 0 ? (
                     <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
                   ) : (
                     <ul className={styles.medicationsList}>
-                      {medications.map((med, idx) => (
+                      {prescriptionOrders.map((order, idx) => (
                         <li key={idx} className={styles.medicationItem}>
                           <span>
-                            <b>{med.drugName}</b> - {med.dosage} {med.unit} - {med.frequency}
+                            <b>{order.drug.display}</b> — {order.dosage} {order.unit}
+                            {order.route ? ` · ${order.route}` : ''} · {order.frequency}
                           </span>
-                          <button type="button" onClick={() => openEditMedication(idx)}>
+                          <Button size="sm" kind="ghost" onClick={() => openEditMedication(idx)}>
                             {t('edit', 'Editar')}
-                          </button>
-                          <button type="button" onClick={() => handleRemoveMedication(idx)}>
+                          </Button>
+                          <Button size="sm" kind="danger--ghost" onClick={() => handleRemoveMedication(idx)}>
                             {t('remove', 'Remover')}
-                          </button>
+                          </Button>
                         </li>
                       ))}
                     </ul>
                   )}
-                  <button type="button" onClick={openAddMedication} className={styles.addMedicationBtn}>
-                    {t('addMedication', '+ Adicionar medicamento')}
-                  </button>
                 </div>
 
+                {/* Formulário de adição/edição de medicamento */}
                 {showAddMedication && (
                   <div className={styles.overlayForm}>
                     <div className={styles.overlayContent}>
-                      <h3>
-                        {editIndex === null
-                          ? t('addMedication', 'Adicionar medicamento')
-                          : t('editMedication', 'Editar medicamento')}
+                      <h3 style={{ marginTop: 0 }}>
+                        {editIndex !== null
+                          ? t('editMedication', 'Editar medicamento')
+                          : t('addMedication', 'Adicionar medicamento')}
                       </h3>
-                      <MedicationForm
-                        initialData={editIndex !== null ? medications[editIndex] : undefined}
-                        onSubmit={editIndex === null ? handleAddMedication : handleEditMedication}
-                        onCancel={() => {
-                          setShowAddMedication(false);
-                          setEditIndex(null);
-                        }}
-                        t={t}
+                      <AddDrugPrescription
+                        initialData={editIndex !== null ? prescriptionOrders[editIndex] : undefined}
+                        onSave={handleSaveMedication}
+                        onCancel={() => { setShowAddMedication(false); setEditIndex(null); }}
                       />
                     </div>
                   </div>
                 )}
+
+                {/* Erro de envio */}
+                {submitError && (
+                  <InlineNotification
+                    lowContrast
+                    kind="error"
+                    title={t('submitError', 'Erro ao salvar a prescrição.')}
+                    subtitle={submitError}
+                    onCloseButtonClick={() => setSubmitError(null)}
+                  />
+                )}
+
+                {/* Botão de salvar prescrição */}
+                <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+                  <Button
+                    kind="primary"
+                    disabled={!patientUuid || !selectedLocation || prescriptionOrders.length === 0 || isSubmitting}
+                    onClick={handleSubmitPrescription}
+                  >
+                    {isSubmitting
+                      ? <InlineLoading description={t('saving', 'Salvando...')} />
+                      : t('createPrescriptionButtonLabel', 'Salvar Prescrição')}
+                  </Button>
+                </div>
               </TabPanel>
+
               <TabPanel className={styles.tabContent}>
                 <InlineNotification
                   lowContrast