@digihmis/esm-patient-registration-app 1.0.0

package/src/search-bar/search-bar.scss

@@ -0,0 +1,427 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  border-bottom: 0.063rem solid $ui-03;
+  background-color: colors.$gray-10;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  width: 100%;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: 0 auto layout.$spacing-04 auto;
+  gap: layout.$spacing-04;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    gap: layout.$spacing-02;
+    grid-template-columns: 1fr;
+  }
+}
+
+.patientSearchTile {
+  min-height: auto;
+  padding-left: layout.$spacing-09;
+  padding-right: layout.$spacing-09;
+  margin-bottom: layout.$spacing-05;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding-left: layout.$spacing-05;
+    padding-right: layout.$spacing-05;
+    margin-bottom: layout.$spacing-04;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding-left: layout.$spacing-03;
+    padding-right: layout.$spacing-03;
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.clearButton {
+  text-align: center;
+  display: flex;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.searchForm {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-03;
+    margin-top: layout.$spacing-02;
+  }
+}
+
+.searchRow {
+  display: flex;
+  gap: layout.$spacing-06;
+  align-items: end;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-04;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-03;
+  }
+}
+
+.identifierNumberColumn {
+  flex: 1;
+  margin-bottom: 0;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 100%;
+  }
+}
+
+.searchInputContainer {
+  display: flex;
+  align-items: end;
+  gap: 0;
+
+  .formSearch {
+    flex: 1;
+    :global(.cds--search-input) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right: none;
+      background: #fff;
+      border-top: 1px solid colors.$gray-40;
+      border-left: 1px solid colors.$gray-40;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: column;
+    gap: layout.$spacing-02;
+
+    .formSearch {
+      width: 100%;
+      :global(.cds--search-input) {
+        border-radius: 4px;
+        border-right: 1px solid colors.$gray-40;
+      }
+    }
+  }
+}
+
+.registrationButton {
+  margin-left: 1rem;
+}
+
+.attachedSearchButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 layout.$spacing-04;
+  font-size: type.type-scale(2);
+  margin-left: -1px;
+
+  .loadingText {
+    margin-left: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  :global(.cds--inline-loading) {
+    min-height: auto;
+  }
+
+  :global(.cds--inline-loading__animation) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 100%;
+    margin-left: 0;
+    border-left: none;
+    border-radius: 4px;
+
+    .loadingText {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+.emptyStateContainer {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  width: 100%;
+  row-gap: layout.$spacing-02;
+  border: 1px solid colors.$cool-gray-30;
+
+  & form {
+    border: none;
+  }
+
+  svg {
+    width: 190px;
+    height: 100px;
+  }
+
+  .title {
+    @include type.type-style('heading-01');
+    color: colors.$cool-gray-70;
+  }
+
+  .subTitle {
+    color: colors.$cool-gray-70;
+    font-size: layout.$spacing-05;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    min-height: 250px;
+    row-gap: layout.$spacing-01;
+
+    svg {
+      width: 150px;
+      height: 70px;
+    }
+
+    .title {
+      @include type.type-style('heading-02');
+    }
+
+    .subTitle {
+      font-size: 0.875rem;
+      text-align: center;
+      padding: 0 layout.$spacing-02;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    min-height: 200px;
+    padding: layout.$spacing-04;
+
+    svg {
+      width: 120px;
+      height: 60px;
+    }
+
+    .title {
+      @include type.type-style('heading-03');
+      text-align: center;
+    }
+
+    .subTitle {
+      font-size: 0.75rem;
+      line-height: 1.2;
+    }
+  }
+}
+
+// NEW: Dropdown Container
+.dropdownContainer {
+  position: relative;
+  margin-top: layout.$spacing-03;
+  background: white;
+  border: 1px solid colors.$gray-30;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-height: 500px;
+  overflow: hidden;
+  animation: slideDown 0.2s ease-out;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    max-height: 400px;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdownSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdownHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04;
+  background: colors.$gray-10;
+  border-bottom: 1px solid colors.$gray-20;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+  }
+}
+
+.dropdownTitle {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100;
+  font-weight: 600;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+  }
+}
+
+.dropdownCount {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  background: colors.$gray-20;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+}
+
+.dropdownResults {
+  overflow-y: auto;
+  max-height: 440px;
+  padding: layout.$spacing-03;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: colors.$gray-10;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: colors.$gray-40;
+    border-radius: 4px;
+
+    &:hover {
+      background: colors.$gray-50;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    max-height: 340px;
+    padding: layout.$spacing-02;
+  }
+}
+
+.dropdownEmptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 250px;
+  padding: layout.$spacing-05;
+  row-gap: layout.$spacing-02;
+
+  svg {
+    width: 120px;
+    height: 80px;
+  }
+
+  .title {
+    @include type.type-style('heading-02');
+    color: colors.$cool-gray-70;
+  }
+
+  .subTitle {
+    color: colors.$cool-gray-70;
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    min-height: 200px;
+    padding: layout.$spacing-03;
+
+    svg {
+      width: 100px;
+      height: 60px;
+    }
+
+    .title {
+      font-size: 0.875rem;
+    }
+
+    .subTitle {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+.loadingContainer {
+  padding: layout.$spacing-04;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    gap: layout.$spacing-02;
+  }
+}
+
+.loadingMore {
+  display: flex;
+  justify-content: center;
+  padding: layout.$spacing-03;
+}
+
+.searchResultsContainer {
+  margin-top: 1rem;
+  border: 1px solid colors.$cool-gray-30;
+  padding: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+  }
+}
+
+.resultsCount {
+  @include type.type-style('label-01');
+  color: colors.$gray-100;
+  font-weight: bold;
+}
+
+.errorContainer {
+  margin-top: layout.$spacing-03;
+  padding: layout.$spacing-04;
+  background: colors.$red-10;
+  border: 1px solid colors.$red-30;
+  border-radius: 4px;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+  }
+}
+
+.errorTitle {
+  @include type.type-style('heading-compact-01');
+  color: colors.$red-70;
+  margin-bottom: layout.$spacing-02;
+}
+
+.errorMessage {
+  @include type.type-style('body-compact-01');
+  color: colors.$red-60;
+  font-size: 0.875rem;
+}

package/src/search-dashboard/search-dashboard.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PageHeader } from '../page-header/page-header.component';
+import SearchBar from '../search-bar/search-bar.component';
+import ActiveVisitsTable from '../active-visit-table/active-visit-table.component';
+
+const SearchDashboard: React.FC = () => {
+  return (
+    <>
+      <main className="omrs-main-content">
+        <PageHeader />
+        <SearchBar />
+      </main>
+    </>
+  );
+};
+
+export default SearchDashboard;

package/src/search-dashboard/search-dashboard.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.pageHeader {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+  background: colors.$white-0;
+  border-bottom: 1px solid colors.$gray-20;
+}

package/src/setup-tests.ts

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