@pucp-gidis-hiisc/esm-fua-app 1.1.0 → 1.2.0

package/src/fua-tabs/fua-tabs.component.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type AssignedExtension, Extension, useAssignedExtensions } from '@openmrs/esm-framework';
+import { ComponentContext } from '@openmrs/esm-framework/src/internal';
+import styles from './fua-tabs.scss';
+
+const fuaPanelSlot = 'fua-panels-slot';
+
+const FuaOrdersTabs: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(0);
+  const tabExtensions = useAssignedExtensions(fuaPanelSlot) as AssignedExtension[];
+
+  const filteredExtensions = tabExtensions.filter((extension) => Object.keys(extension.meta).length > 0);
+
+  if (filteredExtensions.length === 0) {
+    return (
+      <div style={{ padding: '20px' }}>
+        <p>No tab extensions found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.customTabsContainer}>
+      {/* Tab buttons */}
+      <div className={styles.customTabList}>
+        {filteredExtensions.map((extension, index) => {
+          const { name, title } = extension.meta;
+          return (
+            <button
+              key={index}
+              className={`${styles.customTab} ${selectedTab === index ? styles.customTabActive : ''}`}
+              onClick={() => setSelectedTab(index)}
+              aria-selected={selectedTab === index}
+            >
+              {t(title, {
+                ns: extension.moduleName,
+                defaultValue: title,
+              })}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab panels */}
+      <div className={styles.customTabPanels}>
+        {filteredExtensions.map((extension, index) => {
+          if (selectedTab !== index) return null;
+
+          return (
+            <div key={index} className={styles.customTabPanel}>
+              <ComponentContext.Provider
+                value={{
+                  moduleName: extension.moduleName,
+                  featureName: 'fua',
+                  extension: {
+                    extensionId: extension.id,
+                    extensionSlotName: fuaPanelSlot,
+                    extensionSlotModuleName: extension.moduleName,
+                  },
+                }}
+              >
+                <Extension />
+              </ComponentContext.Provider>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FuaOrdersTabs;

package/src/fua-tabs/fua-tabs.scss

@@ -0,0 +1,65 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.customTabsContainer {
+  background-color: var(--cds-layer-01);
+  margin: 0;
+}
+
+.customTabList {
+  display: flex;
+  border-bottom: 1px solid var(--cds-border-subtle-01);
+  padding-left: spacing.$spacing-05;
+  background-color: var(--cds-layer-01);
+}
+
+.customTab {
+  @include type.type-style('body-compact-01');
+
+  padding: spacing.$spacing-04 spacing.$spacing-05;
+  min-width: 8.875rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--cds-text-secondary);
+  cursor: pointer;
+  transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  &:hover {
+    background-color: var(--cds-layer-hover-01);
+    color: var(--cds-text-primary);
+  }
+
+  &:focus {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+}
+
+.customTabActive {
+  color: var(--cds-text-primary);
+  border-bottom-color: var(--cds-border-interactive);
+  font-weight: 600;
+
+  &:hover {
+    border-bottom-color: var(--cds-border-interactive);
+  }
+}
+
+.customTabPanels {
+  padding: spacing.$spacing-05;
+  background-color: var(--cds-layer-01);
+}
+
+.customTabPanel {
+  animation: fadeIn 0.15s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/fua-tiles/all-fua-requests-tile.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFuaRequests } from '../hooks/useFuaRequests';
+import FuaSummaryTile from '../components/summary-tiles/summary-tile.component';
+
+const AllFuaRequestsTile = () => {
+  const { t } = useTranslation();
+
+  const { fuaOrders } = useFuaRequests({ newOrdersOnly: true });
+
+  return (
+    <FuaSummaryTile
+      label={t('orders', 'Orders')}
+      value={fuaOrders?.length}
+      headerLabel={t('testsOrdered', 'Tests ordered')}
+    />
+  );
+};
+
+export default AllFuaRequestsTile;

package/src/fua-tiles/completed-fua-requests-tile.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFuaRequests } from '../hooks/useFuaRequests';
+import FuaSummaryTile from '../components/summary-tiles/summary-tile.component';
+
+const CompletedFuaRequestsTile = () => {
+  const { t } = useTranslation();
+  const { fuaOrders } = useFuaRequests({ status: 'COMPLETED', excludeCanceled: false });
+
+  return (
+    <FuaSummaryTile
+      label={t('completed', 'Completed')}
+      value={fuaOrders?.length}
+      headerLabel={t('results', 'Results')}
+    />
+  );
+};
+
+export default CompletedFuaRequestsTile;

package/src/fua-tiles/fua-summary-tiles.component.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type AssignedExtension, useAssignedExtensions, Extension, useConfig } from '@openmrs/esm-framework';
+import { ComponentContext } from '@openmrs/esm-framework/src/internal';
+import styles from './fua-summary-tiles.scss';
+import { type Config } from '../config-schema';
+
+const FuaSummaryTiles: React.FC = () => {
+  const { t } = useTranslation();
+  const { enableReviewingLabResultsBeforeApproval } = useConfig<Config>();
+  const fuaTileSlot = 'fua-tiles-slot';
+  const tilesExtensions = useAssignedExtensions(fuaTileSlot) as AssignedExtension[];
+
+  const filteredExtensions = tilesExtensions
+    .filter((extension) => Object.keys(extension.meta).length > 0)
+    .filter((extension) => {
+      if (extension.name === 'pending-review-list-tile-component') {
+        return enableReviewingLabResultsBeforeApproval === true;
+      }
+      return true;
+    });
+return (
+    <div className={styles.cardContainer}>
+      {filteredExtensions.map((extension, index) => {
+        return (
+          <ComponentContext.Provider
+            key={extension.id}
+            value={{
+              moduleName: extension.moduleName,
+              featureName: 'fua',
+              extension: {
+                extensionId: extension.id,
+                extensionSlotName: fuaTileSlot,
+                extensionSlotModuleName: extension.moduleName,
+              },
+            }}
+          >
+            <Extension />
+          </ComponentContext.Provider>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FuaSummaryTiles;

package/src/fua-tiles/fua-summary-tiles.scss

@@ -0,0 +1,16 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  flex-wrap: wrap;
+  padding: layout.$spacing-03;
+  gap: 0 layout.$spacing-01;
+}
+
+.cardContainer>div {
+  flex: 1 1 300px;
+  box-sizing: border-box;
+}

package/src/fua-tiles/in-progress-fua-requests-tile.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFuaRequests } from '../hooks/useFuaRequests';
+import FuaSummaryTile from '../components/summary-tiles/summary-tile.component';
+
+
+const InProgressFuaRequestsTile = () => {
+  const { t } = useTranslation();
+  const { fuaOrders } = useFuaRequests({ status: 'IN_PROGRESS' });
+
+  return (
+    <FuaSummaryTile
+      label={t('inProgress', 'In progress')}
+      value={fuaOrders?.length}
+      headerLabel={t('worklist', 'Ex-Worklist')}
+    />
+  );
+};
+
+export default InProgressFuaRequestsTile;

package/src/fua-viewer-page/fua-viewer-page.component.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useConfig, showSnackbar } from '@openmrs/esm-framework';
+import { InlineLoading } from '@carbon/react';
+import type { Config } from '../config-schema';
+import styles from './fua-viewer-page.scss';
+
+const FuaViewerPage: React.FC = () => {
+  const config = useConfig<Config>();
+  const endpoint = config.fuaGeneratorEndpoint;
+  const [htmlContent, setHtmlContent] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchHtml = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const response = await fetch(endpoint);
+
+        if (!response.ok) {
+          throw new Error(`Error al cargar el contenido: ${response.status} ${response.statusText}`);
+        }
+
+        const html = await response.text();
+        setHtmlContent(html);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Error desconocido al cargar el contenido';
+        setError(errorMessage);
+        console.error('Error fetching FUA HTML:', err);
+        showSnackbar({
+          title: 'Error al cargar FUA',
+          subtitle: errorMessage,
+          kind: 'error',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchHtml();
+  }, [endpoint]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <InlineLoading description="Cargando visor de FUA..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <h3>⚠️ Error al cargar el visor de FUA</h3>
+        <p>{error}</p>
+        <details>
+          <summary>Información técnica</summary>
+          <p><strong>Endpoint:</strong> {endpoint}</p>
+          <p><strong>Posibles causas:</strong></p>
+          <ul>
+            <li>El servidor no está respondiendo</li>
+            <li>Políticas CORS bloqueando la conexión</li>
+            <li>El endpoint configurado es incorrecto</li>
+          </ul>
+          <p><strong>Soluciones:</strong></p>
+          <ul>
+            <li>Verifica que el servidor esté funcionando</li>
+            <li>Prueba el endpoint directamente en tu navegador</li>
+            <li>Contacta al administrador del sistema</li>
+          </ul>
+        </details>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.pageContainer}>
+      <iframe
+        srcDoc={htmlContent}
+        title="Visor de FUA"
+        className={styles.fullIframe}
+        sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"
+      />
+    </div>
+  );
+};
+
+export default FuaViewerPage;

package/src/fua-viewer-page/fua-viewer-page.scss

@@ -0,0 +1,82 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.pageContainer {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.fullIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: spacing.$spacing-05;
+}
+
+.errorContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: spacing.$spacing-07;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+
+  h3 {
+    @include type.type-style('heading-03');
+    color: #da1e28;
+    margin-bottom: spacing.$spacing-05;
+  }
+
+  p {
+    @include type.type-style('body-01');
+    color: #525252;
+    margin-bottom: spacing.$spacing-03;
+  }
+
+  details {
+    margin-top: spacing.$spacing-05;
+    text-align: left;
+    width: 100%;
+    background-color: #f4f4f4;
+    padding: spacing.$spacing-05;
+    border-radius: 4px;
+    border-left: 3px solid #da1e28;
+
+    summary {
+      @include type.type-style('label-01');
+      cursor: pointer;
+      font-weight: 600;
+      margin-bottom: spacing.$spacing-03;
+
+      &:hover {
+        color: #0f62fe;
+      }
+    }
+
+    ul {
+      margin-left: spacing.$spacing-05;
+      margin-top: spacing.$spacing-03;
+
+      li {
+        @include type.type-style('body-compact-01');
+        margin-bottom: spacing.$spacing-02;
+      }
+    }
+  }
+}

package/src/hooks/useFuaRequests.ts

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { openmrsFetch, useAppContext } from '@openmrs/esm-framework';
 import { ModuleFuaRestURL } from '../constant';
 
 export interface FuaEstado {
@@ -19,30 +20,96 @@ export interface FuaRequest {
   fechaActualizacion: number;
 }
 
-function useFuaRequests() {
-  const [data, setData] = useState<FuaRequest[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const { data: response } = await openmrsFetch(`${ModuleFuaRestURL}/list`);
-        setData(response as FuaRequest[]);
-      } catch (err: any) {
-        console.error('Error fetching FUA list:', err);
-        setError(err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  return { data, isLoading, error };
+export interface DateFilterContext {
+  dateRange: [Date, Date];
+}
+
+const useFuaRequestsDefaultParams: UseFuaRequestsParams = {
+  status: null,
+  newOrdersOnly: false,
+  excludeCanceled: true,
+};
+
+export interface UseFuaRequestsParams {
+  status: string | null;
+  newOrdersOnly: boolean;
+  excludeCanceled: boolean;
+}
+
+/**
+ * Custom hook for retrieving FUA requests based on the specified status.
+ *
+ * @param status - The status of the requests to retrieve
+ * @param excludeCanceled - Whether to exclude canceled requests
+ * @param newOrdersOnly - Whether to retrieve only new orders
+ */
+export function useFuaRequests(params: Partial<UseFuaRequestsParams> = useFuaRequestsDefaultParams) {
+  const { status, newOrdersOnly, excludeCanceled } = { ...useFuaRequestsDefaultParams, ...params };
+  const { dateRange } = useAppContext<DateFilterContext>('fua-date-filter') ?? {
+    dateRange: [dayjs().startOf('day').toDate(), new Date()],
+  };
+
+  let url = `${ModuleFuaRestURL}/list`;
+  const queryParams: string[] = [];
+
+  if (status) {
+    queryParams.push(`status=${status}`);
+  }
+
+  if (excludeCanceled) {
+    queryParams.push('excludeCanceled=true');
+  }
+
+  if (dateRange) {
+    queryParams.push(`startDate=${dateRange.at(0).toISOString()}`);
+    queryParams.push(`endDate=${dateRange.at(1).toISOString()}`);
+  }
+
+  if (queryParams.length > 0) {
+    url = `${url}?${queryParams.join('&')}`;
+  }
+
+  const { data, error, mutate, isLoading, isValidating } = useSWR<{ data: Array<FuaRequest> }>(
+    url,
+    openmrsFetch,
+  );
+
+  // openmrsFetch returns { data: T }, so we access data.data to get the array
+  const allOrders = data?.data ?? [];
+
+  const filteredOrders = allOrders.filter(
+    (order) => !newOrdersOnly || (order?.fuaEstado === null || order?.fuaEstado === undefined),
+  );
+
+  return {
+    fuaOrders: filteredOrders,
+    isLoading,
+    isError: error,
+    mutate,
+    isValidating,
+  };
+}
+
+export function setFuaEstado(fuaRequestId: string, estadoId: number, abortController: AbortController) {
+  return openmrsFetch(`${ModuleFuaRestURL}/${fuaRequestId}/estado`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: { estadoId },
+  });
+}
+
+export function cancelFuaRequest(fuaRequestId: string, comment: string, abortController: AbortController) {
+  return openmrsFetch(`${ModuleFuaRestURL}/${fuaRequestId}/cancel`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: { comment },
+  });
 }
 
 export default useFuaRequests;

package/src/index.ts

@@ -1,15 +1,14 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { configSchema } from './config-schema';
 import { createLeftPanelLink } from './left-panel-link.component';
-import FuaRequestTable from './fua/fuaRequestTable';
-import { FuaRequestDashboardMeta } from './dashboard.meta';
+import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
 const moduleName = '@pucp-gidis-hiisc/esm-fua-app';
+
 const options = {
-  featureName: 'patient-clinical-view-app',
+  featureName: 'fua',
   moduleName,
 };
 
@@ -21,7 +20,83 @@ export function startupApp(): void {
 }
 
 // ================================================================================
-// FUA REQUEST EXPORTS
+// ROOT COMPONENT
+// ================================================================================
+export const root = getSyncLifecycle(rootComponent, options);
+
+// ================================================================================
+// DASHBOARD LINK
+// ================================================================================
+export const fuaDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'fua-request',
+    title: 'Formato Único de Atención',
+  }),
+  options,
+);
+
+
+// ================================================================================
+// TILES
+// ================================================================================
+export const allFuaRequestsTile = getAsyncLifecycle(
+  () => import('./fua-tiles/all-fua-requests-tile.component'),
+  options,
+);
+
+export const inProgressFuaRequestsTile = getAsyncLifecycle(
+  () => import('./fua-tiles/in-progress-fua-requests-tile.component'),
+  options,
+);
+
+export const completedFuaRequestsTile = getAsyncLifecycle(
+  () => import('./fua-tiles/completed-fua-requests-tile.component'),
+  options,
+);
+
+// ================================================================================
+// TABLES/TABS
+// ================================================================================
+export const allFuaRequestsTable = getAsyncLifecycle(
+  () => import('./fua-tabs/data-table-extensions/all-fua-requests-table.extension'),
+  options,
+);
+
+export const inProgressFuaRequestsTable = getAsyncLifecycle(
+  () => import('./fua-tabs/data-table-extensions/in-progress-fua-requests-table.extension'),
+  options,
+);
+
+export const completedFuaRequestsTable = getAsyncLifecycle(
+  () => import('./fua-tabs/data-table-extensions/completed-fua-requests-table.extension'),
+  options,
+);
+
+export const declinedFuaRequestsTable = getAsyncLifecycle(
+  () => import('./fua-tabs/data-table-extensions/declined-fua-requests-table.extension'),
+  options,
+);
+
+// ================================================================================
+// HTML VIEWER
+// ================================================================================
+export const fuaHtmlViewer = getAsyncLifecycle(
+  () => import('./components/fua-html-viewer.component'),
+  options,
+);
+
+// ================================================================================
+// WORKSPACES
+// ================================================================================
+export const fuaViewerWorkspace = getAsyncLifecycle(
+  () => import('./workspaces/fua-viewer.workspace'),
+  options,
+);
+
+// ================================================================================
+// FUA VIEWER PAGE
 // ================================================================================
-export const fuaRequestDashboardLink = getSyncLifecycle(createLeftPanelLink(FuaRequestDashboardMeta), options);
-export const fuaRequestTable = getSyncLifecycle(FuaRequestTable, options);
+export const fuaViewerPage = getAsyncLifecycle(
+  () => import('./fua-viewer-page/fua-viewer-page.component'),
+  options,
+);

package/src/root.component.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import FuaDashboard from './fua-dashboard.component';
+
+const Root: React.FC = () => {
+  return <FuaDashboard />;
+};
+
+export default Root;