@cc-openmrs/cc-esm-active-prescriptions 1.0.71 → 1.0.73

package/src/prescription-form/prescription-form.component.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Checkbox,
+  InlineLoading,
+  InlineNotification,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  TextArea,
+} from '@carbon/react';
+import { useSession, useVisit } from '@openmrs/esm-framework';
+import { PrescriptionService } from '../prescriptions.service';
+import { usePrescriptionStore } from '../prescription.store';
+import styles from '../root.scss';
+
+interface PrescriptionFormProps {
+  patientUuid?: string;
+  patient?: {
+    name?: Array<{ given?: string[]; family?: string }>;
+    birthDate?: string;
+    gender?: string;
+  };
+}
+
+const PrescriptionForm: React.FC<PrescriptionFormProps> = ({ patientUuid, patient }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { state, dispatch } = usePrescriptionStore();
+
+  const session = useSession();
+  const { activeVisit } = useVisit(patientUuid ?? '');
+
+  // Location: prefer the active visit's location, fall back to session location
+  const location = activeVisit?.location ?? session?.sessionLocation ?? null;
+  const locationUuid = location?.uuid ?? '';
+  const locationName = location?.display ?? '';
+
+  // Provider from session
+  const providerUuid = session?.currentProvider?.uuid ?? '';
+  const providerName = session?.user?.display ?? '';
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const canSubmit =
+    Boolean(patientUuid) && Boolean(locationUuid) && Boolean(providerUuid) && state.orders.length > 0 && !isSubmitting;
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+    setIsSubmitting(true);
+    setSubmitError(null);
+    try {
+      const payload = {
+        patientUuid: patientUuid!,
+        patientName: patient?.name?.[0]
+          ? `${patient.name[0].given?.join(' ')} ${patient.name[0].family}`.trim()
+          : '',
+        patientBirthDate: patient?.birthDate ?? '',
+        patientGender: patient?.gender ?? '',
+        providerUuid,
+        providerName,
+        locationUuid,
+        locationName,
+        digitallySigned: state.digitallySigned,
+        printRequested: state.printRequested,
+        observations: state.observations,
+        orders: state.orders.map((o) => ({
+          drugUuid: o.drug.uuid,
+          drugDisplay: o.drug.display,
+          dosage: o.dosage,
+          unit: o.unit,
+          route: o.route,
+          frequency: o.frequency,
+          patientInstructions: o.patientInstructions,
+          asNeeded: o.asNeeded,
+          asNeededCondition: o.asNeededCondition,
+          indication: o.indication,
+        })),
+      };
+      await PrescriptionService.createPrescription(payload);
+      dispatch({ type: 'RESET' });
+    } catch (e: any) {
+      setSubmitError(e?.message ?? t('submitError', 'Erro ao salvar a prescrição.'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className={styles.workspace}>
+      <div className={styles.header}>
+        <h2>{t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')}</h2>
+        <p className={styles.subtitle}>
+          {t('activePrescriptionsHelper', 'Adicione os medicamentos e salve a prescrição.')}
+        </p>
+      </div>
+
+      <section className={styles.section}>
+        <Tabs selectedIndex={activeTab} onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}>
+          <TabList aria-label={t('visitTimingLabel', 'A visita é')}>
+            <Tab>{t('visitTimingNew', 'Nova')}</Tab>
+            <Tab>{t('visitTimingPast', 'No passado')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.tabContent}>
+              <div className={styles.fieldGroup}>
+                <Checkbox
+                  id="sign-prescription-checkbox"
+                  labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
+                  checked={state.digitallySigned}
+                  onChange={(_: any, { checked }: any) =>
+                    dispatch({ type: 'SET_DIGITALLY_SIGNED', payload: checked })
+                  }
+                />
+                <Checkbox
+                  id="print-prescription-checkbox"
+                  labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
+                  checked={state.printRequested}
+                  onChange={(_: any, { checked }: any) =>
+                    dispatch({ type: 'SET_PRINT_REQUESTED', payload: checked })
+                  }
+                />
+              </div>
+
+              <div className={styles.fieldGroup}>
+                <TextArea
+                  id="observations"
+                  labelText={t('observations', 'Observações')}
+                  placeholder={t('observationsPlaceholder', 'Observações da prescrição...')}
+                  value={state.observations}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    dispatch({ type: 'SET_OBSERVATIONS', payload: e.target.value })
+                  }
+                  rows={3}
+                />
+              </div>
+
+              <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={() => navigate('/medications/new')}
+                  />
+                </div>
+
+                {state.orders.length === 0 ? (
+                  <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
+                ) : (
+                  <ul className={styles.medicationsList}>
+                    {state.orders.map((order, idx) => (
+                      <li key={idx} className={styles.medicationItem}>
+                        <span>
+                          <b>{order.drug.display}</b> — {order.dosage} {order.unit}
+                          {order.route ? ` · ${order.route}` : ''} · {order.frequency}
+                        </span>
+                        <Button size="sm" kind="ghost" onClick={() => navigate(`/medications/${idx}/edit`)}>
+                          {t('edit', 'Editar')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          kind="danger--ghost"
+                          onClick={() => dispatch({ type: 'REMOVE_ORDER', index: idx })}
+                        >
+                          {t('remove', 'Remover')}
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+
+              {submitError && (
+                <InlineNotification
+                  lowContrast
+                  kind="error"
+                  title={t('submitError', 'Erro ao salvar a prescrição.')}
+                  subtitle={submitError}
+                  onCloseButtonClick={() => setSubmitError(null)}
+                />
+              )}
+
+              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+                <Button kind="primary" disabled={!canSubmit} onClick={handleSubmit}>
+                  {isSubmitting ? (
+                    <InlineLoading description={t('saving', 'Salvando...')} />
+                  ) : (
+                    t('createPrescriptionButtonLabel', 'Salvar Prescrição')
+                  )}
+                </Button>
+              </div>
+            </TabPanel>
+
+            <TabPanel className={styles.tabContent}>
+              <InlineNotification
+                lowContrast
+                kind="info"
+                title={t('inPastTabPlaceholderTitle', 'Receitas históricas em breve')}
+                subtitle={t('inPastTabPlaceholderSubtitle', 'Volte para Nova para gerenciar medicamentos atuais.')}
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </section>
+    </div>
+  );
+};
+
+export default PrescriptionForm;

package/src/prescription.store.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, useReducer } from 'react';
+import type { PrescriptionDrugItem } from './prescriptions-actions/add-drug-prescription/add-drug-prescription.component';
+
+// ─── State ───────────────────────────────────────────────────────────────────
+
+export interface PrescriptionState {
+  orders: PrescriptionDrugItem[];
+  digitallySigned: boolean;
+  printRequested: boolean;
+  observations: string;
+}
+
+const initialState: PrescriptionState = {
+  orders: [],
+  digitallySigned: false,
+  printRequested: false,
+  observations: '',
+};
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+
+export type PrescriptionAction =
+  | { type: 'ADD_ORDER'; payload: PrescriptionDrugItem }
+  | { type: 'UPDATE_ORDER'; index: number; payload: PrescriptionDrugItem }
+  | { type: 'REMOVE_ORDER'; index: number }
+  | { type: 'SET_DIGITALLY_SIGNED'; payload: boolean }
+  | { type: 'SET_PRINT_REQUESTED'; payload: boolean }
+  | { type: 'SET_OBSERVATIONS'; payload: string }
+  | { type: 'RESET' };
+
+// ─── Reducer ─────────────────────────────────────────────────────────────────
+
+function prescriptionReducer(state: PrescriptionState, action: PrescriptionAction): PrescriptionState {
+  switch (action.type) {
+    case 'ADD_ORDER':
+      return { ...state, orders: [...state.orders, action.payload] };
+    case 'UPDATE_ORDER':
+      return { ...state, orders: state.orders.map((o, i) => (i === action.index ? action.payload : o)) };
+    case 'REMOVE_ORDER':
+      return { ...state, orders: state.orders.filter((_, i) => i !== action.index) };
+    case 'SET_DIGITALLY_SIGNED':
+      return { ...state, digitallySigned: action.payload };
+    case 'SET_PRINT_REQUESTED':
+      return { ...state, printRequested: action.payload };
+    case 'SET_OBSERVATIONS':
+      return { ...state, observations: action.payload };
+    case 'RESET':
+      return initialState;
+    default:
+      return state;
+  }
+}
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+const PrescriptionContext = createContext<{
+  state: PrescriptionState;
+  dispatch: React.Dispatch<PrescriptionAction>;
+} | null>(null);
+
+export function PrescriptionProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(prescriptionReducer, initialState);
+  return <PrescriptionContext.Provider value={{ state, dispatch }}>{children}</PrescriptionContext.Provider>;
+}
+
+export function usePrescriptionStore() {
+  const ctx = useContext(PrescriptionContext);
+  if (!ctx) throw new Error('usePrescriptionStore must be used within PrescriptionProvider');
+  return ctx;
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { usePrescriptionStore } from '../../prescription.store';
+import AddDrugPrescription, {
+  type PrescriptionDrugItem,
+} from './add-drug-prescription.component';
+import styles from '../../root.scss';
+
+const AddDrugPrescriptionPage: React.FC = () => {
+  const { index } = useParams<{ index: string }>();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { state, dispatch } = usePrescriptionStore();
+
+  const editIndex = index !== undefined ? parseInt(index, 10) : null;
+  const initialData = editIndex !== null ? state.orders[editIndex] : undefined;
+
+  const handleSave = (item: PrescriptionDrugItem) => {
+    if (editIndex !== null) {
+      dispatch({ type: 'UPDATE_ORDER', index: editIndex, payload: item });
+    } else {
+      dispatch({ type: 'ADD_ORDER', payload: item });
+    }
+    navigate('/');
+  };
+
+  return (
+    <div className={styles.workspace}>
+      <div className={styles.header}>
+        <Button
+          size="sm"
+          kind="ghost"
+          onClick={() => navigate('/')}
+          renderIcon={() => (
+            <svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M20 6L10 16L20 26"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        >
+          {t('backToPrescription', 'Voltar à prescrição')}
+        </Button>
+        <h2 style={{ margin: 0 }}>
+          {editIndex !== null
+            ? t('editMedication', 'Editar medicamento')
+            : t('addMedication', 'Adicionar medicamento')}
+        </h2>
+      </div>
+      <AddDrugPrescription
+        initialData={initialData}
+        onSave={handleSave}
+        onCancel={() => navigate('/')}
+      />
+    </div>
+  );
+};
+
+export default AddDrugPrescriptionPage;

package/src/prescriptions.service.ts

@@ -1,31 +1,37 @@
 // prescription.service.ts
 // Serviço para manipulação de prescrições e integração com backend
 
+export interface PrescriptionOrderItem {
+  drugUuid: string;
+  drugDisplay: string;
+  dosage: string;
+  unit: string;
+  route: string;
+  frequency: string;
+  patientInstructions?: string;
+  asNeeded?: boolean;
+  asNeededCondition?: string;
+  indication?: string;
+}
+
 export interface PrescriptionPayload {
-  patient: {
-    uuid: string;
-    name?: string;
-    birthDate?: string;
-    gender?: string;
-  };
-  provider: {
-    uuid: string;
-    name?: string;
-  };
-  location: {
-    uuid: string;
-    name?: string;
-  };
-  policyNumber?: string;
-  orderUuids: string[];
+  patientUuid: string;
+  patientName: string;
+  patientBirthDate: string;
+  patientGender: string;
+  providerUuid: string;
+  providerName: string;
+  locationUuid: string;
+  locationName: string;
   digitallySigned: boolean;
   printRequested: boolean;
+  observations: string;
+  orders: PrescriptionOrderItem[];
 }
 
 export class PrescriptionService {
   static async createPrescription(payload: PrescriptionPayload): Promise<Response> {
-    // Troque a URL abaixo pelo endpoint real do backend
-    const url = '/api/prescriptions';
+    const url = '/openmrs/ws/rest/v1/prescriptions';
     return fetch(url, {
       method: 'POST',
       headers: {
@@ -35,3 +41,4 @@ export class PrescriptionService {
     });
   }
 }
+