(feat) added the header and read me doc

packages/esm-admin-app/README copy.md

@@ -0,0 +1,12 @@
+![Node.js CI](https://github.com/palladiumkenya/kenyaemr-esm-3.x/workflows/Node.js%20CI/badge.svg)
+
+# ESM Morgue App
+
+This is a frontend module that provides Admin functionality.
+
+#### Morgue App features
+- Management of the ETL management
+
+#### Admin App design 
+
+ETL administration link: https://www.figma.com/proto/XWCO0qO9dxNPsoFcLfTFoB/ETL-Admin?page-id=0%3A1&node-id=3-1149&node-type=canvas&viewport=197%2C255%2C0.12&t=8ZbW94rdpqm2iwKG-1&scaling=contain&content-scaling=fixed&starting-point-node-id=2%3A5449

packages/esm-admin-app/README.md

@@ -0,0 +1,5 @@
+![Node.js CI](https://github.com/palladiumkenya/kenyaemr-esm-3.x/workflows/Node.js%20CI/badge.svg)
+
+# ESM ETL Administration App
+
+This package is a frontend module designed to facilitate the management of ETL. 

packages/esm-admin-app/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

packages/esm-admin-app/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@kenyaemr/esm-admin-app",
+  "version": "5.3.7",
+  "description": "faciliates the management of ETL tables",
+  "browser": "dist/kenyaemr-esm-admin-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-3.x#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-3.x/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.42.1",
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

packages/esm-admin-app/src/Components/Dashboard/dashboard.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Header from '../Header/header.component';
+import { useTranslation } from 'react-i18next';
+import { Layer, ComboButton, MenuItem } from '@carbon/react';
+import { Add, WatsonHealthScalpelSelect } from '@carbon/react/icons';
+import styles from './dashboard.scss';
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={`omrs-main-content`}>
+      <Header title={t('home', 'Home')} />
+      <Layer className={styles.btnLayer}>
+        <ComboButton tooltipAlignment="left" label={t('etlOperation', 'ETL operations')} size="md">
+          <MenuItem label={t('refreshTables', 'Refresh tables')} />
+          <MenuItem label={t('recreateTables', 'Recreate tables')} />
+          <MenuItem label={t('recreateDatatools', 'Recreate datatools')} />
+          <MenuItem label={t('refreshDwapi', 'Refresh DWAPI tables')} />
+        </ComboButton>
+      </Layer>
+    </div>
+  );
+};
+
+export default Dashboard;

packages/esm-admin-app/src/Components/Dashboard/dashboard.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.btnLayer {
+  display: flex;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  padding-right: layout.$spacing-05;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+}

packages/esm-admin-app/src/Components/Header/header-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './header.scss';
+import { IbmCloudant } from '@carbon/react/icons';
+
+const ETLIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <IbmCloudant className={styles.iconOveriders} />
+    </div>
+  );
+};
+
+export default ETLIllustration;

packages/esm-admin-app/src/Components/Header/header.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, IbmCloudant, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession } 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}>
+      <div className={styles['left-justified-items']}>
+        <ETLIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('etlAdministration', 'ETL Administration')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

packages/esm-admin-app/src/Components/Header/header.scss

@@ -0,0 +1,69 @@
+@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;
+  border: 1px solid colors.$gray-20;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: layout.$spacing-03;
+
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+.svgContainer svg {
+  width: layout.$spacing-10;
+  height: layout.$spacing-10;
+  fill: var(--brand-03);
+}

packages/esm-admin-app/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 {}

packages/esm-admin-app/src/constants.ts

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

packages/esm-admin-app/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;

packages/esm-admin-app/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);

packages/esm-admin-app/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;

packages/esm-admin-app/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.container {
+  padding: spacing.$spacing-07;
+}
+
+.welcome {
+  @include type.type-style('heading-04');
+  margin: spacing.$spacing-05 0;
+}
+
+.explainer {
+  margin-bottom: 2rem;
+}

packages/esm-admin-app/src/routes.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "etl-administration",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

packages/esm-admin-app/src/setup-tests.ts

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

packages/esm-admin-app/translations/en.json

@@ -0,0 +1,3 @@
+{
+
+}

packages/esm-admin-app/tsconfig.json

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

packages/esm-admin-app/webpack.config.js

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

packages/esm-billing-app/translations/en.json

@@ -126,6 +126,7 @@
   "generatedMessage": "The invoice has been electronically generated and is a valid document. It was created by {{userName}} on {{date}} at {{time}}",
   "guaranteeId": "Guarantee Id",
   "home": "Home",
+  "id": "Id",
   "identifier": "Identifier",
   "inactive": "Inactive",
   "incompletePayment": "Incomplete payment",