@digihmis/esm-administration-app 1.0.0

package/src/billing-management/billing-payment-modes/billing-payment-modes-workspace/payment-attributes/payment-mode-attributes.component.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, Control, useFormContext } from 'react-hook-form';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { TextInput, Button, Dropdown, Toggle } from '@carbon/react';
+import styles from './payment-mode-attributes.scss';
+import { PAYMENT_MODE_ATTRIBUTE_FORMATS } from '../../../../constant';
+
+type PaymentModeAttributeFields = {
+  field: Record<string, any>;
+  index: number;
+  control: Control<Record<string, any>>;
+  removeAttributeType: (index: number) => void;
+  errors: Record<string, any>;
+};
+
+const PaymentModeAttributeFields: React.FC<PaymentModeAttributeFields> = ({
+  field,
+  index,
+  control,
+  removeAttributeType,
+  errors,
+}) => {
+  const { t } = useTranslation();
+  const { watch } = useFormContext();
+  const retired = watch(`attributeTypes.${index}.retired`);
+
+  return (
+    <div className={styles.paymentModeAttributes}>
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.name`}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              labelText={t('attributeName', 'Attribute name')}
+              placeholder={t('enterAttributeName', 'Enter attribute name')}
+              invalid={!!errors?.attributeTypes?.[index]?.name}
+              invalidText={errors?.attributeTypes?.[index]?.name?.message}
+              id={`attributeTypes.${index}.name`}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.description`}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              labelText={t('attributeDescription', 'Attribute description')}
+              placeholder={t('enterAttributeDescription', 'Enter attribute description')}
+              invalid={!!errors?.attributeTypes?.[index]?.description}
+              invalidText={errors?.attributeTypes?.[index]?.description?.message}
+              id={`attributeTypes.${index}.description`}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.retired`}
+          render={({ field }) => (
+            <Toggle
+              {...field}
+              labelText={t('attributeEnabled', 'Attribute enabled')}
+              labelA="Off"
+              labelB="On"
+              toggled={!field.value}
+              id={`attributeTypes.${index}.retired`}
+              onToggle={(value) => field.onChange(!value)}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      {retired && (
+        <ResponsiveWrapper>
+          <Controller
+            control={control}
+            name={`attributeTypes.${index}.retiredReason`}
+            render={({ field }) => (
+              <TextInput
+                id={`attributeTypes.${index}.retireReason`}
+                {...field}
+                labelText={t('attributeRetiredReason', 'Attribute retired reason')}
+                placeholder={t('enterAttributeRetiredReason', 'Enter attribute retired reason')}
+                invalid={!!errors?.attributeTypes?.[index]?.retiredReason}
+                invalidText={errors?.attributeTypes?.[index]?.retiredReason?.message}
+              />
+            )}
+          />
+        </ResponsiveWrapper>
+      )}
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.format`}
+          render={({ field }) => (
+            <Dropdown
+              {...field}
+              label={t('attributeFormat', 'Attribute format')}
+              id={`attributeTypes.${index}.format`}
+              titleText={t('attributeFormat', 'Attribute format')}
+              aria-placeholder={t('selectAttributeFormat', 'Select attribute format')}
+              onChange={(event) => field.onChange(event.selectedItem)}
+              initialSelectedItem={field.value}
+              helperText={t('attributeFormatHelperText', 'The format of the attribute value e.g Free text, Number')}
+              items={PAYMENT_MODE_ATTRIBUTE_FORMATS}
+              invalid={!!errors?.attributeTypes?.[index]?.format}
+              invalidText={errors?.attributeTypes?.[index]?.format?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.regExp`}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id={`attributeTypes.${index}.regExp`}
+              labelText={t('regExp', 'Regular expression')}
+              placeholder={t('enterRegExp', 'Enter regular expression')}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          control={control}
+          name={`attributeTypes.${index}.required`}
+          render={({ field }) => (
+            <Toggle
+              {...field}
+              labelText={t('attributeRequired', 'Attribute required')}
+              labelA="Off"
+              labelB="On"
+              toggled={field.value}
+              id={`attributeTypes.${index}.required`}
+              onToggle={(value) => field.onChange(value)}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <Button size="sm" kind="danger--tertiary" onClick={() => removeAttributeType(index)}>
+        {t('remove', 'Remove')}
+      </Button>
+    </div>
+  );
+};
+
+export default PaymentModeAttributeFields;

package/src/billing-management/billing-payment-modes/billing-payment-modes-workspace/payment-attributes/payment-mode-attributes.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.paymentModeAttributes {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  outline: 1px solid colors.$gray-10;
+  padding: layout.$spacing-05;
+}

package/src/billing-management/billing-payment-modes/billing-payment-modes.component.tsx

@@ -0,0 +1,243 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  Layer,
+  Pagination,
+  Tile,
+  IconButton,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/react/icons';
+import { launchWorkspace, useLayoutType, ErrorState, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import startCase from 'lodash-es/startCase';
+import styles from './billing-payment-modes.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { PaymentMethod } from './type';
+import { usePaymentModes } from './billing-payment-modes.resource';
+
+const PaymentModeTable = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+
+  const { paymentModes, isLoading, error } = usePaymentModes(false);
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const headers = [
+    {
+      key: 'dateCreated',
+      header: t('dateCreated', 'Date Created'),
+    },
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'retired',
+      header: t('retired', 'Retired'),
+    },
+  ];
+
+  // Transform payment modes to table rows
+  const tableRows = useMemo(() => {
+    if (!paymentModes) {
+      return [];
+    }
+
+    return paymentModes.map((mode) => ({
+      id: mode.uuid,
+      dateCreated: new Date(mode.auditInfo.dateCreated).toLocaleDateString(),
+      name: mode.name,
+      description: mode.description || '-',
+      retired: mode.retired ? t('yes', 'Yes') : t('no', 'No'),
+      paymentMode: mode, // Store full object for expandable row
+    }));
+  }, [paymentModes, t]);
+
+  // Paginated rows
+  const paginatedRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * currentPageSize;
+    const endIndex = startIndex + currentPageSize;
+    return tableRows.slice(startIndex, endIndex);
+  }, [tableRows, currentPage, currentPageSize]);
+
+  const handleAddPaymentMode = () => {
+    launchWorkspace('payment-mode-workspace');
+  };
+
+  const showDeletePaymentModeModal = (paymentMode: PaymentMethod) => {
+    const dispose = showModal('delete-payment-mode-modal', {
+      closeModal: () => dispose(),
+      paymentMode,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.section}>
+        <h3>{t('paymentModes', 'Payment Modes')}</h3>
+        <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('paymentModes', 'Payment Modes')} />;
+  }
+
+  return (
+    <div className={styles.section}>
+      <CardHeader title={t('paymentModes', 'Payment Modes')}>
+        <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddPaymentMode}>
+          {t('addPaymentMode', 'Add Payment Mode')}
+        </Button>
+      </CardHeader>
+      <Layer>
+        <DataTable rows={paginatedRows} headers={headers} isSortable size={responsiveSize} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getExpandedRowProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()} aria-label={t('paymentModesTable', 'Payment modes table')}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                    <TableHeader>{t('actions', 'Actions')}</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    const paymentMode = paginatedRows[index]?.paymentMode;
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                          <TableCell>
+                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                              <IconButton
+                                kind="ghost"
+                                size={responsiveSize}
+                                label={t('edit', 'Edit')}
+                                onClick={() =>
+                                  launchWorkspace('payment-mode-workspace', {
+                                    workspaceTitle: t('editPaymentMode', 'Edit Payment Mode'),
+                                    initialPaymentMode: paymentMode,
+                                  })
+                                }>
+                                <Edit />
+                              </IconButton>
+                              <IconButton
+                                kind="danger--ghost"
+                                size={responsiveSize}
+                                label={t('delete', 'Delete')}
+                                onClick={() => showDeletePaymentModeModal(paymentMode)}>
+                                <TrashCan />
+                              </IconButton>
+                            </div>
+                          </TableCell>
+                        </TableExpandRow>
+                        <TableExpandedRow
+                          colSpan={headers.length + 2}
+                          className="demo-expanded-td"
+                          {...getExpandedRowProps({ row })}>
+                          {paymentMode && <PaymentModeAttributes paymentMode={paymentMode} />}
+                        </TableExpandedRow>
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {tableRows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noPaymentModesFound', 'No payment modes found')}</p>
+                      <p className={styles.emptyStateHelperText}>
+                        {t('checkFilters', 'Please check the filters above and try again')}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              {tableRows.length > 0 && (
+                <Pagination
+                  forwardText={t('nextPage', 'Next page')}
+                  backwardText={t('previousPage', 'Previous page')}
+                  page={currentPage}
+                  pageSize={currentPageSize}
+                  pageSizes={pageSizes}
+                  totalItems={tableRows.length}
+                  className={styles.pagination}
+                  onChange={({ pageSize, page }) => {
+                    if (pageSize !== currentPageSize) {
+                      setCurrentPageSize(pageSize);
+                      setCurrentPage(1);
+                    }
+                    if (page !== currentPage) {
+                      setCurrentPage(page);
+                    }
+                  }}
+                />
+              )}
+            </TableContainer>
+          )}
+        </DataTable>
+      </Layer>
+    </div>
+  );
+};
+
+const PaymentModeAttributes: React.FC<{ paymentMode: PaymentMethod }> = ({ paymentMode }) => {
+  const { t } = useTranslation();
+  const { attributeTypes } = paymentMode;
+
+  return (
+    <div className={styles.attributeContainer}>
+      {attributeTypes.map((attributeType, index) =>
+        Object.entries(attributeType).map(([key, value]) => {
+          if (key === 'uuid') {
+            return null;
+          }
+          return <AttributeCard key={`${index}-${key}`} label={key} value={JSON.stringify(value)} />;
+        }),
+      )}
+    </div>
+  );
+};
+
+const AttributeCard: React.FC<{ label: string; value: string }> = ({ label, value }) => {
+  return (
+    <div className={styles.attributeCard}>
+      <div className={styles.attributeLabel}>{startCase(label).replace(/\s+/g, ' ')}</div>
+      <div className={styles.attributeValue}>{value.replace(/['"]/g, '')}</div>
+    </div>
+  );
+};
+
+export default PaymentModeTable;

package/src/billing-management/billing-payment-modes/billing-payment-modes.resource.ts

@@ -0,0 +1,23 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { PaymentMethod } from './type';
+import { ConfigObject } from '../../config-schema';
+
+export const usePaymentModes = (excludeWaiver: boolean = true) => {
+  const { excludedPaymentMode } = useConfig<ConfigObject>();
+  const url = `${restBaseUrl}/cashier/paymentMode?v=full`;
+  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<PaymentMethod> } }>(url, openmrsFetch, {
+    errorRetryCount: 2,
+  });
+  const allowedPaymentModes =
+    excludedPaymentMode?.length > 0
+      ? (data?.data?.results.filter((mode) => !excludedPaymentMode.some((excluded) => excluded.uuid === mode.uuid)) ??
+        [])
+      : (data?.data?.results ?? []);
+  return {
+    paymentModes: excludeWaiver ? allowedPaymentModes : data?.data?.results,
+    isLoading,
+    mutate,
+    error,
+  };
+};

package/src/billing-management/billing-payment-modes/billing-payment-modes.scss

@@ -0,0 +1,140 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+:global(.cds--tab-content) {
+  padding: 0 !important;
+  padding-top: var(--cds-layout-density-padding-inline-local) !important;
+}
+
+.adminPage {
+  //   padding: layout.$spacing-05;
+  background: var(--cds-field);
+}
+
+.section {
+  margin-bottom: layout.$spacing-07;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid var(--cds-border-subtle);
+
+  h3 {
+    margin: 0;
+    color: var(--cds-text-primary);
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 768px) {
+  .adminPage {
+    padding: layout.$spacing-03;
+  }
+
+  .sectionHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-03;
+
+    h3 {
+      font-size: 1.125rem;
+    }
+  }
+}
+
+.tileContainer {
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.singleLineDisplay {
+  white-space: nowrap;
+}
+
+.emptyStateHelperText {
+  @include type.type-style('helper-text-02');
+}
+
+// Expanded row styles for payment mode attributes
+.attributeContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  background-color: var(--cds-layer-01);
+  border-top: 1px solid var(--cds-border-subtle-01);
+}
+
+.attributeCard {
+  display: flex;
+  flex-direction: column;
+  padding: layout.$spacing-04;
+  background-color: var(--cds-layer-02);
+  border-radius: 4px;
+  border: 1px solid var(--cds-border-subtle-01);
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border-color: var(--cds-border-subtle-02);
+  }
+}
+
+.attributeLabel {
+  @include type.type-style('label-01');
+  color: var(--cds-text-secondary);
+  margin-bottom: layout.$spacing-02;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.attributeValue {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-primary);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.pagination {
+  border-top: 1px solid var(--cds-border-subtle-01);
+}
+
+@media (max-width: 768px) {
+  .attributeContainer {
+    grid-template-columns: 1fr;
+    padding: layout.$spacing-03;
+    gap: layout.$spacing-03;
+  }
+
+  .attributeCard {
+    padding: layout.$spacing-03;
+  }
+}

package/src/billing-management/billing-payment-modes/type/index.ts

@@ -0,0 +1,42 @@
+export interface PaymentMethod {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  retireReason: null;
+  auditInfo: AuditInfo;
+  attributeTypes: AttributeType[];
+  sortOrder: null;
+  resourceVersion: string;
+}
+export interface AttributeType {
+  uuid?: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  attributeOrder?: number;
+  format?: string;
+  foreignKey?: string | null;
+  regExp?: string | null;
+  required: boolean;
+  value?: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: null;
+  dateChanged: null;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}

package/src/billing-management/billing-payment-points/billing-payment-point-modal/billing-delete-payment-modes.modal.scss

@@ -0,0 +1,28 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+
+.modalHeaderLabel {
+  @include type.type-style('heading-compact-02');
+
+  & > div {
+    display: none;
+  }
+}
+.button_spinner {
+  padding: 0;
+  margin-right: layout.$spacing-03;
+}
+
+.loading_wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.contentContainer {
+  padding-left: layout.$spacing-05;
+}
+
+.contentValue {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-03;
+}