@kenyaemr/esm-admin-app 5.3.8-pre.1555

package/src/components/header/header.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { formatDate, useSession, PageHeader } from '@openmrs/esm-framework';
+import styles from './header.scss';
+import ETLIllustration from './header-illustration.component';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <PageHeader
+        title={t('etlAdministration', 'ETL Administration')}
+        illustration={<ETLIllustration />}
+        className={styles.header}
+      />
+    </div>
+  );
+};
+
+export default Header;

package/src/components/header/header.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+  background: white;
+  border: 1px solid colors.$gray-20;
+}
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  margin-right: layout.$spacing-06;
+  fill: var(--brand-03);
+}

package/src/components/logs-table/operation-log-resource-mock-data.ts

@@ -0,0 +1,24 @@
+import { ETLLogs } from '../../types';
+
+export const LogMsg = [
+  {
+    procedure: 'initial population of tables',
+    startTime: '2024-11-28T09:30:12',
+    endTime: '2024-11-28T09:33:15',
+    completionStatus: 'Success',
+  },
+  {
+    procedure: 'initial creation of tables',
+    startTime: '2024-11-28T09:30:12',
+    endTime: '2024-11-28T09:33:15',
+    completionStatus: 'Failed',
+  },
+] as Array<ETLLogs>;
+
+export const useLogData = () =>
+  LogMsg.map(({ procedure, startTime, endTime, completionStatus }) => ({
+    procedure,
+    startTime,
+    endTime,
+    completionStatus,
+  }));

package/src/components/logs-table/operation-log-table.component.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { CardHeader, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+import styles from './operation-log.scss';
+import { useLogData } from './operation-log-resource-mock-data';
+
+interface LogData {
+  id: string;
+  procedure: string;
+  startTime: string;
+  endTime: string;
+  completionStatus: string;
+}
+
+const LogTable: React.FC = () => {
+  const { t } = useTranslation();
+  const pageSize = 10;
+  const isTablet = useLayoutType() === 'tablet';
+
+  const logData: LogData[] = useLogData().map((item, index) => ({
+    ...item,
+    id: `row-${index}`,
+  }));
+
+  const headers = [
+    { header: t('procedure', 'Procedure'), key: 'procedure' },
+    { header: t('startTime', 'Start time'), key: 'startTime' },
+    { header: t('endTime', 'End time'), key: 'endTime' },
+    { header: t('completionStatus', 'Completion status'), key: 'completionStatus' },
+  ];
+
+  const { results: paginatedData, currentPage, totalPages, goTo } = usePagination<LogData>(logData, pageSize);
+
+  return (
+    <div className={styles.table}>
+      <CardHeader title={t('etlOperationLog', 'ETL Operations Log')} children={''} />
+      <div className={styles.logTable}>
+        <DataTable rows={paginatedData} headers={headers} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader
+                        key={header.key}
+                        className={classNames(styles.productiveHeading01, styles.text02)}
+                        {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => {
+                        if (cell.info.header === 'completionStatus') {
+                          return (
+                            <TableCell key={cell.id}>
+                              <Tag size="md" type={cell.value === 'Success' ? 'green' : 'red'}>
+                                {cell.value}
+                              </Tag>
+                            </TableCell>
+                          );
+                        }
+                        return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+        <PatientChartPagination
+          currentItems={paginatedData.length}
+          totalItems={logData.length}
+          onPageNumberChange={({ page }) => goTo(page)}
+          pageNumber={currentPage}
+          pageSize={pageSize}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LogTable;

package/src/components/logs-table/operation-log.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.logTable {
+  margin: 0 auto;
+}
+.table {
+  border: 1px solid colors.$gray-30;
+}

package/src/components/logs-table/operation-log.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useLogData } from './operation-log-resource-mock-data';
+import LogTable from './operation-log-table.component';
+
+jest.mock('./operation-log-resource-mock-data', () => ({
+  useLogData: jest.fn(),
+}));
+
+describe('LogTable Component', () => {
+  beforeEach(() => {
+    (useLogData as jest.Mock).mockReturnValue([
+      {
+        procedure: 'Initial Population of Tables',
+        startTime: '2024-11-28T09:30:12',
+        endTime: '2024-11-28T09:33:15',
+        completionStatus: 'Success',
+      },
+      {
+        procedure: 'Initial Creation of Tables',
+        startTime: '2024-11-28T09:30:12',
+        endTime: '2024-11-28T09:33:15',
+        completionStatus: 'Failed',
+      },
+    ]);
+  });
+
+  it('renders the table with correct headers and rows', () => {
+    render(<LogTable />);
+
+    const headers = ['Procedure', 'Start time', 'End time', 'Completion status'];
+    headers.forEach((header) => {
+      expect(screen.getByText(header)).toBeInTheDocument();
+    });
+
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(3);
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,6 @@
+import { Type } from '@openmrs/esm-framework';
+import _default from 'react-hook-form/dist/logic/appendErrors';
+
+export const configSchema = {};
+
+export interface ConfigObject {}

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const moduleName = '@kenyaemr/esm-admin-app';
+export const etlBasePath = `${window.spaBase}/admin`;

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/index.ts

@@ -0,0 +1,16 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { moduleName } from './constants';
+
+const options = {
+  featureName: 'esm-admin-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);

package/src/root.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { etlBasePath } from './constants';
+import Dashboard from './components/dashboard/dashboard.component';
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={etlBasePath}>
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.container {
+  padding: layout.$spacing-07;
+}

package/src/routes.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "kenyaemrCharts": "^1.6.7"
+  },
+  "extensions": [
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "admin",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/types/index.ts

@@ -0,0 +1,6 @@
+export interface ETLLogs {
+  procedure: string;
+  startTime: string;
+  endTime: string;
+  completionStatus: string;
+}

package/translations/en.json

@@ -0,0 +1,14 @@
+{
+  "completionStatus": "Completion status",
+  "endTime": "End time",
+  "etlAdministration": "ETL Administration",
+  "etlOperation": "ETL operations",
+  "etlOperationLog": "ETL Operations Log",
+  "home": "Home",
+  "procedure": "Procedure",
+  "recreateDatatools": "Recreate datatools",
+  "recreateTables": "Recreate tables",
+  "refreshDwapi": "Refresh DWAPI tables",
+  "refreshTables": "Refresh tables",
+  "startTime": "Start time"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');