@digihmis/esm-patient-registration-app 1.0.0

package/src/active-visit-table/active-visits.scss

@@ -0,0 +1,211 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: 0 layout.$spacing-05;
+}
+
+.activeVisitsContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 1rem auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.activeVisitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.activeVisitsTable {
+  width: 100%;
+
+  th,
+  td {
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  tbody tr[data-parent-row] {
+    // Don't show a bottom border on the last row so we don't end up with a double border from the activeVisitContainer
+    &:nth-last-of-type(2) > td {
+      border-bottom: none;
+    }
+  }
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: 1px solid $ui-03;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 layout.$spacing-05;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 48rem;
+  margin: layout.$spacing-05 auto;
+}
+
+.expandedActiveVisitRow {
+  td {
+    padding: 0 layout.$spacing-07;
+
+    > div {
+      max-height: max-content !important;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 layout.$spacing-05;
+  }
+
+  &:last-of-type th[colspan]:last-child {
+    border-bottom: none;
+  }
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: layout.$spacing-07;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-11;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .activeVisitsContainer {
+    .activeVisitsDetailHeaderContainer {
+      padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+      background-color: colors.$gray-10;
+    }
+
+    .desktopHeading,
+    .tabletHeading {
+      h4 {
+        text-align: right;
+      }
+    }
+
+    div[role='search'] {
+      & :first-child {
+        svg {
+          left: unset;
+          right: layout.$spacing-03;
+        }
+      }
+
+      & :last-child {
+        right: unset;
+        left: 0;
+      }
+    }
+
+    .tableContainer {
+      overflow-x: auto;
+      text-wrap: nowrap;
+
+      th > div {
+        text-align: right;
+      }
+
+      td {
+        text-align: right;
+
+        .serviceColor {
+          margin-right: 0;
+          margin-left: layout.$spacing-03;
+        }
+
+        button {
+          text-align: right;
+        }
+      }
+    }
+  }
+}

package/src/active-visit-table/empty-data-illustration.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};

package/src/checkin-form/base-visit-type.component.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useMemo, useCallback, type ChangeEvent } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useFormContext, Controller } from 'react-hook-form';
+import { Layer, RadioButton, RadioButtonGroup, Search, StructuredListSkeleton, Tile } from '@carbon/react';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useDebounce, useLayoutType, usePagination, useConfig, type VisitType } from '@openmrs/esm-framework';
+import styles from './base-visit-type.scss';
+import { type VisitFormData } from './visit-form.resource';
+import { RegistrationConfig } from '../config-schema';
+
+interface BaseVisitTypeProps {
+  visitTypes: Array<VisitType>;
+}
+
+// TODO: Replace with actual default visit type UUID from your OpenMRS instance
+const DEFAULT_VISIT_TYPE_UUID = '3371a4d4-f66f-4454-a86d-92c7b3da990c'; // Replace with actual UUID
+
+const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ visitTypes }) => {
+  const { t } = useTranslation();
+  const { control } = useFormContext<VisitFormData>();
+  const config = useConfig<RegistrationConfig>();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const filteredVisitTypes = useMemo(() => {
+    if (!config?.allowedVisitTypeUuids || config.allowedVisitTypeUuids.length === 0) {
+      return visitTypes;
+    }
+    return visitTypes.filter((visitType) => config.allowedVisitTypeUuids.includes(visitType.uuid));
+  }, [visitTypes, config?.allowedVisitTypeUuids]);
+
+  const searchResults = useMemo(() => {
+    if (!debouncedSearchTerm.trim()) {
+      return filteredVisitTypes;
+    }
+    const lowercasedTerm = debouncedSearchTerm.toLowerCase();
+    return filteredVisitTypes.filter((visitType) => visitType.display.toLowerCase().includes(lowercasedTerm));
+  }, [debouncedSearchTerm, filteredVisitTypes]);
+
+  const { results, currentPage, goTo } = usePagination(searchResults, 5);
+  const hasNoMatchingSearchResults = debouncedSearchTerm.trim() !== '' && searchResults.length === 0;
+
+  // Determine default value: use the specified default if it exists in filtered results,
+  // otherwise fall back to single result logic
+  const defaultValue = useMemo(() => {
+    const defaultExists = filteredVisitTypes.some((vt) => vt.uuid === DEFAULT_VISIT_TYPE_UUID);
+    if (defaultExists) {
+      return DEFAULT_VISIT_TYPE_UUID;
+    }
+    return results?.length === 1 ? results[0].uuid : null;
+  }, [filteredVisitTypes, results]);
+
+  return (
+    <div className={classNames(styles.visitTypeOverviewWrapper, isTablet ? styles.tablet : styles.desktop)}>
+      {filteredVisitTypes.length ? (
+        <>
+          <Controller
+            name="visitType"
+            control={control}
+            defaultValue={defaultValue}
+            render={({ field: { onChange, value } }) => (
+              <RadioButtonGroup
+                className={styles.radioButtonGroup}
+                name="visit-types"
+                onChange={onChange}
+                orientation="vertical"
+                valueSelected={value}>
+                {results.map(({ uuid, display, name }) => (
+                  <RadioButton
+                    className={styles.radioButton}
+                    id={`visit-type-${uuid}`}
+                    key={uuid}
+                    labelText={display}
+                    value={uuid}
+                  />
+                ))}
+              </RadioButtonGroup>
+            )}
+          />
+
+          {!hasNoMatchingSearchResults && (
+            <div className={styles.paginationContainer}>
+              <PatientChartPagination
+                currentItems={results.length}
+                onPageNumberChange={({ page }) => goTo(page)}
+                pageNumber={currentPage}
+                pageSize={5}
+                totalItems={filteredVisitTypes?.length}
+              />
+            </div>
+          )}
+        </>
+      ) : (
+        <StructuredListSkeleton className={styles.skeleton} />
+      )}
+    </div>
+  );
+};
+
+export default BaseVisitType;

