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

package/src/fua/fua-request-table.scss

@@ -1,173 +1,125 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
 @use '@carbon/layout';
+@use '@carbon/type';
 
-@use '@openmrs/esm-styleguide/src/vars' as *;
-@use '../root.scss' as *;
-
-.jsonTable {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 0.5rem;
+.tableContainer {
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+  padding: 0;
 
-  td {
-    border: 1px solid #e0e0e0;
-    padding: 0.5rem;
-    font-family: monospace;
+  :global(.cds--data-table-content) {
+    overflow-x: unset;
   }
-}
-
-.payloadCell {
-  text-align: center;
-}
 
-.payloadButton {
-  background-color: colors.$white-0;
-  border: 1px solid colors.$gray-20;
-  margin-bottom: 1rem;
-}
-
-.payloadExpandedContent {
-  padding: 1rem;
-  background-color: #f4f4f4;
-  border: 1px solid #e0e0e0;
-  overflow-x: auto;
-  max-width: 100%;
-}
+  a {
+    text-decoration: none;
+  }
 
-.header {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: spacing.$spacing-12;
-  background-color: $ui-02;
-  border: 1px solid $ui-03;
-  border-left: 0px;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-}
+  th {
+    color: colors.$gray-70;
+  }
 
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 0.75rem;
-}
+  :global(.cds--data-table) {
+    background-color: colors.$gray-20;
+  }
 
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  padding-top: 1rem;
-}
+  :global(.cds--table-toolbar) {
+    position: static;
+  }
 
-.page-name {
-  @include type.type-style('heading-04');
-}
+  :global(.cds--overflow-menu) {
+    background-color: transparent;
+    border: none;
+  }
 
