@cc-openmrs/cc-esm-active-prescriptions 1.0.70 → 1.0.72

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

@@ -0,0 +1,237 @@
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Checkbox,
+  ComboBox,
+  InlineLoading,
+  InlineNotification,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  TextArea,
+  TextInput,
+} from '@carbon/react';
+import { useLocations, type Location } 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 [activeTab, setActiveTab] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const locations = useLocations();
+  const locationItems = useMemo(() => locations ?? [], [locations]);
+
+  const handleSubmit = async () => {
+    if (!patientUuid || !state.location || state.orders.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: state.location.uuid,
+        locationName: state.location.display,
+        policyNumber: state.policyNumber,
+        orderUuids: state.orders.map((o) => o.drug.uuid),
+        digitallySigned: state.digitallySigned,
+        printRequested: state.printRequested,
+        observations: state.observations,
+      };
+      await PrescriptionService.createPrescription(payload as any);
+      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',
+            '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', 'A visita é')}</p>
+        <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}>
+                <ComboBox
+                  id="visit-location"
+                  items={locationItems}
+                  itemToString={(item) => item?.display ?? ''}
+                  selectedItem={state.location}
+                  onChange={({ selectedItem }) =>
+                    dispatch({ type: 'SET_LOCATION', payload: (selectedItem as Location) ?? null })
+                  }
+                  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}>
+                <TextInput
+                  id="insurance-policy"
+                  labelText={t('insurancePolicyNumberLabel', 'Número da apólice (opcional)')}
+                  placeholder={t('insurancePolicyNumberPlaceholder', 'Digite o número da apólice')}
+                  value={state.policyNumber}
+                  onChange={(e) => dispatch({ type: 'SET_POLICY_NUMBER', payload: e.target.value })}
+                />
+              </div>
+
+              <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={!patientUuid || !state.location || state.orders.length === 0 || isSubmitting}
+                  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,81 @@
+import React, { createContext, useContext, useReducer } from 'react';
+import type { Location } from '@openmrs/esm-framework';
+import type { PrescriptionDrugItem } from './prescriptions-actions/add-drug-prescription/add-drug-prescription.component';
+
+// ─── State ───────────────────────────────────────────────────────────────────
+
+export interface PrescriptionState {
+  orders: PrescriptionDrugItem[];
+  location: Location | null;
+  policyNumber: string;
+  digitallySigned: boolean;
+  printRequested: boolean;
+  observations: string;
+}
+
+const initialState: PrescriptionState = {
+  orders: [],
+  location: null,
+  policyNumber: '',
+  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_LOCATION'; payload: Location | null }
+  | { type: 'SET_POLICY_NUMBER'; payload: string }
+  | { 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_LOCATION':
+      return { ...state, location: action.payload };
+    case 'SET_POLICY_NUMBER':
+      return { ...state, policyNumber: action.payload };
+    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;