@openmrs/esm-sms-app 1.0.1-pre.22

package/src/providers/providers-overview/providers-overview.scss

@@ -0,0 +1,114 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.widgetCard {
+  border: 1px solid $ui-03;
+}
+
+.divider {
+  width: 1px;
+  height: spacing.$spacing-05;
+  color: colors.$gray-20;
+  margin: 0 spacing.$spacing-05;
+}
+
+.rightMostFlexContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.key {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.tag {
+  :global(.cds--tag) {
+    min-height: unset;
+  }
+}
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-header) {
+    padding: 0;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    background: none !important;
+  }
+}
+
+.search {
+  max-width: 16rem;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.expandedRow {
+  padding-inline-start: 3.5rem;
+
+  > td {
+    padding: inherit !important;
+
+    > div {
+      max-height: max-content !important;
+    }
+  }
+
+  > div {
+    background-color: $ui-02;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.configInfo {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-05;
+  padding: spacing.$spacing-05;
+}
+
+.gridTitle {
+  @include type.type-style('label-02');
+  color: colors.$gray-70;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.labelBold {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  font-weight: bold;
+  margin-right: spacing.$spacing-02;
+}
+
+.labelContainer {
+  display: flex;
+}
+

package/src/providers/sms-logs-table/sms-logs-table.component.tsx

@@ -0,0 +1,217 @@
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { CardHeader, ErrorState } from '@openmrs/esm-patient-common-lib';
+import {
+  InlineLoading,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  Layer,
+  Pagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableBody,
+  TableCell,
+  Tile,
+} from '@carbon/react';
+import { useConfig, usePagination, useLayoutType, isDesktop as isDesktopLayout } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { useLogsRecords } from '../../hooks/useLogs';
+import { EmptyState } from '../empty-state/empty-state.component';
+import styles from './sms-logs-table.scss';
+import { Search } from '@carbon/react';
+import { DatePicker } from '@carbon/react';
+
+const SmslogsTable = () => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const layout = useLayoutType();
+  const isDesktop = isDesktopLayout(layout);
+  const isTablet = !isDesktop;
+  const headerTitle = t('smsLogs', 'SMS Logs');
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filter, setFilter] = useState('All');
+  const { smsLogs, isLoadingLogs, isValidatingLogs, mutateLogs, error } = useLogsRecords();
+
+  const phoneNumberFilters = useMemo(() => {
+    const phoneNumbers = smsLogs?.map((log) => log.phoneNumber);
+    return Array.from(new Set(phoneNumbers));
+  }, [smsLogs]);
+
+  /**** Comments below are used for translating keys in logs table, remove with caution *****/
+  // t('phoneNumber', 'Phone number')
+  // t('messageContent', 'Message')
+  // t('config', 'Configuration')
+  // t('timestamp', 'Timestamp')
+  // t('providerId', 'Provider')
+  // t('errorMessage', 'Error message')
+  // t('providerStatus', 'Provider status')
+  // t('openMrsId', 'Openmrs ID')
+  // t('deliveryStatus', 'Delivery status')
+  // t('smsDirection', 'SMS direction')
+  // t('modificationDate', 'Modification date')
+  // t('creationDate', 'Creation date')
+  // t('modifiedBy', 'Modified by')
+  // t('creator', 'Creator')
+
+  const headers = useMemo(
+    () =>
+      config?.smsLogsColumns?.map((column) => ({
+        key: column,
+        header: t(column),
+        isSortable: true,
+        sortFunc: (valueA, valueB) => valueA.display?.localeCompare(valueB.display),
+      })),
+    [config?.smsLogsColumns, t],
+  );
+
+  const filteredLogs = useMemo(() => {
+    if ((!filter || filter === 'All') && !searchTerm) {
+      return smsLogs;
+    }
+
+    let logs = smsLogs;
+    if (filter && filter !== 'All') {
+      logs = logs.filter((log) => log.phoneNumber === filter);
+    }
+
+    if (searchTerm) {
+      logs = logs.filter((log) => log.messageContent.toLowerCase().includes(searchTerm.toLowerCase()));
+    }
+
+    return logs;
+  }, [filter, searchTerm, smsLogs]);
+
+  const tableRows = useMemo(
+    () =>
+      filteredLogs.map((smsLog) => ({
+        ...smsLog,
+        timestamp: new Date(smsLog.timestamp).toLocaleString(),
+      })),
+    [filteredLogs],
+  );
+
+  const { results: paginatedLogs, paginated, goTo, currentPage } = usePagination(tableRows, pageSize);
+
+  if (isLoadingLogs) return <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />;
+  if (error) return <ErrorState error={error} headerTitle={headerTitle} />;
+
+  if (smsLogs.length > 0) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={headerTitle}>
+          <span>{isValidatingLogs ? <InlineLoading /> : null}</span>
+          <div className={styles.rightMostFlexContainer}>
+            <div className={styles.filterContainer}>
+              <Dropdown
+                id="smsLogsFilter"
+                initialSelectedItem={'All'}
+                label=""
+                titleText={t('fitlerLogsByNumber', 'Fitler logs by phone number') + ':'}
+                type="inline"
+                items={['All', ...phoneNumberFilters]}
+                onChange={({ selectedItem }) => setFilter(selectedItem.value)}
+                size={isTablet ? 'lg' : 'sm'}
+              />
+            </div>
+            <div>
+              <DatePicker />
+            </div>
+            <div>
+              <Search
+                size={isTablet ? 'lg' : 'sm'}
+                placeholder="Search for a message"
+                labelText="Search"
+                closeButtonLabelText="Clear search input"
+                id="message-search"
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <DataTable
+          aria-label="provider-configutations overview"
+          rows={paginatedLogs}
+          headers={headers}
+          isSortable
+          size={isTablet ? 'lg' : 'sm'}
+          useZebraStyles
+          overflowMenuOnHover={isDesktop}
+        >
+          {({ rows, headers, getHeaderProps, getTableProps }) => (
+            <>
+              <TableContainer>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader
+                          className={classNames(styles.productiveHeading01, styles.text02)}
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
+                        >
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      ))}
+                      <TableHeader />
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noSmsLogsToDisplay', 'No SMS Logs to display')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </>
+          )}
+        </DataTable>
+        {paginated && (
+          <Pagination
+            forwardText="Next page"
+            backwardText="Previous page"
+            page={currentPage}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            totalItems={paginatedLogs?.length}
+            className={styles.pagination}
+            size={isDesktop ? 'sm' : 'lg'}
+            onChange={({ pageSize: newPageSize, page: newPage }) => {
+              if (newPageSize !== pageSize) {
+                setPageSize(newPageSize);
+              }
+              if (newPage !== currentPage) {
+                goTo(newPage);
+              }
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return <EmptyState displayText={headerTitle} headerTitle={headerTitle} />;
+};
+
+export default SmslogsTable;

package/src/providers/sms-logs-table/sms-logs-table.scss

@@ -0,0 +1,63 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.widgetCard {
+  border: 1px solid $ui-03;
+}
+
+.divider {
+  width: 1px;
+  height: spacing.$spacing-05;
+  color: colors.$gray-20;
+  margin: 0 spacing.$spacing-05;
+}
+
+.rightMostFlexContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.filterContainer {
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: spacing.$spacing-05;
+  }
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    min-width: spacing.$spacing-13;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: spacing.$spacing-11 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/providers/sms-logs-table/sms-logs-table.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import SmslogsTable from './sms-logs-table.component';
+import { useTranslation } from 'react-i18next';
+import { useConfig, usePagination, useLayoutType } from '@openmrs/esm-framework';
+import { useLogsRecords } from '../../hooks/useLogs';
+import { renderWithSwr } from 'tools';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+jest.mock('../../hooks/useLogs', () => ({
+  useLogsRecords: jest.fn(),
+}));
+
+describe('SmslogsTable', () => {
+  const mockUseTranslation = useTranslation as jest.Mock;
+  const mockUseConfig = useConfig as jest.Mock;
+  const mockUsePagination = usePagination as jest.Mock;
+  const mockUseLayoutType = useLayoutType as jest.Mock;
+  const mockUseLogsRecords = useLogsRecords as jest.Mock;
+
+  beforeEach(() => {
+    mockUseTranslation.mockReturnValue({ t: (key: string, value: string) => value });
+    mockUseConfig.mockReturnValue({
+      configurationPageSize: [10, 20, 30, 40, 50],
+      smsLogsColumns: ['phoneNumber', 'messageContent', 'config', 'timestamp', 'providerId'],
+    });
+    mockUseLayoutType.mockReturnValue('desktop');
+    mockUsePagination.mockReturnValue({
+      results: mockLogs,
+      paginated: true,
+      goTo: jest.fn(),
+      currentPage: 1,
+    });
+  });
+
+  it('displays loading skeleton when logs are loading', () => {
+    mockUseLogsRecords.mockReturnValueOnce({
+      smsLogs: [],
+      isLoadingLogs: true,
+      isValidatingLogs: false,
+      mutateLogs: jest.fn(),
+      error: null,
+    });
+    renderSmsLogsTable();
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('displays error state when there is an error', () => {
+    mockUseLogsRecords.mockReturnValueOnce({
+      smsLogs: [],
+      isLoadingLogs: false,
+      isValidatingLogs: false,
+      mutateLogs: jest.fn(),
+      error: new Error(),
+    });
+    renderSmsLogsTable();
+    expect(screen.getByText('Error undefined:')).toBeInTheDocument();
+  });
+});
+
+function renderSmsLogsTable() {
+  return renderWithSwr(<SmslogsTable />);
+}
+
+const mockLogs = [
+  {
+    id: 2,
+    errorMessage: null,
+    providerStatus: null,
+    openMrsId: '2f702be8b4ae459ba4d2d05b185c9ab7',
+    providerId: '5882ab57-50cd-4b52-b211-bca5c5b8a781',
+    deliveryStatus: 'DISPATCHED',
+    messageContent: 'Hello',
+    timestamp: '2024-08-02T06:25:18.000Z',
+    config: 'Vonage',
+    smsDirection: 'OUTBOUND',
+    phoneNumber: '256754544829',
+    modificationDate: '',
+    creationDate: '2024-08-02T06:25:18.000Z',
+    modifiedBy: null,
+    creator: 'daemon',
+  },
+  {
+    id: 1,
+    errorMessage: null,
+    providerStatus: null,
+    openMrsId: '2f702be8b4ae459ba4d2d05b185c9ab7',
+    providerId: null,
+    deliveryStatus: 'SCHEDULED',
+    messageContent: 'Hello',
+    timestamp: '2024-08-02T06:25:17.000Z',
+    config: 'Vonage',
+    smsDirection: 'OUTBOUND',
+    phoneNumber: '256754544829',
+    modificationDate: '',
+    creationDate: '2024-08-02T06:25:17.000Z',
+    modifiedBy: null,
+    creator: 'admin',
+  },
+];

package/src/providers/test-form/provider-config-test-form.scss

@@ -0,0 +1,105 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/styles/scss/spacing';
+
+.heading {
+  @include type.type-style("heading-03");
+  margin-bottom: spacing.$spacing-03;
+}
+
+.columnLabel {
+  @include type.type-style("heading-compact-02");
+  color: colors.$gray-70;
+}
+
+.radioButtonGroup{
+  :global(.cds--radio-button-group--vertical) {
+    gap: spacing.$spacing-05;
+  }
+
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.spinner {
+  min-height: spacing.$spacing-05;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+
+.formContainer {
+  margin: spacing.$spacing-08 spacing.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: var(--desktop-workspace-window-height);
+}
+
+.grid {
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  margin: spacing.$spacing-03 0 spacing.$spacing-08;
+}
+
+.errorMessage {
+  @include type.type-style("label-02");
+  color: colors.$red-60;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .row {
+    display: flex;
+    gap: spacing.$spacing-10;
+
+    :global(.cds--col-sm-1) {
+      flex-basis: 30%;
+      min-width: 8rem;
+      text-align: left;
+    }
+
+    :global(.cds--col-sm-3) {
+      flex-basis: 70%;
+    }
+  }
+
+  .skeleton {
+    height: spacing.$spacing-08;
+  }
+}
+
+.errorNotification {
+  margin-top: 0.25rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .row {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.$spacing-05;
+  }
+}