package/src/checkin-form/base-visit-type.scss

@@ -0,0 +1,75 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tablet {
+  background-color: $ui-02;
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.visitTypeOverviewWrapper {
+  margin: layout.$spacing-03 0;
+  border: 0.0625rem solid $grey-2;
+
+  &:has(.skeleton) {
+    border-bottom: none !important;
+  }
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/checkin-form/checkin-form.scss

@@ -0,0 +1,167 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$spacing-05;
+
+  & section {
+    margin: layout.$spacing-05 0 layout.$spacing-03;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}
+
+.dateTimeSection {
+  display: flex;
+  margin: layout.$spacing-05 0;
+  align-items: center;
+}
+
+.radioButton {
+  margin: layout.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid colors.$gray-20;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  height: 100%;
+}
+
+.buttonSet {
+  margin-top: auto;
+  justify-self: end;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .dateTimeSection {
+    flex-direction: column;
+  }
+}
+
+.inlineNotification {
+  width: 100%;
+  max-width: unset;
+  padding: '0';
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+// :global(.omrs-breakpoint-lt-desktop) {
+//   .container {
+//     & section {
+//       display: flex;
+//       gap: layout.$spacing-10;
+
+//       .sectionTitle {
+//         flex-basis: 30%;
+//         min-width: 8rem;
+//         text-align: left;
+//       }
+
+//       .sectionField {
+//         flex-basis: 70%;
+//       }
+//     }
+//   }
+
+//   .form {
+//     height: 100%;
+//   }
+// }
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
+  }
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.timePicker {
+  display: flex;
+  align-items: baseline;
+
+  :global(.cds--form-requirement) {
+    max-width: layout.$spacing-12;
+    max-height: 0 !important;
+  }
+}
+
+.timePickerSelectError {
+  outline: 2px solid colors.$red-50;
+  outline-offset: -2px;
+}
+
+.timerPickerError {
+  color: colors.$red-60;
+  display: flex;
+  align-self: flex-end;
+  max-width: layout.$spacing-11;
+  font-size: layout.$spacing-04;
+  margin: 0;
+  letter-spacing: 0.02rem;
+  line-height: 1.33333;
+}
+
+.timePickerContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePicker {
+  :global(.cds--date-picker-input__wrapper) {
+    inline-size: layout.$spacing-13;
+  }
+}