-.page-labels {
-  margin-left: 1rem;
+  :global(.cds--pagination) {
+    border-top: none;
+  }
 
-  p:first-of-type {
-    margin-bottom: 0.25rem;
+  .toolbarContent {
+    height: layout.$spacing-07;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
-.date-and-location {
+.toolbarContent {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  margin-right: 1rem;
-}
-
-.value {
-  margin-left: 0.25rem;
+  justify-content: flex-end;
 }
 
-.middot {
-  margin: 0 0.5rem;
-}
+.toolbarItem {
+  margin-left: layout.$spacing-05;
+  display: flex;
+  align-items: center;
 
-.view {
-  @include type.type-style('label-01');
-}
+  & p {
+    padding-right: layout.$spacing-03;
+    @include type.type-style('body-01');
+    color: colors.$gray-70;
+  }
 
-svg.iconOverrides {
-  width: 72 !important;
-  height: 72 !important;
-  fill: var(--brand-03);
-}
+  :global(.cds--date-picker__input) {
+    height: layout.$spacing-09;
+  }
 
-.svgContainer svg {
-  width: 72px;
-  height: 72px;
-  fill: var(--brand-03);
-}
+  :global(.cds--dropdown) {
+    height: layout.$spacing-09;
+  }
 
-.header {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: spacing.$spacing-12;
-  background-color: $ui-02;
-  border: 1px solid $ui-03;
-  border-left: 0px;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2rem;
+  :global(.cds--list-box__menu:focus) {
+    outline: none;
+  }
 }
 
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: 0.75rem;
+.table {
+  width: 100%;
 }
 
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  padding-top: 1rem;
+.tableHeader {
+  @include type.type-style('heading-compact-01');
+  color: var(--cds-text-primary);
 }
 
-.page-name {
-  @include type.type-style('heading-04');
+.tableCell {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-primary);
 }
 
-.page-labels {
-  margin-left: 1rem;
-
-  p:first-of-type {
-    margin-bottom: 0.25rem;
+.tableWrapper tr:last-of-type {
+  td {
+    border-bottom: none;
   }
 }
 
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-right: 1rem;
+.tileContainer {
+  background-color: colors.$white;
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
 }
 
-.value {
-  margin-left: 0.25rem;
+.tile {
+  margin: auto;
+  width: fit-content;
 }
 
-.middot {
-  margin: 0 0.5rem;
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.view {
-  @include type.type-style('label-01');
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
 }
 
-svg.iconOverrides {
-  width: 72 !important;
-  height: 72 !important;
-  fill: var(--brand-03);
+.emptyStateHelperText {
+  @include type.type-style('helper-text-02');
 }
 
-.svgContainer svg {
-  width: 72px;
-  height: 72px;
-  fill: var(--brand-03);
+.pagination {
+  border-top: 1px solid var(--cds-border-subtle-01);
+  background-color: var(--cds-layer-01);
 }

package/src/fua/fuaRequestTable.tsx

@@ -1,145 +1,192 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   DataTable,
+  DataTableSkeleton,
   Table,
   TableHead,
   TableRow,
   TableHeader,
   TableBody,
   TableCell,
-  TableExpandHeader,
-  TableExpandRow,
-  TableExpandedRow,
   TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Pagination,
+  Layer,
+  Tile,
+  Button,
 } from '@carbon/react';
+import { View } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
+import { formatDate, usePagination, launchWorkspace } from '@openmrs/esm-framework';
 import useFuaRequests from '../hooks/useFuaRequests';
-import { ClaimManagementHeader } from './case-management-header';
+import { FuaDateRangePicker } from './fua-date-range-picker.component';
 import styles from './fua-request-table.scss';
 
-const FuaRequestTable: React.FC = () => {
-  const { data, isLoading, error } = useFuaRequests();
-  const [expandedRowIndex, setExpandedRowIndex] = useState<number | null>(null);
+interface FuaRequestTableProps {
+  statusFilter?: string;
+}
+
+const FuaRequestTable: React.FC<FuaRequestTableProps> = ({ statusFilter = 'all' }) => {
   const { t } = useTranslation();
 
-  const toggleExpand = (index: number) => {
-    setExpandedRowIndex(expandedRowIndex === index ? null : index);
-  };
+  // Use the refactored hook with status filtering
+  const { fuaOrders, isLoading, isError } = useFuaRequests({
+    status: statusFilter !== 'all' ? statusFilter : null,
+    excludeCanceled: true,
+  });
+
+  const [searchString, setSearchString] = useState('');
+
+  // Apply search filter only (status filtering is now done by the hook)
+  const filteredData = useMemo(() => {
+    if (!fuaOrders) return [];
+
+    let filtered = fuaOrders;
 
-  const renderJsonAsTable = (obj: any): JSX.Element => {
-    if (typeof obj !== 'object' || obj === null) {
-      return <span>{String(obj)}</span>;
+    // Apply search filter
+    if (searchString) {
+      const search = searchString.toLowerCase();
+      filtered = filtered.filter(req =>
+        req.name?.toLowerCase().includes(search) ||
+        req.uuid?.toLowerCase().includes(search) ||
+        req.fuaEstado?.nombre?.toLowerCase().includes(search)
+      );
     }
 
-    return (
-      <table className={styles.jsonTable}>
-        <tbody>
-          {Object.entries(obj).map(([key, value], idx) => (
-            <tr key={idx} className={styles.jsonRow}>
-              <td className={styles.jsonKey}>{key}</td>
-              <td className={styles.jsonValue}>
-                {typeof value === 'object' ? renderJsonAsTable(value) : String(value)}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  };
+    return filtered;
+  }, [fuaOrders, searchString]);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const { results, goTo, currentPage } = usePagination(filteredData ?? [], currentPageSize);
 
-  if (isLoading) return <div>Cargando datos...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  const handleViewFua = (fuaId: string) => {
+    launchWorkspace('fua-viewer-workspace', {
+      fuaId,
+    });
+  };
 
   const headers = [
-    { key: 'name', header: 'Nombre del FUA' },
-    { key: 'estado', header: 'Estado' },
-    { key: 'uuid', header: 'UUID del FUA' },
-    { key: 'visitUuid', header: 'UUID de la Visita' },
-    { key: 'fechaCreacion', header: 'Fecha de Creación' },
-    { key: 'fechaActualizacion', header: 'Fecha de Actualización' },
-    { key: 'payload', header: 'Payload' },
+    { key: 'name', header: t('fuaName', 'Nombre del FUA') },
+    { key: 'estado', header: t('status', 'Estado') },
+    { key: 'uuid', header: t('fuaUuid', 'UUID del FUA') },
+    { key: 'visitUuid', header: t('visitUuid', 'UUID de la Visita') },
+    { key: 'fechaCreacion', header: t('creationDate', 'Fecha de Creación') },
+    { key: 'fechaActualizacion', header: t('updateDate', 'Fecha de Actualización') },
+    { key: 'actions', header: t('actions', 'Acciones') },
   ];
 
-  const rows =
-    data?.map((request: any, index: number) => ({
-      id: String(index),
-      name: request.name || 'N/A',
-      estado: request.fuaEstado?.nombre || 'N/A',
-      uuid: request.uuid,
-      visitUuid: request.visitUuid || 'N/A',
-      fechaCreacion: new Date(request.fechaCreacion).toLocaleString(),
-      fechaActualizacion: new Date(request.fechaActualizacion).toLocaleString(),
-      payload: request.payload,
-    })) ?? [];
+  const rows = results?.map((request: any, index: number) => ({
+    id: String(index),
+    name: request.name || 'N/A',
+    estado: request.fuaEstado?.nombre || 'N/A',
+    uuid: request.uuid,
+    visitUuid: request.visitUuid || 'N/A',
+    fechaCreacion: formatDate(new Date(request.fechaCreacion), { mode: 'standard' }),
+    fechaActualizacion: formatDate(new Date(request.fechaActualizacion), { mode: 'standard' }),
+    actions: request.uuid,
+  })) ?? [];
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} />;
+  }
 
   return (
-    <div className="omrs-main-content">
-      <ClaimManagementHeader title={t('fuaRequests', 'Solicitudes FUA')} />
-      <TableContainer>
-        <DataTable rows={rows} headers={headers} isSortable={false} size="sm">
-          {({ rows, headers, getHeaderProps, getRowProps }) => (
-            <Table>
+    <div className={styles.tableContainer}>
+      <DataTable rows={rows} headers={headers} isSortable useZebraStyles size="sm">
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <TableToolbar>
+              <TableToolbarContent className={styles.toolbarContent}>
+                <Layer className={styles.toolbarItem}>
+                  <FuaDateRangePicker />
+                </Layer>
+                <Layer className={styles.toolbarItem}>
+                  <TableToolbarSearch
+                    expanded
+                    onChange={(e) => {
+                      if (typeof e === 'string') {
+                        setSearchString(e);
+                      } else {
+                        setSearchString(e.target.value);
+                      }
+                    }}
+                    placeholder={t('searchThisList', 'Buscar en esta lista')}
+                    size="sm"
+                  />
+                </Layer>
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} className={styles.table}>
               <TableHead>
                 <TableRow>
-                  <TableExpandHeader />
                   {headers.map((header) => (
                     <TableHeader
                       key={header.key}
                       {...getHeaderProps({ header })}
-                      className={`${styles.productiveHeading01} ${styles.text02}`}>
+                      className={styles.tableHeader}
+                    >
                       {header.header}
                     </TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row, index) => (
-                  <React.Fragment key={row.id}>
-                    <TableExpandRow
-                      {...getRowProps({ row })}
-                      onExpand={() => toggleExpand(index)}
-                      isExpanded={expandedRowIndex === index}>
-                      {row.cells.map((cell) => {
-                        if (cell.info.header === 'payload') {
-                          return (
-                            <TableCell key={cell.id} className={styles.payloadCell}>
-                              <button
-                                className={styles.payloadButton}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  toggleExpand(index);
-                                }}>
-                                {expandedRowIndex === index ? 'Ocultar payload' : 'Ver payload'}
-                              </button>
-                            </TableCell>
-                          );
-                        }
-                        return <TableCell key={cell.id}>{cell.value}</TableCell>;
-                      })}
-                    </TableExpandRow>
-                    {expandedRowIndex === index && (
-                      <TableExpandedRow colSpan={headers.length + 1}>
-                        <div className={styles.payloadExpandedContent}>
-                          {(() => {
-                            const payload = data?.[index]?.payload;
-                            if (!payload) return <div>No hay datos de payload</div>;
-                            try {
-                              const parsed = typeof payload === 'string' ? JSON.parse(payload) : payload;
-                              return renderJsonAsTable(parsed);
-                            } catch (err) {
-                              return <div>Payload inválido o no es JSON</div>;
-                            }
-                          })()}
-                        </div>
-                      </TableExpandedRow>
-                    )}
-                  </React.Fragment>
+                {rows.map((row) => (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id} className={styles.tableCell}>
+                        {cell.info.header === 'actions' ? (
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            renderIcon={View}
+                            iconDescription={t('viewFua', 'Ver FUA')}
+                            onClick={() => handleViewFua(cell.value)}
+                          >
+                            {t('view', 'Ver')}
+                          </Button>
+                        ) : (
+                          cell.value
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
                 ))}
               </TableBody>
             </Table>
-          )}
-        </DataTable>
-      </TableContainer>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>{t('noFuaRequestsFound', 'No se encontraron solicitudes FUA')}</p>
+                    <p className={styles.emptyStateHelperText}>
+                      {t('checkFilters', 'Por favor revisa los filtros de arriba e intenta de nuevo')}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      </DataTable>
+      {filteredData.length > 0 && (
+        <Pagination
+          page={currentPage}
+          pageSize={currentPageSize}
+          pageSizes={pageSizes}
+          totalItems={filteredData.length}
+          onChange={({ page, pageSize }) => {
+            if (pageSize !== currentPageSize) {
+              setPageSize(pageSize);
+            }
+            goTo(page);
+          }}
+          className={styles.pagination}
+        />
+      )}
     </div>
   );
 };

package/src/fua-dashboard.component.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { useDefineAppContext } from '@openmrs/esm-framework';
+import { type DateFilterContext } from './types';
+import FuaOrdersTabs from './fua-tabs/fua-tabs.component';
+import FuaSummaryTiles from './fua-tiles/fua-summary-tiles.component';
+import { FuaHeader } from './fua/fua-header';
+import styles from './fua-dashboard.scss';
+
+const FuaDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const [dateRange, setDateRange] = useState<Date[]>([dayjs().startOf('day').toDate(), new Date()]);
+  useDefineAppContext<DateFilterContext>('fua-date-filter', { dateRange, setDateRange });
+
+  return (
+    <div className={styles.dashboard}>
+      <FuaHeader title={t('fuaRequests', 'Solicitudes de Formato Único de Atención')} />
+      <FuaSummaryTiles />
+      <FuaOrdersTabs />
+    </div>
+  );
+};
+
+export default FuaDashboard;

package/src/fua-dashboard.scss

@@ -0,0 +1,35 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.dashboard {
+  background-color: var(--cds-layer-01);
+  min-height: 100vh;
+}
+
+.headerContainer {
+  background-color: var(--cds-layer-01);
+  padding: spacing.$spacing-05;
+  border-bottom: 1px solid var(--cds-border-subtle-01);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: spacing.$spacing-04;
+}
+
+.headerIcon {
+  color: var(--cds-icon-primary);
+}
+
+.headerTitle {
+  @include type.type-style('heading-compact-01');
+  margin: 0;
+  color: var(--cds-text-secondary);
+}
+
+.headerSubtitle {
+  @include type.type-style('heading-03');
+  margin: 0;
+  color: var(--cds-text-primary);
+}

package/src/fua-tabs/data-table-extensions/all-fua-requests-table.extension.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import FuaRequestTable from '../../fua/fuaRequestTable';
+
+const AllFuaRequestsTable: React.FC = () => {
+  return <FuaRequestTable statusFilter="all" />;
+};
+
+export default AllFuaRequestsTable;

package/src/fua-tabs/data-table-extensions/completed-fua-requests-table.extension.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import FuaRequestTable from '../../fua/fuaRequestTable';
+
+const CompletedFuaRequestsTable: React.FC = () => {
+  return <FuaRequestTable statusFilter="completed" />;
+};
+
+export default CompletedFuaRequestsTable;

package/src/fua-tabs/data-table-extensions/declined-fua-requests-table.extension.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import FuaRequestTable from '../../fua/fuaRequestTable';
+
+const DeclinedFuaRequestsTable: React.FC = () => {
+  return <FuaRequestTable statusFilter="declined" />;
+};
+
+export default DeclinedFuaRequestsTable;

package/src/fua-tabs/data-table-extensions/in-progress-fua-requests-table.extension.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import FuaRequestTable from '../../fua/fuaRequestTable';
+
+const InProgressFuaRequestsTable: React.FC = () => {
+  return <FuaRequestTable statusFilter="in-progress" />;
+};
+
+export default InProgressFuaRequestsTable;